Initial commit: Crypto trader application

This commit is contained in:
2025-12-25 20:20:40 -05:00
commit 07a04c1bb8
47895 changed files with 2042266 additions and 0 deletions
+121
View File
@@ -0,0 +1,121 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from '..';
import { TransitionProps } from '../transitions/transition';
import { AccordionClasses } from './accordionClasses';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
import { ExtendPaperTypeMap } from '../Paper/Paper';
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
export interface AccordionSlots {
/**
* The component that renders the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Collapse
*/
transition?: React.JSXElementConstructor<
TransitionProps & { children?: React.ReactElement<any, any> }
>;
}
export interface AccordionTransitionSlotPropsOverrides {}
export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
AccordionSlots,
{
transition: SlotProps<
React.ElementType<TransitionProps>,
AccordionTransitionSlotPropsOverrides,
AccordionOwnerState
>;
}
>;
export type AccordionTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
> = ExtendPaperTypeMap<
{
props: AdditionalProps & {
/**
* The content of the component.
*/
children: NonNullable<React.ReactNode>;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionClasses>;
/**
* If `true`, expands the accordion by default.
* @default false
*/
defaultExpanded?: boolean;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, it removes the margin between two expanded accordion items and the increase of height.
* @default false
*/
disableGutters?: boolean;
/**
* If `true`, expands the accordion, otherwise collapse it.
* Setting this prop enables control over the accordion.
*/
expanded?: boolean;
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {boolean} expanded The `expanded` state of the accordion.
*/
onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
TransitionComponent?: React.JSXElementConstructor<
TransitionProps & { children?: React.ReactElement<any, any> }
>;
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
TransitionProps?: TransitionProps;
} & AccordionSlotsAndSlotProps;
defaultComponent: RootComponent;
},
'onChange' | 'classes'
>;
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [Accordion API](https://mui.com/material-ui/api/accordion/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
declare const Accordion: OverridableComponent<AccordionTypeMap>;
export type AccordionProps<
RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface AccordionOwnerState extends AccordionProps {}
export default Accordion;
+296
View File
@@ -0,0 +1,296 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import chainPropTypes from '@mui/utils/chainPropTypes';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import Collapse from '../Collapse';
import Paper from '../Paper';
import AccordionContext from './AccordionContext';
import useControlled from '../utils/useControlled';
import useSlot from '../utils/useSlot';
import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
square,
expanded,
disabled,
disableGutters
} = ownerState;
const slots = {
root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
region: ['region']
};
return composeClasses(slots, getAccordionUtilityClass, classes);
};
const AccordionRoot = styled(Paper, {
name: 'MuiAccordion',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [{
[`& .${accordionClasses.region}`]: styles.region
}, styles.root, !ownerState.square && styles.rounded, !ownerState.disableGutters && styles.gutters];
}
})(({
theme
}) => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
position: 'relative',
transition: theme.transitions.create(['margin'], transition),
overflowAnchor: 'none',
// Keep the same scrolling position
'&::before': {
position: 'absolute',
left: 0,
top: -1,
right: 0,
height: 1,
content: '""',
opacity: 1,
backgroundColor: (theme.vars || theme).palette.divider,
transition: theme.transitions.create(['opacity', 'background-color'], transition)
},
'&:first-of-type': {
'&::before': {
display: 'none'
}
},
[`&.${accordionClasses.expanded}`]: {
'&::before': {
opacity: 0
},
'&:first-of-type': {
marginTop: 0
},
'&:last-of-type': {
marginBottom: 0
},
'& + &': {
'&::before': {
display: 'none'
}
}
},
[`&.${accordionClasses.disabled}`]: {
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
}
};
}, ({
theme
}) => ({
variants: [{
props: props => !props.square,
style: {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
}, {
props: props => !props.disableGutters,
style: {
[`&.${accordionClasses.expanded}`]: {
margin: '16px 0'
}
}
}]
}));
const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAccordion'
});
const {
children: childrenProp,
className,
defaultExpanded = false,
disabled = false,
disableGutters = false,
expanded: expandedProp,
onChange,
square = false,
slots = {},
slotProps = {},
TransitionComponent: TransitionComponentProp,
TransitionProps: TransitionPropsProp
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const [expanded, setExpandedState] = useControlled({
controlled: expandedProp,
default: defaultExpanded,
name: 'Accordion',
state: 'expanded'
});
const handleChange = React.useCallback(event => {
setExpandedState(!expanded);
if (onChange) {
onChange(event, !expanded);
}
}, [expanded, onChange, setExpandedState]);
const [summary, ...children] = React.Children.toArray(childrenProp);
const contextValue = React.useMemo(() => ({
expanded,
disabled,
disableGutters,
toggle: handleChange
}), [expanded, disabled, disableGutters, handleChange]);
const ownerState = _extends({}, props, {
square,
disabled,
disableGutters,
expanded
});
const classes = useUtilityClasses(ownerState);
const backwardCompatibleSlots = _extends({
transition: TransitionComponentProp
}, slots);
const backwardCompatibleSlotProps = _extends({
transition: TransitionPropsProp
}, slotProps);
const [TransitionSlot, transitionProps] = useSlot('transition', {
elementType: Collapse,
externalForwardedProps: {
slots: backwardCompatibleSlots,
slotProps: backwardCompatibleSlotProps
},
ownerState
});
return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
className: clsx(classes.root, className),
ref: ref,
ownerState: ownerState,
square: square
}, other, {
children: [/*#__PURE__*/_jsx(AccordionContext.Provider, {
value: contextValue,
children: summary
}), /*#__PURE__*/_jsx(TransitionSlot, _extends({
in: expanded,
timeout: "auto"
}, transitionProps, {
children: /*#__PURE__*/_jsx("div", {
"aria-labelledby": summary.props.id,
id: summary.props['aria-controls'],
role: "region",
className: classes.region,
children: children
})
}))]
}));
});
process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: chainPropTypes(PropTypes.node.isRequired, props => {
const summary = React.Children.toArray(props.children)[0];
if (isFragment(summary)) {
return new Error("MUI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
}
if (! /*#__PURE__*/React.isValidElement(summary)) {
return new Error('MUI: Expected the first child of Accordion to be a valid element.');
}
return null;
}),
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, expands the accordion by default.
* @default false
*/
defaultExpanded: PropTypes.bool,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: PropTypes.bool,
/**
* If `true`, it removes the margin between two expanded accordion items and the increase of height.
* @default false
*/
disableGutters: PropTypes.bool,
/**
* If `true`, expands the accordion, otherwise collapse it.
* Setting this prop enables control over the accordion.
*/
expanded: PropTypes.bool,
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {boolean} expanded The `expanded` state of the accordion.
*/
onChange: PropTypes.func,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: PropTypes.shape({
transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: PropTypes.shape({
transition: PropTypes.elementType
}),
/**
* If `true`, rounded corners are disabled.
* @default false
*/
square: PropTypes.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
TransitionComponent: PropTypes.elementType,
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
TransitionProps: PropTypes.object
} : void 0;
export default Accordion;
+13
View File
@@ -0,0 +1,13 @@
'use client';
import * as React from 'react';
/**
* @ignore - internal component.
* @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
*/
const AccordionContext = /*#__PURE__*/React.createContext({});
if (process.env.NODE_ENV !== 'production') {
AccordionContext.displayName = 'AccordionContext';
}
export default AccordionContext;
+18
View File
@@ -0,0 +1,18 @@
export interface AccordionClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element unless `square={true}`. */
rounded: string;
/** State class applied to the root element if `expanded={true}`. */
expanded: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** Styles applied to the root element unless `disableGutters={true}`. */
gutters: string;
/** Styles applied to the region element, the container of the children. */
region: string;
}
export type AccordionClassKey = keyof AccordionClasses;
export declare function getAccordionUtilityClass(slot: string): string;
declare const accordionClasses: AccordionClasses;
export default accordionClasses;
+7
View File
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAccordionUtilityClass(slot) {
return generateUtilityClass('MuiAccordion', slot);
}
const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
export default accordionClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Accordion';
export * from './Accordion';
export { default as accordionClasses } from './accordionClasses';
export * from './accordionClasses';
+3
View File
@@ -0,0 +1,3 @@
export { default } from './Accordion';
export { default as accordionClasses } from './accordionClasses';
export * from './accordionClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/Accordion/index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,36 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from '..';
import { AccordionActionsClasses } from './accordionActionsClasses';
export interface AccordionActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionActionsClasses>;
/**
* If `true`, the actions do not have additional margin.
* @default false
*/
disableSpacing?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [AccordionActions API](https://mui.com/material-ui/api/accordion-actions/)
*/
export default function AccordionActions(props: AccordionActionsProps): React.JSX.Element;
@@ -0,0 +1,94 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className", "disableSpacing"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
disableSpacing
} = ownerState;
const slots = {
root: ['root', !disableSpacing && 'spacing']
};
return composeClasses(slots, getAccordionActionsUtilityClass, classes);
};
const AccordionActionsRoot = styled('div', {
name: 'MuiAccordionActions',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, !ownerState.disableSpacing && styles.spacing];
}
})({
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end',
variants: [{
props: props => !props.disableSpacing,
style: {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}
}]
});
const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAccordionActions'
});
const {
className,
disableSpacing = false
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = _extends({}, props, {
disableSpacing
});
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsx(AccordionActionsRoot, _extends({
className: clsx(classes.root, className),
ref: ref,
ownerState: ownerState
}, other));
});
process.env.NODE_ENV !== "production" ? AccordionActions.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the actions do not have additional margin.
* @default false
*/
disableSpacing: PropTypes.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default AccordionActions;
@@ -0,0 +1,10 @@
export interface AccordionActionsClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element unless `disableSpacing={true}`. */
spacing: string;
}
export type AccordionActionsClassKey = keyof AccordionActionsClasses;
export declare function getAccordionActionsUtilityClass(slot: string): string;
declare const accordionActionsClasses: AccordionActionsClasses;
export default accordionActionsClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAccordionActionsUtilityClass(slot) {
return generateUtilityClass('MuiAccordionActions', slot);
}
const accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
export default accordionActionsClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './AccordionActions';
export * from './AccordionActions';
export { default as accordionActionsClasses } from './accordionActionsClasses';
export * from './accordionActionsClasses';
+3
View File
@@ -0,0 +1,3 @@
export { default } from './AccordionActions';
export { default as accordionActionsClasses } from './accordionActionsClasses';
export * from './accordionActionsClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/AccordionActions/index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,31 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from '..';
import { AccordionDetailsClasses } from './accordionDetailsClasses';
export interface AccordionDetailsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionDetailsClasses>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [AccordionDetails API](https://mui.com/material-ui/api/accordion-details/)
*/
export default function AccordionDetails(props: AccordionDetailsProps): React.JSX.Element;
@@ -0,0 +1,71 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['root']
};
return composeClasses(slots, getAccordionDetailsUtilityClass, classes);
};
const AccordionDetailsRoot = styled('div', {
name: 'MuiAccordionDetails',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({
theme
}) => ({
padding: theme.spacing(1, 2, 2)
}));
const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAccordionDetails'
});
const {
className
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = props;
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsx(AccordionDetailsRoot, _extends({
className: clsx(classes.root, className),
ref: ref,
ownerState: ownerState
}, other));
});
process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default AccordionDetails;
@@ -0,0 +1,8 @@
export interface AccordionDetailsClasses {
/** Styles applied to the root element. */
root: string;
}
export type AccordionDetailsClassKey = keyof AccordionDetailsClasses;
export declare function getAccordionDetailsUtilityClass(slot: string): string;
declare const accordionDetailsClasses: AccordionDetailsClasses;
export default accordionDetailsClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAccordionDetailsUtilityClass(slot) {
return generateUtilityClass('MuiAccordionDetails', slot);
}
const accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);
export default accordionDetailsClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './AccordionDetails';
export * from './AccordionDetails';
export { default as accordionDetailsClasses } from './accordionDetailsClasses';
export * from './accordionDetailsClasses';
+3
View File
@@ -0,0 +1,3 @@
export { default } from './AccordionDetails';
export { default as accordionDetailsClasses } from './accordionDetailsClasses';
export * from './accordionDetailsClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/AccordionDetails/index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,55 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
import { OverrideProps } from '../OverridableComponent';
import { Theme } from '..';
import { AccordionSummaryClasses } from './accordionSummaryClasses';
export interface AccordionSummaryOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionSummaryClasses>;
/**
* The icon to display as the expand indicator.
*/
expandIcon?: React.ReactNode;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export type AccordionSummaryTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
> = ExtendButtonBaseTypeMap<{
props: AdditionalProps & AccordionSummaryOwnProps;
defaultComponent: RootComponent;
}>;
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [AccordionSummary API](https://mui.com/material-ui/api/accordion-summary/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
export type AccordionSummaryProps<
RootComponent extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<AccordionSummaryTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default AccordionSummary;
@@ -0,0 +1,200 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import ButtonBase from '../ButtonBase';
import AccordionContext from '../Accordion/AccordionContext';
import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
expanded,
disabled,
disableGutters
} = ownerState;
const slots = {
root: ['root', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
focusVisible: ['focusVisible'],
content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'],
expandIconWrapper: ['expandIconWrapper', expanded && 'expanded']
};
return composeClasses(slots, getAccordionSummaryUtilityClass, classes);
};
const AccordionSummaryRoot = styled(ButtonBase, {
name: 'MuiAccordionSummary',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({
theme
}) => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
display: 'flex',
minHeight: 48,
padding: theme.spacing(0, 2),
transition: theme.transitions.create(['min-height', 'background-color'], transition),
[`&.${accordionSummaryClasses.focusVisible}`]: {
backgroundColor: (theme.vars || theme).palette.action.focus
},
[`&.${accordionSummaryClasses.disabled}`]: {
opacity: (theme.vars || theme).palette.action.disabledOpacity
},
[`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
cursor: 'pointer'
},
variants: [{
props: props => !props.disableGutters,
style: {
[`&.${accordionSummaryClasses.expanded}`]: {
minHeight: 64
}
}
}]
};
});
const AccordionSummaryContent = styled('div', {
name: 'MuiAccordionSummary',
slot: 'Content',
overridesResolver: (props, styles) => styles.content
})(({
theme
}) => ({
display: 'flex',
flexGrow: 1,
margin: '12px 0',
variants: [{
props: props => !props.disableGutters,
style: {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${accordionSummaryClasses.expanded}`]: {
margin: '20px 0'
}
}
}]
}));
const AccordionSummaryExpandIconWrapper = styled('div', {
name: 'MuiAccordionSummary',
slot: 'ExpandIconWrapper',
overridesResolver: (props, styles) => styles.expandIconWrapper
})(({
theme
}) => ({
display: 'flex',
color: (theme.vars || theme).palette.action.active,
transform: 'rotate(0deg)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest
}),
[`&.${accordionSummaryClasses.expanded}`]: {
transform: 'rotate(180deg)'
}
}));
const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAccordionSummary'
});
const {
children,
className,
expandIcon,
focusVisibleClassName,
onClick
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const {
disabled = false,
disableGutters,
expanded,
toggle
} = React.useContext(AccordionContext);
const handleChange = event => {
if (toggle) {
toggle(event);
}
if (onClick) {
onClick(event);
}
};
const ownerState = _extends({}, props, {
expanded,
disabled,
disableGutters
});
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsxs(AccordionSummaryRoot, _extends({
focusRipple: false,
disableRipple: true,
disabled: disabled,
component: "div",
"aria-expanded": expanded,
className: clsx(classes.root, className),
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
onClick: handleChange,
ref: ref,
ownerState: ownerState
}, other, {
children: [/*#__PURE__*/_jsx(AccordionSummaryContent, {
className: classes.content,
ownerState: ownerState,
children: children
}), expandIcon && /*#__PURE__*/_jsx(AccordionSummaryExpandIconWrapper, {
className: classes.expandIconWrapper,
ownerState: ownerState,
children: expandIcon
})]
}));
});
process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The icon to display as the expand indicator.
*/
expandIcon: PropTypes.node,
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName: PropTypes.string,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default AccordionSummary;
@@ -0,0 +1,25 @@
export interface AccordionSummaryClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
expanded: string;
/** State class applied to the ButtonBase root element if the button is keyboard focused. */
focusVisible: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** Styles applied to the root element unless `disableGutters={true}`. */
gutters: string;
/**
* Styles applied to the children wrapper element unless `disableGutters={true}`.
* @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
contentGutters: string;
/** Styles applied to the children wrapper element. */
content: string;
/** Styles applied to the `expandIcon`'s wrapper element. */
expandIconWrapper: string;
}
export type AccordionSummaryClassKey = keyof AccordionSummaryClasses;
export declare function getAccordionSummaryUtilityClass(slot: string): string;
declare const accordionSummaryClasses: AccordionSummaryClasses;
export default accordionSummaryClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAccordionSummaryUtilityClass(slot) {
return generateUtilityClass('MuiAccordionSummary', slot);
}
const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
export default accordionSummaryClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './AccordionSummary';
export * from './AccordionSummary';
export { default as accordionSummaryClasses } from './accordionSummaryClasses';
export * from './accordionSummaryClasses';
+3
View File
@@ -0,0 +1,3 @@
export { default } from './AccordionSummary';
export { default as accordionSummaryClasses } from './accordionSummaryClasses';
export * from './accordionSummaryClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/AccordionSummary/index.js",
"types": "./index.d.ts"
}
+145
View File
@@ -0,0 +1,145 @@
import * as React from 'react';
import { OverridableStringUnion } from '@mui/types';
import { SxProps } from '@mui/system';
import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from '..';
import { PaperProps } from '../Paper';
import { AlertClasses } from './alertClasses';
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
export type AlertColor = 'success' | 'info' | 'warning' | 'error';
export interface AlertPropsVariantOverrides {}
export interface AlertPropsColorOverrides {}
export interface AlertCloseButtonSlotPropsOverrides {}
export interface AlertCloseIconSlotPropsOverrides {}
export interface AlertSlots {
/**
* The component that renders the close button.
* @default IconButton
*/
closeButton?: React.ElementType;
/**
* The component that renders the close icon.
* @default svg
*/
closeIcon?: React.ElementType;
}
export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
AlertSlots,
{
closeButton: SlotProps<
React.ElementType<IconButtonProps>,
AlertCloseButtonSlotPropsOverrides,
AlertOwnerState
>;
closeIcon: SlotProps<
React.ElementType<SvgIconProps>,
AlertCloseIconSlotPropsOverrides,
AlertOwnerState
>;
}
>;
export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertSlotsAndSlotProps {
/**
* The action to display. It renders after the message, at the end of the alert.
*/
action?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AlertClasses>;
/**
* Override the default label for the *close popup* icon button.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Close'
*/
closeText?: string;
/**
* The color of the component. Unless provided, the value is taken from the `severity` prop.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
*/
color?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
/**
* The components used for each slot inside.
*
* @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
components?: {
CloseButton?: React.ElementType;
CloseIcon?: React.ElementType;
};
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
componentsProps?: {
closeButton?: IconButtonProps;
closeIcon?: SvgIconProps;
};
/**
* The severity of the alert. This defines the color and icon used.
* @default 'success'
*/
severity?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
/**
* Override the icon displayed before the children.
* Unless provided, the icon is mapped to the value of the `severity` prop.
* Set to `false` to remove the `icon`.
*/
icon?: React.ReactNode;
/**
* The ARIA role attribute of the element.
* @default 'alert'
*/
role?: string;
/**
* The component maps the `severity` prop to a range of different icons,
* for instance success to `<SuccessOutlined>`.
* If you wish to change this mapping, you can provide your own.
* Alternatively, you can use the `icon` prop to override the icon displayed.
*/
iconMapping?: Partial<
Record<OverridableStringUnion<AlertColor, AlertPropsColorOverrides>, React.ReactNode>
>;
/**
* Callback fired when the component requests to be closed.
* When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
* @param {React.SyntheticEvent} event The event source of the callback.
*/
onClose?: (event: React.SyntheticEvent) => void;
/**
* The variant to use.
* @default 'standard'
*/
variant?: OverridableStringUnion<'standard' | 'filled' | 'outlined', AlertPropsVariantOverrides>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface AlertOwnerState extends AlertProps {}
/**
*
* Demos:
*
* - [Alert](https://mui.com/material-ui/react-alert/)
*
* API:
*
* - [Alert API](https://mui.com/material-ui/api/alert/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
export default function Alert(props: AlertProps): React.JSX.Element;
+348
View File
@@ -0,0 +1,348 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { darken, lighten } from '@mui/system/colorManipulator';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import useSlot from '../utils/useSlot';
import capitalize from '../utils/capitalize';
import Paper from '../Paper';
import alertClasses, { getAlertUtilityClass } from './alertClasses';
import IconButton from '../IconButton';
import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';
import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';
import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
import CloseIcon from '../internal/svg-icons/Close';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
variant,
color,
severity,
classes
} = ownerState;
const slots = {
root: ['root', `color${capitalize(color || severity)}`, `${variant}${capitalize(color || severity)}`, `${variant}`],
icon: ['icon'],
message: ['message'],
action: ['action']
};
return composeClasses(slots, getAlertUtilityClass, classes);
};
const AlertRoot = styled(Paper, {
name: 'MuiAlert',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
}
})(({
theme
}) => {
const getColor = theme.palette.mode === 'light' ? darken : lighten;
const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
return _extends({}, theme.typography.body2, {
backgroundColor: 'transparent',
display: 'flex',
padding: '6px 16px',
variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
props: {
colorSeverity: color,
variant: 'standard'
},
style: {
color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
[`& .${alertClasses.icon}`]: theme.vars ? {
color: theme.vars.palette.Alert[`${color}IconColor`]
} : {
color: theme.palette[color].main
}
}
})), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
props: {
colorSeverity: color,
variant: 'outlined'
},
style: {
color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
border: `1px solid ${(theme.vars || theme).palette[color].light}`,
[`& .${alertClasses.icon}`]: theme.vars ? {
color: theme.vars.palette.Alert[`${color}IconColor`]
} : {
color: theme.palette[color].main
}
}
})), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark).map(([color]) => ({
props: {
colorSeverity: color,
variant: 'filled'
},
style: _extends({
fontWeight: theme.typography.fontWeightMedium
}, theme.vars ? {
color: theme.vars.palette.Alert[`${color}FilledColor`],
backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
} : {
backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
color: theme.palette.getContrastText(theme.palette[color].main)
})
}))]
});
});
const AlertIcon = styled('div', {
name: 'MuiAlert',
slot: 'Icon',
overridesResolver: (props, styles) => styles.icon
})({
marginRight: 12,
padding: '7px 0',
display: 'flex',
fontSize: 22,
opacity: 0.9
});
const AlertMessage = styled('div', {
name: 'MuiAlert',
slot: 'Message',
overridesResolver: (props, styles) => styles.message
})({
padding: '8px 0',
minWidth: 0,
overflow: 'auto'
});
const AlertAction = styled('div', {
name: 'MuiAlert',
slot: 'Action',
overridesResolver: (props, styles) => styles.action
})({
display: 'flex',
alignItems: 'flex-start',
padding: '4px 0 0 16px',
marginLeft: 'auto',
marginRight: -8
});
const defaultIconMapping = {
success: /*#__PURE__*/_jsx(SuccessOutlinedIcon, {
fontSize: "inherit"
}),
warning: /*#__PURE__*/_jsx(ReportProblemOutlinedIcon, {
fontSize: "inherit"
}),
error: /*#__PURE__*/_jsx(ErrorOutlineIcon, {
fontSize: "inherit"
}),
info: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
fontSize: "inherit"
})
};
const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAlert'
});
const {
action,
children,
className,
closeText = 'Close',
color,
components = {},
componentsProps = {},
icon,
iconMapping = defaultIconMapping,
onClose,
role = 'alert',
severity = 'success',
slotProps = {},
slots = {},
variant = 'standard'
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = _extends({}, props, {
color,
severity,
variant,
colorSeverity: color || severity
});
const classes = useUtilityClasses(ownerState);
const externalForwardedProps = {
slots: _extends({
closeButton: components.CloseButton,
closeIcon: components.CloseIcon
}, slots),
slotProps: _extends({}, componentsProps, slotProps)
};
const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
elementType: IconButton,
externalForwardedProps,
ownerState
});
const [CloseIconSlot, closeIconProps] = useSlot('closeIcon', {
elementType: CloseIcon,
externalForwardedProps,
ownerState
});
return /*#__PURE__*/_jsxs(AlertRoot, _extends({
role: role,
elevation: 0,
ownerState: ownerState,
className: clsx(classes.root, className),
ref: ref
}, other, {
children: [icon !== false ? /*#__PURE__*/_jsx(AlertIcon, {
ownerState: ownerState,
className: classes.icon,
children: icon || iconMapping[severity] || defaultIconMapping[severity]
}) : null, /*#__PURE__*/_jsx(AlertMessage, {
ownerState: ownerState,
className: classes.message,
children: children
}), action != null ? /*#__PURE__*/_jsx(AlertAction, {
ownerState: ownerState,
className: classes.action,
children: action
}) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
ownerState: ownerState,
className: classes.action,
children: /*#__PURE__*/_jsx(CloseButtonSlot, _extends({
size: "small",
"aria-label": closeText,
title: closeText,
color: "inherit",
onClick: onClose
}, closeButtonProps, {
children: /*#__PURE__*/_jsx(CloseIconSlot, _extends({
fontSize: "small"
}, closeIconProps))
}))
}) : null]
}));
});
process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The action to display. It renders after the message, at the end of the alert.
*/
action: PropTypes.node,
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Override the default label for the *close popup* icon button.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Close'
*/
closeText: PropTypes.string,
/**
* The color of the component. Unless provided, the value is taken from the `severity` prop.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
*/
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
/**
* The components used for each slot inside.
*
* @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
components: PropTypes.shape({
CloseButton: PropTypes.elementType,
CloseIcon: PropTypes.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
componentsProps: PropTypes.shape({
closeButton: PropTypes.object,
closeIcon: PropTypes.object
}),
/**
* Override the icon displayed before the children.
* Unless provided, the icon is mapped to the value of the `severity` prop.
* Set to `false` to remove the `icon`.
*/
icon: PropTypes.node,
/**
* The component maps the `severity` prop to a range of different icons,
* for instance success to `<SuccessOutlined>`.
* If you wish to change this mapping, you can provide your own.
* Alternatively, you can use the `icon` prop to override the icon displayed.
*/
iconMapping: PropTypes.shape({
error: PropTypes.node,
info: PropTypes.node,
success: PropTypes.node,
warning: PropTypes.node
}),
/**
* Callback fired when the component requests to be closed.
* When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
* @param {React.SyntheticEvent} event The event source of the callback.
*/
onClose: PropTypes.func,
/**
* The ARIA role attribute of the element.
* @default 'alert'
*/
role: PropTypes.string,
/**
* The severity of the alert. This defines the color and icon used.
* @default 'success'
*/
severity: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: PropTypes.shape({
closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: PropTypes.shape({
closeButton: PropTypes.elementType,
closeIcon: PropTypes.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The variant to use.
* @default 'standard'
*/
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
} : void 0;
export default Alert;
+100
View File
@@ -0,0 +1,100 @@
export interface AlertClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `variant="filled"`. */
filled: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
/** Styles applied to the root element if `variant="standard"`. */
standard: string;
/** Styles applied to the root element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `variant="standard"` and `color="success"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
standardSuccess: string;
/** Styles applied to the root element if `variant="standard"` and `color="info"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
standardInfo: string;
/** Styles applied to the root element if `variant="standard"` and `color="warning"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
standardWarning: string;
/** Styles applied to the root element if `variant="standard"` and `color="error"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
standardError: string;
/** Styles applied to the root element if `variant="outlined"` and `color="success"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
outlinedSuccess: string;
/** Styles applied to the root element if `variant="outlined"` and `color="info"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
outlinedInfo: string;
/** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
outlinedWarning: string;
/** Styles applied to the root element if `variant="outlined"` and `color="error"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
outlinedError: string;
/** Styles applied to the root element if `variant="filled"` and `color="success"`.
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
filledSuccess: string;
/** Styles applied to the root element if `variant="filled"` and `color="info"`.
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
filledInfo: string;
/** Styles applied to the root element if `variant="filled"` and `color="warning"`
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
filledWarning: string;
/** Styles applied to the root element if `variant="filled"` and `color="error"`.
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
* [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
filledError: string;
/** Styles applied to the icon wrapper element. */
icon: string;
/** Styles applied to the message wrapper element. */
message: string;
/** Styles applied to the action wrapper element if `action` is provided. */
action: string;
}
export type AlertClassKey = keyof AlertClasses;
export declare function getAlertUtilityClass(slot: string): string;
declare const alertClasses: AlertClasses;
export default alertClasses;
+7
View File
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAlertUtilityClass(slot) {
return generateUtilityClass('MuiAlert', slot);
}
const alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'colorSuccess', 'colorInfo', 'colorWarning', 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
export default alertClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Alert';
export * from './Alert';
export { default as alertClasses } from './alertClasses';
export * from './alertClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './Alert';
export { default as alertClasses } from './alertClasses';
export * from './alertClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/Alert/index.js",
"types": "./index.d.ts"
}
+32
View File
@@ -0,0 +1,32 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme, TypographyProps } from '..';
import { AlertTitleClasses } from './alertTitleClasses';
export interface AlertTitleProps extends TypographyProps<'div'> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AlertTitleClasses>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Alert](https://mui.com/material-ui/react-alert/)
*
* API:
*
* - [AlertTitle API](https://mui.com/material-ui/api/alert-title/)
* - inherits [Typography API](https://mui.com/material-ui/api/typography/)
*/
export default function AlertTitle(props: AlertTitleProps): React.JSX.Element;
+77
View File
@@ -0,0 +1,77 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import Typography from '../Typography';
import { getAlertTitleUtilityClass } from './alertTitleClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['root']
};
return composeClasses(slots, getAlertTitleUtilityClass, classes);
};
const AlertTitleRoot = styled(Typography, {
name: 'MuiAlertTitle',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({
theme
}) => {
return {
fontWeight: theme.typography.fontWeightMedium,
marginTop: -2
};
});
const AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAlertTitle'
});
const {
className
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = props;
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsx(AlertTitleRoot, _extends({
gutterBottom: true,
component: "div",
ownerState: ownerState,
ref: ref,
className: clsx(classes.root, className)
}, other));
});
process.env.NODE_ENV !== "production" ? AlertTitle.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default AlertTitle;
@@ -0,0 +1,8 @@
export interface AlertTitleClasses {
/** Styles applied to the root element. */
root: string;
}
export type AlertTitleClassKey = keyof AlertTitleClasses;
export declare function getAlertTitleUtilityClass(slot: string): string;
declare const alertTitleClasses: AlertTitleClasses;
export default alertTitleClasses;
+7
View File
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAlertTitleUtilityClass(slot) {
return generateUtilityClass('MuiAlertTitle', slot);
}
const alertTitleClasses = generateUtilityClasses('MuiAlertTitle', ['root']);
export default alertTitleClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './AlertTitle';
export * from './AlertTitle';
export { default as alertTitleClasses } from './alertTitleClasses';
export * from './alertTitleClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './AlertTitle';
export { default as alertTitleClasses } from './alertTitleClasses';
export * from './alertTitleClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/AlertTitle/index.js",
"types": "./index.d.ts"
}
+76
View File
@@ -0,0 +1,76 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
import { PropTypes, Theme } from '..';
import { AppBarClasses } from './appBarClasses';
import { ExtendPaperTypeMap } from '../Paper/Paper';
export interface AppBarPropsColorOverrides {}
export interface AppBarOwnProps {
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AppBarClasses>;
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color?: OverridableStringUnion<
PropTypes.Color | 'transparent' | 'error' | 'info' | 'success' | 'warning',
AppBarPropsColorOverrides
>;
/**
* If true, the `color` prop is applied in dark mode.
* @default false
*/
enableColorOnDark?: boolean;
/**
* The positioning type. The behavior of the different options is described
* [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
* Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
* @default 'fixed'
*/
position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export type AppBarTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'header',
> = ExtendPaperTypeMap<
{
props: AdditionalProps & AppBarOwnProps;
defaultComponent: RootComponent;
},
'position' | 'color' | 'classes'
>;
/**
*
* Demos:
*
* - [App Bar](https://mui.com/material-ui/react-app-bar/)
*
* API:
*
* - [AppBar API](https://mui.com/material-ui/api/app-bar/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
declare const AppBar: OverridableComponent<AppBarTypeMap>;
export type AppBarProps<
RootComponent extends React.ElementType = AppBarTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<AppBarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default AppBar;
+179
View File
@@ -0,0 +1,179 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["className", "color", "enableColorOnDark", "position"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import capitalize from '../utils/capitalize';
import Paper from '../Paper';
import { getAppBarUtilityClass } from './appBarClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
color,
position,
classes
} = ownerState;
const slots = {
root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
};
return composeClasses(slots, getAppBarUtilityClass, classes);
};
// var2 is the fallback.
// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
const joinVars = (var1, var2) => var1 ? `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})` : var2;
const AppBarRoot = styled(Paper, {
name: 'MuiAppBar',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
}
})(({
theme,
ownerState
}) => {
const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
return _extends({
display: 'flex',
flexDirection: 'column',
width: '100%',
boxSizing: 'border-box',
// Prevent padding issue with the Modal and fixed positioned AppBar.
flexShrink: 0
}, ownerState.position === 'fixed' && {
position: 'fixed',
zIndex: (theme.vars || theme).zIndex.appBar,
top: 0,
left: 'auto',
right: 0,
'@media print': {
// Prevent the app bar to be visible on each printed page.
position: 'absolute'
}
}, ownerState.position === 'absolute' && {
position: 'absolute',
zIndex: (theme.vars || theme).zIndex.appBar,
top: 0,
left: 'auto',
right: 0
}, ownerState.position === 'sticky' && {
// ⚠️ sticky is not supported by IE11.
position: 'sticky',
zIndex: (theme.vars || theme).zIndex.appBar,
top: 0,
left: 'auto',
right: 0
}, ownerState.position === 'static' && {
position: 'static'
}, ownerState.position === 'relative' && {
position: 'relative'
}, !theme.vars && _extends({}, ownerState.color === 'default' && {
backgroundColor: backgroundColorDefault,
color: theme.palette.getContrastText(backgroundColorDefault)
}, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
backgroundColor: theme.palette[ownerState.color].main,
color: theme.palette[ownerState.color].contrastText
}, ownerState.color === 'inherit' && {
color: 'inherit'
}, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
backgroundColor: null,
color: null
}, ownerState.color === 'transparent' && _extends({
backgroundColor: 'transparent',
color: 'inherit'
}, theme.palette.mode === 'dark' && {
backgroundImage: 'none'
})), theme.vars && _extends({}, ownerState.color === 'default' && {
'--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
'--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
}, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
'--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
'--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
}, !['inherit', 'transparent'].includes(ownerState.color) && {
backgroundColor: 'var(--AppBar-background)'
}, {
color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
}, ownerState.color === 'transparent' && {
backgroundImage: 'none',
backgroundColor: 'transparent',
color: 'inherit'
}));
});
const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAppBar'
});
const {
className,
color = 'primary',
enableColorOnDark = false,
position = 'fixed'
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = _extends({}, props, {
color,
position,
enableColorOnDark
});
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsx(AppBarRoot, _extends({
square: true,
component: "header",
ownerState: ownerState,
elevation: 4,
className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),
/**
* If true, the `color` prop is applied in dark mode.
* @default false
*/
enableColorOnDark: PropTypes.bool,
/**
* The positioning type. The behavior of the different options is described
* [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
* Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
* @default 'fixed'
*/
position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default AppBar;
+36
View File
@@ -0,0 +1,36 @@
export interface AppBarClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `position="fixed"`. */
positionFixed: string;
/** Styles applied to the root element if `position="absolute"`. */
positionAbsolute: string;
/** Styles applied to the root element if `position="sticky"`. */
positionSticky: string;
/** Styles applied to the root element if `position="static"`. */
positionStatic: string;
/** Styles applied to the root element if `position="relative"`. */
positionRelative: string;
/** Styles applied to the root element if `color="default"`. */
colorDefault: string;
/** Styles applied to the root element if `color="primary"`. */
colorPrimary: string;
/** Styles applied to the root element if `color="secondary"`. */
colorSecondary: string;
/** Styles applied to the root element if `color="inherit"`. */
colorInherit: string;
/** Styles applied to the root element if `color="transparent"`. */
colorTransparent: string;
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
}
export type AppBarClassKey = keyof AppBarClasses;
export declare function getAppBarUtilityClass(slot: string): string;
declare const appBarClasses: AppBarClasses;
export default appBarClasses;
+7
View File
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAppBarUtilityClass(slot) {
return generateUtilityClass('MuiAppBar', slot);
}
const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
export default appBarClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './AppBar';
export * from './AppBar';
export { default as appBarClasses } from './appBarClasses';
export * from './appBarClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './AppBar';
export { default as appBarClasses } from './appBarClasses';
export * from './appBarClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/AppBar/index.js",
"types": "./index.d.ts"
}
+308
View File
@@ -0,0 +1,308 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
import { PaperProps } from '@mui/material/Paper';
import { PopperProps } from '@mui/material/Popper';
import useAutocomplete, {
AutocompleteChangeDetails,
AutocompleteChangeReason,
AutocompleteCloseReason,
AutocompleteInputChangeReason,
AutocompleteValue,
createFilterOptions,
UseAutocompleteProps,
AutocompleteFreeSoloValueMapping,
} from '../useAutocomplete';
import { AutocompleteClasses } from './autocompleteClasses';
export {
AutocompleteChangeDetails,
AutocompleteChangeReason,
AutocompleteCloseReason,
AutocompleteInputChangeReason,
AutocompleteValue,
createFilterOptions,
};
export type AutocompleteOwnerState<
Value,
Multiple extends boolean | undefined,
DisableClearable extends boolean | undefined,
FreeSolo extends boolean | undefined,
ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
> = AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
disablePortal: boolean;
expanded: boolean;
focused: boolean;
fullWidth: boolean;
getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
hasClearIcon: boolean;
hasPopupIcon: boolean;
inputFocused: boolean;
popupOpen: boolean;
size: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
};
export type AutocompleteRenderGetTagProps = ({ index }: { index: number }) => {
key: number;
className: string;
disabled: boolean;
'data-tag-index': number;
tabIndex: -1;
onDelete: (event: any) => void;
};
export interface AutocompleteRenderOptionState {
inputValue: string;
index: number;
selected: boolean;
}
export interface AutocompleteRenderGroupParams {
key: string;
group: string;
children?: React.ReactNode;
}
export interface AutocompleteRenderInputParams {
id: string;
disabled: boolean;
fullWidth: boolean;
size: 'small' | undefined;
InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
InputProps: {
ref: React.Ref<any>;
className: string;
startAdornment: React.ReactNode;
endAdornment: React.ReactNode;
};
inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
}
export interface AutocompletePropsSizeOverrides {}
export interface AutocompleteProps<
Value,
Multiple extends boolean | undefined,
DisableClearable extends boolean | undefined,
FreeSolo extends boolean | undefined,
ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>,
StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
/**
* Props applied to the [`Chip`](/material-ui/api/chip/) element.
*/
ChipProps?: ChipProps<ChipComponent>;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AutocompleteClasses>;
/**
* The icon to display in place of the default clear icon.
* @default <ClearIcon fontSize="small" />
*/
clearIcon?: React.ReactNode;
/**
* Override the default text for the *clear* icon button.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Clear'
*/
clearText?: string;
/**
* Override the default text for the *close popup* icon button.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Close'
*/
closeText?: string;
/**
* The props used for each slot inside.
* @default {}
*/
componentsProps?: {
clearIndicator?: Partial<IconButtonProps>;
paper?: PaperProps;
popper?: Partial<PopperProps>;
popupIndicator?: Partial<IconButtonProps>;
};
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal?: boolean;
/**
* Force the visibility display of the popup icon.
* @default 'auto'
*/
forcePopupIcon?: true | false | 'auto';
/**
* If `true`, the input will take up the full width of its container.
* @default false
*/
fullWidth?: boolean;
/**
* The label to display when the tags are truncated (`limitTags`).
*
* @param {number} more The number of truncated tags.
* @returns {ReactNode}
* @default (more) => `+${more}`
*/
getLimitTagsText?: (more: number) => React.ReactNode;
/**
* The component used to render the listbox.
* @default 'ul'
*/
ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
/**
* Props applied to the Listbox element.
*/
ListboxProps?: ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
sx?: SxProps<Theme>;
ref?: React.Ref<Element>;
};
/**
* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false
*/
loading?: boolean;
/**
* Text to display when in a loading state.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Loading…'
*/
loadingText?: React.ReactNode;
/**
* The maximum number of tags that will be visible when not focused.
* Set `-1` to disable the limit.
* @default -1
*/
limitTags?: number;
/**
* Text to display when there are no options.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'No options'
*/
noOptionsText?: React.ReactNode;
onKeyDown?: (
event: React.KeyboardEvent<HTMLDivElement> & { defaultMuiPrevented?: boolean },
) => void;
/**
* Override the default text for the *open popup* icon button.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Open'
*/
openText?: string;
/**
* The component used to render the body of the popup.
* @default Paper
*/
PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
/**
* The component used to position the popup.
* @default Popper
*/
PopperComponent?: React.JSXElementConstructor<PopperProps>;
/**
* The icon to display in place of the default popup icon.
* @default <ArrowDropDownIcon />
*/
popupIcon?: React.ReactNode;
/**
* If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
* @default false
*/
readOnly?: boolean;
/**
* Render the group.
*
* @param {AutocompleteRenderGroupParams} params The group to render.
* @returns {ReactNode}
*/
renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;
/**
* Render the input.
*
* @param {object} params
* @returns {ReactNode}
*/
renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;
/**
* Render the option, use `getOptionLabel` by default.
*
* @param {object} props The props to apply on the li element.
* @param {Value} option The option to render.
* @param {object} state The state of each option.
* @param {object} ownerState The state of the Autocomplete component.
* @returns {ReactNode}
*/
renderOption?: (
props: React.HTMLAttributes<HTMLLIElement> & { key: any },
option: Value,
state: AutocompleteRenderOptionState,
ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
) => React.ReactNode;
/**
* Render the selected value.
*
* @param {Value[]} value The `value` provided to the component.
* @param {function} getTagProps A tag props getter.
* @param {object} ownerState The state of the Autocomplete component.
* @returns {ReactNode}
*/
renderTags?: (
value: Value[],
getTagProps: AutocompleteRenderGetTagProps,
ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
) => React.ReactNode;
/**
* The size of the component.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
/**
* The props used for each slot inside.
* @default {}
*/
slotProps?: {
clearIndicator?: Partial<IconButtonProps>;
paper?: PaperProps;
popper?: Partial<PopperProps>;
popupIndicator?: Partial<IconButtonProps>;
};
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
*
* API:
*
* - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/)
*/
export default function Autocomplete<
Value,
Multiple extends boolean | undefined = false,
DisableClearable extends boolean | undefined = false,
FreeSolo extends boolean | undefined = false,
ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
>(
props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
): React.JSX.Element;
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,58 @@
export interface AutocompleteClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth: string;
/** State class applied to the root element if the listbox is displayed. */
expanded: string;
/** State class applied to the root element if focused. */
focused: string;
/** Styles applied to the option elements if they are keyboard focused. */
focusVisible: string;
/** Styles applied to the tag elements, for example the chips. */
tag: string;
/** Styles applied to the tag elements, for example the chips if `size="small"`. */
tagSizeSmall: string;
/** Styles applied to the tag elements, for example the chips if `size="medium"`. */
tagSizeMedium: string;
/** Styles applied when the popup icon is rendered. */
hasPopupIcon: string;
/** Styles applied when the clear icon is rendered. */
hasClearIcon: string;
/** Styles applied to the Input element. */
inputRoot: string;
/** Styles applied to the input element. */
input: string;
/** Styles applied to the input element if the input is focused. */
inputFocused: string;
/** Styles applied to the endAdornment element. */
endAdornment: string;
/** Styles applied to the clear indicator. */
clearIndicator: string;
/** Styles applied to the popup indicator. */
popupIndicator: string;
/** Styles applied to the popup indicator if the popup is open. */
popupIndicatorOpen: string;
/** Styles applied to the popper element. */
popper: string;
/** Styles applied to the popper element if `disablePortal={true}`. */
popperDisablePortal: string;
/** Styles applied to the Paper component. */
paper: string;
/** Styles applied to the listbox component. */
listbox: string;
/** Styles applied to the loading wrapper. */
loading: string;
/** Styles applied to the no option wrapper. */
noOptions: string;
/** Styles applied to the option elements. */
option: string;
/** Styles applied to the group's label elements. */
groupLabel: string;
/** Styles applied to the group's ul elements. */
groupUl: string;
}
export type AutocompleteClassKey = keyof AutocompleteClasses;
export declare function getAutocompleteUtilityClass(slot: string): string;
declare const autocompleteClasses: AutocompleteClasses;
export default autocompleteClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAutocompleteUtilityClass(slot) {
return generateUtilityClass('MuiAutocomplete', slot);
}
const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
export default autocompleteClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Autocomplete';
export * from './Autocomplete';
export { default as autocompleteClasses } from './autocompleteClasses';
export * from './autocompleteClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default, createFilterOptions } from './Autocomplete';
export { default as autocompleteClasses } from './autocompleteClasses';
export * from './autocompleteClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/Autocomplete/index.js",
"types": "./index.d.ts"
}
+105
View File
@@ -0,0 +1,105 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { Theme } from '../styles';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
import { AvatarClasses } from './avatarClasses';
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
export interface AvatarSlots {
/**
* The component that renders the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Collapse
*/
img?: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
}
export interface AvatarPropsVariantOverrides {}
export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<
AvatarSlots,
{
img: SlotProps<
React.ElementType<React.ImgHTMLAttributes<HTMLImageElement>>,
{},
AvatarOwnProps
>;
}
>;
export interface AvatarOwnProps {
/**
* Used in combination with `src` or `srcSet` to
* provide an alt attribute for the rendered `img` element.
*/
alt?: string;
/**
* Used to render icon or text elements inside the Avatar if `src` is not set.
* This can be an element, or just a string.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AvatarClasses>;
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
* It can be used to listen for the loading error event.
* @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
sx?: SxProps<Theme>;
};
/**
* The `sizes` attribute for the `img` element.
*/
sizes?: string;
/**
* The `src` attribute for the `img` element.
*/
src?: string;
/**
* The `srcSet` attribute for the `img` element.
* Use this attribute for responsive image display.
*/
srcSet?: string;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The shape of the avatar.
* @default 'circular'
*/
variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarPropsVariantOverrides>;
}
export interface AvatarTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
> {
props: AdditionalProps & AvatarOwnProps & AvatarSlotsAndSlotProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Avatar](https://mui.com/material-ui/react-avatar/)
*
* API:
*
* - [Avatar API](https://mui.com/material-ui/api/avatar/)
*/
declare const Avatar: OverridableComponent<AvatarTypeMap>;
export type AvatarProps<
RootComponent extends React.ElementType = AvatarTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<AvatarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Avatar;
+289
View File
@@ -0,0 +1,289 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import Person from '../internal/svg-icons/Person';
import { getAvatarUtilityClass } from './avatarClasses';
import useSlot from '../utils/useSlot';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
variant,
colorDefault
} = ownerState;
const slots = {
root: ['root', variant, colorDefault && 'colorDefault'],
img: ['img'],
fallback: ['fallback']
};
return composeClasses(slots, getAvatarUtilityClass, classes);
};
const AvatarRoot = styled('div', {
name: 'MuiAvatar',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
}
})(({
theme
}) => ({
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
width: 40,
height: 40,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(20),
lineHeight: 1,
borderRadius: '50%',
overflow: 'hidden',
userSelect: 'none',
variants: [{
props: {
variant: 'rounded'
},
style: {
borderRadius: (theme.vars || theme).shape.borderRadius
}
}, {
props: {
variant: 'square'
},
style: {
borderRadius: 0
}
}, {
props: {
colorDefault: true
},
style: _extends({
color: (theme.vars || theme).palette.background.default
}, theme.vars ? {
backgroundColor: theme.vars.palette.Avatar.defaultBg
} : _extends({
backgroundColor: theme.palette.grey[400]
}, theme.applyStyles('dark', {
backgroundColor: theme.palette.grey[600]
})))
}]
}));
const AvatarImg = styled('img', {
name: 'MuiAvatar',
slot: 'Img',
overridesResolver: (props, styles) => styles.img
})({
width: '100%',
height: '100%',
textAlign: 'center',
// Handle non-square image. The property isn't supported by IE11.
objectFit: 'cover',
// Hide alt text.
color: 'transparent',
// Hide the image broken icon, only works on Chrome.
textIndent: 10000
});
const AvatarFallback = styled(Person, {
name: 'MuiAvatar',
slot: 'Fallback',
overridesResolver: (props, styles) => styles.fallback
})({
width: '75%',
height: '75%'
});
function useLoaded({
crossOrigin,
referrerPolicy,
src,
srcSet
}) {
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
if (!src && !srcSet) {
return undefined;
}
setLoaded(false);
let active = true;
const image = new Image();
image.onload = () => {
if (!active) {
return;
}
setLoaded('loaded');
};
image.onerror = () => {
if (!active) {
return;
}
setLoaded('error');
};
image.crossOrigin = crossOrigin;
image.referrerPolicy = referrerPolicy;
image.src = src;
if (srcSet) {
image.srcset = srcSet;
}
return () => {
active = false;
};
}, [crossOrigin, referrerPolicy, src, srcSet]);
return loaded;
}
const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiAvatar'
});
const {
alt,
children: childrenProp,
className,
component = 'div',
slots = {},
slotProps = {},
imgProps,
sizes,
src,
srcSet,
variant = 'circular'
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
let children = null;
// Use a hook instead of onError on the img element to support server-side rendering.
const loaded = useLoaded(_extends({}, imgProps, {
src,
srcSet
}));
const hasImg = src || srcSet;
const hasImgNotFailing = hasImg && loaded !== 'error';
const ownerState = _extends({}, props, {
colorDefault: !hasImgNotFailing,
component,
variant
});
const classes = useUtilityClasses(ownerState);
const [ImgSlot, imgSlotProps] = useSlot('img', {
className: classes.img,
elementType: AvatarImg,
externalForwardedProps: {
slots,
slotProps: {
img: _extends({}, imgProps, slotProps.img)
}
},
additionalProps: {
alt,
src,
srcSet,
sizes
},
ownerState
});
if (hasImgNotFailing) {
children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
// We only render valid children, non valid children are rendered with a fallback
// We consider that invalid children are all falsy values, except 0, which is valid.
} else if (!!childrenProp || childrenProp === 0) {
children = childrenProp;
} else if (hasImg && alt) {
children = alt[0];
} else {
children = /*#__PURE__*/_jsx(AvatarFallback, {
ownerState: ownerState,
className: classes.fallback
});
}
return /*#__PURE__*/_jsx(AvatarRoot, _extends({
as: component,
ownerState: ownerState,
className: clsx(classes.root, className),
ref: ref
}, other, {
children: children
}));
});
process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Used in combination with `src` or `srcSet` to
* provide an alt attribute for the rendered `img` element.
*/
alt: PropTypes.string,
/**
* Used to render icon or text elements inside the Avatar if `src` is not set.
* This can be an element, or just a string.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
* It can be used to listen for the loading error event.
* @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
imgProps: PropTypes.object,
/**
* The `sizes` attribute for the `img` element.
*/
sizes: PropTypes.string,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: PropTypes.shape({
img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: PropTypes.shape({
img: PropTypes.elementType
}),
/**
* The `src` attribute for the `img` element.
*/
src: PropTypes.string,
/**
* The `srcSet` attribute for the `img` element.
* Use this attribute for responsive image display.
*/
srcSet: PropTypes.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The shape of the avatar.
* @default 'circular'
*/
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
} : void 0;
export default Avatar;
+20
View File
@@ -0,0 +1,20 @@
export interface AvatarClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if not `src` or `srcSet`. */
colorDefault: string;
/** Styles applied to the root element if `variant="circular"`. */
circular: string;
/** Styles applied to the root element if `variant="rounded"`. */
rounded: string;
/** Styles applied to the root element if `variant="square"`. */
square: string;
/** Styles applied to the img element if either `src` or `srcSet` is defined. */
img: string;
/** Styles applied to the fallback icon */
fallback: string;
}
export type AvatarClassKey = keyof AvatarClasses;
export declare function getAvatarUtilityClass(slot: string): string;
declare const avatarClasses: AvatarClasses;
export default avatarClasses;
+7
View File
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAvatarUtilityClass(slot) {
return generateUtilityClass('MuiAvatar', slot);
}
const avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
export default avatarClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Avatar';
export * from './Avatar';
export { default as avatarClasses } from './avatarClasses';
export * from './avatarClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './Avatar';
export { default as avatarClasses } from './avatarClasses';
export * from './avatarClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/Avatar/index.js",
"types": "./index.d.ts"
}
+95
View File
@@ -0,0 +1,95 @@
import * as React from 'react';
import { OverridableStringUnion } from '@mui/types';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
import { AvatarGroupClasses } from './avatarGroupClasses';
import Avatar from '../Avatar';
export interface AvatarGroupPropsVariantOverrides {}
export interface AvatarGroupComponentsPropsOverrides {}
export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
/**
* The avatars to stack.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AvatarGroupClasses>;
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType;
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
*
* @default {}
*/
componentsProps?: {
additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
AvatarGroupComponentsPropsOverrides;
};
/**
* Max avatars to show before +x.
* @default 5
*/
max?: number;
/**
* custom renderer of extraAvatars
* @param {number} surplus number of extra avatars
* @returns {React.ReactNode} custom element to display
*/
renderSurplus?: (surplus: number) => React.ReactNode;
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
*
* @default {}
*/
slotProps?: {
additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
AvatarGroupComponentsPropsOverrides;
};
/**
* Spacing between avatars.
* @default 'medium'
*/
spacing?: 'small' | 'medium' | number;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The total number of avatars. Used for calculating the number of extra avatars.
* @default children.length
*/
total?: number;
/**
* The variant to use.
* @default 'circular'
*/
variant?: OverridableStringUnion<
'circular' | 'rounded' | 'square',
AvatarGroupPropsVariantOverrides
>;
}
/**
*
* Demos:
*
* - [Avatar](https://mui.com/material-ui/react-avatar/)
*
* API:
*
* - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/)
*/
export default function AvatarGroup(props: AvatarGroupProps): React.JSX.Element;
+200
View File
@@ -0,0 +1,200 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { isFragment } from 'react-is';
import clsx from 'clsx';
import chainPropTypes from '@mui/utils/chainPropTypes';
import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import Avatar, { avatarClasses } from '../Avatar';
import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const SPACINGS = {
small: -16,
medium: null
};
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['root'],
avatar: ['avatar']
};
return composeClasses(slots, getAvatarGroupUtilityClass, classes);
};
const AvatarGroupRoot = styled('div', {
name: 'MuiAvatarGroup',
slot: 'Root',
overridesResolver: (props, styles) => _extends({
[`& .${avatarGroupClasses.avatar}`]: styles.avatar
}, styles.root)
})(({
theme,
ownerState
}) => {
const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
return {
[`& .${avatarClasses.root}`]: {
border: `2px solid ${(theme.vars || theme).palette.background.default}`,
boxSizing: 'content-box',
marginLeft: marginValue != null ? marginValue : -8,
'&:last-child': {
marginLeft: 0
}
},
display: 'flex',
flexDirection: 'row-reverse'
};
});
const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
var _slotProps$additional;
const props = useDefaultProps({
props: inProps,
name: 'MuiAvatarGroup'
});
const {
children: childrenProp,
className,
component = 'div',
componentsProps = {},
max = 5,
renderSurplus,
slotProps = {},
spacing = 'medium',
total,
variant = 'circular'
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
let clampedMax = max < 2 ? 2 : max;
const ownerState = _extends({}, props, {
max,
spacing,
component,
variant
});
const classes = useUtilityClasses(ownerState);
const children = React.Children.toArray(childrenProp).filter(child => {
if (process.env.NODE_ENV !== 'production') {
if (isFragment(child)) {
console.error(["MUI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
}
}
return /*#__PURE__*/React.isValidElement(child);
});
const totalAvatars = total || children.length;
if (totalAvatars === clampedMax) {
clampedMax += 1;
}
clampedMax = Math.min(totalAvatars + 1, clampedMax);
const maxAvatars = Math.min(children.length, clampedMax - 1);
const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
as: component,
ownerState: ownerState,
className: clsx(classes.root, className),
ref: ref
}, other, {
children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
variant: variant
}, additionalAvatarSlotProps, {
className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
children: extraAvatarsElement
})) : null, children.slice(0, maxAvatars).reverse().map(child => {
return /*#__PURE__*/React.cloneElement(child, {
className: clsx(child.props.className, classes.avatar),
variant: child.props.variant || variant
});
})]
}));
});
process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The avatars to stack.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
*
* @default {}
*/
componentsProps: PropTypes.shape({
additionalAvatar: PropTypes.object
}),
/**
* Max avatars to show before +x.
* @default 5
*/
max: chainPropTypes(PropTypes.number, props => {
if (props.max < 2) {
return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
}
return null;
}),
/**
* custom renderer of extraAvatars
* @param {number} surplus number of extra avatars
* @returns {React.ReactNode} custom element to display
*/
renderSurplus: PropTypes.func,
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
*
* @default {}
*/
slotProps: PropTypes.shape({
additionalAvatar: PropTypes.object
}),
/**
* Spacing between avatars.
* @default 'medium'
*/
spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The total number of avatars. Used for calculating the number of extra avatars.
* @default children.length
*/
total: PropTypes.number,
/**
* The variant to use.
* @default 'circular'
*/
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
} : void 0;
export default AvatarGroup;
@@ -0,0 +1,10 @@
export interface AvatarGroupClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the avatar elements. */
avatar: string;
}
export type AvatarGroupClassKey = keyof AvatarGroupClasses;
export declare function getAvatarGroupUtilityClass(slot: string): string;
declare const avatarGroupClasses: AvatarGroupClasses;
export default avatarGroupClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getAvatarGroupUtilityClass(slot) {
return generateUtilityClass('MuiAvatarGroup', slot);
}
const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
export default avatarGroupClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from './AvatarGroup';
export * from './AvatarGroup';
export { default as avatarGroupClasses } from './avatarGroupClasses';
export * from './avatarGroupClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './AvatarGroup';
export { default as avatarGroupClasses } from './avatarGroupClasses';
export * from './avatarGroupClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/AvatarGroup/index.js",
"types": "./index.d.ts"
}
+127
View File
@@ -0,0 +1,127 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { FadeProps } from '../Fade';
import { TransitionProps } from '../transitions/transition';
import { Theme } from '../styles';
import { BackdropClasses } from './backdropClasses';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
export interface BackdropComponentsPropsOverrides {}
export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* The components used for each slot inside.
*
* This prop is an alias for the `slots` prop.
* It's recommended to use the `slots` prop instead.
*
* @default {}
*/
components?: {
Root?: React.ElementType;
};
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
*
* @default {}
*/
componentsProps?: {
root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
};
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BackdropClasses>;
/**
* If `true`, the backdrop is invisible.
* It can be used when rendering a popover or a custom select component.
* @default false
*/
invisible?: boolean;
/**
* If `true`, the component is shown.
*/
open: boolean;
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
*
* @default {}
*/
slotProps?: {
root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
};
/**
* The components used for each slot inside.
*
* This prop is an alias for the `components` prop, which will be deprecated in the future.
*
* @default {}
*/
slots?: {
root?: React.ElementType;
};
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration?: TransitionProps['timeout'];
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Fade
*/
TransitionComponent?: React.JSXElementConstructor<
TransitionProps & {
children: React.ReactElement<any, any>;
}
>;
}
export interface BackdropTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
> {
props: AdditionalProps & BackdropOwnProps;
defaultComponent: RootComponent;
}
type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
export declare const BackdropRoot: React.FC<BackdropRootProps>;
/**
*
* Demos:
*
* - [Backdrop](https://mui.com/material-ui/react-backdrop/)
*
* API:
*
* - [Backdrop API](https://mui.com/material-ui/api/backdrop/)
* - inherits [Fade API](https://mui.com/material-ui/api/fade/)
*/
declare const Backdrop: OverridableComponent<BackdropTypeMap>;
export type BackdropProps<
RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Backdrop;
+188
View File
@@ -0,0 +1,188 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import Fade from '../Fade';
import { getBackdropUtilityClass } from './backdropClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
invisible
} = ownerState;
const slots = {
root: ['root', invisible && 'invisible']
};
return composeClasses(slots, getBackdropUtilityClass, classes);
};
const BackdropRoot = styled('div', {
name: 'MuiBackdrop',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, ownerState.invisible && styles.invisible];
}
})(({
ownerState
}) => _extends({
position: 'fixed',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
right: 0,
bottom: 0,
top: 0,
left: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
WebkitTapHighlightColor: 'transparent'
}, ownerState.invisible && {
backgroundColor: 'transparent'
}));
const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
var _slotProps$root, _ref, _slots$root;
const props = useDefaultProps({
props: inProps,
name: 'MuiBackdrop'
});
const {
children,
className,
component = 'div',
components = {},
componentsProps = {},
invisible = false,
open,
slotProps = {},
slots = {},
TransitionComponent = Fade,
transitionDuration
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = _extends({}, props, {
component,
invisible
});
const classes = useUtilityClasses(ownerState);
const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
return /*#__PURE__*/_jsx(TransitionComponent, _extends({
in: open,
timeout: transitionDuration
}, other, {
children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
"aria-hidden": true
}, rootSlotProps, {
as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
classes: classes,
ref: ref,
children: children
}))
}));
});
process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* The components used for each slot inside.
*
* This prop is an alias for the `slots` prop.
* It's recommended to use the `slots` prop instead.
*
* @default {}
*/
components: PropTypes.shape({
Root: PropTypes.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
*
* @default {}
*/
componentsProps: PropTypes.shape({
root: PropTypes.object
}),
/**
* If `true`, the backdrop is invisible.
* It can be used when rendering a popover or a custom select component.
* @default false
*/
invisible: PropTypes.bool,
/**
* If `true`, the component is shown.
*/
open: PropTypes.bool.isRequired,
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
*
* @default {}
*/
slotProps: PropTypes.shape({
root: PropTypes.object
}),
/**
* The components used for each slot inside.
*
* This prop is an alias for the `components` prop, which will be deprecated in the future.
*
* @default {}
*/
slots: PropTypes.shape({
root: PropTypes.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Fade
*/
TransitionComponent: PropTypes.elementType,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})])
} : void 0;
export default Backdrop;
+10
View File
@@ -0,0 +1,10 @@
export interface BackdropClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `invisible={true}`. */
invisible: string;
}
export type BackdropClassKey = keyof BackdropClasses;
export declare function getBackdropUtilityClass(slot: string): string;
declare const backdropClasses: BackdropClasses;
export default backdropClasses;
+7
View File
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getBackdropUtilityClass(slot) {
return generateUtilityClass('MuiBackdrop', slot);
}
const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
export default backdropClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Backdrop';
export * from './Backdrop';
export { default as backdropClasses } from './backdropClasses';
export * from './backdropClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './Backdrop';
export { default as backdropClasses } from './backdropClasses';
export * from './backdropClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/Backdrop/index.js",
"types": "./index.d.ts"
}
+183
View File
@@ -0,0 +1,183 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion, Simplify } from '@mui/types';
import { SlotComponentProps } from '../utils/types';
import { Theme } from '../styles';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
import { BadgeClasses } from './badgeClasses';
export interface BadgePropsVariantOverrides {}
export interface BadgePropsColorOverrides {}
export interface BadgeRootSlotPropsOverrides {}
export interface BadgeBadgeSlotPropsOverrides {}
export type BadgeOwnerState = Simplify<
BadgeOwnProps & {
badgeContent: React.ReactNode;
invisible: boolean;
max: number;
displayValue: React.ReactNode;
showZero: boolean;
anchorOrigin: BadgeOrigin;
color: OverridableStringUnion<
'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning',
BadgePropsColorOverrides
>;
overlap: 'rectangular' | 'circular';
variant: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
}
>;
export interface BadgeOrigin {
vertical: 'top' | 'bottom';
horizontal: 'left' | 'right';
}
export interface BadgeOwnProps {
/**
* The anchor of the badge.
* @default {
* vertical: 'top',
* horizontal: 'right',
* }
*/
anchorOrigin?: BadgeOrigin;
/**
* The content rendered within the badge.
*/
badgeContent?: React.ReactNode;
/**
* The badge will be added relative to this node.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BadgeClasses>;
/**
* @ignore
*/
className?: string;
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'default'
*/
color?: OverridableStringUnion<
'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning',
BadgePropsColorOverrides
>;
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
*
* @default {}
*/
componentsProps?: BadgeOwnProps['slotProps'];
/**
* The components used for each slot inside.
*
* This prop is an alias for the `slots` prop.
* It's recommended to use the `slots` prop instead.
*
* @default {}
*/
components?: {
Root?: React.ElementType;
Badge?: React.ElementType;
};
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible?: boolean;
/**
* Max count to show.
* @default 99
*/
max?: number;
/**
* Wrapped shape the badge should overlap.
* @default 'rectangular'
*/
overlap?: 'rectangular' | 'circular';
/**
* The props used for each slot inside the Badge.
* @default {}
*/
slotProps?: {
root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
};
/**
* The components used for each slot inside the Badge.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots?: {
/**
* The component that renders the root.
* @default 'span'
*/
root?: React.ElementType;
/**
* The component that renders the badge.
* @default 'span'
*/
badge?: React.ElementType;
};
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The variant to use.
* @default 'standard'
*/
variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
}
export interface BadgeTypeMap<
RootComponent extends React.ElementType = 'span',
AdditionalProps = {},
> {
props: AdditionalProps & BadgeOwnProps;
defaultComponent: RootComponent;
}
type BadgeRootProps = NonNullable<BadgeTypeMap['props']['slotProps']>['root'];
type BadgeBadgeProps = NonNullable<BadgeTypeMap['props']['slotProps']>['badge'];
export declare const BadgeRoot: React.FC<BadgeRootProps>;
export declare const BadgeMark: React.FC<BadgeBadgeProps>;
/**
*
* Demos:
*
* - [Avatar](https://mui.com/material-ui/react-avatar/)
* - [Badge](https://mui.com/material-ui/react-badge/)
*
* API:
*
* - [Badge API](https://mui.com/material-ui/api/badge/)
*/
declare const Badge: OverridableComponent<BadgeTypeMap>;
export type BadgeProps<
RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
component?: React.ElementType;
};
export default Badge;
+431
View File
@@ -0,0 +1,431 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import usePreviousProps from '@mui/utils/usePreviousProps';
import composeClasses from '@mui/utils/composeClasses';
import useSlotProps from '@mui/utils/useSlotProps';
import useBadge from './useBadge';
import { styled } from '../zero-styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import capitalize from '../utils/capitalize';
import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const RADIUS_STANDARD = 10;
const RADIUS_DOT = 4;
const useUtilityClasses = ownerState => {
const {
color,
anchorOrigin,
invisible,
overlap,
variant,
classes = {}
} = ownerState;
const slots = {
root: ['root'],
badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
};
return composeClasses(slots, getBadgeUtilityClass, classes);
};
const BadgeRoot = styled('span', {
name: 'MuiBadge',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})({
position: 'relative',
display: 'inline-flex',
// For correct alignment with the text.
verticalAlign: 'middle',
flexShrink: 0
});
const BadgeBadge = styled('span', {
name: 'MuiBadge',
slot: 'Badge',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
}
})(({
theme
}) => {
var _theme$vars;
return {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
position: 'absolute',
boxSizing: 'border-box',
fontFamily: theme.typography.fontFamily,
fontWeight: theme.typography.fontWeightMedium,
fontSize: theme.typography.pxToRem(12),
minWidth: RADIUS_STANDARD * 2,
lineHeight: 1,
padding: '0 6px',
height: RADIUS_STANDARD * 2,
borderRadius: RADIUS_STANDARD,
zIndex: 1,
// Render the badge on top of potential ripples.
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.enteringScreen
}),
variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
var _theme$vars2, _theme$vars3;
return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
}).map(color => ({
props: {
color
},
style: {
backgroundColor: (theme.vars || theme).palette[color].main,
color: (theme.vars || theme).palette[color].contrastText
}
})), {
props: {
variant: 'dot'
},
style: {
borderRadius: RADIUS_DOT,
height: RADIUS_DOT * 2,
minWidth: RADIUS_DOT * 2,
padding: 0
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
style: {
top: 0,
right: 0,
transform: 'scale(1) translate(50%, -50%)',
transformOrigin: '100% 0%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(50%, -50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
style: {
bottom: 0,
right: 0,
transform: 'scale(1) translate(50%, 50%)',
transformOrigin: '100% 100%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(50%, 50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
style: {
top: 0,
left: 0,
transform: 'scale(1) translate(-50%, -50%)',
transformOrigin: '0% 0%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(-50%, -50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
style: {
bottom: 0,
left: 0,
transform: 'scale(1) translate(-50%, 50%)',
transformOrigin: '0% 100%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(-50%, 50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
style: {
top: '14%',
right: '14%',
transform: 'scale(1) translate(50%, -50%)',
transformOrigin: '100% 0%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(50%, -50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
style: {
bottom: '14%',
right: '14%',
transform: 'scale(1) translate(50%, 50%)',
transformOrigin: '100% 100%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(50%, 50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
style: {
top: '14%',
left: '14%',
transform: 'scale(1) translate(-50%, -50%)',
transformOrigin: '0% 0%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(-50%, -50%)'
}
}
}, {
props: ({
ownerState
}) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
style: {
bottom: '14%',
left: '14%',
transform: 'scale(1) translate(-50%, 50%)',
transformOrigin: '0% 100%',
[`&.${badgeClasses.invisible}`]: {
transform: 'scale(0) translate(-50%, 50%)'
}
}
}, {
props: {
invisible: true
},
style: {
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.leavingScreen
})
}
}]
};
});
const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
const props = useDefaultProps({
props: inProps,
name: 'MuiBadge'
});
const {
anchorOrigin: anchorOriginProp = {
vertical: 'top',
horizontal: 'right'
},
className,
component,
components = {},
componentsProps = {},
children,
overlap: overlapProp = 'rectangular',
color: colorProp = 'default',
invisible: invisibleProp = false,
max: maxProp = 99,
badgeContent: badgeContentProp,
slots,
slotProps,
showZero = false,
variant: variantProp = 'standard'
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const {
badgeContent,
invisible: invisibleFromHook,
max,
displayValue: displayValueFromHook
} = useBadge({
max: maxProp,
invisible: invisibleProp,
badgeContent: badgeContentProp,
showZero
});
const prevProps = usePreviousProps({
anchorOrigin: anchorOriginProp,
color: colorProp,
overlap: overlapProp,
variant: variantProp,
badgeContent: badgeContentProp
});
const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
const {
color = colorProp,
overlap = overlapProp,
anchorOrigin = anchorOriginProp,
variant = variantProp
} = invisible ? prevProps : props;
const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
const ownerState = _extends({}, props, {
badgeContent,
invisible,
max,
displayValue,
showZero,
anchorOrigin,
color,
overlap,
variant
});
const classes = useUtilityClasses(ownerState);
// support both `slots` and `components` for backward compatibility
const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
const rootProps = useSlotProps({
elementType: RootSlot,
externalSlotProps: rootSlotProps,
externalForwardedProps: other,
additionalProps: {
ref,
as: component
},
ownerState,
className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
});
const badgeProps = useSlotProps({
elementType: BadgeSlot,
externalSlotProps: badgeSlotProps,
ownerState,
className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
});
return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {
children: displayValue
}))]
}));
});
process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The anchor of the badge.
* @default {
* vertical: 'top',
* horizontal: 'right',
* }
*/
anchorOrigin: PropTypes.shape({
horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
}),
/**
* The content rendered within the badge.
*/
badgeContent: PropTypes.node,
/**
* The badge will be added relative to this node.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'default'
*/
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* The components used for each slot inside.
*
* This prop is an alias for the `slots` prop.
* It's recommended to use the `slots` prop instead.
*
* @default {}
*/
components: PropTypes.shape({
Badge: PropTypes.elementType,
Root: PropTypes.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
*
* @default {}
*/
componentsProps: PropTypes.shape({
badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}),
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible: PropTypes.bool,
/**
* Max count to show.
* @default 99
*/
max: PropTypes.number,
/**
* Wrapped shape the badge should overlap.
* @default 'rectangular'
*/
overlap: PropTypes.oneOf(['circular', 'rectangular']),
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero: PropTypes.bool,
/**
* The props used for each slot inside the Badge.
* @default {}
*/
slotProps: PropTypes.shape({
badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}),
/**
* The components used for each slot inside the Badge.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: PropTypes.shape({
badge: PropTypes.elementType,
root: PropTypes.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The variant to use.
* @default 'standard'
*/
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['dot', 'standard']), PropTypes.string])
} : void 0;
export default Badge;
+56
View File
@@ -0,0 +1,56 @@
export interface BadgeClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the badge `span` element. */
badge: string;
/** Styles applied to the badge `span` element if `variant="dot"`. */
dot: string;
/** Styles applied to the badge `span` element if `variant="standard"`. */
standard: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
anchorOriginTopRight: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
anchorOriginBottomRight: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
anchorOriginTopLeft: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
anchorOriginBottomLeft: string;
/** State class applied to the badge `span` element if `invisible={true}`. */
invisible: string;
/** Styles applied to the badge `span` element if `color="primary"`. */
colorPrimary: string;
/** Styles applied to the badge `span` element if `color="secondary"`. */
colorSecondary: string;
/** Styles applied to the badge `span` element if `color="error"`. */
colorError: string;
/** Styles applied to the badge `span` element if `color="info"`. */
colorInfo: string;
/** Styles applied to the badge `span` element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the badge `span` element if `color="warning"`. */
colorWarning: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
anchorOriginTopRightRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
anchorOriginBottomRightRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
anchorOriginTopLeftRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
anchorOriginBottomLeftRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
anchorOriginTopRightCircular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
anchorOriginBottomRightCircular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
anchorOriginTopLeftCircular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
anchorOriginBottomLeftCircular: string;
/** Styles applied to the badge `span` element if `overlap="rectangular"`. */
overlapRectangular: string;
/** Styles applied to the badge `span` element if `overlap="circular"`. */
overlapCircular: string;
}
export type BadgeClassKey = keyof BadgeClasses;
export declare function getBadgeUtilityClass(slot: string): string;
declare const badgeClasses: BadgeClasses;
export default badgeClasses;
+9
View File
@@ -0,0 +1,9 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getBadgeUtilityClass(slot) {
return generateUtilityClass('MuiBadge', slot);
}
const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',
// TODO: v6 remove the overlap value from these class keys
'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
export default badgeClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Badge';
export * from './Badge';
export { default as badgeClasses } from './badgeClasses';
export * from './badgeClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './Badge';
export { default as badgeClasses } from './badgeClasses';
export * from './badgeClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/Badge/index.js",
"types": "./index.d.ts"
}
+13
View File
@@ -0,0 +1,13 @@
import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
/**
*
* Demos:
*
* - [Badge](https://next.mui.com/base-ui/react-badge/#hook)
*
* API:
*
* - [useBadge API](https://next.mui.com/base-ui/react-badge/hooks-api/#use-badge)
*/
declare function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
export default useBadge;
+41
View File
@@ -0,0 +1,41 @@
'use client';
import { usePreviousProps } from '@mui/utils';
/**
*
* Demos:
*
* - [Badge](https://next.mui.com/base-ui/react-badge/#hook)
*
* API:
*
* - [useBadge API](https://next.mui.com/base-ui/react-badge/hooks-api/#use-badge)
*/
function useBadge(parameters) {
const {
badgeContent: badgeContentProp,
invisible: invisibleProp = false,
max: maxProp = 99,
showZero = false
} = parameters;
const prevProps = usePreviousProps({
badgeContent: badgeContentProp,
max: maxProp
});
let invisible = invisibleProp;
if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
invisible = true;
}
const {
badgeContent,
max = maxProp
} = invisible ? prevProps : parameters;
const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
return {
badgeContent,
invisible,
max,
displayValue
};
}
export default useBadge;
+39
View File
@@ -0,0 +1,39 @@
export interface UseBadgeParameters {
/**
* The content rendered within the badge.
*/
badgeContent?: React.ReactNode;
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible?: boolean;
/**
* Max count to show.
* @default 99
*/
max?: number;
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero?: boolean;
}
export interface UseBadgeReturnValue {
/**
* Defines the content that's displayed inside the badge.
*/
badgeContent: React.ReactNode;
/**
* If `true`, the component will not be visible.
*/
invisible: boolean;
/**
* Maximum number to be displayed in the badge.
*/
max: number;
/**
* Value to be displayed in the badge. If `badgeContent` is greater than `max`, it will return `max+`.
*/
displayValue: React.ReactNode;
}
+1
View File
@@ -0,0 +1 @@
export {};
@@ -0,0 +1,65 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from '..';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
import { BottomNavigationClasses } from './bottomNavigationClasses';
export interface BottomNavigationOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BottomNavigationClasses>;
/**
* Callback fired when the value changes.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {any} value We default to the index of the child.
*/
onChange?: (event: React.SyntheticEvent, value: any) => void;
/**
* If `true`, all `BottomNavigationAction`s will show their labels.
* By default, only the selected `BottomNavigationAction` will show its label.
* @default false
*/
showLabels?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The value of the currently selected `BottomNavigationAction`.
*/
value?: any;
}
export interface BottomNavigationTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
> {
props: AdditionalProps & BottomNavigationOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Bottom Navigation](https://mui.com/material-ui/react-bottom-navigation/)
*
* API:
*
* - [BottomNavigation API](https://mui.com/material-ui/api/bottom-navigation/)
*/
declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
export type BottomNavigationProps<
RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default BottomNavigation;
@@ -0,0 +1,124 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className", "component", "onChange", "showLabels", "value"];
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['root']
};
return composeClasses(slots, getBottomNavigationUtilityClass, classes);
};
const BottomNavigationRoot = styled('div', {
name: 'MuiBottomNavigation',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({
theme
}) => ({
display: 'flex',
justifyContent: 'center',
height: 56,
backgroundColor: (theme.vars || theme).palette.background.paper
}));
const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiBottomNavigation'
});
const {
children,
className,
component = 'div',
onChange,
showLabels = false,
value
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = _extends({}, props, {
component,
showLabels
});
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsx(BottomNavigationRoot, _extends({
as: component,
className: clsx(classes.root, className),
ref: ref,
ownerState: ownerState
}, other, {
children: React.Children.map(children, (child, childIndex) => {
if (! /*#__PURE__*/React.isValidElement(child)) {
return null;
}
if (process.env.NODE_ENV !== 'production') {
if (isFragment(child)) {
console.error(["MUI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
}
}
const childValue = child.props.value === undefined ? childIndex : child.props.value;
return /*#__PURE__*/React.cloneElement(child, {
selected: childValue === value,
showLabel: child.props.showLabel !== undefined ? child.props.showLabel : showLabels,
value: childValue,
onChange
});
})
}));
});
process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* Callback fired when the value changes.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {any} value We default to the index of the child.
*/
onChange: PropTypes.func,
/**
* If `true`, all `BottomNavigationAction`s will show their labels.
* By default, only the selected `BottomNavigationAction` will show its label.
* @default false
*/
showLabels: PropTypes.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The value of the currently selected `BottomNavigationAction`.
*/
value: PropTypes.any
} : void 0;
export default BottomNavigation;
@@ -0,0 +1,8 @@
export interface BottomNavigationClasses {
/** Styles applied to the root element. */
root: string;
}
export type BottomNavigationClassKey = keyof BottomNavigationClasses;
export declare function getBottomNavigationUtilityClass(slot: string): string;
declare const bottomNavigationClasses: BottomNavigationClasses;
export default bottomNavigationClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getBottomNavigationUtilityClass(slot) {
return generateUtilityClass('MuiBottomNavigation', slot);
}
const bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']);
export default bottomNavigationClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './BottomNavigation';
export * from './BottomNavigation';
export { default as bottomNavigationClasses } from './bottomNavigationClasses';
export * from './bottomNavigationClasses';
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './BottomNavigation';
export { default as bottomNavigationClasses } from './bottomNavigationClasses';
export * from './bottomNavigationClasses';
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/BottomNavigation/index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,74 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from '..';
import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
import { OverrideProps } from '../OverridableComponent';
import { BottomNavigationActionClasses } from './bottomNavigationActionClasses';
export interface BottomNavigationActionOwnProps {
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BottomNavigationActionClasses>;
/**
* The icon to display.
*/
icon?: React.ReactNode;
/**
* The label element.
*/
label?: React.ReactNode;
/**
* If `true`, the `BottomNavigationAction` will show its label.
* By default, only the selected `BottomNavigationAction`
* inside `BottomNavigation` will show its label.
*
* The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
*/
showLabel?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value?: any;
}
export type BottomNavigationActionTypeMap<
AdditionalProps,
RootComponent extends React.ElementType,
> = ExtendButtonBaseTypeMap<{
props: AdditionalProps & BottomNavigationActionOwnProps;
defaultComponent: RootComponent;
}>;
/**
*
* Demos:
*
* - [Bottom Navigation](https://mui.com/material-ui/react-bottom-navigation/)
*
* API:
*
* - [BottomNavigationAction API](https://mui.com/material-ui/api/bottom-navigation-action/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const BottomNavigationAction: ExtendButtonBase<
BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
>;
export type BottomNavigationActionProps<
RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default BottomNavigationAction;
@@ -0,0 +1,173 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import ButtonBase from '../ButtonBase';
import unsupportedProp from '../utils/unsupportedProp';
import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes,
showLabel,
selected
} = ownerState;
const slots = {
root: ['root', !showLabel && !selected && 'iconOnly', selected && 'selected'],
label: ['label', !showLabel && !selected && 'iconOnly', selected && 'selected']
};
return composeClasses(slots, getBottomNavigationActionUtilityClass, classes);
};
const BottomNavigationActionRoot = styled(ButtonBase, {
name: 'MuiBottomNavigationAction',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
}
})(({
theme,
ownerState
}) => _extends({
transition: theme.transitions.create(['color', 'padding-top'], {
duration: theme.transitions.duration.short
}),
padding: '0px 12px',
minWidth: 80,
maxWidth: 168,
color: (theme.vars || theme).palette.text.secondary,
flexDirection: 'column',
flex: '1'
}, !ownerState.showLabel && !ownerState.selected && {
paddingTop: 14
}, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
paddingTop: 0
}, {
[`&.${bottomNavigationActionClasses.selected}`]: {
color: (theme.vars || theme).palette.primary.main
}
}));
const BottomNavigationActionLabel = styled('span', {
name: 'MuiBottomNavigationAction',
slot: 'Label',
overridesResolver: (props, styles) => styles.label
})(({
theme,
ownerState
}) => _extends({
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(12),
opacity: 1,
transition: 'font-size 0.2s, opacity 0.2s',
transitionDelay: '0.1s'
}, !ownerState.showLabel && !ownerState.selected && {
opacity: 0,
transitionDelay: '0s'
}, {
[`&.${bottomNavigationActionClasses.selected}`]: {
fontSize: theme.typography.pxToRem(14)
}
}));
const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiBottomNavigationAction'
});
const {
className,
icon,
label,
onChange,
onClick
// eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
,
value
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = props;
const classes = useUtilityClasses(ownerState);
const handleChange = event => {
if (onChange) {
onChange(event, value);
}
if (onClick) {
onClick(event);
}
};
return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, _extends({
ref: ref,
className: clsx(classes.root, className),
focusRipple: true,
onClick: handleChange,
ownerState: ownerState
}, other, {
children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
className: classes.label,
ownerState: ownerState,
children: label
})]
}));
});
process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children: unsupportedProp,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The icon to display.
*/
icon: PropTypes.node,
/**
* The label element.
*/
label: PropTypes.node,
/**
* @ignore
*/
onChange: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* If `true`, the `BottomNavigationAction` will show its label.
* By default, only the selected `BottomNavigationAction`
* inside `BottomNavigation` will show its label.
*
* The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
*/
showLabel: PropTypes.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: PropTypes.any
} : void 0;
export default BottomNavigationAction;
@@ -0,0 +1,14 @@
export interface BottomNavigationActionClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element if selected. */
selected: string;
/** State class applied to the root element if `showLabel={false}` and not selected. */
iconOnly: string;
/** Styles applied to the label's span element. */
label: string;
}
export type BottomNavigationActionClassKey = keyof BottomNavigationActionClasses;
export declare function getBottomNavigationActionUtilityClass(slot: string): string;
declare const bottomNavigationActionClasses: BottomNavigationActionClasses;
export default bottomNavigationActionClasses;
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getBottomNavigationActionUtilityClass(slot) {
return generateUtilityClass('MuiBottomNavigationAction', slot);
}
const bottomNavigationActionClasses = generateUtilityClasses('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
export default bottomNavigationActionClasses;

Some files were not shown because too many files have changed in this diff Show More