New source found from dndbeyond.com
This commit is contained in:
-348
@@ -1,348 +0,0 @@
|
||||
'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, createUseThemeProps } from '../zero-styled';
|
||||
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 useThemeProps = createUseThemeProps('MuiAlert');
|
||||
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 = useThemeProps({
|
||||
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;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
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;
|
||||
-178
@@ -1,178 +0,0 @@
|
||||
'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 useThemeProps from '../styles/useThemeProps';
|
||||
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)
|
||||
}, {
|
||||
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 = useThemeProps({
|
||||
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;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
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;
|
||||
-289
@@ -1,289 +0,0 @@
|
||||
'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, createUseThemeProps } from '../zero-styled';
|
||||
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 useThemeProps = createUseThemeProps('MuiAvatar');
|
||||
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 = useThemeProps({
|
||||
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;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
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;
|
||||
+2
-2
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import Fade from '../Fade';
|
||||
import { getBackdropUtilityClass } from './backdropClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
@@ -49,7 +49,7 @@ const BackdropRoot = styled('div', {
|
||||
}));
|
||||
const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
|
||||
var _slotProps$root, _ref, _slots$root;
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiBackdrop'
|
||||
});
|
||||
|
||||
-35
@@ -1,35 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { createBox } from '@mui/system';
|
||||
import PropTypes from 'prop-types';
|
||||
import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
|
||||
import { createTheme } from '../styles';
|
||||
import THEME_ID from '../styles/identifier';
|
||||
import boxClasses from './boxClasses';
|
||||
const defaultTheme = createTheme();
|
||||
const Box = createBox({
|
||||
themeId: THEME_ID,
|
||||
defaultTheme,
|
||||
defaultClassName: boxClasses.root,
|
||||
generateClassName: ClassNameGenerator.generate
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Box.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a HTML element or a component.
|
||||
*/
|
||||
component: 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])
|
||||
} : void 0;
|
||||
export default Box;
|
||||
-3
@@ -1,3 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
const boxClasses = generateUtilityClasses('MuiBox', ['root']);
|
||||
export default boxClasses;
|
||||
+2
-2
@@ -10,7 +10,7 @@ import resolveProps from '@mui/utils/resolveProps';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
|
||||
@@ -224,7 +224,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
||||
const contextProps = React.useContext(ButtonGroupContext);
|
||||
const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
|
||||
const resolvedProps = resolveProps(contextProps, inProps);
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: resolvedProps,
|
||||
name: 'MuiButton'
|
||||
});
|
||||
|
||||
+2
-2
@@ -10,7 +10,7 @@ import refType from '@mui/utils/refType';
|
||||
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import useEventCallback from '../utils/useEventCallback';
|
||||
import useIsFocusVisible from '../utils/useIsFocusVisible';
|
||||
@@ -84,7 +84,7 @@ export const ButtonBaseRoot = styled('button', {
|
||||
* It contains a load of style reset and some focus/ripple logic.
|
||||
*/
|
||||
const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiButtonBase'
|
||||
});
|
||||
|
||||
+2
-2
@@ -15,7 +15,7 @@ import clsx from 'clsx';
|
||||
import { keyframes } from '@mui/system';
|
||||
import useTimeout from '@mui/utils/useTimeout';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import Ripple from './Ripple';
|
||||
import touchRippleClasses from './touchRippleClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
@@ -133,7 +133,7 @@ export const TouchRippleRipple = styled(Ripple, {
|
||||
* TODO v5: Make private
|
||||
*/
|
||||
const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiTouchRipple'
|
||||
});
|
||||
|
||||
-87
@@ -1,87 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["className", "raised"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import chainPropTypes from '@mui/utils/chainPropTypes';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import Paper from '../Paper';
|
||||
import { getCardUtilityClass } from './cardClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root']
|
||||
};
|
||||
return composeClasses(slots, getCardUtilityClass, classes);
|
||||
};
|
||||
const CardRoot = styled(Paper, {
|
||||
name: 'MuiCard',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
})(() => {
|
||||
return {
|
||||
overflow: 'hidden'
|
||||
};
|
||||
});
|
||||
const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiCard'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
raised = false
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
raised
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(CardRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
elevation: raised ? 8 : undefined,
|
||||
ref: ref,
|
||||
ownerState: ownerState
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Card.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 card will use raised styling.
|
||||
* @default false
|
||||
*/
|
||||
raised: chainPropTypes(PropTypes.bool, props => {
|
||||
if (props.raised && props.variant === 'outlined') {
|
||||
return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
/**
|
||||
* 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 Card;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getCardUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiCard', slot);
|
||||
}
|
||||
const cardClasses = generateUtilityClasses('MuiCard', ['root']);
|
||||
export default cardClasses;
|
||||
-120
@@ -1,120 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["children", "className", "focusVisibleClassName"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled from '../styles/styled';
|
||||
import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root'],
|
||||
focusHighlight: ['focusHighlight']
|
||||
};
|
||||
return composeClasses(slots, getCardActionAreaUtilityClass, classes);
|
||||
};
|
||||
const CardActionAreaRoot = styled(ButtonBase, {
|
||||
name: 'MuiCardActionArea',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
})(({
|
||||
theme
|
||||
}) => ({
|
||||
display: 'block',
|
||||
textAlign: 'inherit',
|
||||
borderRadius: 'inherit',
|
||||
// for Safari to work https://github.com/mui/material-ui/issues/36285.
|
||||
width: '100%',
|
||||
[`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
|
||||
opacity: (theme.vars || theme).palette.action.hoverOpacity,
|
||||
'@media (hover: none)': {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
[`&.${cardActionAreaClasses.focusVisible} .${cardActionAreaClasses.focusHighlight}`]: {
|
||||
opacity: (theme.vars || theme).palette.action.focusOpacity
|
||||
}
|
||||
}));
|
||||
const CardActionAreaFocusHighlight = styled('span', {
|
||||
name: 'MuiCardActionArea',
|
||||
slot: 'FocusHighlight',
|
||||
overridesResolver: (props, styles) => styles.focusHighlight
|
||||
})(({
|
||||
theme
|
||||
}) => ({
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
borderRadius: 'inherit',
|
||||
opacity: 0,
|
||||
backgroundColor: 'currentcolor',
|
||||
transition: theme.transitions.create('opacity', {
|
||||
duration: theme.transitions.duration.short
|
||||
})
|
||||
}));
|
||||
const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiCardActionArea'
|
||||
});
|
||||
const {
|
||||
children,
|
||||
className,
|
||||
focusVisibleClassName
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = props;
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsxs(CardActionAreaRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
|
||||
ref: ref,
|
||||
ownerState: ownerState
|
||||
}, other, {
|
||||
children: [children, /*#__PURE__*/_jsx(CardActionAreaFocusHighlight, {
|
||||
className: classes.focusHighlight,
|
||||
ownerState: ownerState
|
||||
})]
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? CardActionArea.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,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
focusVisibleClassName: 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 CardActionArea;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getCardActionAreaUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiCardActionArea', slot);
|
||||
}
|
||||
const cardActionAreaClasses = generateUtilityClasses('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
|
||||
export default cardActionAreaClasses;
|
||||
-91
@@ -1,91 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["disableSpacing", "className"];
|
||||
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 useThemeProps from '../styles/useThemeProps';
|
||||
import { getCardActionsUtilityClass } from './cardActionsClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disableSpacing
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', !disableSpacing && 'spacing']
|
||||
};
|
||||
return composeClasses(slots, getCardActionsUtilityClass, classes);
|
||||
};
|
||||
const CardActionsRoot = styled('div', {
|
||||
name: 'MuiCardActions',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, !ownerState.disableSpacing && styles.spacing];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 8
|
||||
}, !ownerState.disableSpacing && {
|
||||
'& > :not(style) ~ :not(style)': {
|
||||
marginLeft: 8
|
||||
}
|
||||
}));
|
||||
const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiCardActions'
|
||||
});
|
||||
const {
|
||||
disableSpacing = false,
|
||||
className
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
disableSpacing
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(CardActionsRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? CardActions.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 CardActions;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getCardActionsUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiCardActions', slot);
|
||||
}
|
||||
const cardActionsClasses = generateUtilityClasses('MuiCardActions', ['root', 'spacing']);
|
||||
export default cardActionsClasses;
|
||||
-83
@@ -1,83 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["className", "component"];
|
||||
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 useThemeProps from '../styles/useThemeProps';
|
||||
import { getCardContentUtilityClass } from './cardContentClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root']
|
||||
};
|
||||
return composeClasses(slots, getCardContentUtilityClass, classes);
|
||||
};
|
||||
const CardContentRoot = styled('div', {
|
||||
name: 'MuiCardContent',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
})(() => {
|
||||
return {
|
||||
padding: 16,
|
||||
'&:last-child': {
|
||||
paddingBottom: 24
|
||||
}
|
||||
};
|
||||
});
|
||||
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiCardContent'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
component = 'div'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
component
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(CardContentRoot, _extends({
|
||||
as: component,
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? CardContent.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 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 CardContent;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getCardContentUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiCardContent', slot);
|
||||
}
|
||||
const cardContentClasses = generateUtilityClasses('MuiCardContent', ['root']);
|
||||
export default cardContentClasses;
|
||||
-196
@@ -1,196 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import Typography from '../Typography';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled from '../styles/styled';
|
||||
import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root'],
|
||||
avatar: ['avatar'],
|
||||
action: ['action'],
|
||||
content: ['content'],
|
||||
title: ['title'],
|
||||
subheader: ['subheader']
|
||||
};
|
||||
return composeClasses(slots, getCardHeaderUtilityClass, classes);
|
||||
};
|
||||
const CardHeaderRoot = styled('div', {
|
||||
name: 'MuiCardHeader',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => _extends({
|
||||
[`& .${cardHeaderClasses.title}`]: styles.title,
|
||||
[`& .${cardHeaderClasses.subheader}`]: styles.subheader
|
||||
}, styles.root)
|
||||
})({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 16
|
||||
});
|
||||
const CardHeaderAvatar = styled('div', {
|
||||
name: 'MuiCardHeader',
|
||||
slot: 'Avatar',
|
||||
overridesResolver: (props, styles) => styles.avatar
|
||||
})({
|
||||
display: 'flex',
|
||||
flex: '0 0 auto',
|
||||
marginRight: 16
|
||||
});
|
||||
const CardHeaderAction = styled('div', {
|
||||
name: 'MuiCardHeader',
|
||||
slot: 'Action',
|
||||
overridesResolver: (props, styles) => styles.action
|
||||
})({
|
||||
flex: '0 0 auto',
|
||||
alignSelf: 'flex-start',
|
||||
marginTop: -4,
|
||||
marginRight: -8,
|
||||
marginBottom: -4
|
||||
});
|
||||
const CardHeaderContent = styled('div', {
|
||||
name: 'MuiCardHeader',
|
||||
slot: 'Content',
|
||||
overridesResolver: (props, styles) => styles.content
|
||||
})({
|
||||
flex: '1 1 auto'
|
||||
});
|
||||
const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiCardHeader'
|
||||
});
|
||||
const {
|
||||
action,
|
||||
avatar,
|
||||
className,
|
||||
component = 'div',
|
||||
disableTypography = false,
|
||||
subheader: subheaderProp,
|
||||
subheaderTypographyProps,
|
||||
title: titleProp,
|
||||
titleTypographyProps
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
component,
|
||||
disableTypography
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
let title = titleProp;
|
||||
if (title != null && title.type !== Typography && !disableTypography) {
|
||||
title = /*#__PURE__*/_jsx(Typography, _extends({
|
||||
variant: avatar ? 'body2' : 'h5',
|
||||
className: classes.title,
|
||||
component: "span",
|
||||
display: "block"
|
||||
}, titleTypographyProps, {
|
||||
children: title
|
||||
}));
|
||||
}
|
||||
let subheader = subheaderProp;
|
||||
if (subheader != null && subheader.type !== Typography && !disableTypography) {
|
||||
subheader = /*#__PURE__*/_jsx(Typography, _extends({
|
||||
variant: avatar ? 'body2' : 'body1',
|
||||
className: classes.subheader,
|
||||
color: "text.secondary",
|
||||
component: "span",
|
||||
display: "block"
|
||||
}, subheaderTypographyProps, {
|
||||
children: subheader
|
||||
}));
|
||||
}
|
||||
return /*#__PURE__*/_jsxs(CardHeaderRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
as: component,
|
||||
ref: ref,
|
||||
ownerState: ownerState
|
||||
}, other, {
|
||||
children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
|
||||
className: classes.avatar,
|
||||
ownerState: ownerState,
|
||||
children: avatar
|
||||
}), /*#__PURE__*/_jsxs(CardHeaderContent, {
|
||||
className: classes.content,
|
||||
ownerState: ownerState,
|
||||
children: [title, subheader]
|
||||
}), action && /*#__PURE__*/_jsx(CardHeaderAction, {
|
||||
className: classes.action,
|
||||
ownerState: ownerState,
|
||||
children: action
|
||||
})]
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? CardHeader.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 in the card header.
|
||||
*/
|
||||
action: PropTypes.node,
|
||||
/**
|
||||
* The Avatar element to display.
|
||||
*/
|
||||
avatar: PropTypes.node,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
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,
|
||||
/**
|
||||
* If `true`, `subheader` and `title` won't be wrapped by a Typography component.
|
||||
* This can be useful to render an alternative Typography variant by wrapping
|
||||
* the `title` text, and optional `subheader` text
|
||||
* with the Typography component.
|
||||
* @default false
|
||||
*/
|
||||
disableTypography: PropTypes.bool,
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
subheader: PropTypes.node,
|
||||
/**
|
||||
* These props will be forwarded to the subheader
|
||||
* (as long as disableTypography is not `true`).
|
||||
*/
|
||||
subheaderTypographyProps: PropTypes.object,
|
||||
/**
|
||||
* 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 content of the component.
|
||||
*/
|
||||
title: PropTypes.node,
|
||||
/**
|
||||
* These props will be forwarded to the title
|
||||
* (as long as disableTypography is not `true`).
|
||||
*/
|
||||
titleTypographyProps: PropTypes.object
|
||||
} : void 0;
|
||||
export default CardHeader;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getCardHeaderUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiCardHeader', slot);
|
||||
}
|
||||
const cardHeaderClasses = generateUtilityClasses('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
|
||||
export default cardHeaderClasses;
|
||||
-212
@@ -1,212 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import refType from '@mui/utils/refType';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import SwitchBase from '../internal/SwitchBase';
|
||||
import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
|
||||
import CheckBoxIcon from '../internal/svg-icons/CheckBox';
|
||||
import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
indeterminate,
|
||||
color,
|
||||
size
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`, `size${capitalize(size)}`]
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const CheckboxRoot = styled(SwitchBase, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiCheckbox',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
color: (theme.vars || theme).palette.text.secondary
|
||||
}, !ownerState.disableRipple && {
|
||||
'&:hover': {
|
||||
backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}, ownerState.color !== 'default' && {
|
||||
[`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
|
||||
color: (theme.vars || theme).palette[ownerState.color].main
|
||||
},
|
||||
[`&.${checkboxClasses.disabled}`]: {
|
||||
color: (theme.vars || theme).palette.action.disabled
|
||||
}
|
||||
}));
|
||||
const defaultCheckedIcon = /*#__PURE__*/_jsx(CheckBoxIcon, {});
|
||||
const defaultIcon = /*#__PURE__*/_jsx(CheckBoxOutlineBlankIcon, {});
|
||||
const defaultIndeterminateIcon = /*#__PURE__*/_jsx(IndeterminateCheckBoxIcon, {});
|
||||
const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
|
||||
var _icon$props$fontSize, _indeterminateIcon$pr;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiCheckbox'
|
||||
});
|
||||
const {
|
||||
checkedIcon = defaultCheckedIcon,
|
||||
color = 'primary',
|
||||
icon: iconProp = defaultIcon,
|
||||
indeterminate = false,
|
||||
indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
|
||||
inputProps,
|
||||
size = 'medium',
|
||||
className
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const icon = indeterminate ? indeterminateIconProp : iconProp;
|
||||
const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
|
||||
const ownerState = _extends({}, props, {
|
||||
color,
|
||||
indeterminate,
|
||||
size
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(CheckboxRoot, _extends({
|
||||
type: "checkbox",
|
||||
inputProps: _extends({
|
||||
'data-indeterminate': indeterminate
|
||||
}, inputProps),
|
||||
icon: /*#__PURE__*/React.cloneElement(icon, {
|
||||
fontSize: (_icon$props$fontSize = icon.props.fontSize) != null ? _icon$props$fontSize : size
|
||||
}),
|
||||
checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
|
||||
fontSize: (_indeterminateIcon$pr = indeterminateIcon.props.fontSize) != null ? _indeterminateIcon$pr : size
|
||||
}),
|
||||
ownerState: ownerState,
|
||||
ref: ref,
|
||||
className: clsx(classes.root, className)
|
||||
}, other, {
|
||||
classes: classes
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Checkbox.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* If `true`, the component is checked.
|
||||
*/
|
||||
checked: PropTypes.bool,
|
||||
/**
|
||||
* The icon to display when the component is checked.
|
||||
* @default <CheckBoxIcon />
|
||||
*/
|
||||
checkedIcon: 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', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
||||
/**
|
||||
* The default checked state. Use when the component is not controlled.
|
||||
*/
|
||||
defaultChecked: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the ripple effect is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disableRipple: PropTypes.bool,
|
||||
/**
|
||||
* The icon to display when the component is unchecked.
|
||||
* @default <CheckBoxOutlineBlankIcon />
|
||||
*/
|
||||
icon: PropTypes.node,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the component appears indeterminate.
|
||||
* This does not set the native input element to indeterminate due
|
||||
* to inconsistent behavior across browsers.
|
||||
* However, we set a `data-indeterminate` attribute on the `input`.
|
||||
* @default false
|
||||
*/
|
||||
indeterminate: PropTypes.bool,
|
||||
/**
|
||||
* The icon to display when the component is indeterminate.
|
||||
* @default <IndeterminateCheckBoxIcon />
|
||||
*/
|
||||
indeterminateIcon: PropTypes.node,
|
||||
/**
|
||||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
||||
*/
|
||||
inputProps: PropTypes.object,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* Callback fired when the state is changed.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
|
||||
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* If `true`, the `input` element is required.
|
||||
* @default false
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* The size of the component.
|
||||
* `small` is equivalent to the dense checkbox styling.
|
||||
* @default 'medium'
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), 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 value of the component. The DOM API casts this to a string.
|
||||
* The browser uses "on" as the default value.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
export default Checkbox;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getCheckboxUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiCheckbox', slot);
|
||||
}
|
||||
const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
|
||||
export default checkboxClasses;
|
||||
-506
@@ -1,506 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import CancelIcon from '../internal/svg-icons/Cancel';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import unsupportedProp from '../utils/unsupportedProp';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled from '../styles/styled';
|
||||
import chipClasses, { getChipUtilityClass } from './chipClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disabled,
|
||||
size,
|
||||
color,
|
||||
iconColor,
|
||||
onDelete,
|
||||
clickable,
|
||||
variant
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', variant, disabled && 'disabled', `size${capitalize(size)}`, `color${capitalize(color)}`, clickable && 'clickable', clickable && `clickableColor${capitalize(color)}`, onDelete && 'deletable', onDelete && `deletableColor${capitalize(color)}`, `${variant}${capitalize(color)}`],
|
||||
label: ['label', `label${capitalize(size)}`],
|
||||
avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
|
||||
icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(iconColor)}`],
|
||||
deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
|
||||
};
|
||||
return composeClasses(slots, getChipUtilityClass, classes);
|
||||
};
|
||||
const ChipRoot = styled('div', {
|
||||
name: 'MuiChip',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
const {
|
||||
color,
|
||||
iconColor,
|
||||
clickable,
|
||||
onDelete,
|
||||
size,
|
||||
variant
|
||||
} = ownerState;
|
||||
return [{
|
||||
[`& .${chipClasses.avatar}`]: styles.avatar
|
||||
}, {
|
||||
[`& .${chipClasses.avatar}`]: styles[`avatar${capitalize(size)}`]
|
||||
}, {
|
||||
[`& .${chipClasses.avatar}`]: styles[`avatarColor${capitalize(color)}`]
|
||||
}, {
|
||||
[`& .${chipClasses.icon}`]: styles.icon
|
||||
}, {
|
||||
[`& .${chipClasses.icon}`]: styles[`icon${capitalize(size)}`]
|
||||
}, {
|
||||
[`& .${chipClasses.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
|
||||
}, {
|
||||
[`& .${chipClasses.deleteIcon}`]: styles.deleteIcon
|
||||
}, {
|
||||
[`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(size)}`]
|
||||
}, {
|
||||
[`& .${chipClasses.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
|
||||
}, {
|
||||
[`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
|
||||
}, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
|
||||
return _extends({
|
||||
maxWidth: '100%',
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
fontSize: theme.typography.pxToRem(13),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 32,
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
backgroundColor: (theme.vars || theme).palette.action.selected,
|
||||
borderRadius: 32 / 2,
|
||||
whiteSpace: 'nowrap',
|
||||
transition: theme.transitions.create(['background-color', 'box-shadow']),
|
||||
// reset cursor explicitly in case ButtonBase is used
|
||||
cursor: 'unset',
|
||||
// We disable the focus ring for mouse, touch and keyboard users.
|
||||
outline: 0,
|
||||
textDecoration: 'none',
|
||||
border: 0,
|
||||
// Remove `button` border
|
||||
padding: 0,
|
||||
// Remove `button` padding
|
||||
verticalAlign: 'middle',
|
||||
boxSizing: 'border-box',
|
||||
[`&.${chipClasses.disabled}`]: {
|
||||
opacity: (theme.vars || theme).palette.action.disabledOpacity,
|
||||
pointerEvents: 'none'
|
||||
},
|
||||
[`& .${chipClasses.avatar}`]: {
|
||||
marginLeft: 5,
|
||||
marginRight: -6,
|
||||
width: 24,
|
||||
height: 24,
|
||||
color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
|
||||
fontSize: theme.typography.pxToRem(12)
|
||||
},
|
||||
[`& .${chipClasses.avatarColorPrimary}`]: {
|
||||
color: (theme.vars || theme).palette.primary.contrastText,
|
||||
backgroundColor: (theme.vars || theme).palette.primary.dark
|
||||
},
|
||||
[`& .${chipClasses.avatarColorSecondary}`]: {
|
||||
color: (theme.vars || theme).palette.secondary.contrastText,
|
||||
backgroundColor: (theme.vars || theme).palette.secondary.dark
|
||||
},
|
||||
[`& .${chipClasses.avatarSmall}`]: {
|
||||
marginLeft: 4,
|
||||
marginRight: -4,
|
||||
width: 18,
|
||||
height: 18,
|
||||
fontSize: theme.typography.pxToRem(10)
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: _extends({
|
||||
marginLeft: 5,
|
||||
marginRight: -6
|
||||
}, ownerState.size === 'small' && {
|
||||
fontSize: 18,
|
||||
marginLeft: 4,
|
||||
marginRight: -4
|
||||
}, ownerState.iconColor === ownerState.color && _extends({
|
||||
color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
|
||||
}, ownerState.color !== 'default' && {
|
||||
color: 'inherit'
|
||||
})),
|
||||
[`& .${chipClasses.deleteIcon}`]: _extends({
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
|
||||
fontSize: 22,
|
||||
cursor: 'pointer',
|
||||
margin: '0 5px 0 -6px',
|
||||
'&:hover': {
|
||||
color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
|
||||
}
|
||||
}, ownerState.size === 'small' && {
|
||||
fontSize: 16,
|
||||
marginRight: 4,
|
||||
marginLeft: -4
|
||||
}, ownerState.color !== 'default' && {
|
||||
color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
|
||||
'&:hover, &:active': {
|
||||
color: (theme.vars || theme).palette[ownerState.color].contrastText
|
||||
}
|
||||
})
|
||||
}, ownerState.size === 'small' && {
|
||||
height: 24
|
||||
}, ownerState.color !== 'default' && {
|
||||
backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
|
||||
color: (theme.vars || theme).palette[ownerState.color].contrastText
|
||||
}, ownerState.onDelete && {
|
||||
[`&.${chipClasses.focusVisible}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
|
||||
}
|
||||
}, ownerState.onDelete && ownerState.color !== 'default' && {
|
||||
[`&.${chipClasses.focusVisible}`]: {
|
||||
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
|
||||
}
|
||||
});
|
||||
}, ({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({}, ownerState.clickable && {
|
||||
userSelect: 'none',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
|
||||
},
|
||||
[`&.${chipClasses.focusVisible}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
|
||||
},
|
||||
'&:active': {
|
||||
boxShadow: (theme.vars || theme).shadows[1]
|
||||
}
|
||||
}, ownerState.clickable && ownerState.color !== 'default' && {
|
||||
[`&:hover, &.${chipClasses.focusVisible}`]: {
|
||||
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
|
||||
}
|
||||
}), ({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({}, ownerState.variant === 'outlined' && {
|
||||
backgroundColor: 'transparent',
|
||||
border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
|
||||
[`&.${chipClasses.clickable}:hover`]: {
|
||||
backgroundColor: (theme.vars || theme).palette.action.hover
|
||||
},
|
||||
[`&.${chipClasses.focusVisible}`]: {
|
||||
backgroundColor: (theme.vars || theme).palette.action.focus
|
||||
},
|
||||
[`& .${chipClasses.avatar}`]: {
|
||||
marginLeft: 4
|
||||
},
|
||||
[`& .${chipClasses.avatarSmall}`]: {
|
||||
marginLeft: 2
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
marginLeft: 4
|
||||
},
|
||||
[`& .${chipClasses.iconSmall}`]: {
|
||||
marginLeft: 2
|
||||
},
|
||||
[`& .${chipClasses.deleteIcon}`]: {
|
||||
marginRight: 5
|
||||
},
|
||||
[`& .${chipClasses.deleteIconSmall}`]: {
|
||||
marginRight: 3
|
||||
}
|
||||
}, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
|
||||
color: (theme.vars || theme).palette[ownerState.color].main,
|
||||
border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
|
||||
[`&.${chipClasses.clickable}:hover`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
|
||||
},
|
||||
[`&.${chipClasses.focusVisible}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
|
||||
},
|
||||
[`& .${chipClasses.deleteIcon}`]: {
|
||||
color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
|
||||
'&:hover, &:active': {
|
||||
color: (theme.vars || theme).palette[ownerState.color].main
|
||||
}
|
||||
}
|
||||
}));
|
||||
const ChipLabel = styled('span', {
|
||||
name: 'MuiChip',
|
||||
slot: 'Label',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
const {
|
||||
size
|
||||
} = ownerState;
|
||||
return [styles.label, styles[`label${capitalize(size)}`]];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
paddingLeft: 12,
|
||||
paddingRight: 12,
|
||||
whiteSpace: 'nowrap'
|
||||
}, ownerState.variant === 'outlined' && {
|
||||
paddingLeft: 11,
|
||||
paddingRight: 11
|
||||
}, ownerState.size === 'small' && {
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8
|
||||
}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
||||
paddingLeft: 7,
|
||||
paddingRight: 7
|
||||
}));
|
||||
function isDeleteKeyboardEvent(keyboardEvent) {
|
||||
return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
|
||||
}
|
||||
|
||||
/**
|
||||
* Chips represent complex entities in small blocks, such as a contact.
|
||||
*/
|
||||
const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiChip'
|
||||
});
|
||||
const {
|
||||
avatar: avatarProp,
|
||||
className,
|
||||
clickable: clickableProp,
|
||||
color = 'default',
|
||||
component: ComponentProp,
|
||||
deleteIcon: deleteIconProp,
|
||||
disabled = false,
|
||||
icon: iconProp,
|
||||
label,
|
||||
onClick,
|
||||
onDelete,
|
||||
onKeyDown,
|
||||
onKeyUp,
|
||||
size = 'medium',
|
||||
variant = 'filled',
|
||||
tabIndex,
|
||||
skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const chipRef = React.useRef(null);
|
||||
const handleRef = useForkRef(chipRef, ref);
|
||||
const handleDeleteIconClick = event => {
|
||||
// Stop the event from bubbling up to the `Chip`
|
||||
event.stopPropagation();
|
||||
if (onDelete) {
|
||||
onDelete(event);
|
||||
}
|
||||
};
|
||||
const handleKeyDown = event => {
|
||||
// Ignore events from children of `Chip`.
|
||||
if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
|
||||
// Will be handled in keyUp, otherwise some browsers
|
||||
// might init navigation
|
||||
event.preventDefault();
|
||||
}
|
||||
if (onKeyDown) {
|
||||
onKeyDown(event);
|
||||
}
|
||||
};
|
||||
const handleKeyUp = event => {
|
||||
// Ignore events from children of `Chip`.
|
||||
if (event.currentTarget === event.target) {
|
||||
if (onDelete && isDeleteKeyboardEvent(event)) {
|
||||
onDelete(event);
|
||||
} else if (event.key === 'Escape' && chipRef.current) {
|
||||
chipRef.current.blur();
|
||||
}
|
||||
}
|
||||
if (onKeyUp) {
|
||||
onKeyUp(event);
|
||||
}
|
||||
};
|
||||
const clickable = clickableProp !== false && onClick ? true : clickableProp;
|
||||
const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
|
||||
const ownerState = _extends({}, props, {
|
||||
component,
|
||||
disabled,
|
||||
size,
|
||||
color,
|
||||
iconColor: /*#__PURE__*/React.isValidElement(iconProp) ? iconProp.props.color || color : color,
|
||||
onDelete: !!onDelete,
|
||||
clickable,
|
||||
variant
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const moreProps = component === ButtonBase ? _extends({
|
||||
component: ComponentProp || 'div',
|
||||
focusVisibleClassName: classes.focusVisible
|
||||
}, onDelete && {
|
||||
disableRipple: true
|
||||
}) : {};
|
||||
let deleteIcon = null;
|
||||
if (onDelete) {
|
||||
deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
|
||||
className: clsx(deleteIconProp.props.className, classes.deleteIcon),
|
||||
onClick: handleDeleteIconClick
|
||||
})) : /*#__PURE__*/_jsx(CancelIcon, {
|
||||
className: clsx(classes.deleteIcon),
|
||||
onClick: handleDeleteIconClick
|
||||
});
|
||||
}
|
||||
let avatar = null;
|
||||
if (avatarProp && /*#__PURE__*/React.isValidElement(avatarProp)) {
|
||||
avatar = /*#__PURE__*/React.cloneElement(avatarProp, {
|
||||
className: clsx(classes.avatar, avatarProp.props.className)
|
||||
});
|
||||
}
|
||||
let icon = null;
|
||||
if (iconProp && /*#__PURE__*/React.isValidElement(iconProp)) {
|
||||
icon = /*#__PURE__*/React.cloneElement(iconProp, {
|
||||
className: clsx(classes.icon, iconProp.props.className)
|
||||
});
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (avatar && icon) {
|
||||
console.error('MUI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/_jsxs(ChipRoot, _extends({
|
||||
as: component,
|
||||
className: clsx(classes.root, className),
|
||||
disabled: clickable && disabled ? true : undefined,
|
||||
onClick: onClick,
|
||||
onKeyDown: handleKeyDown,
|
||||
onKeyUp: handleKeyUp,
|
||||
ref: handleRef,
|
||||
tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
|
||||
ownerState: ownerState
|
||||
}, moreProps, other, {
|
||||
children: [avatar || icon, /*#__PURE__*/_jsx(ChipLabel, {
|
||||
className: clsx(classes.label),
|
||||
ownerState: ownerState,
|
||||
children: label
|
||||
}), deleteIcon]
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Chip.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 Avatar element to display.
|
||||
*/
|
||||
avatar: PropTypes.element,
|
||||
/**
|
||||
* 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,
|
||||
/**
|
||||
* If `true`, the chip will appear clickable, and will raise when pressed,
|
||||
* even if the onClick prop is not defined.
|
||||
* If `false`, the chip will not appear clickable, even if onClick prop is defined.
|
||||
* This can be used, for example,
|
||||
* along with the component prop to indicate an anchor Chip is clickable.
|
||||
* Note: this controls the UI and does not affect the onClick event.
|
||||
*/
|
||||
clickable: PropTypes.bool,
|
||||
/**
|
||||
* 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,
|
||||
/**
|
||||
* Override the default delete icon element. Shown only if `onDelete` is set.
|
||||
*/
|
||||
deleteIcon: PropTypes.element,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* Icon element.
|
||||
*/
|
||||
icon: PropTypes.element,
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
label: PropTypes.node,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onClick: PropTypes.func,
|
||||
/**
|
||||
* Callback fired when the delete icon is clicked.
|
||||
* If set, the delete icon will be shown.
|
||||
*/
|
||||
onDelete: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyDown: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyUp: PropTypes.func,
|
||||
/**
|
||||
* The size of the component.
|
||||
* @default 'medium'
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
||||
/**
|
||||
* If `true`, allows the disabled chip to escape focus.
|
||||
* If `false`, allows the disabled chip to receive focus.
|
||||
* @default false
|
||||
*/
|
||||
skipFocusWhenDisabled: 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]),
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
tabIndex: PropTypes.number,
|
||||
/**
|
||||
* The variant to use.
|
||||
* @default 'filled'
|
||||
*/
|
||||
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.string])
|
||||
} : void 0;
|
||||
export default Chip;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getChipUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiChip', slot);
|
||||
}
|
||||
const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
|
||||
export default chipClasses;
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import SystemDefaultPropsProvider, { useDefaultProps as useSystemDefaultProps } from '@mui/system/DefaultPropsProvider';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
function DefaultPropsProvider(props) {
|
||||
return /*#__PURE__*/_jsx(SystemDefaultPropsProvider, _extends({}, props));
|
||||
}
|
||||
process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
|
||||
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
||||
// │ These PropTypes are generated from the TypeScript type definitions. │
|
||||
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
value: PropTypes.object.isRequired
|
||||
} : void 0;
|
||||
export default DefaultPropsProvider;
|
||||
export function useDefaultProps(params) {
|
||||
return useSystemDefaultProps(params);
|
||||
}
|
||||
-401
@@ -1,401 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import useId from '@mui/utils/useId';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import Modal from '../Modal';
|
||||
import Fade from '../Fade';
|
||||
import Paper from '../Paper';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled from '../styles/styled';
|
||||
import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
|
||||
import DialogContext from './DialogContext';
|
||||
import Backdrop from '../Backdrop';
|
||||
import useTheme from '../styles/useTheme';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const DialogBackdrop = styled(Backdrop, {
|
||||
name: 'MuiDialog',
|
||||
slot: 'Backdrop',
|
||||
overrides: (props, styles) => styles.backdrop
|
||||
})({
|
||||
// Improve scrollable dialog support.
|
||||
zIndex: -1
|
||||
});
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
scroll,
|
||||
maxWidth,
|
||||
fullWidth,
|
||||
fullScreen
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root'],
|
||||
container: ['container', `scroll${capitalize(scroll)}`],
|
||||
paper: ['paper', `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']
|
||||
};
|
||||
return composeClasses(slots, getDialogUtilityClass, classes);
|
||||
};
|
||||
const DialogRoot = styled(Modal, {
|
||||
name: 'MuiDialog',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
})({
|
||||
'@media print': {
|
||||
// Use !important to override the Modal inline-style.
|
||||
position: 'absolute !important'
|
||||
}
|
||||
});
|
||||
const DialogContainer = styled('div', {
|
||||
name: 'MuiDialog',
|
||||
slot: 'Container',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.container, styles[`scroll${capitalize(ownerState.scroll)}`]];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
height: '100%',
|
||||
'@media print': {
|
||||
height: 'auto'
|
||||
},
|
||||
// We disable the focus ring for mouse, touch and keyboard users.
|
||||
outline: 0
|
||||
}, ownerState.scroll === 'paper' && {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}, ownerState.scroll === 'body' && {
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
textAlign: 'center',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'middle',
|
||||
height: '100%',
|
||||
width: '0'
|
||||
}
|
||||
}));
|
||||
const DialogPaper = styled(Paper, {
|
||||
name: 'MuiDialog',
|
||||
slot: 'Paper',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.paper, styles[`scrollPaper${capitalize(ownerState.scroll)}`], styles[`paperWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles.paperFullWidth, ownerState.fullScreen && styles.paperFullScreen];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
margin: 32,
|
||||
position: 'relative',
|
||||
overflowY: 'auto',
|
||||
// Fix IE11 issue, to remove at some point.
|
||||
'@media print': {
|
||||
overflowY: 'visible',
|
||||
boxShadow: 'none'
|
||||
}
|
||||
}, ownerState.scroll === 'paper' && {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
maxHeight: 'calc(100% - 64px)'
|
||||
}, ownerState.scroll === 'body' && {
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'middle',
|
||||
textAlign: 'left' // 'initial' doesn't work on IE11
|
||||
}, !ownerState.maxWidth && {
|
||||
maxWidth: 'calc(100% - 64px)'
|
||||
}, ownerState.maxWidth === 'xs' && {
|
||||
maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `max(${theme.breakpoints.values.xs}${theme.breakpoints.unit}, 444px)`,
|
||||
[`&.${dialogClasses.paperScrollBody}`]: {
|
||||
[theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {
|
||||
maxWidth: 'calc(100% - 64px)'
|
||||
}
|
||||
}
|
||||
}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
|
||||
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
|
||||
[`&.${dialogClasses.paperScrollBody}`]: {
|
||||
[theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
|
||||
maxWidth: 'calc(100% - 64px)'
|
||||
}
|
||||
}
|
||||
}, ownerState.fullWidth && {
|
||||
width: 'calc(100% - 64px)'
|
||||
}, ownerState.fullScreen && {
|
||||
margin: 0,
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
height: '100%',
|
||||
maxHeight: 'none',
|
||||
borderRadius: 0,
|
||||
[`&.${dialogClasses.paperScrollBody}`]: {
|
||||
margin: 0,
|
||||
maxWidth: '100%'
|
||||
}
|
||||
}));
|
||||
|
||||
/**
|
||||
* Dialogs are overlaid modal paper based components with a backdrop.
|
||||
*/
|
||||
const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiDialog'
|
||||
});
|
||||
const theme = useTheme();
|
||||
const defaultTransitionDuration = {
|
||||
enter: theme.transitions.duration.enteringScreen,
|
||||
exit: theme.transitions.duration.leavingScreen
|
||||
};
|
||||
const {
|
||||
'aria-describedby': ariaDescribedby,
|
||||
'aria-labelledby': ariaLabelledbyProp,
|
||||
BackdropComponent,
|
||||
BackdropProps,
|
||||
children,
|
||||
className,
|
||||
disableEscapeKeyDown = false,
|
||||
fullScreen = false,
|
||||
fullWidth = false,
|
||||
maxWidth = 'sm',
|
||||
onBackdropClick,
|
||||
onClick,
|
||||
onClose,
|
||||
open,
|
||||
PaperComponent = Paper,
|
||||
PaperProps = {},
|
||||
scroll = 'paper',
|
||||
TransitionComponent = Fade,
|
||||
transitionDuration = defaultTransitionDuration,
|
||||
TransitionProps
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
disableEscapeKeyDown,
|
||||
fullScreen,
|
||||
fullWidth,
|
||||
maxWidth,
|
||||
scroll
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const backdropClick = React.useRef();
|
||||
const handleMouseDown = event => {
|
||||
// We don't want to close the dialog when clicking the dialog content.
|
||||
// Make sure the event starts and ends on the same DOM element.
|
||||
backdropClick.current = event.target === event.currentTarget;
|
||||
};
|
||||
const handleBackdropClick = event => {
|
||||
if (onClick) {
|
||||
onClick(event);
|
||||
}
|
||||
|
||||
// Ignore the events not coming from the "backdrop".
|
||||
if (!backdropClick.current) {
|
||||
return;
|
||||
}
|
||||
backdropClick.current = null;
|
||||
if (onBackdropClick) {
|
||||
onBackdropClick(event);
|
||||
}
|
||||
if (onClose) {
|
||||
onClose(event, 'backdropClick');
|
||||
}
|
||||
};
|
||||
const ariaLabelledby = useId(ariaLabelledbyProp);
|
||||
const dialogContextValue = React.useMemo(() => {
|
||||
return {
|
||||
titleId: ariaLabelledby
|
||||
};
|
||||
}, [ariaLabelledby]);
|
||||
return /*#__PURE__*/_jsx(DialogRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
closeAfterTransition: true,
|
||||
components: {
|
||||
Backdrop: DialogBackdrop
|
||||
},
|
||||
componentsProps: {
|
||||
backdrop: _extends({
|
||||
transitionDuration,
|
||||
as: BackdropComponent
|
||||
}, BackdropProps)
|
||||
},
|
||||
disableEscapeKeyDown: disableEscapeKeyDown,
|
||||
onClose: onClose,
|
||||
open: open,
|
||||
ref: ref,
|
||||
onClick: handleBackdropClick,
|
||||
ownerState: ownerState
|
||||
}, other, {
|
||||
children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
|
||||
appear: true,
|
||||
in: open,
|
||||
timeout: transitionDuration,
|
||||
role: "presentation"
|
||||
}, TransitionProps, {
|
||||
children: /*#__PURE__*/_jsx(DialogContainer, {
|
||||
className: clsx(classes.container),
|
||||
onMouseDown: handleMouseDown,
|
||||
ownerState: ownerState,
|
||||
children: /*#__PURE__*/_jsx(DialogPaper, _extends({
|
||||
as: PaperComponent,
|
||||
elevation: 24,
|
||||
role: "dialog",
|
||||
"aria-describedby": ariaDescribedby,
|
||||
"aria-labelledby": ariaLabelledby
|
||||
}, PaperProps, {
|
||||
className: clsx(classes.paper, PaperProps.className),
|
||||
ownerState: ownerState,
|
||||
children: /*#__PURE__*/_jsx(DialogContext.Provider, {
|
||||
value: dialogContextValue,
|
||||
children: children
|
||||
})
|
||||
}))
|
||||
})
|
||||
}))
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Dialog.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 id(s) of the element(s) that describe the dialog.
|
||||
*/
|
||||
'aria-describedby': PropTypes.string,
|
||||
/**
|
||||
* The id(s) of the element(s) that label the dialog.
|
||||
*/
|
||||
'aria-labelledby': PropTypes.string,
|
||||
/**
|
||||
* A backdrop component. This prop enables custom backdrop rendering.
|
||||
* @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
|
||||
* Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
|
||||
* @default styled(Backdrop, {
|
||||
* name: 'MuiModal',
|
||||
* slot: 'Backdrop',
|
||||
* overridesResolver: (props, styles) => {
|
||||
* return styles.backdrop;
|
||||
* },
|
||||
* })({
|
||||
* zIndex: -1,
|
||||
* })
|
||||
*/
|
||||
BackdropComponent: PropTypes.elementType,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
BackdropProps: PropTypes.object,
|
||||
/**
|
||||
* Dialog children, usually the included sub-components.
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* If `true`, hitting escape will not fire the `onClose` callback.
|
||||
* @default false
|
||||
*/
|
||||
disableEscapeKeyDown: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the dialog is full-screen.
|
||||
* @default false
|
||||
*/
|
||||
fullScreen: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the dialog stretches to `maxWidth`.
|
||||
*
|
||||
* Notice that the dialog width grow is limited by the default margin.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth: PropTypes.bool,
|
||||
/**
|
||||
* Determine the max-width of the dialog.
|
||||
* The dialog width grows with the size of the screen.
|
||||
* Set to `false` to disable `maxWidth`.
|
||||
* @default 'sm'
|
||||
*/
|
||||
maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
|
||||
/**
|
||||
* Callback fired when the backdrop is clicked.
|
||||
* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
|
||||
*/
|
||||
onBackdropClick: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onClick: PropTypes.func,
|
||||
/**
|
||||
* Callback fired when the component requests to be closed.
|
||||
*
|
||||
* @param {object} event The event source of the callback.
|
||||
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
|
||||
*/
|
||||
onClose: PropTypes.func,
|
||||
/**
|
||||
* If `true`, the component is shown.
|
||||
*/
|
||||
open: PropTypes.bool.isRequired,
|
||||
/**
|
||||
* The component used to render the body of the dialog.
|
||||
* @default Paper
|
||||
*/
|
||||
PaperComponent: PropTypes.elementType,
|
||||
/**
|
||||
* Props applied to the [`Paper`](/material-ui/api/paper/) element.
|
||||
* @default {}
|
||||
*/
|
||||
PaperProps: PropTypes.object,
|
||||
/**
|
||||
* Determine the container for scrolling the dialog.
|
||||
* @default 'paper'
|
||||
*/
|
||||
scroll: PropTypes.oneOf(['body', 'paper']),
|
||||
/**
|
||||
* 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.
|
||||
* @default {
|
||||
* enter: theme.transitions.duration.enteringScreen,
|
||||
* exit: theme.transitions.duration.leavingScreen,
|
||||
* }
|
||||
*/
|
||||
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
||||
appear: PropTypes.number,
|
||||
enter: PropTypes.number,
|
||||
exit: PropTypes.number
|
||||
})]),
|
||||
/**
|
||||
* Props applied to the transition element.
|
||||
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
|
||||
*/
|
||||
TransitionProps: PropTypes.object
|
||||
} : void 0;
|
||||
export default Dialog;
|
||||
-6
@@ -1,6 +0,0 @@
|
||||
import * as React from 'react';
|
||||
const DialogContext = /*#__PURE__*/React.createContext({});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
DialogContext.displayName = 'DialogContext';
|
||||
}
|
||||
export default DialogContext;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getDialogUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiDialog', slot);
|
||||
}
|
||||
const dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
|
||||
export default dialogClasses;
|
||||
-93
@@ -1,93 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
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 '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { getDialogActionsUtilityClass } from './dialogActionsClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disableSpacing
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', !disableSpacing && 'spacing']
|
||||
};
|
||||
return composeClasses(slots, getDialogActionsUtilityClass, classes);
|
||||
};
|
||||
const DialogActionsRoot = styled('div', {
|
||||
name: 'MuiDialogActions',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, !ownerState.disableSpacing && styles.spacing];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 8,
|
||||
justifyContent: 'flex-end',
|
||||
flex: '0 0 auto'
|
||||
}, !ownerState.disableSpacing && {
|
||||
'& > :not(style) ~ :not(style)': {
|
||||
marginLeft: 8
|
||||
}
|
||||
}));
|
||||
const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiDialogActions'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
disableSpacing = false
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
disableSpacing
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(DialogActionsRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? DialogActions.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 DialogActions;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getDialogActionsUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiDialogActions', slot);
|
||||
}
|
||||
const dialogActionsClasses = generateUtilityClasses('MuiDialogActions', ['root', 'spacing']);
|
||||
export default dialogActionsClasses;
|
||||
-99
@@ -1,99 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className", "dividers"];
|
||||
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 useThemeProps from '../styles/useThemeProps';
|
||||
import { getDialogContentUtilityClass } from './dialogContentClasses';
|
||||
import dialogTitleClasses from '../DialogTitle/dialogTitleClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
dividers
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', dividers && 'dividers']
|
||||
};
|
||||
return composeClasses(slots, getDialogContentUtilityClass, classes);
|
||||
};
|
||||
const DialogContentRoot = styled('div', {
|
||||
name: 'MuiDialogContent',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.dividers && styles.dividers];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
flex: '1 1 auto',
|
||||
// Add iOS momentum scrolling for iOS < 13.0
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
overflowY: 'auto',
|
||||
padding: '20px 24px'
|
||||
}, ownerState.dividers ? {
|
||||
padding: '16px 24px',
|
||||
borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
|
||||
} : {
|
||||
[`.${dialogTitleClasses.root} + &`]: {
|
||||
paddingTop: 0
|
||||
}
|
||||
}));
|
||||
const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiDialogContent'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
dividers = false
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
dividers
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(DialogContentRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? DialogContent.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,
|
||||
/**
|
||||
* Display the top and bottom dividers.
|
||||
* @default false
|
||||
*/
|
||||
dividers: 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 DialogContent;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getDialogContentUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiDialogContent', slot);
|
||||
}
|
||||
const dialogContentClasses = generateUtilityClasses('MuiDialogContent', ['root', 'dividers']);
|
||||
export default dialogContentClasses;
|
||||
-74
@@ -1,74 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["children", "className"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import Typography from '../Typography';
|
||||
import { getDialogContentTextUtilityClass } from './dialogContentTextClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root']
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getDialogContentTextUtilityClass, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const DialogContentTextRoot = styled(Typography, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiDialogContentText',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
})({});
|
||||
const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiDialogContentText'
|
||||
});
|
||||
const {
|
||||
className
|
||||
} = props,
|
||||
ownerState = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
|
||||
component: "p",
|
||||
variant: "body1",
|
||||
color: "text.secondary",
|
||||
ref: ref,
|
||||
ownerState: ownerState,
|
||||
className: clsx(classes.root, className)
|
||||
}, props, {
|
||||
classes: classes
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? DialogContentText.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 DialogContentText;
|
||||
Generated
Vendored
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getDialogContentTextUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiDialogContentText', slot);
|
||||
}
|
||||
const dialogContentTextClasses = generateUtilityClasses('MuiDialogContentText', ['root']);
|
||||
export default dialogContentTextClasses;
|
||||
-83
@@ -1,83 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["className", "id"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import Typography from '../Typography';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { getDialogTitleUtilityClass } from './dialogTitleClasses';
|
||||
import DialogContext from '../Dialog/DialogContext';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root']
|
||||
};
|
||||
return composeClasses(slots, getDialogTitleUtilityClass, classes);
|
||||
};
|
||||
const DialogTitleRoot = styled(Typography, {
|
||||
name: 'MuiDialogTitle',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
})({
|
||||
padding: '16px 24px',
|
||||
flex: '0 0 auto'
|
||||
});
|
||||
const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiDialogTitle'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
id: idProp
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = props;
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const {
|
||||
titleId = idProp
|
||||
} = React.useContext(DialogContext);
|
||||
return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
|
||||
component: "h2",
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref,
|
||||
variant: "h6",
|
||||
id: idProp != null ? idProp : titleId
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? DialogTitle.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,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
id: 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 DialogTitle;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getDialogTitleUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiDialogTitle', slot);
|
||||
}
|
||||
const dialogTitleClasses = generateUtilityClasses('MuiDialogTitle', ['root']);
|
||||
export default dialogTitleClasses;
|
||||
+2
-1
@@ -7,6 +7,7 @@ import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Transition } from 'react-transition-group';
|
||||
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
|
||||
import getReactElementRef from '@mui/utils/getReactElementRef';
|
||||
import useTheme from '../styles/useTheme';
|
||||
import { reflow, getTransitionProps } from '../transitions/utils';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
@@ -50,7 +51,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const enableStrictModeCompat = true;
|
||||
const nodeRef = React.useRef(null);
|
||||
const handleRef = useForkRef(nodeRef, children.ref, ref);
|
||||
const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
|
||||
const normalizedTransitionCallback = callback => maybeIsAppearing => {
|
||||
if (callback) {
|
||||
const node = nodeRef.current;
|
||||
|
||||
-429
@@ -1,429 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
|
||||
import * as React from 'react';
|
||||
import deepmerge from '@mui/utils/deepmerge';
|
||||
import refType from '@mui/utils/refType';
|
||||
import PropTypes from 'prop-types';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import InputBase from '../InputBase';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses';
|
||||
import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disableUnderline
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', !disableUnderline && 'underline'],
|
||||
input: ['input']
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getFilledInputUtilityClass, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const FilledInputRoot = styled(InputBaseRoot, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiFilledInput',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [...inputBaseRootOverridesResolver(props, styles), !ownerState.disableUnderline && styles.underline];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
var _palette;
|
||||
const light = theme.palette.mode === 'light';
|
||||
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
||||
const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
|
||||
const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
|
||||
const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
|
||||
return _extends({
|
||||
position: 'relative',
|
||||
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
|
||||
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
|
||||
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
|
||||
transition: theme.transitions.create('background-color', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
easing: theme.transitions.easing.easeOut
|
||||
}),
|
||||
'&:hover': {
|
||||
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground,
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
|
||||
}
|
||||
},
|
||||
[`&.${filledInputClasses.focused}`]: {
|
||||
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
|
||||
},
|
||||
[`&.${filledInputClasses.disabled}`]: {
|
||||
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
|
||||
}
|
||||
}, !ownerState.disableUnderline && {
|
||||
'&::after': {
|
||||
borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'scaleX(0)',
|
||||
transition: theme.transitions.create('transform', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
easing: theme.transitions.easing.easeOut
|
||||
}),
|
||||
pointerEvents: 'none' // Transparent to the hover style.
|
||||
},
|
||||
[`&.${filledInputClasses.focused}:after`]: {
|
||||
// translateX(0) is a workaround for Safari transform scale bug
|
||||
// See https://github.com/mui/material-ui/issues/31766
|
||||
transform: 'scaleX(1) translateX(0)'
|
||||
},
|
||||
[`&.${filledInputClasses.error}`]: {
|
||||
'&::before, &::after': {
|
||||
borderBottomColor: (theme.vars || theme).palette.error.main
|
||||
}
|
||||
},
|
||||
'&::before': {
|
||||
borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
content: '"\\00a0"',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transition: theme.transitions.create('border-bottom-color', {
|
||||
duration: theme.transitions.duration.shorter
|
||||
}),
|
||||
pointerEvents: 'none' // Transparent to the hover style.
|
||||
},
|
||||
[`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
|
||||
borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
|
||||
},
|
||||
[`&.${filledInputClasses.disabled}:before`]: {
|
||||
borderBottomStyle: 'dotted'
|
||||
}
|
||||
}, ownerState.startAdornment && {
|
||||
paddingLeft: 12
|
||||
}, ownerState.endAdornment && {
|
||||
paddingRight: 12
|
||||
}, ownerState.multiline && _extends({
|
||||
padding: '25px 12px 8px'
|
||||
}, ownerState.size === 'small' && {
|
||||
paddingTop: 21,
|
||||
paddingBottom: 4
|
||||
}, ownerState.hiddenLabel && {
|
||||
paddingTop: 16,
|
||||
paddingBottom: 17
|
||||
}, ownerState.hiddenLabel && ownerState.size === 'small' && {
|
||||
paddingTop: 8,
|
||||
paddingBottom: 9
|
||||
}));
|
||||
});
|
||||
const FilledInputInput = styled(InputBaseInput, {
|
||||
name: 'MuiFilledInput',
|
||||
slot: 'Input',
|
||||
overridesResolver: inputBaseInputOverridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
paddingTop: 25,
|
||||
paddingRight: 12,
|
||||
paddingBottom: 8,
|
||||
paddingLeft: 12
|
||||
}, !theme.vars && {
|
||||
'&:-webkit-autofill': {
|
||||
WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
|
||||
WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
|
||||
caretColor: theme.palette.mode === 'light' ? null : '#fff',
|
||||
borderTopLeftRadius: 'inherit',
|
||||
borderTopRightRadius: 'inherit'
|
||||
}
|
||||
}, theme.vars && {
|
||||
'&:-webkit-autofill': {
|
||||
borderTopLeftRadius: 'inherit',
|
||||
borderTopRightRadius: 'inherit'
|
||||
},
|
||||
[theme.getColorSchemeSelector('dark')]: {
|
||||
'&:-webkit-autofill': {
|
||||
WebkitBoxShadow: '0 0 0 100px #266798 inset',
|
||||
WebkitTextFillColor: '#fff',
|
||||
caretColor: '#fff'
|
||||
}
|
||||
}
|
||||
}, ownerState.size === 'small' && {
|
||||
paddingTop: 21,
|
||||
paddingBottom: 4
|
||||
}, ownerState.hiddenLabel && {
|
||||
paddingTop: 16,
|
||||
paddingBottom: 17
|
||||
}, ownerState.startAdornment && {
|
||||
paddingLeft: 0
|
||||
}, ownerState.endAdornment && {
|
||||
paddingRight: 0
|
||||
}, ownerState.hiddenLabel && ownerState.size === 'small' && {
|
||||
paddingTop: 8,
|
||||
paddingBottom: 9
|
||||
}, ownerState.multiline && {
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0
|
||||
}));
|
||||
const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
|
||||
var _ref, _slots$root, _ref2, _slots$input;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiFilledInput'
|
||||
});
|
||||
const {
|
||||
components = {},
|
||||
componentsProps: componentsPropsProp,
|
||||
fullWidth = false,
|
||||
// declare here to prevent spreading to DOM
|
||||
inputComponent = 'input',
|
||||
multiline = false,
|
||||
slotProps,
|
||||
slots = {},
|
||||
type = 'text'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
fullWidth,
|
||||
inputComponent,
|
||||
multiline,
|
||||
type
|
||||
});
|
||||
const classes = useUtilityClasses(props);
|
||||
const filledInputComponentsProps = {
|
||||
root: {
|
||||
ownerState
|
||||
},
|
||||
input: {
|
||||
ownerState
|
||||
}
|
||||
};
|
||||
const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(filledInputComponentsProps, slotProps != null ? slotProps : componentsPropsProp) : filledInputComponentsProps;
|
||||
const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
|
||||
const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
|
||||
return /*#__PURE__*/_jsx(InputBase, _extends({
|
||||
slots: {
|
||||
root: RootSlot,
|
||||
input: InputSlot
|
||||
},
|
||||
componentsProps: componentsProps,
|
||||
fullWidth: fullWidth,
|
||||
inputComponent: inputComponent,
|
||||
multiline: multiline,
|
||||
ref: ref,
|
||||
type: type
|
||||
}, other, {
|
||||
classes: classes
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? FilledInput.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 helps users to fill forms faster, especially on mobile devices.
|
||||
* The name can be confusing, as it's more like an autofill.
|
||||
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
||||
*/
|
||||
autoComplete: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the `input` element is focused during the first mount.
|
||||
*/
|
||||
autoFocus: PropTypes.bool,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* 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).
|
||||
* The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
Input: 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({
|
||||
input: PropTypes.object,
|
||||
root: PropTypes.object
|
||||
}),
|
||||
/**
|
||||
* The default value. Use when the component is not controlled.
|
||||
*/
|
||||
defaultValue: PropTypes.any,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the input will not have an underline.
|
||||
*/
|
||||
disableUnderline: PropTypes.bool,
|
||||
/**
|
||||
* End `InputAdornment` for this component.
|
||||
*/
|
||||
endAdornment: PropTypes.node,
|
||||
/**
|
||||
* If `true`, the `input` will indicate an error.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` will take up the full width of its container.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is hidden.
|
||||
* This is used to increase density for a `FilledInput`.
|
||||
* Be sure to add `aria-label` to the `input` element.
|
||||
* @default false
|
||||
*/
|
||||
hiddenLabel: PropTypes.bool,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: PropTypes.string,
|
||||
/**
|
||||
* The component used for the `input` element.
|
||||
* Either a string to use a HTML element or a component.
|
||||
* @default 'input'
|
||||
*/
|
||||
inputComponent: PropTypes.elementType,
|
||||
/**
|
||||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
||||
* @default {}
|
||||
*/
|
||||
inputProps: PropTypes.object,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
* The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
margin: PropTypes.oneOf(['dense', 'none']),
|
||||
/**
|
||||
* Maximum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* Minimum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
|
||||
* @default false
|
||||
*/
|
||||
multiline: PropTypes.bool,
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when the value is changed.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* The short hint displayed in the `input` before the user enters a value.
|
||||
*/
|
||||
placeholder: PropTypes.string,
|
||||
/**
|
||||
* It prevents the user from changing the value of the field
|
||||
* (not from interacting with the field).
|
||||
*/
|
||||
readOnly: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` element is required.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* Number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
input: PropTypes.object,
|
||||
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({
|
||||
input: PropTypes.elementType,
|
||||
root: PropTypes.elementType
|
||||
}),
|
||||
/**
|
||||
* Start `InputAdornment` for this component.
|
||||
*/
|
||||
startAdornment: PropTypes.node,
|
||||
/**
|
||||
* 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]),
|
||||
/**
|
||||
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
|
||||
* @default 'text'
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
/**
|
||||
* The value of the `input` element, required for a controlled component.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
FilledInput.muiName = 'Input';
|
||||
export default FilledInput;
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
import { inputBaseClasses } from '../InputBase';
|
||||
export function getFilledInputUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiFilledInput', slot);
|
||||
}
|
||||
const filledInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
|
||||
export default filledInputClasses;
|
||||
-290
@@ -1,290 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled from '../styles/styled';
|
||||
import { isFilled, isAdornedStart } from '../InputBase/utils';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import isMuiElement from '../utils/isMuiElement';
|
||||
import FormControlContext from './FormControlContext';
|
||||
import { getFormControlUtilityClasses } from './formControlClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
margin,
|
||||
fullWidth
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
|
||||
};
|
||||
return composeClasses(slots, getFormControlUtilityClasses, classes);
|
||||
};
|
||||
const FormControlRoot = styled('div', {
|
||||
name: 'MuiFormControl',
|
||||
slot: 'Root',
|
||||
overridesResolver: ({
|
||||
ownerState
|
||||
}, styles) => {
|
||||
return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
// Reset fieldset default style.
|
||||
minWidth: 0,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
border: 0,
|
||||
verticalAlign: 'top'
|
||||
}, ownerState.margin === 'normal' && {
|
||||
marginTop: 16,
|
||||
marginBottom: 8
|
||||
}, ownerState.margin === 'dense' && {
|
||||
marginTop: 8,
|
||||
marginBottom: 4
|
||||
}, ownerState.fullWidth && {
|
||||
width: '100%'
|
||||
}));
|
||||
|
||||
/**
|
||||
* Provides context such as filled/focused/error/required for form inputs.
|
||||
* Relying on the context provides high flexibility and ensures that the state always stays
|
||||
* consistent across the children of the `FormControl`.
|
||||
* This context is used by the following components:
|
||||
*
|
||||
* - FormLabel
|
||||
* - FormHelperText
|
||||
* - Input
|
||||
* - InputLabel
|
||||
*
|
||||
* You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
|
||||
*
|
||||
* ```jsx
|
||||
* <FormControl>
|
||||
* <InputLabel htmlFor="my-input">Email address</InputLabel>
|
||||
* <Input id="my-input" aria-describedby="my-helper-text" />
|
||||
* <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
|
||||
* </FormControl>
|
||||
* ```
|
||||
*
|
||||
* ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
|
||||
* For instance, only one input can be focused at the same time, the state shouldn't be shared.
|
||||
*/
|
||||
const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiFormControl'
|
||||
});
|
||||
const {
|
||||
children,
|
||||
className,
|
||||
color = 'primary',
|
||||
component = 'div',
|
||||
disabled = false,
|
||||
error = false,
|
||||
focused: visuallyFocused,
|
||||
fullWidth = false,
|
||||
hiddenLabel = false,
|
||||
margin = 'none',
|
||||
required = false,
|
||||
size = 'medium',
|
||||
variant = 'outlined'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
color,
|
||||
component,
|
||||
disabled,
|
||||
error,
|
||||
fullWidth,
|
||||
hiddenLabel,
|
||||
margin,
|
||||
required,
|
||||
size,
|
||||
variant
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const [adornedStart, setAdornedStart] = React.useState(() => {
|
||||
// We need to iterate through the children and find the Input in order
|
||||
// to fully support server-side rendering.
|
||||
let initialAdornedStart = false;
|
||||
if (children) {
|
||||
React.Children.forEach(children, child => {
|
||||
if (!isMuiElement(child, ['Input', 'Select'])) {
|
||||
return;
|
||||
}
|
||||
const input = isMuiElement(child, ['Select']) ? child.props.input : child;
|
||||
if (input && isAdornedStart(input.props)) {
|
||||
initialAdornedStart = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return initialAdornedStart;
|
||||
});
|
||||
const [filled, setFilled] = React.useState(() => {
|
||||
// We need to iterate through the children and find the Input in order
|
||||
// to fully support server-side rendering.
|
||||
let initialFilled = false;
|
||||
if (children) {
|
||||
React.Children.forEach(children, child => {
|
||||
if (!isMuiElement(child, ['Input', 'Select'])) {
|
||||
return;
|
||||
}
|
||||
if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
|
||||
initialFilled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return initialFilled;
|
||||
});
|
||||
const [focusedState, setFocused] = React.useState(false);
|
||||
if (disabled && focusedState) {
|
||||
setFocused(false);
|
||||
}
|
||||
const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
|
||||
let registerEffect;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const registeredInput = React.useRef(false);
|
||||
registerEffect = () => {
|
||||
if (registeredInput.current) {
|
||||
console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
|
||||
}
|
||||
registeredInput.current = true;
|
||||
return () => {
|
||||
registeredInput.current = false;
|
||||
};
|
||||
};
|
||||
}
|
||||
const childContext = React.useMemo(() => {
|
||||
return {
|
||||
adornedStart,
|
||||
setAdornedStart,
|
||||
color,
|
||||
disabled,
|
||||
error,
|
||||
filled,
|
||||
focused,
|
||||
fullWidth,
|
||||
hiddenLabel,
|
||||
size,
|
||||
onBlur: () => {
|
||||
setFocused(false);
|
||||
},
|
||||
onEmpty: () => {
|
||||
setFilled(false);
|
||||
},
|
||||
onFilled: () => {
|
||||
setFilled(true);
|
||||
},
|
||||
onFocus: () => {
|
||||
setFocused(true);
|
||||
},
|
||||
registerEffect,
|
||||
required,
|
||||
variant
|
||||
};
|
||||
}, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
|
||||
return /*#__PURE__*/_jsx(FormControlContext.Provider, {
|
||||
value: childContext,
|
||||
children: /*#__PURE__*/_jsx(FormControlRoot, _extends({
|
||||
as: component,
|
||||
ownerState: ownerState,
|
||||
className: clsx(classes.root, className),
|
||||
ref: ref
|
||||
}, other, {
|
||||
children: children
|
||||
}))
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? FormControl.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(['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,
|
||||
/**
|
||||
* If `true`, the label, input and helper text should be displayed in a disabled state.
|
||||
* @default false
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is displayed in an error state.
|
||||
* @default false
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the component is displayed in focused state.
|
||||
*/
|
||||
focused: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the component will take up the full width of its container.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is hidden.
|
||||
* This is used to increase density for a `FilledInput`.
|
||||
* Be sure to add `aria-label` to the `input` element.
|
||||
* @default false
|
||||
*/
|
||||
hiddenLabel: PropTypes.bool,
|
||||
/**
|
||||
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
|
||||
* @default 'none'
|
||||
*/
|
||||
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
|
||||
/**
|
||||
* If `true`, the label will indicate that the `input` is required.
|
||||
* @default false
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* The size of the component.
|
||||
* @default 'medium'
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), 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 variant to use.
|
||||
* @default 'outlined'
|
||||
*/
|
||||
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
||||
} : void 0;
|
||||
export default FormControl;
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
import * as React from 'react';
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
const FormControlContext = /*#__PURE__*/React.createContext(undefined);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
FormControlContext.displayName = 'FormControlContext';
|
||||
}
|
||||
export default FormControlContext;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getFormControlUtilityClasses(slot) {
|
||||
return generateUtilityClass('MuiFormControl', slot);
|
||||
}
|
||||
const formControlClasses = generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
|
||||
export default formControlClasses;
|
||||
-15
@@ -1,15 +0,0 @@
|
||||
export default function formControlState({
|
||||
props,
|
||||
states,
|
||||
muiFormControl
|
||||
}) {
|
||||
return states.reduce((acc, state) => {
|
||||
acc[state] = props[state];
|
||||
if (muiFormControl) {
|
||||
if (typeof props[state] === 'undefined') {
|
||||
acc[state] = muiFormControl[state];
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import FormControlContext from './FormControlContext';
|
||||
export default function useFormControl() {
|
||||
return React.useContext(FormControlContext);
|
||||
}
|
||||
-245
@@ -1,245 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import refType from '@mui/utils/refType';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { useFormControl } from '../FormControl';
|
||||
import Stack from '../Stack';
|
||||
import Typography from '../Typography';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
|
||||
import formControlState from '../FormControl/formControlState';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disabled,
|
||||
labelPlacement,
|
||||
error,
|
||||
required
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],
|
||||
label: ['label', disabled && 'disabled'],
|
||||
asterisk: ['asterisk', error && 'error']
|
||||
};
|
||||
return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
|
||||
};
|
||||
export const FormControlLabelRoot = styled('label', {
|
||||
name: 'MuiFormControlLabel',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [{
|
||||
[`& .${formControlLabelClasses.label}`]: styles.label
|
||||
}, styles.root, styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`]];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
// For correct alignment with the text.
|
||||
verticalAlign: 'middle',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
marginLeft: -11,
|
||||
marginRight: 16,
|
||||
// used for row presentation of radio/checkbox
|
||||
[`&.${formControlLabelClasses.disabled}`]: {
|
||||
cursor: 'default'
|
||||
}
|
||||
}, ownerState.labelPlacement === 'start' && {
|
||||
flexDirection: 'row-reverse',
|
||||
marginLeft: 16,
|
||||
// used for row presentation of radio/checkbox
|
||||
marginRight: -11
|
||||
}, ownerState.labelPlacement === 'top' && {
|
||||
flexDirection: 'column-reverse',
|
||||
marginLeft: 16
|
||||
}, ownerState.labelPlacement === 'bottom' && {
|
||||
flexDirection: 'column',
|
||||
marginLeft: 16
|
||||
}, {
|
||||
[`& .${formControlLabelClasses.label}`]: {
|
||||
[`&.${formControlLabelClasses.disabled}`]: {
|
||||
color: (theme.vars || theme).palette.text.disabled
|
||||
}
|
||||
}
|
||||
}));
|
||||
const AsteriskComponent = styled('span', {
|
||||
name: 'MuiFormControlLabel',
|
||||
slot: 'Asterisk',
|
||||
overridesResolver: (props, styles) => styles.asterisk
|
||||
})(({
|
||||
theme
|
||||
}) => ({
|
||||
[`&.${formControlLabelClasses.error}`]: {
|
||||
color: (theme.vars || theme).palette.error.main
|
||||
}
|
||||
}));
|
||||
|
||||
/**
|
||||
* Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
|
||||
* Use this component if you want to display an extra label.
|
||||
*/
|
||||
const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
|
||||
var _ref, _slotProps$typography;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiFormControlLabel'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
componentsProps = {},
|
||||
control,
|
||||
disabled: disabledProp,
|
||||
disableTypography,
|
||||
label: labelProp,
|
||||
labelPlacement = 'end',
|
||||
required: requiredProp,
|
||||
slotProps = {}
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const muiFormControl = useFormControl();
|
||||
const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
|
||||
const required = requiredProp != null ? requiredProp : control.props.required;
|
||||
const controlProps = {
|
||||
disabled,
|
||||
required
|
||||
};
|
||||
['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
|
||||
if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
|
||||
controlProps[key] = props[key];
|
||||
}
|
||||
});
|
||||
const fcs = formControlState({
|
||||
props,
|
||||
muiFormControl,
|
||||
states: ['error']
|
||||
});
|
||||
const ownerState = _extends({}, props, {
|
||||
disabled,
|
||||
labelPlacement,
|
||||
required,
|
||||
error: fcs.error
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
|
||||
let label = labelProp;
|
||||
if (label != null && label.type !== Typography && !disableTypography) {
|
||||
label = /*#__PURE__*/_jsx(Typography, _extends({
|
||||
component: "span"
|
||||
}, typographySlotProps, {
|
||||
className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
|
||||
children: label
|
||||
}));
|
||||
}
|
||||
return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other, {
|
||||
children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
|
||||
display: "block",
|
||||
children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
|
||||
ownerState: ownerState,
|
||||
"aria-hidden": true,
|
||||
className: classes.asterisk,
|
||||
children: ["\u2009", '*']
|
||||
})]
|
||||
}) : label]
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? FormControlLabel.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* If `true`, the component appears selected.
|
||||
*/
|
||||
checked: PropTypes.bool,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The props used for each slot inside.
|
||||
* @default {}
|
||||
*/
|
||||
componentsProps: PropTypes.shape({
|
||||
typography: PropTypes.object
|
||||
}),
|
||||
/**
|
||||
* A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
|
||||
*/
|
||||
control: PropTypes.element.isRequired,
|
||||
/**
|
||||
* If `true`, the control is disabled.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is rendered as it is passed without an additional typography node.
|
||||
*/
|
||||
disableTypography: PropTypes.bool,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* A text or an element to be used in an enclosing label element.
|
||||
*/
|
||||
label: PropTypes.node,
|
||||
/**
|
||||
* The position of the label.
|
||||
* @default 'end'
|
||||
*/
|
||||
labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when the state is changed.
|
||||
*
|
||||
* @param {React.SyntheticEvent} event The event source of the callback.
|
||||
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* If `true`, the label will indicate that the `input` is required.
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* The props used for each slot inside.
|
||||
* @default {}
|
||||
*/
|
||||
slotProps: PropTypes.shape({
|
||||
typography: PropTypes.object
|
||||
}),
|
||||
/**
|
||||
* 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 component.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
export default FormControlLabel;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getFormControlLabelUtilityClasses(slot) {
|
||||
return generateUtilityClass('MuiFormControlLabel', slot);
|
||||
}
|
||||
const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
|
||||
export default formControlLabelClasses;
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className", "row"];
|
||||
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 useThemeProps from '../styles/useThemeProps';
|
||||
import { getFormGroupUtilityClass } from './formGroupClasses';
|
||||
import useFormControl from '../FormControl/useFormControl';
|
||||
import formControlState from '../FormControl/formControlState';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
row,
|
||||
error
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', row && 'row', error && 'error']
|
||||
};
|
||||
return composeClasses(slots, getFormGroupUtilityClass, classes);
|
||||
};
|
||||
const FormGroupRoot = styled('div', {
|
||||
name: 'MuiFormGroup',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.row && styles.row];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexWrap: 'wrap'
|
||||
}, ownerState.row && {
|
||||
flexDirection: 'row'
|
||||
}));
|
||||
|
||||
/**
|
||||
* `FormGroup` wraps controls such as `Checkbox` and `Switch`.
|
||||
* It provides compact row layout.
|
||||
* For the `Radio`, you should be using the `RadioGroup` component instead of this one.
|
||||
*/
|
||||
const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiFormGroup'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
row = false
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const muiFormControl = useFormControl();
|
||||
const fcs = formControlState({
|
||||
props,
|
||||
muiFormControl,
|
||||
states: ['error']
|
||||
});
|
||||
const ownerState = _extends({}, props, {
|
||||
row,
|
||||
error: fcs.error
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(FormGroupRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? FormGroup.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,
|
||||
/**
|
||||
* Display group of elements in a compact row.
|
||||
* @default false
|
||||
*/
|
||||
row: 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 FormGroup;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getFormGroupUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiFormGroup', slot);
|
||||
}
|
||||
const formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
|
||||
export default formGroupClasses;
|
||||
-165
@@ -1,165 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import formControlState from '../FormControl/formControlState';
|
||||
import useFormControl from '../FormControl/useFormControl';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import styled from '../styles/styled';
|
||||
import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses';
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
color,
|
||||
focused,
|
||||
disabled,
|
||||
error,
|
||||
filled,
|
||||
required
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
|
||||
asterisk: ['asterisk', error && 'error']
|
||||
};
|
||||
return composeClasses(slots, getFormLabelUtilityClasses, classes);
|
||||
};
|
||||
export const FormLabelRoot = styled('label', {
|
||||
name: 'MuiFormLabel',
|
||||
slot: 'Root',
|
||||
overridesResolver: ({
|
||||
ownerState
|
||||
}, styles) => {
|
||||
return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
color: (theme.vars || theme).palette.text.secondary
|
||||
}, theme.typography.body1, {
|
||||
lineHeight: '1.4375em',
|
||||
padding: 0,
|
||||
position: 'relative',
|
||||
[`&.${formLabelClasses.focused}`]: {
|
||||
color: (theme.vars || theme).palette[ownerState.color].main
|
||||
},
|
||||
[`&.${formLabelClasses.disabled}`]: {
|
||||
color: (theme.vars || theme).palette.text.disabled
|
||||
},
|
||||
[`&.${formLabelClasses.error}`]: {
|
||||
color: (theme.vars || theme).palette.error.main
|
||||
}
|
||||
}));
|
||||
const AsteriskComponent = styled('span', {
|
||||
name: 'MuiFormLabel',
|
||||
slot: 'Asterisk',
|
||||
overridesResolver: (props, styles) => styles.asterisk
|
||||
})(({
|
||||
theme
|
||||
}) => ({
|
||||
[`&.${formLabelClasses.error}`]: {
|
||||
color: (theme.vars || theme).palette.error.main
|
||||
}
|
||||
}));
|
||||
const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiFormLabel'
|
||||
});
|
||||
const {
|
||||
children,
|
||||
className,
|
||||
component = 'label'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const muiFormControl = useFormControl();
|
||||
const fcs = formControlState({
|
||||
props,
|
||||
muiFormControl,
|
||||
states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
|
||||
});
|
||||
const ownerState = _extends({}, props, {
|
||||
color: fcs.color || 'primary',
|
||||
component,
|
||||
disabled: fcs.disabled,
|
||||
error: fcs.error,
|
||||
filled: fcs.filled,
|
||||
focused: fcs.focused,
|
||||
required: fcs.required
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsxs(FormLabelRoot, _extends({
|
||||
as: component,
|
||||
ownerState: ownerState,
|
||||
className: clsx(classes.root, className),
|
||||
ref: ref
|
||||
}, other, {
|
||||
children: [children, fcs.required && /*#__PURE__*/_jsxs(AsteriskComponent, {
|
||||
ownerState: ownerState,
|
||||
"aria-hidden": true,
|
||||
className: classes.asterisk,
|
||||
children: ["\u2009", '*']
|
||||
})]
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? FormLabel.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).
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', '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,
|
||||
/**
|
||||
* If `true`, the label should be displayed in a disabled state.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is displayed in an error state.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label should use filled classes key.
|
||||
*/
|
||||
filled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the input of this label is focused (used by `FormGroup` components).
|
||||
*/
|
||||
focused: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label will indicate that the `input` is required.
|
||||
*/
|
||||
required: 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 FormLabel;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getFormLabelUtilityClasses(slot) {
|
||||
return generateUtilityClass('MuiFormLabel', slot);
|
||||
}
|
||||
const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
|
||||
export default formLabelClasses;
|
||||
-26
@@ -1,26 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { GlobalStyles as SystemGlobalStyles } from '@mui/system';
|
||||
import defaultTheme from '../styles/defaultTheme';
|
||||
import THEME_ID from '../styles/identifier';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
function GlobalStyles(props) {
|
||||
return /*#__PURE__*/_jsx(SystemGlobalStyles, _extends({}, props, {
|
||||
defaultTheme: defaultTheme,
|
||||
themeId: THEME_ID
|
||||
}));
|
||||
}
|
||||
process.env.NODE_ENV !== "production" ? GlobalStyles.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 styles you want to apply globally.
|
||||
*/
|
||||
styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
|
||||
} : void 0;
|
||||
export default GlobalStyles;
|
||||
-569
@@ -1,569 +0,0 @@
|
||||
'use client';
|
||||
|
||||
// A grid component using the following libs as inspiration.
|
||||
//
|
||||
// For the implementation:
|
||||
// - https://getbootstrap.com/docs/4.3/layout/grid/
|
||||
// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css
|
||||
// - https://github.com/roylee0704/react-flexbox-grid
|
||||
// - https://material.angularjs.org/latest/layout/introduction
|
||||
//
|
||||
// Follow this flexbox Guide to better understand the underlying model:
|
||||
// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import { handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
|
||||
import { extendSxProp } from '@mui/system/styleFunctionSx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import requirePropFactory from '../utils/requirePropFactory';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import useTheme from '../styles/useTheme';
|
||||
import GridContext from './GridContext';
|
||||
import gridClasses, { getGridUtilityClass } from './gridClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
function getOffset(val) {
|
||||
const parse = parseFloat(val);
|
||||
return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
|
||||
}
|
||||
export function generateGrid({
|
||||
theme,
|
||||
ownerState
|
||||
}) {
|
||||
let size;
|
||||
return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
|
||||
// Use side effect over immutability for better performance.
|
||||
let styles = {};
|
||||
if (ownerState[breakpoint]) {
|
||||
size = ownerState[breakpoint];
|
||||
}
|
||||
if (!size) {
|
||||
return globalStyles;
|
||||
}
|
||||
if (size === true) {
|
||||
// For the auto layouting
|
||||
styles = {
|
||||
flexBasis: 0,
|
||||
flexGrow: 1,
|
||||
maxWidth: '100%'
|
||||
};
|
||||
} else if (size === 'auto') {
|
||||
styles = {
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 0,
|
||||
flexShrink: 0,
|
||||
maxWidth: 'none',
|
||||
width: 'auto'
|
||||
};
|
||||
} else {
|
||||
const columnsBreakpointValues = resolveBreakpointValues({
|
||||
values: ownerState.columns,
|
||||
breakpoints: theme.breakpoints.values
|
||||
});
|
||||
const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
|
||||
if (columnValue === undefined || columnValue === null) {
|
||||
return globalStyles;
|
||||
}
|
||||
// Keep 7 significant numbers.
|
||||
const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
|
||||
let more = {};
|
||||
if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
|
||||
const themeSpacing = theme.spacing(ownerState.columnSpacing);
|
||||
if (themeSpacing !== '0px') {
|
||||
const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
|
||||
more = {
|
||||
flexBasis: fullWidth,
|
||||
maxWidth: fullWidth
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Close to the bootstrap implementation:
|
||||
// https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
|
||||
styles = _extends({
|
||||
flexBasis: width,
|
||||
flexGrow: 0,
|
||||
maxWidth: width
|
||||
}, more);
|
||||
}
|
||||
|
||||
// No need for a media query for the first size.
|
||||
if (theme.breakpoints.values[breakpoint] === 0) {
|
||||
Object.assign(globalStyles, styles);
|
||||
} else {
|
||||
globalStyles[theme.breakpoints.up(breakpoint)] = styles;
|
||||
}
|
||||
return globalStyles;
|
||||
}, {});
|
||||
}
|
||||
export function generateDirection({
|
||||
theme,
|
||||
ownerState
|
||||
}) {
|
||||
const directionValues = resolveBreakpointValues({
|
||||
values: ownerState.direction,
|
||||
breakpoints: theme.breakpoints.values
|
||||
});
|
||||
return handleBreakpoints({
|
||||
theme
|
||||
}, directionValues, propValue => {
|
||||
const output = {
|
||||
flexDirection: propValue
|
||||
};
|
||||
if (propValue.indexOf('column') === 0) {
|
||||
output[`& > .${gridClasses.item}`] = {
|
||||
maxWidth: 'none'
|
||||
};
|
||||
}
|
||||
return output;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts zero value breakpoint keys before a non-zero value breakpoint key.
|
||||
* @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
|
||||
* @returns [xs, sm]
|
||||
*/
|
||||
function extractZeroValueBreakpointKeys({
|
||||
breakpoints,
|
||||
values
|
||||
}) {
|
||||
let nonZeroKey = '';
|
||||
Object.keys(values).forEach(key => {
|
||||
if (nonZeroKey !== '') {
|
||||
return;
|
||||
}
|
||||
if (values[key] !== 0) {
|
||||
nonZeroKey = key;
|
||||
}
|
||||
});
|
||||
const sortedBreakpointKeysByValue = Object.keys(breakpoints).sort((a, b) => {
|
||||
return breakpoints[a] - breakpoints[b];
|
||||
});
|
||||
return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
|
||||
}
|
||||
export function generateRowGap({
|
||||
theme,
|
||||
ownerState
|
||||
}) {
|
||||
const {
|
||||
container,
|
||||
rowSpacing
|
||||
} = ownerState;
|
||||
let styles = {};
|
||||
if (container && rowSpacing !== 0) {
|
||||
const rowSpacingValues = resolveBreakpointValues({
|
||||
values: rowSpacing,
|
||||
breakpoints: theme.breakpoints.values
|
||||
});
|
||||
let zeroValueBreakpointKeys;
|
||||
if (typeof rowSpacingValues === 'object') {
|
||||
zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
|
||||
breakpoints: theme.breakpoints.values,
|
||||
values: rowSpacingValues
|
||||
});
|
||||
}
|
||||
styles = handleBreakpoints({
|
||||
theme
|
||||
}, rowSpacingValues, (propValue, breakpoint) => {
|
||||
var _zeroValueBreakpointK;
|
||||
const themeSpacing = theme.spacing(propValue);
|
||||
if (themeSpacing !== '0px') {
|
||||
return {
|
||||
marginTop: `-${getOffset(themeSpacing)}`,
|
||||
[`& > .${gridClasses.item}`]: {
|
||||
paddingTop: getOffset(themeSpacing)
|
||||
}
|
||||
};
|
||||
}
|
||||
if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
marginTop: 0,
|
||||
[`& > .${gridClasses.item}`]: {
|
||||
paddingTop: 0
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
export function generateColumnGap({
|
||||
theme,
|
||||
ownerState
|
||||
}) {
|
||||
const {
|
||||
container,
|
||||
columnSpacing
|
||||
} = ownerState;
|
||||
let styles = {};
|
||||
if (container && columnSpacing !== 0) {
|
||||
const columnSpacingValues = resolveBreakpointValues({
|
||||
values: columnSpacing,
|
||||
breakpoints: theme.breakpoints.values
|
||||
});
|
||||
let zeroValueBreakpointKeys;
|
||||
if (typeof columnSpacingValues === 'object') {
|
||||
zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
|
||||
breakpoints: theme.breakpoints.values,
|
||||
values: columnSpacingValues
|
||||
});
|
||||
}
|
||||
styles = handleBreakpoints({
|
||||
theme
|
||||
}, columnSpacingValues, (propValue, breakpoint) => {
|
||||
var _zeroValueBreakpointK2;
|
||||
const themeSpacing = theme.spacing(propValue);
|
||||
if (themeSpacing !== '0px') {
|
||||
return {
|
||||
width: `calc(100% + ${getOffset(themeSpacing)})`,
|
||||
marginLeft: `-${getOffset(themeSpacing)}`,
|
||||
[`& > .${gridClasses.item}`]: {
|
||||
paddingLeft: getOffset(themeSpacing)
|
||||
}
|
||||
};
|
||||
}
|
||||
if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
width: '100%',
|
||||
marginLeft: 0,
|
||||
[`& > .${gridClasses.item}`]: {
|
||||
paddingLeft: 0
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
export function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
|
||||
// undefined/null or `spacing` <= 0
|
||||
if (!spacing || spacing <= 0) {
|
||||
return [];
|
||||
}
|
||||
// in case of string/number `spacing`
|
||||
if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
|
||||
return [styles[`spacing-xs-${String(spacing)}`]];
|
||||
}
|
||||
// in case of object `spacing`
|
||||
const spacingStyles = [];
|
||||
breakpoints.forEach(breakpoint => {
|
||||
const value = spacing[breakpoint];
|
||||
if (Number(value) > 0) {
|
||||
spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
|
||||
}
|
||||
});
|
||||
return spacingStyles;
|
||||
}
|
||||
|
||||
// Default CSS values
|
||||
// flex: '0 1 auto',
|
||||
// flexDirection: 'row',
|
||||
// alignItems: 'flex-start',
|
||||
// flexWrap: 'nowrap',
|
||||
// justifyContent: 'flex-start',
|
||||
const GridRoot = styled('div', {
|
||||
name: 'MuiGrid',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
const {
|
||||
container,
|
||||
direction,
|
||||
item,
|
||||
spacing,
|
||||
wrap,
|
||||
zeroMinWidth,
|
||||
breakpoints
|
||||
} = ownerState;
|
||||
let spacingStyles = [];
|
||||
|
||||
// in case of grid item
|
||||
if (container) {
|
||||
spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
|
||||
}
|
||||
const breakpointsStyles = [];
|
||||
breakpoints.forEach(breakpoint => {
|
||||
const value = ownerState[breakpoint];
|
||||
if (value) {
|
||||
breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
|
||||
}
|
||||
});
|
||||
return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
boxSizing: 'border-box'
|
||||
}, ownerState.container && {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%'
|
||||
}, ownerState.item && {
|
||||
margin: 0 // For instance, it's useful when used with a `figure` element.
|
||||
}, ownerState.zeroMinWidth && {
|
||||
minWidth: 0
|
||||
}, ownerState.wrap !== 'wrap' && {
|
||||
flexWrap: ownerState.wrap
|
||||
}), generateDirection, generateRowGap, generateColumnGap, generateGrid);
|
||||
export function resolveSpacingClasses(spacing, breakpoints) {
|
||||
// undefined/null or `spacing` <= 0
|
||||
if (!spacing || spacing <= 0) {
|
||||
return [];
|
||||
}
|
||||
// in case of string/number `spacing`
|
||||
if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
|
||||
return [`spacing-xs-${String(spacing)}`];
|
||||
}
|
||||
// in case of object `spacing`
|
||||
const classes = [];
|
||||
breakpoints.forEach(breakpoint => {
|
||||
const value = spacing[breakpoint];
|
||||
if (Number(value) > 0) {
|
||||
const className = `spacing-${breakpoint}-${String(value)}`;
|
||||
classes.push(className);
|
||||
}
|
||||
});
|
||||
return classes;
|
||||
}
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
container,
|
||||
direction,
|
||||
item,
|
||||
spacing,
|
||||
wrap,
|
||||
zeroMinWidth,
|
||||
breakpoints
|
||||
} = ownerState;
|
||||
let spacingClasses = [];
|
||||
|
||||
// in case of grid item
|
||||
if (container) {
|
||||
spacingClasses = resolveSpacingClasses(spacing, breakpoints);
|
||||
}
|
||||
const breakpointsClasses = [];
|
||||
breakpoints.forEach(breakpoint => {
|
||||
const value = ownerState[breakpoint];
|
||||
if (value) {
|
||||
breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
|
||||
}
|
||||
});
|
||||
const slots = {
|
||||
root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
|
||||
};
|
||||
return composeClasses(slots, getGridUtilityClass, classes);
|
||||
};
|
||||
const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
|
||||
const themeProps = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiGrid'
|
||||
});
|
||||
const {
|
||||
breakpoints
|
||||
} = useTheme();
|
||||
const props = extendSxProp(themeProps);
|
||||
const {
|
||||
className,
|
||||
columns: columnsProp,
|
||||
columnSpacing: columnSpacingProp,
|
||||
component = 'div',
|
||||
container = false,
|
||||
direction = 'row',
|
||||
item = false,
|
||||
rowSpacing: rowSpacingProp,
|
||||
spacing = 0,
|
||||
wrap = 'wrap',
|
||||
zeroMinWidth = false
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const rowSpacing = rowSpacingProp || spacing;
|
||||
const columnSpacing = columnSpacingProp || spacing;
|
||||
const columnsContext = React.useContext(GridContext);
|
||||
|
||||
// columns set with default breakpoint unit of 12
|
||||
const columns = container ? columnsProp || 12 : columnsContext;
|
||||
const breakpointsValues = {};
|
||||
const otherFiltered = _extends({}, other);
|
||||
breakpoints.keys.forEach(breakpoint => {
|
||||
if (other[breakpoint] != null) {
|
||||
breakpointsValues[breakpoint] = other[breakpoint];
|
||||
delete otherFiltered[breakpoint];
|
||||
}
|
||||
});
|
||||
const ownerState = _extends({}, props, {
|
||||
columns,
|
||||
container,
|
||||
direction,
|
||||
item,
|
||||
rowSpacing,
|
||||
columnSpacing,
|
||||
wrap,
|
||||
zeroMinWidth,
|
||||
spacing
|
||||
}, breakpointsValues, {
|
||||
breakpoints: breakpoints.keys
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(GridContext.Provider, {
|
||||
value: columns,
|
||||
children: /*#__PURE__*/_jsx(GridRoot, _extends({
|
||||
ownerState: ownerState,
|
||||
className: clsx(classes.root, className),
|
||||
as: component,
|
||||
ref: ref
|
||||
}, otherFiltered))
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Grid.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 number of columns.
|
||||
* @default 12
|
||||
*/
|
||||
columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
|
||||
/**
|
||||
* Defines the horizontal space between the type `item` components.
|
||||
* It overrides the value of the `spacing` prop.
|
||||
*/
|
||||
columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a HTML element or a component.
|
||||
*/
|
||||
component: PropTypes.elementType,
|
||||
/**
|
||||
* If `true`, the component will have the flex *container* behavior.
|
||||
* You should be wrapping *items* with a *container*.
|
||||
* @default false
|
||||
*/
|
||||
container: PropTypes.bool,
|
||||
/**
|
||||
* Defines the `flex-direction` style property.
|
||||
* It is applied for all screen sizes.
|
||||
* @default 'row'
|
||||
*/
|
||||
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
||||
/**
|
||||
* If `true`, the component will have the flex *item* behavior.
|
||||
* You should be wrapping *items* with a *container*.
|
||||
* @default false
|
||||
*/
|
||||
item: PropTypes.bool,
|
||||
/**
|
||||
* If a number, it sets the number of columns the grid item uses.
|
||||
* It can't be greater than the total number of columns of the container (12 by default).
|
||||
* If 'auto', the grid item's width matches its content.
|
||||
* If false, the prop is ignored.
|
||||
* If true, the grid item's width grows to use the space available in the grid container.
|
||||
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
|
||||
* @default false
|
||||
*/
|
||||
lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
|
||||
/**
|
||||
* If a number, it sets the number of columns the grid item uses.
|
||||
* It can't be greater than the total number of columns of the container (12 by default).
|
||||
* If 'auto', the grid item's width matches its content.
|
||||
* If false, the prop is ignored.
|
||||
* If true, the grid item's width grows to use the space available in the grid container.
|
||||
* The value is applied for the `md` breakpoint and wider screens if not overridden.
|
||||
* @default false
|
||||
*/
|
||||
md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
|
||||
/**
|
||||
* Defines the vertical space between the type `item` components.
|
||||
* It overrides the value of the `spacing` prop.
|
||||
*/
|
||||
rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
||||
/**
|
||||
* If a number, it sets the number of columns the grid item uses.
|
||||
* It can't be greater than the total number of columns of the container (12 by default).
|
||||
* If 'auto', the grid item's width matches its content.
|
||||
* If false, the prop is ignored.
|
||||
* If true, the grid item's width grows to use the space available in the grid container.
|
||||
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
|
||||
* @default false
|
||||
*/
|
||||
sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
|
||||
/**
|
||||
* Defines the space between the type `item` components.
|
||||
* It can only be used on a type `container` component.
|
||||
* @default 0
|
||||
*/
|
||||
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, 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]),
|
||||
/**
|
||||
* Defines the `flex-wrap` style property.
|
||||
* It's applied for all screen sizes.
|
||||
* @default 'wrap'
|
||||
*/
|
||||
wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
|
||||
/**
|
||||
* If a number, it sets the number of columns the grid item uses.
|
||||
* It can't be greater than the total number of columns of the container (12 by default).
|
||||
* If 'auto', the grid item's width matches its content.
|
||||
* If false, the prop is ignored.
|
||||
* If true, the grid item's width grows to use the space available in the grid container.
|
||||
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
|
||||
* @default false
|
||||
*/
|
||||
xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
|
||||
/**
|
||||
* If a number, it sets the number of columns the grid item uses.
|
||||
* It can't be greater than the total number of columns of the container (12 by default).
|
||||
* If 'auto', the grid item's width matches its content.
|
||||
* If false, the prop is ignored.
|
||||
* If true, the grid item's width grows to use the space available in the grid container.
|
||||
* The value is applied for all the screen sizes with the lowest priority.
|
||||
* @default false
|
||||
*/
|
||||
xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
|
||||
/**
|
||||
* If `true`, it sets `min-width: 0` on the item.
|
||||
* Refer to the limitations section of the documentation to better understand the use case.
|
||||
* @default false
|
||||
*/
|
||||
zeroMinWidth: PropTypes.bool
|
||||
} : void 0;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const requireProp = requirePropFactory('Grid', Grid);
|
||||
// eslint-disable-next-line no-useless-concat
|
||||
Grid['propTypes' + ''] = _extends({}, Grid.propTypes, {
|
||||
direction: requireProp('container'),
|
||||
lg: requireProp('item'),
|
||||
md: requireProp('item'),
|
||||
sm: requireProp('item'),
|
||||
spacing: requireProp('container'),
|
||||
wrap: requireProp('container'),
|
||||
xs: requireProp('item'),
|
||||
zeroMinWidth: requireProp('item')
|
||||
});
|
||||
}
|
||||
export default Grid;
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
const GridContext = /*#__PURE__*/React.createContext();
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
GridContext.displayName = 'GridContext';
|
||||
}
|
||||
export default GridContext;
|
||||
-19
@@ -1,19 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getGridUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiGrid', slot);
|
||||
}
|
||||
const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
|
||||
const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
|
||||
const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||
const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
|
||||
// spacings
|
||||
...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
|
||||
// direction values
|
||||
...DIRECTIONS.map(direction => `direction-xs-${direction}`),
|
||||
// wrap values
|
||||
...WRAPS.map(wrap => `wrap-xs-${wrap}`),
|
||||
// grid sizes for all breakpoints
|
||||
...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
|
||||
export default gridClasses;
|
||||
+2
-1
@@ -7,6 +7,7 @@ import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import useTimeout from '@mui/utils/useTimeout';
|
||||
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
|
||||
import getReactElementRef from '@mui/utils/getReactElementRef';
|
||||
import { Transition } from 'react-transition-group';
|
||||
import useTheme from '../styles/useTheme';
|
||||
import { getTransitionProps, reflow } from '../transitions/utils';
|
||||
@@ -60,7 +61,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
|
||||
const autoTimeout = React.useRef();
|
||||
const theme = useTheme();
|
||||
const nodeRef = React.useRef(null);
|
||||
const handleRef = useForkRef(nodeRef, children.ref, ref);
|
||||
const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
|
||||
const normalizedTransitionCallback = callback => maybeIsAppearing => {
|
||||
if (callback) {
|
||||
const node = nodeRef.current;
|
||||
|
||||
-205
@@ -1,205 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import chainPropTypes from '@mui/utils/chainPropTypes';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disabled,
|
||||
color,
|
||||
edge,
|
||||
size
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
|
||||
};
|
||||
return composeClasses(slots, getIconButtonUtilityClass, classes);
|
||||
};
|
||||
const IconButtonRoot = styled(ButtonBase, {
|
||||
name: 'MuiIconButton',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
textAlign: 'center',
|
||||
flex: '0 0 auto',
|
||||
fontSize: theme.typography.pxToRem(24),
|
||||
padding: 8,
|
||||
borderRadius: '50%',
|
||||
overflow: 'visible',
|
||||
// Explicitly set the default value to solve a bug on IE11.
|
||||
color: (theme.vars || theme).palette.action.active,
|
||||
transition: theme.transitions.create('background-color', {
|
||||
duration: theme.transitions.duration.shortest
|
||||
})
|
||||
}, !ownerState.disableRipple && {
|
||||
'&:hover': {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}, ownerState.edge === 'start' && {
|
||||
marginLeft: ownerState.size === 'small' ? -3 : -12
|
||||
}, ownerState.edge === 'end' && {
|
||||
marginRight: ownerState.size === 'small' ? -3 : -12
|
||||
}), ({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
var _palette;
|
||||
const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
|
||||
return _extends({}, ownerState.color === 'inherit' && {
|
||||
color: 'inherit'
|
||||
}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
|
||||
color: palette == null ? void 0 : palette.main
|
||||
}, !ownerState.disableRipple && {
|
||||
'&:hover': _extends({}, palette && {
|
||||
backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
|
||||
}, {
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
})
|
||||
}), ownerState.size === 'small' && {
|
||||
padding: 5,
|
||||
fontSize: theme.typography.pxToRem(18)
|
||||
}, ownerState.size === 'large' && {
|
||||
padding: 12,
|
||||
fontSize: theme.typography.pxToRem(28)
|
||||
}, {
|
||||
[`&.${iconButtonClasses.disabled}`]: {
|
||||
backgroundColor: 'transparent',
|
||||
color: (theme.vars || theme).palette.action.disabled
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Refer to the [Icons](/material-ui/icons/) section of the documentation
|
||||
* regarding the available icon options.
|
||||
*/
|
||||
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiIconButton'
|
||||
});
|
||||
const {
|
||||
edge = false,
|
||||
children,
|
||||
className,
|
||||
color = 'default',
|
||||
disabled = false,
|
||||
disableFocusRipple = false,
|
||||
size = 'medium'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
edge,
|
||||
color,
|
||||
disabled,
|
||||
disableFocusRipple,
|
||||
size
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(IconButtonRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
centerRipple: true,
|
||||
focusRipple: !disableFocusRipple,
|
||||
disabled: disabled,
|
||||
ref: ref
|
||||
}, other, {
|
||||
ownerState: ownerState,
|
||||
children: children
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? IconButton.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 icon to display.
|
||||
*/
|
||||
children: chainPropTypes(PropTypes.node, props => {
|
||||
const found = React.Children.toArray(props.children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.onClick);
|
||||
if (found) {
|
||||
return new Error(['MUI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole <button> will be responsive to click events.'].join('\n'));
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
/**
|
||||
* 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(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the keyboard focus ripple is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disableFocusRipple: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the ripple effect is disabled.
|
||||
*
|
||||
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
||||
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
||||
* @default false
|
||||
*/
|
||||
disableRipple: PropTypes.bool,
|
||||
/**
|
||||
* If given, uses a negative margin to counteract the padding on one
|
||||
* side (this is often helpful for aligning the left or right
|
||||
* side of the icon with content above or below, without ruining the border
|
||||
* size and shape).
|
||||
* @default false
|
||||
*/
|
||||
edge: PropTypes.oneOf(['end', 'start', false]),
|
||||
/**
|
||||
* The size of the component.
|
||||
* `small` is equivalent to the dense button styling.
|
||||
* @default 'medium'
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), 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 IconButton;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getIconButtonUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiIconButton', slot);
|
||||
}
|
||||
const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
|
||||
export default iconButtonClasses;
|
||||
-342
@@ -1,342 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import deepmerge from '@mui/utils/deepmerge';
|
||||
import refType from '@mui/utils/refType';
|
||||
import InputBase from '../InputBase';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import inputClasses, { getInputUtilityClass } from './inputClasses';
|
||||
import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
disableUnderline
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', !disableUnderline && 'underline'],
|
||||
input: ['input']
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getInputUtilityClass, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const InputRoot = styled(InputBaseRoot, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiInput',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [...inputBaseRootOverridesResolver(props, styles), !ownerState.disableUnderline && styles.underline];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
const light = theme.palette.mode === 'light';
|
||||
let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
||||
if (theme.vars) {
|
||||
bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
|
||||
}
|
||||
return _extends({
|
||||
position: 'relative'
|
||||
}, ownerState.formControl && {
|
||||
'label + &': {
|
||||
marginTop: 16
|
||||
}
|
||||
}, !ownerState.disableUnderline && {
|
||||
'&::after': {
|
||||
borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'scaleX(0)',
|
||||
transition: theme.transitions.create('transform', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
easing: theme.transitions.easing.easeOut
|
||||
}),
|
||||
pointerEvents: 'none' // Transparent to the hover style.
|
||||
},
|
||||
[`&.${inputClasses.focused}:after`]: {
|
||||
// translateX(0) is a workaround for Safari transform scale bug
|
||||
// See https://github.com/mui/material-ui/issues/31766
|
||||
transform: 'scaleX(1) translateX(0)'
|
||||
},
|
||||
[`&.${inputClasses.error}`]: {
|
||||
'&::before, &::after': {
|
||||
borderBottomColor: (theme.vars || theme).palette.error.main
|
||||
}
|
||||
},
|
||||
'&::before': {
|
||||
borderBottom: `1px solid ${bottomLineColor}`,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
|
||||
content: '"\\00a0"',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transition: theme.transitions.create('border-bottom-color', {
|
||||
duration: theme.transitions.duration.shorter
|
||||
}),
|
||||
pointerEvents: 'none' // Transparent to the hover style.
|
||||
},
|
||||
[`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
|
||||
borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
borderBottom: `1px solid ${bottomLineColor}`
|
||||
}
|
||||
},
|
||||
[`&.${inputClasses.disabled}:before`]: {
|
||||
borderBottomStyle: 'dotted'
|
||||
}
|
||||
});
|
||||
});
|
||||
const InputInput = styled(InputBaseInput, {
|
||||
name: 'MuiInput',
|
||||
slot: 'Input',
|
||||
overridesResolver: inputBaseInputOverridesResolver
|
||||
})({});
|
||||
const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
|
||||
var _ref, _slots$root, _ref2, _slots$input;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiInput'
|
||||
});
|
||||
const {
|
||||
disableUnderline,
|
||||
components = {},
|
||||
componentsProps: componentsPropsProp,
|
||||
fullWidth = false,
|
||||
inputComponent = 'input',
|
||||
multiline = false,
|
||||
slotProps,
|
||||
slots = {},
|
||||
type = 'text'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const classes = useUtilityClasses(props);
|
||||
const ownerState = {
|
||||
disableUnderline
|
||||
};
|
||||
const inputComponentsProps = {
|
||||
root: {
|
||||
ownerState
|
||||
}
|
||||
};
|
||||
const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
|
||||
const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
|
||||
const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
|
||||
return /*#__PURE__*/_jsx(InputBase, _extends({
|
||||
slots: {
|
||||
root: RootSlot,
|
||||
input: InputSlot
|
||||
},
|
||||
slotProps: componentsProps,
|
||||
fullWidth: fullWidth,
|
||||
inputComponent: inputComponent,
|
||||
multiline: multiline,
|
||||
ref: ref,
|
||||
type: type
|
||||
}, other, {
|
||||
classes: classes
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Input.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 helps users to fill forms faster, especially on mobile devices.
|
||||
* The name can be confusing, as it's more like an autofill.
|
||||
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
||||
*/
|
||||
autoComplete: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the `input` element is focused during the first mount.
|
||||
*/
|
||||
autoFocus: PropTypes.bool,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* 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).
|
||||
* The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
Input: 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({
|
||||
input: PropTypes.object,
|
||||
root: PropTypes.object
|
||||
}),
|
||||
/**
|
||||
* The default value. Use when the component is not controlled.
|
||||
*/
|
||||
defaultValue: PropTypes.any,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` will not have an underline.
|
||||
*/
|
||||
disableUnderline: PropTypes.bool,
|
||||
/**
|
||||
* End `InputAdornment` for this component.
|
||||
*/
|
||||
endAdornment: PropTypes.node,
|
||||
/**
|
||||
* If `true`, the `input` will indicate an error.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` will take up the full width of its container.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth: PropTypes.bool,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: PropTypes.string,
|
||||
/**
|
||||
* The component used for the `input` element.
|
||||
* Either a string to use a HTML element or a component.
|
||||
* @default 'input'
|
||||
*/
|
||||
inputComponent: PropTypes.elementType,
|
||||
/**
|
||||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
||||
* @default {}
|
||||
*/
|
||||
inputProps: PropTypes.object,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
* The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
margin: PropTypes.oneOf(['dense', 'none']),
|
||||
/**
|
||||
* Maximum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* Minimum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
|
||||
* @default false
|
||||
*/
|
||||
multiline: PropTypes.bool,
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when the value is changed.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* The short hint displayed in the `input` before the user enters a value.
|
||||
*/
|
||||
placeholder: PropTypes.string,
|
||||
/**
|
||||
* It prevents the user from changing the value of the field
|
||||
* (not from interacting with the field).
|
||||
*/
|
||||
readOnly: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` element is required.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* Number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
input: PropTypes.object,
|
||||
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({
|
||||
input: PropTypes.elementType,
|
||||
root: PropTypes.elementType
|
||||
}),
|
||||
/**
|
||||
* Start `InputAdornment` for this component.
|
||||
*/
|
||||
startAdornment: PropTypes.node,
|
||||
/**
|
||||
* 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]),
|
||||
/**
|
||||
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
|
||||
* @default 'text'
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
/**
|
||||
* The value of the `input` element, required for a controlled component.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
Input.muiName = 'Input';
|
||||
export default Input;
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
import { inputBaseClasses } from '../InputBase';
|
||||
export function getInputUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiInput', slot);
|
||||
}
|
||||
const inputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
|
||||
export default inputClasses;
|
||||
-710
@@ -1,710 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
|
||||
const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
|
||||
import refType from '@mui/utils/refType';
|
||||
import { TextareaAutosize } from '@mui/base';
|
||||
import { isHostComponent } from '@mui/base/utils';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import formControlState from '../FormControl/formControlState';
|
||||
import FormControlContext from '../FormControl/FormControlContext';
|
||||
import useFormControl from '../FormControl/useFormControl';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import useEnhancedEffect from '../utils/useEnhancedEffect';
|
||||
import GlobalStyles from '../GlobalStyles';
|
||||
import { isFilled } from './utils';
|
||||
import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
export const rootOverridesResolver = (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.formControl && styles.formControl, ownerState.startAdornment && styles.adornedStart, ownerState.endAdornment && styles.adornedEnd, ownerState.error && styles.error, ownerState.size === 'small' && styles.sizeSmall, ownerState.multiline && styles.multiline, ownerState.color && styles[`color${capitalize(ownerState.color)}`], ownerState.fullWidth && styles.fullWidth, ownerState.hiddenLabel && styles.hiddenLabel];
|
||||
};
|
||||
export const inputOverridesResolver = (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
|
||||
};
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
color,
|
||||
disabled,
|
||||
error,
|
||||
endAdornment,
|
||||
focused,
|
||||
formControl,
|
||||
fullWidth,
|
||||
hiddenLabel,
|
||||
multiline,
|
||||
readOnly,
|
||||
size,
|
||||
startAdornment,
|
||||
type
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && `size${capitalize(size)}`, multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
|
||||
input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
|
||||
};
|
||||
return composeClasses(slots, getInputBaseUtilityClass, classes);
|
||||
};
|
||||
export const InputBaseRoot = styled('div', {
|
||||
name: 'MuiInputBase',
|
||||
slot: 'Root',
|
||||
overridesResolver: rootOverridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({}, theme.typography.body1, {
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
lineHeight: '1.4375em',
|
||||
// 23px
|
||||
boxSizing: 'border-box',
|
||||
// Prevent padding issue with fullWidth.
|
||||
position: 'relative',
|
||||
cursor: 'text',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
[`&.${inputBaseClasses.disabled}`]: {
|
||||
color: (theme.vars || theme).palette.text.disabled,
|
||||
cursor: 'default'
|
||||
}
|
||||
}, ownerState.multiline && _extends({
|
||||
padding: '4px 0 5px'
|
||||
}, ownerState.size === 'small' && {
|
||||
paddingTop: 1
|
||||
}), ownerState.fullWidth && {
|
||||
width: '100%'
|
||||
}));
|
||||
export const InputBaseComponent = styled('input', {
|
||||
name: 'MuiInputBase',
|
||||
slot: 'Input',
|
||||
overridesResolver: inputOverridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
const light = theme.palette.mode === 'light';
|
||||
const placeholder = _extends({
|
||||
color: 'currentColor'
|
||||
}, theme.vars ? {
|
||||
opacity: theme.vars.opacity.inputPlaceholder
|
||||
} : {
|
||||
opacity: light ? 0.42 : 0.5
|
||||
}, {
|
||||
transition: theme.transitions.create('opacity', {
|
||||
duration: theme.transitions.duration.shorter
|
||||
})
|
||||
});
|
||||
const placeholderHidden = {
|
||||
opacity: '0 !important'
|
||||
};
|
||||
const placeholderVisible = theme.vars ? {
|
||||
opacity: theme.vars.opacity.inputPlaceholder
|
||||
} : {
|
||||
opacity: light ? 0.42 : 0.5
|
||||
};
|
||||
return _extends({
|
||||
font: 'inherit',
|
||||
letterSpacing: 'inherit',
|
||||
color: 'currentColor',
|
||||
padding: '4px 0 5px',
|
||||
border: 0,
|
||||
boxSizing: 'content-box',
|
||||
background: 'none',
|
||||
height: '1.4375em',
|
||||
// Reset 23pxthe native input line-height
|
||||
margin: 0,
|
||||
// Reset for Safari
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
display: 'block',
|
||||
// Make the flex item shrink with Firefox
|
||||
minWidth: 0,
|
||||
width: '100%',
|
||||
// Fix IE11 width issue
|
||||
animationName: 'mui-auto-fill-cancel',
|
||||
animationDuration: '10ms',
|
||||
'&::-webkit-input-placeholder': placeholder,
|
||||
'&::-moz-placeholder': placeholder,
|
||||
// Firefox 19+
|
||||
'&:-ms-input-placeholder': placeholder,
|
||||
// IE11
|
||||
'&::-ms-input-placeholder': placeholder,
|
||||
// Edge
|
||||
'&:focus': {
|
||||
outline: 0
|
||||
},
|
||||
// Reset Firefox invalid required input style
|
||||
'&:invalid': {
|
||||
boxShadow: 'none'
|
||||
},
|
||||
'&::-webkit-search-decoration': {
|
||||
// Remove the padding when type=search.
|
||||
WebkitAppearance: 'none'
|
||||
},
|
||||
// Show and hide the placeholder logic
|
||||
[`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
|
||||
'&::-webkit-input-placeholder': placeholderHidden,
|
||||
'&::-moz-placeholder': placeholderHidden,
|
||||
// Firefox 19+
|
||||
'&:-ms-input-placeholder': placeholderHidden,
|
||||
// IE11
|
||||
'&::-ms-input-placeholder': placeholderHidden,
|
||||
// Edge
|
||||
'&:focus::-webkit-input-placeholder': placeholderVisible,
|
||||
'&:focus::-moz-placeholder': placeholderVisible,
|
||||
// Firefox 19+
|
||||
'&:focus:-ms-input-placeholder': placeholderVisible,
|
||||
// IE11
|
||||
'&:focus::-ms-input-placeholder': placeholderVisible // Edge
|
||||
},
|
||||
[`&.${inputBaseClasses.disabled}`]: {
|
||||
opacity: 1,
|
||||
// Reset iOS opacity
|
||||
WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
|
||||
},
|
||||
'&:-webkit-autofill': {
|
||||
animationDuration: '5000s',
|
||||
animationName: 'mui-auto-fill'
|
||||
}
|
||||
}, ownerState.size === 'small' && {
|
||||
paddingTop: 1
|
||||
}, ownerState.multiline && {
|
||||
height: 'auto',
|
||||
resize: 'none',
|
||||
padding: 0,
|
||||
paddingTop: 0
|
||||
}, ownerState.type === 'search' && {
|
||||
// Improve type search style.
|
||||
MozAppearance: 'textfield'
|
||||
});
|
||||
});
|
||||
const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
|
||||
styles: {
|
||||
'@keyframes mui-auto-fill': {
|
||||
from: {
|
||||
display: 'block'
|
||||
}
|
||||
},
|
||||
'@keyframes mui-auto-fill-cancel': {
|
||||
from: {
|
||||
display: 'block'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* `InputBase` contains as few styles as possible.
|
||||
* It aims to be a simple building block for creating an input.
|
||||
* It contains a load of style reset and some state logic.
|
||||
*/
|
||||
const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
|
||||
var _slotProps$input;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiInputBase'
|
||||
});
|
||||
const {
|
||||
'aria-describedby': ariaDescribedby,
|
||||
autoComplete,
|
||||
autoFocus,
|
||||
className,
|
||||
components = {},
|
||||
componentsProps = {},
|
||||
defaultValue,
|
||||
disabled,
|
||||
disableInjectingGlobalStyles,
|
||||
endAdornment,
|
||||
fullWidth = false,
|
||||
id,
|
||||
inputComponent = 'input',
|
||||
inputProps: inputPropsProp = {},
|
||||
inputRef: inputRefProp,
|
||||
maxRows,
|
||||
minRows,
|
||||
multiline = false,
|
||||
name,
|
||||
onBlur,
|
||||
onChange,
|
||||
onClick,
|
||||
onFocus,
|
||||
onKeyDown,
|
||||
onKeyUp,
|
||||
placeholder,
|
||||
readOnly,
|
||||
renderSuffix,
|
||||
rows,
|
||||
slotProps = {},
|
||||
slots = {},
|
||||
startAdornment,
|
||||
type = 'text',
|
||||
value: valueProp
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
|
||||
const {
|
||||
current: isControlled
|
||||
} = React.useRef(value != null);
|
||||
const inputRef = React.useRef();
|
||||
const handleInputRefWarning = React.useCallback(instance => {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
|
||||
console.error(['MUI: You have provided a `inputComponent` to the input component', 'that does not correctly handle the `ref` prop.', 'Make sure the `ref` prop is called with a HTMLInputElement.'].join('\n'));
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
|
||||
const [focused, setFocused] = React.useState(false);
|
||||
const muiFormControl = useFormControl();
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
React.useEffect(() => {
|
||||
if (muiFormControl) {
|
||||
return muiFormControl.registerEffect();
|
||||
}
|
||||
return undefined;
|
||||
}, [muiFormControl]);
|
||||
}
|
||||
const fcs = formControlState({
|
||||
props,
|
||||
muiFormControl,
|
||||
states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
|
||||
});
|
||||
fcs.focused = muiFormControl ? muiFormControl.focused : focused;
|
||||
|
||||
// The blur won't fire when the disabled state is set on a focused input.
|
||||
// We need to book keep the focused state manually.
|
||||
React.useEffect(() => {
|
||||
if (!muiFormControl && disabled && focused) {
|
||||
setFocused(false);
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
}
|
||||
}, [muiFormControl, disabled, focused, onBlur]);
|
||||
const onFilled = muiFormControl && muiFormControl.onFilled;
|
||||
const onEmpty = muiFormControl && muiFormControl.onEmpty;
|
||||
const checkDirty = React.useCallback(obj => {
|
||||
if (isFilled(obj)) {
|
||||
if (onFilled) {
|
||||
onFilled();
|
||||
}
|
||||
} else if (onEmpty) {
|
||||
onEmpty();
|
||||
}
|
||||
}, [onFilled, onEmpty]);
|
||||
useEnhancedEffect(() => {
|
||||
if (isControlled) {
|
||||
checkDirty({
|
||||
value
|
||||
});
|
||||
}
|
||||
}, [value, checkDirty, isControlled]);
|
||||
const handleFocus = event => {
|
||||
// Fix a bug with IE11 where the focus/blur events are triggered
|
||||
// while the component is disabled.
|
||||
if (fcs.disabled) {
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
if (onFocus) {
|
||||
onFocus(event);
|
||||
}
|
||||
if (inputPropsProp.onFocus) {
|
||||
inputPropsProp.onFocus(event);
|
||||
}
|
||||
if (muiFormControl && muiFormControl.onFocus) {
|
||||
muiFormControl.onFocus(event);
|
||||
} else {
|
||||
setFocused(true);
|
||||
}
|
||||
};
|
||||
const handleBlur = event => {
|
||||
if (onBlur) {
|
||||
onBlur(event);
|
||||
}
|
||||
if (inputPropsProp.onBlur) {
|
||||
inputPropsProp.onBlur(event);
|
||||
}
|
||||
if (muiFormControl && muiFormControl.onBlur) {
|
||||
muiFormControl.onBlur(event);
|
||||
} else {
|
||||
setFocused(false);
|
||||
}
|
||||
};
|
||||
const handleChange = (event, ...args) => {
|
||||
if (!isControlled) {
|
||||
const element = event.target || inputRef.current;
|
||||
if (element == null) {
|
||||
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : _formatMuiErrorMessage(1));
|
||||
}
|
||||
checkDirty({
|
||||
value: element.value
|
||||
});
|
||||
}
|
||||
if (inputPropsProp.onChange) {
|
||||
inputPropsProp.onChange(event, ...args);
|
||||
}
|
||||
|
||||
// Perform in the willUpdate
|
||||
if (onChange) {
|
||||
onChange(event, ...args);
|
||||
}
|
||||
};
|
||||
|
||||
// Check the input state on mount, in case it was filled by the user
|
||||
// or auto filled by the browser before the hydration (for SSR).
|
||||
React.useEffect(() => {
|
||||
checkDirty(inputRef.current);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
const handleClick = event => {
|
||||
if (inputRef.current && event.currentTarget === event.target) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
if (onClick) {
|
||||
onClick(event);
|
||||
}
|
||||
};
|
||||
let InputComponent = inputComponent;
|
||||
let inputProps = inputPropsProp;
|
||||
if (multiline && InputComponent === 'input') {
|
||||
if (rows) {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (minRows || maxRows) {
|
||||
console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
|
||||
}
|
||||
}
|
||||
inputProps = _extends({
|
||||
type: undefined,
|
||||
minRows: rows,
|
||||
maxRows: rows
|
||||
}, inputProps);
|
||||
} else {
|
||||
inputProps = _extends({
|
||||
type: undefined,
|
||||
maxRows,
|
||||
minRows
|
||||
}, inputProps);
|
||||
}
|
||||
InputComponent = TextareaAutosize;
|
||||
}
|
||||
const handleAutoFill = event => {
|
||||
// Provide a fake value as Chrome might not let you access it for security reasons.
|
||||
checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
|
||||
value: 'x'
|
||||
});
|
||||
};
|
||||
React.useEffect(() => {
|
||||
if (muiFormControl) {
|
||||
muiFormControl.setAdornedStart(Boolean(startAdornment));
|
||||
}
|
||||
}, [muiFormControl, startAdornment]);
|
||||
const ownerState = _extends({}, props, {
|
||||
color: fcs.color || 'primary',
|
||||
disabled: fcs.disabled,
|
||||
endAdornment,
|
||||
error: fcs.error,
|
||||
focused: fcs.focused,
|
||||
formControl: muiFormControl,
|
||||
fullWidth,
|
||||
hiddenLabel: fcs.hiddenLabel,
|
||||
multiline,
|
||||
size: fcs.size,
|
||||
startAdornment,
|
||||
type
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const Root = slots.root || components.Root || InputBaseRoot;
|
||||
const rootProps = slotProps.root || componentsProps.root || {};
|
||||
const Input = slots.input || components.Input || InputBaseComponent;
|
||||
inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
|
||||
return /*#__PURE__*/_jsxs(React.Fragment, {
|
||||
children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
|
||||
ownerState: _extends({}, ownerState, rootProps.ownerState)
|
||||
}, {
|
||||
ref: ref,
|
||||
onClick: handleClick
|
||||
}, other, {
|
||||
className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
|
||||
children: [startAdornment, /*#__PURE__*/_jsx(FormControlContext.Provider, {
|
||||
value: null,
|
||||
children: /*#__PURE__*/_jsx(Input, _extends({
|
||||
ownerState: ownerState,
|
||||
"aria-invalid": fcs.error,
|
||||
"aria-describedby": ariaDescribedby,
|
||||
autoComplete: autoComplete,
|
||||
autoFocus: autoFocus,
|
||||
defaultValue: defaultValue,
|
||||
disabled: fcs.disabled,
|
||||
id: id,
|
||||
onAnimationStart: handleAutoFill,
|
||||
name: name,
|
||||
placeholder: placeholder,
|
||||
readOnly: readOnly,
|
||||
required: fcs.required,
|
||||
rows: rows,
|
||||
value: value,
|
||||
onKeyDown: onKeyDown,
|
||||
onKeyUp: onKeyUp,
|
||||
type: type
|
||||
}, inputProps, !isHostComponent(Input) && {
|
||||
as: InputComponent,
|
||||
ownerState: _extends({}, ownerState, inputProps.ownerState)
|
||||
}, {
|
||||
ref: handleInputRef,
|
||||
className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
|
||||
onBlur: handleBlur,
|
||||
onChange: handleChange,
|
||||
onFocus: handleFocus
|
||||
}))
|
||||
}), endAdornment, renderSuffix ? renderSuffix(_extends({}, fcs, {
|
||||
startAdornment
|
||||
})) : null]
|
||||
}))]
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? InputBase.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
'aria-describedby': PropTypes.string,
|
||||
/**
|
||||
* This prop helps users to fill forms faster, especially on mobile devices.
|
||||
* The name can be confusing, as it's more like an autofill.
|
||||
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
||||
*/
|
||||
autoComplete: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the `input` element is focused during the first mount.
|
||||
*/
|
||||
autoFocus: PropTypes.bool,
|
||||
/**
|
||||
* 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).
|
||||
* The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
Input: 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({
|
||||
input: PropTypes.object,
|
||||
root: PropTypes.object
|
||||
}),
|
||||
/**
|
||||
* The default value. Use when the component is not controlled.
|
||||
*/
|
||||
defaultValue: PropTypes.any,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
|
||||
* This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
|
||||
* @default false
|
||||
*/
|
||||
disableInjectingGlobalStyles: PropTypes.bool,
|
||||
/**
|
||||
* End `InputAdornment` for this component.
|
||||
*/
|
||||
endAdornment: PropTypes.node,
|
||||
/**
|
||||
* If `true`, the `input` will indicate an error.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` will take up the full width of its container.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth: PropTypes.bool,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: PropTypes.string,
|
||||
/**
|
||||
* The component used for the `input` element.
|
||||
* Either a string to use a HTML element or a component.
|
||||
* @default 'input'
|
||||
*/
|
||||
inputComponent: elementTypeAcceptingRef,
|
||||
/**
|
||||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
||||
* @default {}
|
||||
*/
|
||||
inputProps: PropTypes.object,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
* The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
margin: PropTypes.oneOf(['dense', 'none']),
|
||||
/**
|
||||
* Maximum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* Minimum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
|
||||
* @default false
|
||||
*/
|
||||
multiline: PropTypes.bool,
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when the `input` is blurred.
|
||||
*
|
||||
* Notice that the first argument (event) might be undefined.
|
||||
*/
|
||||
onBlur: PropTypes.func,
|
||||
/**
|
||||
* Callback fired when the value is changed.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onClick: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onFocus: PropTypes.func,
|
||||
/**
|
||||
* Callback fired when the `input` doesn't satisfy its constraints.
|
||||
*/
|
||||
onInvalid: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyDown: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyUp: PropTypes.func,
|
||||
/**
|
||||
* The short hint displayed in the `input` before the user enters a value.
|
||||
*/
|
||||
placeholder: PropTypes.string,
|
||||
/**
|
||||
* It prevents the user from changing the value of the field
|
||||
* (not from interacting with the field).
|
||||
*/
|
||||
readOnly: PropTypes.bool,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
renderSuffix: PropTypes.func,
|
||||
/**
|
||||
* If `true`, the `input` element is required.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* Number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* The size of the component.
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
input: PropTypes.object,
|
||||
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({
|
||||
input: PropTypes.elementType,
|
||||
root: PropTypes.elementType
|
||||
}),
|
||||
/**
|
||||
* Start `InputAdornment` for this component.
|
||||
*/
|
||||
startAdornment: PropTypes.node,
|
||||
/**
|
||||
* 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]),
|
||||
/**
|
||||
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
|
||||
* @default 'text'
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
/**
|
||||
* The value of the `input` element, required for a controlled component.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
export default InputBase;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getInputBaseUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiInputBase', slot);
|
||||
}
|
||||
const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
|
||||
export default inputBaseClasses;
|
||||
-30
@@ -1,30 +0,0 @@
|
||||
// Supports determination of isControlled().
|
||||
// Controlled input accepts its current value as a prop.
|
||||
//
|
||||
// @see https://facebook.github.io/react/docs/forms.html#controlled-components
|
||||
// @param value
|
||||
// @returns {boolean} true if string (including '') or number (including zero)
|
||||
export function hasValue(value) {
|
||||
return value != null && !(Array.isArray(value) && value.length === 0);
|
||||
}
|
||||
|
||||
// Determine if field is empty or filled.
|
||||
// Response determines if label is presented above field or as placeholder.
|
||||
//
|
||||
// @param obj
|
||||
// @param SSR
|
||||
// @returns {boolean} False when not present or empty string.
|
||||
// True when any number or string with length.
|
||||
export function isFilled(obj, SSR = false) {
|
||||
return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
|
||||
}
|
||||
|
||||
// Determine if an Input is adorned on start.
|
||||
// It's corresponding to the left with LTR.
|
||||
//
|
||||
// @param obj
|
||||
// @returns {boolean} False when no adornments.
|
||||
// True when adorned at the start.
|
||||
export function isAdornedStart(obj) {
|
||||
return obj.startAdornment;
|
||||
}
|
||||
-216
@@ -1,216 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import clsx from 'clsx';
|
||||
import formControlState from '../FormControl/formControlState';
|
||||
import useFormControl from '../FormControl/useFormControl';
|
||||
import FormLabel, { formLabelClasses } from '../FormLabel';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import { getInputLabelUtilityClasses } from './inputLabelClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
formControl,
|
||||
size,
|
||||
shrink,
|
||||
disableAnimation,
|
||||
variant,
|
||||
required
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
|
||||
asterisk: [required && 'asterisk']
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const InputLabelRoot = styled(FormLabel, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiInputLabel',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [{
|
||||
[`& .${formLabelClasses.asterisk}`]: styles.asterisk
|
||||
}, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'block',
|
||||
transformOrigin: 'top left',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '100%'
|
||||
}, ownerState.formControl && {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
// slight alteration to spec spacing to match visual spec result
|
||||
transform: 'translate(0, 20px) scale(1)'
|
||||
}, ownerState.size === 'small' && {
|
||||
// Compensation for the `Input.inputSizeSmall` style.
|
||||
transform: 'translate(0, 17px) scale(1)'
|
||||
}, ownerState.shrink && {
|
||||
transform: 'translate(0, -1.5px) scale(0.75)',
|
||||
transformOrigin: 'top left',
|
||||
maxWidth: '133%'
|
||||
}, !ownerState.disableAnimation && {
|
||||
transition: theme.transitions.create(['color', 'transform', 'max-width'], {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
easing: theme.transitions.easing.easeOut
|
||||
})
|
||||
}, ownerState.variant === 'filled' && _extends({
|
||||
// Chrome's autofill feature gives the input field a yellow background.
|
||||
// Since the input field is behind the label in the HTML tree,
|
||||
// the input field is drawn last and hides the label with an opaque background color.
|
||||
// zIndex: 1 will raise the label above opaque background-colors of input.
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none',
|
||||
transform: 'translate(12px, 16px) scale(1)',
|
||||
maxWidth: 'calc(100% - 24px)'
|
||||
}, ownerState.size === 'small' && {
|
||||
transform: 'translate(12px, 13px) scale(1)'
|
||||
}, ownerState.shrink && _extends({
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'auto',
|
||||
transform: 'translate(12px, 7px) scale(0.75)',
|
||||
maxWidth: 'calc(133% - 24px)'
|
||||
}, ownerState.size === 'small' && {
|
||||
transform: 'translate(12px, 4px) scale(0.75)'
|
||||
})), ownerState.variant === 'outlined' && _extends({
|
||||
// see comment above on filled.zIndex
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none',
|
||||
transform: 'translate(14px, 16px) scale(1)',
|
||||
maxWidth: 'calc(100% - 24px)'
|
||||
}, ownerState.size === 'small' && {
|
||||
transform: 'translate(14px, 9px) scale(1)'
|
||||
}, ownerState.shrink && {
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'auto',
|
||||
// Theoretically, we should have (8+5)*2/0.75 = 34px
|
||||
// but it feels a better when it bleeds a bit on the left, so 32px.
|
||||
maxWidth: 'calc(133% - 32px)',
|
||||
transform: 'translate(14px, -9px) scale(0.75)'
|
||||
})));
|
||||
const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
name: 'MuiInputLabel',
|
||||
props: inProps
|
||||
});
|
||||
const {
|
||||
disableAnimation = false,
|
||||
shrink: shrinkProp,
|
||||
className
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const muiFormControl = useFormControl();
|
||||
let shrink = shrinkProp;
|
||||
if (typeof shrink === 'undefined' && muiFormControl) {
|
||||
shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
|
||||
}
|
||||
const fcs = formControlState({
|
||||
props,
|
||||
muiFormControl,
|
||||
states: ['size', 'variant', 'required', 'focused']
|
||||
});
|
||||
const ownerState = _extends({}, props, {
|
||||
disableAnimation,
|
||||
formControl: muiFormControl,
|
||||
shrink,
|
||||
size: fcs.size,
|
||||
variant: fcs.variant,
|
||||
required: fcs.required,
|
||||
focused: fcs.focused
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(InputLabelRoot, _extends({
|
||||
"data-shrink": shrink,
|
||||
ownerState: ownerState,
|
||||
ref: ref,
|
||||
className: clsx(classes.root, className)
|
||||
}, other, {
|
||||
classes: classes
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? InputLabel.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).
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
|
||||
/**
|
||||
* If `true`, the transition animation is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disableAnimation: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is displayed in an error state.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` of this label is focused.
|
||||
*/
|
||||
focused: PropTypes.bool,
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
*/
|
||||
margin: PropTypes.oneOf(['dense']),
|
||||
/**
|
||||
* if `true`, the label will indicate that the `input` is required.
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the label is shrunk.
|
||||
*/
|
||||
shrink: PropTypes.bool,
|
||||
/**
|
||||
* The size of the component.
|
||||
* @default 'normal'
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), 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 variant to use.
|
||||
*/
|
||||
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
||||
} : void 0;
|
||||
export default InputLabel;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getInputLabelUtilityClasses(slot) {
|
||||
return generateUtilityClass('MuiInputLabel', slot);
|
||||
}
|
||||
const inputLabelClasses = generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
|
||||
export default inputLabelClasses;
|
||||
-211
@@ -1,211 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import useIsFocusVisible from '../utils/useIsFocusVisible';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import Typography from '../Typography';
|
||||
import linkClasses, { getLinkUtilityClass } from './linkClasses';
|
||||
import getTextDecoration, { colorTransformations } from './getTextDecoration';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
component,
|
||||
focusVisible,
|
||||
underline
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', `underline${capitalize(underline)}`, component === 'button' && 'button', focusVisible && 'focusVisible']
|
||||
};
|
||||
return composeClasses(slots, getLinkUtilityClass, classes);
|
||||
};
|
||||
const LinkRoot = styled(Typography, {
|
||||
name: 'MuiLink',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, styles[`underline${capitalize(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
return _extends({}, ownerState.underline === 'none' && {
|
||||
textDecoration: 'none'
|
||||
}, ownerState.underline === 'hover' && {
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
}, ownerState.underline === 'always' && _extends({
|
||||
textDecoration: 'underline'
|
||||
}, ownerState.color !== 'inherit' && {
|
||||
textDecorationColor: getTextDecoration({
|
||||
theme,
|
||||
ownerState
|
||||
})
|
||||
}, {
|
||||
'&:hover': {
|
||||
textDecorationColor: 'inherit'
|
||||
}
|
||||
}), ownerState.component === 'button' && {
|
||||
position: 'relative',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
backgroundColor: 'transparent',
|
||||
// Reset default value
|
||||
// We disable the focus ring for mouse, touch and keyboard users.
|
||||
outline: 0,
|
||||
border: 0,
|
||||
margin: 0,
|
||||
// Remove the margin in Safari
|
||||
borderRadius: 0,
|
||||
padding: 0,
|
||||
// Remove the padding in Firefox
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
verticalAlign: 'middle',
|
||||
MozAppearance: 'none',
|
||||
// Reset
|
||||
WebkitAppearance: 'none',
|
||||
// Reset
|
||||
'&::-moz-focus-inner': {
|
||||
borderStyle: 'none' // Remove Firefox dotted outline.
|
||||
},
|
||||
[`&.${linkClasses.focusVisible}`]: {
|
||||
outline: 'auto'
|
||||
}
|
||||
});
|
||||
});
|
||||
const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiLink'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
color = 'primary',
|
||||
component = 'a',
|
||||
onBlur,
|
||||
onFocus,
|
||||
TypographyClasses,
|
||||
underline = 'always',
|
||||
variant = 'inherit',
|
||||
sx
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const {
|
||||
isFocusVisibleRef,
|
||||
onBlur: handleBlurVisible,
|
||||
onFocus: handleFocusVisible,
|
||||
ref: focusVisibleRef
|
||||
} = useIsFocusVisible();
|
||||
const [focusVisible, setFocusVisible] = React.useState(false);
|
||||
const handlerRef = useForkRef(ref, focusVisibleRef);
|
||||
const handleBlur = event => {
|
||||
handleBlurVisible(event);
|
||||
if (isFocusVisibleRef.current === false) {
|
||||
setFocusVisible(false);
|
||||
}
|
||||
if (onBlur) {
|
||||
onBlur(event);
|
||||
}
|
||||
};
|
||||
const handleFocus = event => {
|
||||
handleFocusVisible(event);
|
||||
if (isFocusVisibleRef.current === true) {
|
||||
setFocusVisible(true);
|
||||
}
|
||||
if (onFocus) {
|
||||
onFocus(event);
|
||||
}
|
||||
};
|
||||
const ownerState = _extends({}, props, {
|
||||
color,
|
||||
component,
|
||||
focusVisible,
|
||||
underline,
|
||||
variant
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(LinkRoot, _extends({
|
||||
color: color,
|
||||
className: clsx(classes.root, className),
|
||||
classes: TypographyClasses,
|
||||
component: component,
|
||||
onBlur: handleBlur,
|
||||
onFocus: handleFocus,
|
||||
ref: handlerRef,
|
||||
ownerState: ownerState,
|
||||
variant: variant,
|
||||
sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
|
||||
color
|
||||
}] : []), ...(Array.isArray(sx) ? sx : [sx])]
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Link.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 link.
|
||||
* @default 'primary'
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.any,
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a HTML element or a component.
|
||||
*/
|
||||
component: elementTypeAcceptingRef,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onBlur: PropTypes.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onFocus: 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]),
|
||||
/**
|
||||
* `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
|
||||
*/
|
||||
TypographyClasses: PropTypes.object,
|
||||
/**
|
||||
* Controls when the link should have an underline.
|
||||
* @default 'always'
|
||||
*/
|
||||
underline: PropTypes.oneOf(['always', 'hover', 'none']),
|
||||
/**
|
||||
* Applies the theme typography styles.
|
||||
* @default 'inherit'
|
||||
*/
|
||||
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['body1', 'body2', 'button', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit', 'overline', 'subtitle1', 'subtitle2']), PropTypes.string])
|
||||
} : void 0;
|
||||
export default Link;
|
||||
-25
@@ -1,25 +0,0 @@
|
||||
import { getPath } from '@mui/system';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
export const colorTransformations = {
|
||||
primary: 'primary.main',
|
||||
textPrimary: 'text.primary',
|
||||
secondary: 'secondary.main',
|
||||
textSecondary: 'text.secondary',
|
||||
error: 'error.main'
|
||||
};
|
||||
const transformDeprecatedColors = color => {
|
||||
return colorTransformations[color] || color;
|
||||
};
|
||||
const getTextDecoration = ({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
const transformedColor = transformDeprecatedColors(ownerState.color);
|
||||
const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
|
||||
const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
|
||||
if ('vars' in theme && channelColor) {
|
||||
return `rgba(${channelColor} / 0.4)`;
|
||||
}
|
||||
return alpha(color, 0.4);
|
||||
};
|
||||
export default getTextDecoration;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getLinkUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiLink', slot);
|
||||
}
|
||||
const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
|
||||
export default linkClasses;
|
||||
+2
-2
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import ListContext from './ListContext';
|
||||
import { getListUtilityClass } from './listClasses';
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
@@ -48,7 +48,7 @@ const ListRoot = styled('ul', {
|
||||
paddingTop: 0
|
||||
}));
|
||||
const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiList'
|
||||
});
|
||||
|
||||
-422
@@ -1,422 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className"],
|
||||
_excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import { isHostComponent } from '@mui/base/utils';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
|
||||
import chainPropTypes from '@mui/utils/chainPropTypes';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import isMuiElement from '../utils/isMuiElement';
|
||||
import useEnhancedEffect from '../utils/useEnhancedEffect';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import ListContext from '../List/ListContext';
|
||||
import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
|
||||
import { listItemButtonClasses } from '../ListItemButton';
|
||||
import ListItemSecondaryAction from '../ListItemSecondaryAction';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
export const overridesResolver = (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.button && styles.button, ownerState.hasSecondaryAction && styles.secondaryAction];
|
||||
};
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
alignItems,
|
||||
button,
|
||||
classes,
|
||||
dense,
|
||||
disabled,
|
||||
disableGutters,
|
||||
disablePadding,
|
||||
divider,
|
||||
hasSecondaryAction,
|
||||
selected
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', dense && 'dense', !disableGutters && 'gutters', !disablePadding && 'padding', divider && 'divider', disabled && 'disabled', button && 'button', alignItems === 'flex-start' && 'alignItemsFlexStart', hasSecondaryAction && 'secondaryAction', selected && 'selected'],
|
||||
container: ['container']
|
||||
};
|
||||
return composeClasses(slots, getListItemUtilityClass, classes);
|
||||
};
|
||||
export const ListItemRoot = styled('div', {
|
||||
name: 'MuiListItem',
|
||||
slot: 'Root',
|
||||
overridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
textAlign: 'left'
|
||||
}, !ownerState.disablePadding && _extends({
|
||||
paddingTop: 8,
|
||||
paddingBottom: 8
|
||||
}, ownerState.dense && {
|
||||
paddingTop: 4,
|
||||
paddingBottom: 4
|
||||
}, !ownerState.disableGutters && {
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16
|
||||
}, !!ownerState.secondaryAction && {
|
||||
// Add some space to avoid collision as `ListItemSecondaryAction`
|
||||
// is absolutely positioned.
|
||||
paddingRight: 48
|
||||
}), !!ownerState.secondaryAction && {
|
||||
[`& > .${listItemButtonClasses.root}`]: {
|
||||
paddingRight: 48
|
||||
}
|
||||
}, {
|
||||
[`&.${listItemClasses.focusVisible}`]: {
|
||||
backgroundColor: (theme.vars || theme).palette.action.focus
|
||||
},
|
||||
[`&.${listItemClasses.selected}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
|
||||
[`&.${listItemClasses.focusVisible}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
|
||||
}
|
||||
},
|
||||
[`&.${listItemClasses.disabled}`]: {
|
||||
opacity: (theme.vars || theme).palette.action.disabledOpacity
|
||||
}
|
||||
}, ownerState.alignItems === 'flex-start' && {
|
||||
alignItems: 'flex-start'
|
||||
}, ownerState.divider && {
|
||||
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
backgroundClip: 'padding-box'
|
||||
}, ownerState.button && {
|
||||
transition: theme.transitions.create('background-color', {
|
||||
duration: theme.transitions.duration.shortest
|
||||
}),
|
||||
'&:hover': {
|
||||
textDecoration: 'none',
|
||||
backgroundColor: (theme.vars || theme).palette.action.hover,
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
},
|
||||
[`&.${listItemClasses.selected}:hover`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
|
||||
}
|
||||
}
|
||||
}, ownerState.hasSecondaryAction && {
|
||||
// Add some space to avoid collision as `ListItemSecondaryAction`
|
||||
// is absolutely positioned.
|
||||
paddingRight: 48
|
||||
}));
|
||||
const ListItemContainer = styled('li', {
|
||||
name: 'MuiListItem',
|
||||
slot: 'Container',
|
||||
overridesResolver: (props, styles) => styles.container
|
||||
})({
|
||||
position: 'relative'
|
||||
});
|
||||
|
||||
/**
|
||||
* Uses an additional container component if `ListItemSecondaryAction` is the last child.
|
||||
*/
|
||||
const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiListItem'
|
||||
});
|
||||
const {
|
||||
alignItems = 'center',
|
||||
autoFocus = false,
|
||||
button = false,
|
||||
children: childrenProp,
|
||||
className,
|
||||
component: componentProp,
|
||||
components = {},
|
||||
componentsProps = {},
|
||||
ContainerComponent = 'li',
|
||||
ContainerProps: {
|
||||
className: ContainerClassName
|
||||
} = {},
|
||||
dense = false,
|
||||
disabled = false,
|
||||
disableGutters = false,
|
||||
disablePadding = false,
|
||||
divider = false,
|
||||
focusVisibleClassName,
|
||||
secondaryAction,
|
||||
selected = false,
|
||||
slotProps = {},
|
||||
slots = {}
|
||||
} = props,
|
||||
ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded),
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded2);
|
||||
const context = React.useContext(ListContext);
|
||||
const childContext = React.useMemo(() => ({
|
||||
dense: dense || context.dense || false,
|
||||
alignItems,
|
||||
disableGutters
|
||||
}), [alignItems, context.dense, dense, disableGutters]);
|
||||
const listItemRef = React.useRef(null);
|
||||
useEnhancedEffect(() => {
|
||||
if (autoFocus) {
|
||||
if (listItemRef.current) {
|
||||
listItemRef.current.focus();
|
||||
} else if (process.env.NODE_ENV !== 'production') {
|
||||
console.error('MUI: Unable to set focus to a ListItem whose component has not been rendered.');
|
||||
}
|
||||
}
|
||||
}, [autoFocus]);
|
||||
const children = React.Children.toArray(childrenProp);
|
||||
|
||||
// v4 implementation, deprecated in v5, will be removed in v6
|
||||
const hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
|
||||
const ownerState = _extends({}, props, {
|
||||
alignItems,
|
||||
autoFocus,
|
||||
button,
|
||||
dense: childContext.dense,
|
||||
disabled,
|
||||
disableGutters,
|
||||
disablePadding,
|
||||
divider,
|
||||
hasSecondaryAction,
|
||||
selected
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const handleRef = useForkRef(listItemRef, ref);
|
||||
const Root = slots.root || components.Root || ListItemRoot;
|
||||
const rootProps = slotProps.root || componentsProps.root || {};
|
||||
const componentProps = _extends({
|
||||
className: clsx(classes.root, rootProps.className, className),
|
||||
disabled
|
||||
}, other);
|
||||
let Component = componentProp || 'li';
|
||||
if (button) {
|
||||
componentProps.component = componentProp || 'div';
|
||||
componentProps.focusVisibleClassName = clsx(listItemClasses.focusVisible, focusVisibleClassName);
|
||||
Component = ButtonBase;
|
||||
}
|
||||
|
||||
// v4 implementation, deprecated in v5, will be removed in v6
|
||||
if (hasSecondaryAction) {
|
||||
// Use div by default.
|
||||
Component = !componentProps.component && !componentProp ? 'div' : Component;
|
||||
|
||||
// Avoid nesting of li > li.
|
||||
if (ContainerComponent === 'li') {
|
||||
if (Component === 'li') {
|
||||
Component = 'div';
|
||||
} else if (componentProps.component === 'li') {
|
||||
componentProps.component = 'div';
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/_jsx(ListContext.Provider, {
|
||||
value: childContext,
|
||||
children: /*#__PURE__*/_jsxs(ListItemContainer, _extends({
|
||||
as: ContainerComponent,
|
||||
className: clsx(classes.container, ContainerClassName),
|
||||
ref: handleRef,
|
||||
ownerState: ownerState
|
||||
}, ContainerProps, {
|
||||
children: [/*#__PURE__*/_jsx(Root, _extends({}, rootProps, !isHostComponent(Root) && {
|
||||
as: Component,
|
||||
ownerState: _extends({}, ownerState, rootProps.ownerState)
|
||||
}, componentProps, {
|
||||
children: children
|
||||
})), children.pop()]
|
||||
}))
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/_jsx(ListContext.Provider, {
|
||||
value: childContext,
|
||||
children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
|
||||
as: Component,
|
||||
ref: handleRef
|
||||
}, !isHostComponent(Root) && {
|
||||
ownerState: _extends({}, ownerState, rootProps.ownerState)
|
||||
}, componentProps, {
|
||||
children: [children, secondaryAction && /*#__PURE__*/_jsx(ListItemSecondaryAction, {
|
||||
children: secondaryAction
|
||||
})]
|
||||
}))
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? ListItem.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* Defines the `align-items` style property.
|
||||
* @default 'center'
|
||||
*/
|
||||
alignItems: PropTypes.oneOf(['center', 'flex-start']),
|
||||
/**
|
||||
* If `true`, the list item is focused during the first mount.
|
||||
* Focus will also be triggered if the value changes from false to true.
|
||||
* @default false
|
||||
* @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
|
||||
*/
|
||||
autoFocus: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the list item is a button (using `ButtonBase`). Props intended
|
||||
* for `ButtonBase` can then be applied to `ListItem`.
|
||||
* @default false
|
||||
* @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
|
||||
*/
|
||||
button: PropTypes.bool,
|
||||
/**
|
||||
* The content of the component if a `ListItemSecondaryAction` is used it must
|
||||
* be the last child.
|
||||
*/
|
||||
children: chainPropTypes(PropTypes.node, props => {
|
||||
const children = React.Children.toArray(props.children);
|
||||
|
||||
// React.Children.toArray(props.children).findLastIndex(isListItemSecondaryAction)
|
||||
let secondaryActionIndex = -1;
|
||||
for (let i = children.length - 1; i >= 0; i -= 1) {
|
||||
const child = children[i];
|
||||
if (isMuiElement(child, ['ListItemSecondaryAction'])) {
|
||||
secondaryActionIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// is ListItemSecondaryAction the last child of ListItem
|
||||
if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {
|
||||
return new Error('MUI: You used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
/**
|
||||
* 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
|
||||
}),
|
||||
/**
|
||||
* The container component used when a `ListItemSecondaryAction` is the last child.
|
||||
* @default 'li'
|
||||
* @deprecated
|
||||
*/
|
||||
ContainerComponent: elementTypeAcceptingRef,
|
||||
/**
|
||||
* Props applied to the container component if used.
|
||||
* @default {}
|
||||
* @deprecated
|
||||
*/
|
||||
ContainerProps: PropTypes.object,
|
||||
/**
|
||||
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
|
||||
* The prop defaults to the value inherited from the parent List component.
|
||||
* @default false
|
||||
*/
|
||||
dense: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* @default false
|
||||
* @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the left and right padding is removed.
|
||||
* @default false
|
||||
*/
|
||||
disableGutters: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, all padding is removed.
|
||||
* @default false
|
||||
*/
|
||||
disablePadding: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, a 1px light border is added to the bottom of the list item.
|
||||
* @default false
|
||||
*/
|
||||
divider: PropTypes.bool,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
focusVisibleClassName: PropTypes.string,
|
||||
/**
|
||||
* The element to display at the end of ListItem.
|
||||
*/
|
||||
secondaryAction: PropTypes.node,
|
||||
/**
|
||||
* Use to apply selected styling.
|
||||
* @default false
|
||||
* @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
|
||||
*/
|
||||
selected: PropTypes.bool,
|
||||
/**
|
||||
* 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])
|
||||
} : void 0;
|
||||
export default ListItem;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getListItemUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiListItem', slot);
|
||||
}
|
||||
const listItemClasses = generateUtilityClasses('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
|
||||
export default listItemClasses;
|
||||
-241
@@ -1,241 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import useEnhancedEffect from '../utils/useEnhancedEffect';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import ListContext from '../List/ListContext';
|
||||
import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
export const overridesResolver = (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
|
||||
};
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
alignItems,
|
||||
classes,
|
||||
dense,
|
||||
disabled,
|
||||
disableGutters,
|
||||
divider,
|
||||
selected
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', dense && 'dense', !disableGutters && 'gutters', divider && 'divider', disabled && 'disabled', alignItems === 'flex-start' && 'alignItemsFlexStart', selected && 'selected']
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const ListItemButtonRoot = styled(ButtonBase, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiListItemButton',
|
||||
slot: 'Root',
|
||||
overridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
minWidth: 0,
|
||||
boxSizing: 'border-box',
|
||||
textAlign: 'left',
|
||||
paddingTop: 8,
|
||||
paddingBottom: 8,
|
||||
transition: theme.transitions.create('background-color', {
|
||||
duration: theme.transitions.duration.shortest
|
||||
}),
|
||||
'&:hover': {
|
||||
textDecoration: 'none',
|
||||
backgroundColor: (theme.vars || theme).palette.action.hover,
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
},
|
||||
[`&.${listItemButtonClasses.selected}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
|
||||
[`&.${listItemButtonClasses.focusVisible}`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
|
||||
}
|
||||
},
|
||||
[`&.${listItemButtonClasses.selected}:hover`]: {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
|
||||
}
|
||||
},
|
||||
[`&.${listItemButtonClasses.focusVisible}`]: {
|
||||
backgroundColor: (theme.vars || theme).palette.action.focus
|
||||
},
|
||||
[`&.${listItemButtonClasses.disabled}`]: {
|
||||
opacity: (theme.vars || theme).palette.action.disabledOpacity
|
||||
}
|
||||
}, ownerState.divider && {
|
||||
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
backgroundClip: 'padding-box'
|
||||
}, ownerState.alignItems === 'flex-start' && {
|
||||
alignItems: 'flex-start'
|
||||
}, !ownerState.disableGutters && {
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16
|
||||
}, ownerState.dense && {
|
||||
paddingTop: 4,
|
||||
paddingBottom: 4
|
||||
}));
|
||||
const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiListItemButton'
|
||||
});
|
||||
const {
|
||||
alignItems = 'center',
|
||||
autoFocus = false,
|
||||
component = 'div',
|
||||
children,
|
||||
dense = false,
|
||||
disableGutters = false,
|
||||
divider = false,
|
||||
focusVisibleClassName,
|
||||
selected = false,
|
||||
className
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const context = React.useContext(ListContext);
|
||||
const childContext = React.useMemo(() => ({
|
||||
dense: dense || context.dense || false,
|
||||
alignItems,
|
||||
disableGutters
|
||||
}), [alignItems, context.dense, dense, disableGutters]);
|
||||
const listItemRef = React.useRef(null);
|
||||
useEnhancedEffect(() => {
|
||||
if (autoFocus) {
|
||||
if (listItemRef.current) {
|
||||
listItemRef.current.focus();
|
||||
} else if (process.env.NODE_ENV !== 'production') {
|
||||
console.error('MUI: Unable to set focus to a ListItemButton whose component has not been rendered.');
|
||||
}
|
||||
}
|
||||
}, [autoFocus]);
|
||||
const ownerState = _extends({}, props, {
|
||||
alignItems,
|
||||
dense: childContext.dense,
|
||||
disableGutters,
|
||||
divider,
|
||||
selected
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const handleRef = useForkRef(listItemRef, ref);
|
||||
return /*#__PURE__*/_jsx(ListContext.Provider, {
|
||||
value: childContext,
|
||||
children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({
|
||||
ref: handleRef,
|
||||
href: other.href || other.to
|
||||
// `ButtonBase` processes `href` or `to` if `component` is set to 'button'
|
||||
,
|
||||
component: (other.href || other.to) && component === 'div' ? 'button' : component,
|
||||
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
||||
ownerState: ownerState,
|
||||
className: clsx(classes.root, className)
|
||||
}, other, {
|
||||
classes: classes,
|
||||
children: children
|
||||
}))
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? ListItemButton.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* Defines the `align-items` style property.
|
||||
* @default 'center'
|
||||
*/
|
||||
alignItems: PropTypes.oneOf(['center', 'flex-start']),
|
||||
/**
|
||||
* If `true`, the list item is focused during the first mount.
|
||||
* Focus will also be triggered if the value changes from false to true.
|
||||
* @default false
|
||||
*/
|
||||
autoFocus: PropTypes.bool,
|
||||
/**
|
||||
* The content of the component if a `ListItemSecondaryAction` is used it must
|
||||
* be the last child.
|
||||
*/
|
||||
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,
|
||||
/**
|
||||
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
|
||||
* The prop defaults to the value inherited from the parent List component.
|
||||
* @default false
|
||||
*/
|
||||
dense: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the left and right padding is removed.
|
||||
* @default false
|
||||
*/
|
||||
disableGutters: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, a 1px light border is added to the bottom of the list item.
|
||||
* @default false
|
||||
*/
|
||||
divider: PropTypes.bool,
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
href: PropTypes.string,
|
||||
/**
|
||||
* Use to apply selected styling.
|
||||
* @default false
|
||||
*/
|
||||
selected: 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 ListItemButton;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getListItemButtonUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiListItemButton', slot);
|
||||
}
|
||||
const listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
|
||||
export default listItemButtonClasses;
|
||||
+2
-2
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import { getListItemIconUtilityClass } from './listItemIconClasses';
|
||||
import ListContext from '../List/ListContext';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
@@ -47,7 +47,7 @@ const ListItemIconRoot = styled('div', {
|
||||
* A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
|
||||
*/
|
||||
const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiListItemIcon'
|
||||
});
|
||||
|
||||
Generated
Vendored
-91
@@ -1,91 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
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 '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import ListContext from '../List/ListContext';
|
||||
import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
disableGutters,
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', disableGutters && 'disableGutters']
|
||||
};
|
||||
return composeClasses(slots, getListItemSecondaryActionClassesUtilityClass, classes);
|
||||
};
|
||||
const ListItemSecondaryActionRoot = styled('div', {
|
||||
name: 'MuiListItemSecondaryAction',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.disableGutters && styles.disableGutters];
|
||||
}
|
||||
})(({
|
||||
ownerState
|
||||
}) => _extends({
|
||||
position: 'absolute',
|
||||
right: 16,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)'
|
||||
}, ownerState.disableGutters && {
|
||||
right: 0
|
||||
}));
|
||||
|
||||
/**
|
||||
* Must be used as the last child of ListItem to function properly.
|
||||
*/
|
||||
const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiListItemSecondaryAction'
|
||||
});
|
||||
const {
|
||||
className
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const context = React.useContext(ListContext);
|
||||
const ownerState = _extends({}, props, {
|
||||
disableGutters: context.disableGutters
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(ListItemSecondaryActionRoot, _extends({
|
||||
className: clsx(classes.root, className),
|
||||
ownerState: ownerState,
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? ListItemSecondaryAction.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, normally an `IconButton` or selection control.
|
||||
*/
|
||||
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;
|
||||
ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
|
||||
export default ListItemSecondaryAction;
|
||||
Generated
Vendored
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getListItemSecondaryActionClassesUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiListItemSecondaryAction', slot);
|
||||
}
|
||||
const listItemSecondaryActionClasses = generateUtilityClasses('MuiListItemSecondaryAction', ['root', 'disableGutters']);
|
||||
export default listItemSecondaryActionClasses;
|
||||
+2
-2
@@ -9,7 +9,7 @@ import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import Typography from '../Typography';
|
||||
import ListContext from '../List/ListContext';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import styled from '../styles/styled';
|
||||
import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
@@ -56,7 +56,7 @@ const ListItemTextRoot = styled('div', {
|
||||
paddingLeft: 56
|
||||
}));
|
||||
const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiListItemText'
|
||||
});
|
||||
|
||||
-140
@@ -1,140 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
|
||||
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 useThemeProps from '../styles/useThemeProps';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import { getListSubheaderUtilityClass } from './listSubheaderClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
color,
|
||||
disableGutters,
|
||||
inset,
|
||||
disableSticky
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', color !== 'default' && `color${capitalize(color)}`, !disableGutters && 'gutters', inset && 'inset', !disableSticky && 'sticky']
|
||||
};
|
||||
return composeClasses(slots, getListSubheaderUtilityClass, classes);
|
||||
};
|
||||
const ListSubheaderRoot = styled('li', {
|
||||
name: 'MuiListSubheader',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], !ownerState.disableGutters && styles.gutters, ownerState.inset && styles.inset, !ownerState.disableSticky && styles.sticky];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
boxSizing: 'border-box',
|
||||
lineHeight: '48px',
|
||||
listStyle: 'none',
|
||||
color: (theme.vars || theme).palette.text.secondary,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
fontSize: theme.typography.pxToRem(14)
|
||||
}, ownerState.color === 'primary' && {
|
||||
color: (theme.vars || theme).palette.primary.main
|
||||
}, ownerState.color === 'inherit' && {
|
||||
color: 'inherit'
|
||||
}, !ownerState.disableGutters && {
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16
|
||||
}, ownerState.inset && {
|
||||
paddingLeft: 72
|
||||
}, !ownerState.disableSticky && {
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
backgroundColor: (theme.vars || theme).palette.background.paper
|
||||
}));
|
||||
const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiListSubheader'
|
||||
});
|
||||
const {
|
||||
className,
|
||||
color = 'default',
|
||||
component = 'li',
|
||||
disableGutters = false,
|
||||
disableSticky = false,
|
||||
inset = false
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
color,
|
||||
component,
|
||||
disableGutters,
|
||||
disableSticky,
|
||||
inset
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsx(ListSubheaderRoot, _extends({
|
||||
as: component,
|
||||
className: clsx(classes.root, className),
|
||||
ref: ref,
|
||||
ownerState: ownerState
|
||||
}, other));
|
||||
});
|
||||
ListSubheader.muiSkipListHighlight = true;
|
||||
process.env.NODE_ENV !== "production" ? ListSubheader.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 those theme colors that make sense for this component.
|
||||
* @default 'default'
|
||||
*/
|
||||
color: PropTypes.oneOf(['default', 'inherit', 'primary']),
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a HTML element or a component.
|
||||
*/
|
||||
component: PropTypes.elementType,
|
||||
/**
|
||||
* If `true`, the List Subheader will not have gutters.
|
||||
* @default false
|
||||
*/
|
||||
disableGutters: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the List Subheader will not stick to the top during scroll.
|
||||
* @default false
|
||||
*/
|
||||
disableSticky: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the List Subheader is indented.
|
||||
* @default false
|
||||
*/
|
||||
inset: 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 ListSubheader;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getListSubheaderUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiListSubheader', slot);
|
||||
}
|
||||
const listSubheaderClasses = generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
|
||||
export default listSubheaderClasses;
|
||||
+3
-3
@@ -9,13 +9,13 @@ import { isFragment } from 'react-is';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { useSlotProps } from '@mui/base/utils';
|
||||
import HTMLElementType from '@mui/utils/HTMLElementType';
|
||||
import { useRtl } from '@mui/system/RtlProvider';
|
||||
import useSlotProps from '@mui/utils/useSlotProps';
|
||||
import MenuList from '../MenuList';
|
||||
import Popover, { PopoverPaper } from '../Popover';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import { getMenuUtilityClass } from './menuClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const RTL_ORIGIN = {
|
||||
@@ -65,7 +65,7 @@ const MenuMenuList = styled(MenuList, {
|
||||
});
|
||||
const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
|
||||
var _slots$paper, _slotProps$paper;
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiMenu'
|
||||
});
|
||||
|
||||
+2
-2
@@ -9,7 +9,7 @@ import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import ListContext from '../List/ListContext';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import useEnhancedEffect from '../utils/useEnhancedEffect';
|
||||
@@ -125,7 +125,7 @@ const MenuItemRoot = styled(ButtonBase, {
|
||||
}
|
||||
})));
|
||||
const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiMenuItem'
|
||||
});
|
||||
|
||||
+4
-4
@@ -8,14 +8,14 @@ import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import HTMLElementType from '@mui/utils/HTMLElementType';
|
||||
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
|
||||
import { useSlotProps } from '@mui/base/utils';
|
||||
import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import useSlotProps from '@mui/utils/useSlotProps';
|
||||
import FocusTrap from '../Unstable_TrapFocus';
|
||||
import Portal from '../Portal';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import Backdrop from '../Backdrop';
|
||||
import useModal from './useModal';
|
||||
import { getModalUtilityClass } from './modalClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
@@ -78,7 +78,7 @@ const ModalBackdrop = styled(Backdrop, {
|
||||
*/
|
||||
const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
|
||||
var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
name: 'MuiModal',
|
||||
props: inProps
|
||||
});
|
||||
|
||||
+213
@@ -0,0 +1,213 @@
|
||||
import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
|
||||
// Is a vertical scrollbar displayed?
|
||||
function isOverflowing(container) {
|
||||
const doc = ownerDocument(container);
|
||||
if (doc.body === container) {
|
||||
return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
|
||||
}
|
||||
return container.scrollHeight > container.clientHeight;
|
||||
}
|
||||
export function ariaHidden(element, show) {
|
||||
if (show) {
|
||||
element.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
element.removeAttribute('aria-hidden');
|
||||
}
|
||||
}
|
||||
function getPaddingRight(element) {
|
||||
return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
|
||||
}
|
||||
function isAriaHiddenForbiddenOnElement(element) {
|
||||
// The forbidden HTML tags are the ones from ARIA specification that
|
||||
// can be children of body and can't have aria-hidden attribute.
|
||||
// cf. https://www.w3.org/TR/html-aria/#docconformance
|
||||
const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
|
||||
const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
|
||||
const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
|
||||
return isForbiddenTagName || isInputHidden;
|
||||
}
|
||||
function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
|
||||
const blacklist = [mountElement, currentElement, ...elementsToExclude];
|
||||
[].forEach.call(container.children, element => {
|
||||
const isNotExcludedElement = blacklist.indexOf(element) === -1;
|
||||
const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
|
||||
if (isNotExcludedElement && isNotForbiddenElement) {
|
||||
ariaHidden(element, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
function findIndexOf(items, callback) {
|
||||
let idx = -1;
|
||||
items.some((item, index) => {
|
||||
if (callback(item)) {
|
||||
idx = index;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return idx;
|
||||
}
|
||||
function handleContainer(containerInfo, props) {
|
||||
const restoreStyle = [];
|
||||
const container = containerInfo.container;
|
||||
if (!props.disableScrollLock) {
|
||||
if (isOverflowing(container)) {
|
||||
// Compute the size before applying overflow hidden to avoid any scroll jumps.
|
||||
const scrollbarSize = getScrollbarSize(ownerDocument(container));
|
||||
restoreStyle.push({
|
||||
value: container.style.paddingRight,
|
||||
property: 'padding-right',
|
||||
el: container
|
||||
});
|
||||
// Use computed style, here to get the real padding to add our scrollbar width.
|
||||
container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
|
||||
|
||||
// .mui-fixed is a global helper.
|
||||
const fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed');
|
||||
[].forEach.call(fixedElements, element => {
|
||||
restoreStyle.push({
|
||||
value: element.style.paddingRight,
|
||||
property: 'padding-right',
|
||||
el: element
|
||||
});
|
||||
element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
|
||||
});
|
||||
}
|
||||
let scrollContainer;
|
||||
if (container.parentNode instanceof DocumentFragment) {
|
||||
scrollContainer = ownerDocument(container).body;
|
||||
} else {
|
||||
// Support html overflow-y: auto for scroll stability between pages
|
||||
// https://css-tricks.com/snippets/css/force-vertical-scrollbar/
|
||||
const parent = container.parentElement;
|
||||
const containerWindow = ownerWindow(container);
|
||||
scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
|
||||
}
|
||||
|
||||
// Block the scroll even if no scrollbar is visible to account for mobile keyboard
|
||||
// screensize shrink.
|
||||
restoreStyle.push({
|
||||
value: scrollContainer.style.overflow,
|
||||
property: 'overflow',
|
||||
el: scrollContainer
|
||||
}, {
|
||||
value: scrollContainer.style.overflowX,
|
||||
property: 'overflow-x',
|
||||
el: scrollContainer
|
||||
}, {
|
||||
value: scrollContainer.style.overflowY,
|
||||
property: 'overflow-y',
|
||||
el: scrollContainer
|
||||
});
|
||||
scrollContainer.style.overflow = 'hidden';
|
||||
}
|
||||
const restore = () => {
|
||||
restoreStyle.forEach(({
|
||||
value,
|
||||
el,
|
||||
property
|
||||
}) => {
|
||||
if (value) {
|
||||
el.style.setProperty(property, value);
|
||||
} else {
|
||||
el.style.removeProperty(property);
|
||||
}
|
||||
});
|
||||
};
|
||||
return restore;
|
||||
}
|
||||
function getHiddenSiblings(container) {
|
||||
const hiddenSiblings = [];
|
||||
[].forEach.call(container.children, element => {
|
||||
if (element.getAttribute('aria-hidden') === 'true') {
|
||||
hiddenSiblings.push(element);
|
||||
}
|
||||
});
|
||||
return hiddenSiblings;
|
||||
}
|
||||
/**
|
||||
* @ignore - do not document.
|
||||
*
|
||||
* Proper state management for containers and the modals in those containers.
|
||||
* Simplified, but inspired by react-overlay's ModalManager class.
|
||||
* Used by the Modal to ensure proper styling of containers.
|
||||
*/
|
||||
export class ModalManager {
|
||||
constructor() {
|
||||
this.containers = void 0;
|
||||
this.modals = void 0;
|
||||
this.modals = [];
|
||||
this.containers = [];
|
||||
}
|
||||
add(modal, container) {
|
||||
let modalIndex = this.modals.indexOf(modal);
|
||||
if (modalIndex !== -1) {
|
||||
return modalIndex;
|
||||
}
|
||||
modalIndex = this.modals.length;
|
||||
this.modals.push(modal);
|
||||
|
||||
// If the modal we are adding is already in the DOM.
|
||||
if (modal.modalRef) {
|
||||
ariaHidden(modal.modalRef, false);
|
||||
}
|
||||
const hiddenSiblings = getHiddenSiblings(container);
|
||||
ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
|
||||
const containerIndex = findIndexOf(this.containers, item => item.container === container);
|
||||
if (containerIndex !== -1) {
|
||||
this.containers[containerIndex].modals.push(modal);
|
||||
return modalIndex;
|
||||
}
|
||||
this.containers.push({
|
||||
modals: [modal],
|
||||
container,
|
||||
restore: null,
|
||||
hiddenSiblings
|
||||
});
|
||||
return modalIndex;
|
||||
}
|
||||
mount(modal, props) {
|
||||
const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
|
||||
const containerInfo = this.containers[containerIndex];
|
||||
if (!containerInfo.restore) {
|
||||
containerInfo.restore = handleContainer(containerInfo, props);
|
||||
}
|
||||
}
|
||||
remove(modal, ariaHiddenState = true) {
|
||||
const modalIndex = this.modals.indexOf(modal);
|
||||
if (modalIndex === -1) {
|
||||
return modalIndex;
|
||||
}
|
||||
const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
|
||||
const containerInfo = this.containers[containerIndex];
|
||||
containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
|
||||
this.modals.splice(modalIndex, 1);
|
||||
|
||||
// If that was the last modal in a container, clean up the container.
|
||||
if (containerInfo.modals.length === 0) {
|
||||
// The modal might be closed before it had the chance to be mounted in the DOM.
|
||||
if (containerInfo.restore) {
|
||||
containerInfo.restore();
|
||||
}
|
||||
if (modal.modalRef) {
|
||||
// In case the modal wasn't in the DOM yet.
|
||||
ariaHidden(modal.modalRef, ariaHiddenState);
|
||||
}
|
||||
ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false);
|
||||
this.containers.splice(containerIndex, 1);
|
||||
} else {
|
||||
// Otherwise make sure the next top modal is visible to a screen reader.
|
||||
const nextTop = containerInfo.modals[containerInfo.modals.length - 1];
|
||||
// as soon as a modal is adding its modalRef is undefined. it can't set
|
||||
// aria-hidden because the dom element doesn't exist either
|
||||
// when modal was unmounted before modalRef gets null
|
||||
if (nextTop.modalRef) {
|
||||
ariaHidden(nextTop.modalRef, false);
|
||||
}
|
||||
}
|
||||
return modalIndex;
|
||||
}
|
||||
isTopModal(modal) {
|
||||
return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
|
||||
}
|
||||
}
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import * as React from 'react';
|
||||
import { unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_createChainedFunction as createChainedFunction } from '@mui/utils';
|
||||
import extractEventHandlers from '@mui/utils/extractEventHandlers';
|
||||
import { ModalManager, ariaHidden } from './ModalManager';
|
||||
function getContainer(container) {
|
||||
return typeof container === 'function' ? container() : container;
|
||||
}
|
||||
function getHasTransition(children) {
|
||||
return children ? children.props.hasOwnProperty('in') : false;
|
||||
}
|
||||
|
||||
// A modal manager used to track and manage the state of open Modals.
|
||||
// Modals don't open on the server so this won't conflict with concurrent requests.
|
||||
const defaultManager = new ModalManager();
|
||||
/**
|
||||
*
|
||||
* Demos:
|
||||
*
|
||||
* - [Modal](https://mui.com/base-ui/react-modal/#hook)
|
||||
*
|
||||
* API:
|
||||
*
|
||||
* - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
|
||||
*/
|
||||
function useModal(parameters) {
|
||||
const {
|
||||
container,
|
||||
disableEscapeKeyDown = false,
|
||||
disableScrollLock = false,
|
||||
// @ts-ignore internal logic - Base UI supports the manager as a prop too
|
||||
manager = defaultManager,
|
||||
closeAfterTransition = false,
|
||||
onTransitionEnter,
|
||||
onTransitionExited,
|
||||
children,
|
||||
onClose,
|
||||
open,
|
||||
rootRef
|
||||
} = parameters;
|
||||
|
||||
// @ts-ignore internal logic
|
||||
const modal = React.useRef({});
|
||||
const mountNodeRef = React.useRef(null);
|
||||
const modalRef = React.useRef(null);
|
||||
const handleRef = useForkRef(modalRef, rootRef);
|
||||
const [exited, setExited] = React.useState(!open);
|
||||
const hasTransition = getHasTransition(children);
|
||||
let ariaHiddenProp = true;
|
||||
if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
|
||||
ariaHiddenProp = false;
|
||||
}
|
||||
const getDoc = () => ownerDocument(mountNodeRef.current);
|
||||
const getModal = () => {
|
||||
modal.current.modalRef = modalRef.current;
|
||||
modal.current.mount = mountNodeRef.current;
|
||||
return modal.current;
|
||||
};
|
||||
const handleMounted = () => {
|
||||
manager.mount(getModal(), {
|
||||
disableScrollLock
|
||||
});
|
||||
|
||||
// Fix a bug on Chrome where the scroll isn't initially 0.
|
||||
if (modalRef.current) {
|
||||
modalRef.current.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
const handleOpen = useEventCallback(() => {
|
||||
const resolvedContainer = getContainer(container) || getDoc().body;
|
||||
manager.add(getModal(), resolvedContainer);
|
||||
|
||||
// The element was already mounted.
|
||||
if (modalRef.current) {
|
||||
handleMounted();
|
||||
}
|
||||
});
|
||||
const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
|
||||
const handlePortalRef = useEventCallback(node => {
|
||||
mountNodeRef.current = node;
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
if (open && isTopModal()) {
|
||||
handleMounted();
|
||||
} else if (modalRef.current) {
|
||||
ariaHidden(modalRef.current, ariaHiddenProp);
|
||||
}
|
||||
});
|
||||
const handleClose = React.useCallback(() => {
|
||||
manager.remove(getModal(), ariaHiddenProp);
|
||||
}, [ariaHiddenProp, manager]);
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
handleClose();
|
||||
};
|
||||
}, [handleClose]);
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
handleOpen();
|
||||
} else if (!hasTransition || !closeAfterTransition) {
|
||||
handleClose();
|
||||
}
|
||||
}, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
||||
const createHandleKeyDown = otherHandlers => event => {
|
||||
var _otherHandlers$onKeyD;
|
||||
(_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
|
||||
|
||||
// The handler doesn't take event.defaultPrevented into account:
|
||||
//
|
||||
// event.preventDefault() is meant to stop default behaviors like
|
||||
// clicking a checkbox to check it, hitting a button to submit a form,
|
||||
// and hitting left arrow to move the cursor in a text input etc.
|
||||
// Only special HTML elements have these default behaviors.
|
||||
if (event.key !== 'Escape' || event.which === 229 ||
|
||||
// Wait until IME is settled.
|
||||
!isTopModal()) {
|
||||
return;
|
||||
}
|
||||
if (!disableEscapeKeyDown) {
|
||||
// Swallow the event, in case someone is listening for the escape key on the body.
|
||||
event.stopPropagation();
|
||||
if (onClose) {
|
||||
onClose(event, 'escapeKeyDown');
|
||||
}
|
||||
}
|
||||
};
|
||||
const createHandleBackdropClick = otherHandlers => event => {
|
||||
var _otherHandlers$onClic;
|
||||
(_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
if (onClose) {
|
||||
onClose(event, 'backdropClick');
|
||||
}
|
||||
};
|
||||
const getRootProps = (otherHandlers = {}) => {
|
||||
const propsEventHandlers = extractEventHandlers(parameters);
|
||||
|
||||
// The custom event handlers shouldn't be spread on the root element
|
||||
delete propsEventHandlers.onTransitionEnter;
|
||||
delete propsEventHandlers.onTransitionExited;
|
||||
const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
|
||||
return _extends({
|
||||
role: 'presentation'
|
||||
}, externalEventHandlers, {
|
||||
onKeyDown: createHandleKeyDown(externalEventHandlers),
|
||||
ref: handleRef
|
||||
});
|
||||
};
|
||||
const getBackdropProps = (otherHandlers = {}) => {
|
||||
const externalEventHandlers = otherHandlers;
|
||||
return _extends({
|
||||
'aria-hidden': true
|
||||
}, externalEventHandlers, {
|
||||
onClick: createHandleBackdropClick(externalEventHandlers),
|
||||
open
|
||||
});
|
||||
};
|
||||
const getTransitionProps = () => {
|
||||
const handleEnter = () => {
|
||||
setExited(false);
|
||||
if (onTransitionEnter) {
|
||||
onTransitionEnter();
|
||||
}
|
||||
};
|
||||
const handleExited = () => {
|
||||
setExited(true);
|
||||
if (onTransitionExited) {
|
||||
onTransitionExited();
|
||||
}
|
||||
if (closeAfterTransition) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
return {
|
||||
onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
|
||||
onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
|
||||
};
|
||||
};
|
||||
return {
|
||||
getRootProps,
|
||||
getBackdropProps,
|
||||
getTransitionProps,
|
||||
rootRef: handleRef,
|
||||
portalRef: handlePortalRef,
|
||||
isTopModal,
|
||||
exited,
|
||||
hasTransition
|
||||
};
|
||||
}
|
||||
export default useModal;
|
||||
-217
@@ -1,217 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import refType from '@mui/utils/refType';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
variant,
|
||||
disabled,
|
||||
multiple,
|
||||
open,
|
||||
error
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
|
||||
icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled']
|
||||
};
|
||||
return composeClasses(slots, getNativeSelectUtilityClasses, classes);
|
||||
};
|
||||
export const nativeSelectSelectStyles = ({
|
||||
ownerState,
|
||||
theme
|
||||
}) => _extends({
|
||||
MozAppearance: 'none',
|
||||
// Reset
|
||||
WebkitAppearance: 'none',
|
||||
// Reset
|
||||
// When interacting quickly, the text can end up selected.
|
||||
// Native select can't be selected either.
|
||||
userSelect: 'none',
|
||||
borderRadius: 0,
|
||||
// Reset
|
||||
cursor: 'pointer',
|
||||
'&:focus': _extends({}, theme.vars ? {
|
||||
backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
|
||||
} : {
|
||||
backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
|
||||
}, {
|
||||
borderRadius: 0 // Reset Chrome style
|
||||
}),
|
||||
// Remove IE11 arrow
|
||||
'&::-ms-expand': {
|
||||
display: 'none'
|
||||
},
|
||||
[`&.${nativeSelectClasses.disabled}`]: {
|
||||
cursor: 'default'
|
||||
},
|
||||
'&[multiple]': {
|
||||
height: 'auto'
|
||||
},
|
||||
'&:not([multiple]) option, &:not([multiple]) optgroup': {
|
||||
backgroundColor: (theme.vars || theme).palette.background.paper
|
||||
},
|
||||
// Bump specificity to allow extending custom inputs
|
||||
'&&&': {
|
||||
paddingRight: 24,
|
||||
minWidth: 16 // So it doesn't collapse.
|
||||
}
|
||||
}, ownerState.variant === 'filled' && {
|
||||
'&&&': {
|
||||
paddingRight: 32
|
||||
}
|
||||
}, ownerState.variant === 'outlined' && {
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
'&:focus': {
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
|
||||
},
|
||||
'&&&': {
|
||||
paddingRight: 32
|
||||
}
|
||||
});
|
||||
const NativeSelectSelect = styled('select', {
|
||||
name: 'MuiNativeSelect',
|
||||
slot: 'Select',
|
||||
shouldForwardProp: rootShouldForwardProp,
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, {
|
||||
[`&.${nativeSelectClasses.multiple}`]: styles.multiple
|
||||
}];
|
||||
}
|
||||
})(nativeSelectSelectStyles);
|
||||
export const nativeSelectIconStyles = ({
|
||||
ownerState,
|
||||
theme
|
||||
}) => _extends({
|
||||
// We use a position absolute over a flexbox in order to forward the pointer events
|
||||
// to the input and to support wrapping tags..
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 'calc(50% - .5em)',
|
||||
// Center vertically, height is 1em
|
||||
pointerEvents: 'none',
|
||||
// Don't block pointer events on the select under the icon.
|
||||
color: (theme.vars || theme).palette.action.active,
|
||||
[`&.${nativeSelectClasses.disabled}`]: {
|
||||
color: (theme.vars || theme).palette.action.disabled
|
||||
}
|
||||
}, ownerState.open && {
|
||||
transform: 'rotate(180deg)'
|
||||
}, ownerState.variant === 'filled' && {
|
||||
right: 7
|
||||
}, ownerState.variant === 'outlined' && {
|
||||
right: 7
|
||||
});
|
||||
const NativeSelectIcon = styled('svg', {
|
||||
name: 'MuiNativeSelect',
|
||||
slot: 'Icon',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
|
||||
}
|
||||
})(nativeSelectIconStyles);
|
||||
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInput(props, ref) {
|
||||
const {
|
||||
className,
|
||||
disabled,
|
||||
error,
|
||||
IconComponent,
|
||||
inputRef,
|
||||
variant = 'standard'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
disabled,
|
||||
variant,
|
||||
error
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
return /*#__PURE__*/_jsxs(React.Fragment, {
|
||||
children: [/*#__PURE__*/_jsx(NativeSelectSelect, _extends({
|
||||
ownerState: ownerState,
|
||||
className: clsx(classes.select, className),
|
||||
disabled: disabled,
|
||||
ref: inputRef || ref
|
||||
}, other)), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, {
|
||||
as: IconComponent,
|
||||
ownerState: ownerState,
|
||||
className: classes.icon
|
||||
})]
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
|
||||
/**
|
||||
* The option elements to populate the select with.
|
||||
* Can be some `<option>` elements.
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* The CSS class name of the select element.
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the select is disabled.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `select input` will indicate an error.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* The icon that displays the arrow.
|
||||
*/
|
||||
IconComponent: PropTypes.elementType.isRequired,
|
||||
/**
|
||||
* Use that prop to pass a ref to the native select element.
|
||||
* @deprecated
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
multiple: PropTypes.bool,
|
||||
/**
|
||||
* Name attribute of the `select` or hidden `input` element.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when a menu item is selected.
|
||||
*
|
||||
* @param {object} event The event source of the callback.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* The input value.
|
||||
*/
|
||||
value: PropTypes.any,
|
||||
/**
|
||||
* The variant to use.
|
||||
*/
|
||||
variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
|
||||
} : void 0;
|
||||
export default NativeSelectInput;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getNativeSelectUtilityClasses(slot) {
|
||||
return generateUtilityClass('MuiNativeSelect', slot);
|
||||
}
|
||||
const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
|
||||
export default nativeSelectClasses;
|
||||
-135
@@ -1,135 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
var _span;
|
||||
const _excluded = ["children", "classes", "className", "label", "notched"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const NotchedOutlineRoot = styled('fieldset', {
|
||||
shouldForwardProp: rootShouldForwardProp
|
||||
})({
|
||||
textAlign: 'left',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: -5,
|
||||
left: 0,
|
||||
margin: 0,
|
||||
padding: '0 8px',
|
||||
pointerEvents: 'none',
|
||||
borderRadius: 'inherit',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
overflow: 'hidden',
|
||||
minWidth: '0%'
|
||||
});
|
||||
const NotchedOutlineLegend = styled('legend', {
|
||||
shouldForwardProp: rootShouldForwardProp
|
||||
})(({
|
||||
ownerState,
|
||||
theme
|
||||
}) => _extends({
|
||||
float: 'unset',
|
||||
// Fix conflict with bootstrap
|
||||
width: 'auto',
|
||||
// Fix conflict with bootstrap
|
||||
overflow: 'hidden'
|
||||
}, !ownerState.withLabel && {
|
||||
padding: 0,
|
||||
lineHeight: '11px',
|
||||
// sync with `height` in `legend` styles
|
||||
transition: theme.transitions.create('width', {
|
||||
duration: 150,
|
||||
easing: theme.transitions.easing.easeOut
|
||||
})
|
||||
}, ownerState.withLabel && _extends({
|
||||
display: 'block',
|
||||
// Fix conflict with normalize.css and sanitize.css
|
||||
padding: 0,
|
||||
height: 11,
|
||||
// sync with `lineHeight` in `legend` styles
|
||||
fontSize: '0.75em',
|
||||
visibility: 'hidden',
|
||||
maxWidth: 0.01,
|
||||
transition: theme.transitions.create('max-width', {
|
||||
duration: 50,
|
||||
easing: theme.transitions.easing.easeOut
|
||||
}),
|
||||
whiteSpace: 'nowrap',
|
||||
'& > span': {
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
display: 'inline-block',
|
||||
opacity: 0,
|
||||
visibility: 'visible'
|
||||
}
|
||||
}, ownerState.notched && {
|
||||
maxWidth: '100%',
|
||||
transition: theme.transitions.create('max-width', {
|
||||
duration: 100,
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
delay: 50
|
||||
})
|
||||
})));
|
||||
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
export default function NotchedOutline(props) {
|
||||
const {
|
||||
className,
|
||||
label,
|
||||
notched
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const withLabel = label != null && label !== '';
|
||||
const ownerState = _extends({}, props, {
|
||||
notched,
|
||||
withLabel
|
||||
});
|
||||
return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
|
||||
"aria-hidden": true,
|
||||
className: className,
|
||||
ownerState: ownerState
|
||||
}, other, {
|
||||
children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
|
||||
ownerState: ownerState,
|
||||
children: withLabel ? /*#__PURE__*/_jsx("span", {
|
||||
children: label
|
||||
}) : // notranslate needed while Google Translate will not fix zero-width space issue
|
||||
_span || (_span = /*#__PURE__*/_jsx("span", {
|
||||
className: "notranslate",
|
||||
children: "\u200B"
|
||||
}))
|
||||
})
|
||||
}));
|
||||
}
|
||||
process.env.NODE_ENV !== "production" ? NotchedOutline.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 label.
|
||||
*/
|
||||
label: PropTypes.node,
|
||||
/**
|
||||
* If `true`, the outline is notched to accommodate the label.
|
||||
*/
|
||||
notched: PropTypes.bool.isRequired,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
style: PropTypes.object
|
||||
} : void 0;
|
||||
-350
@@ -1,350 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import refType from '@mui/utils/refType';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import NotchedOutline from './NotchedOutline';
|
||||
import useFormControl from '../FormControl/useFormControl';
|
||||
import formControlState from '../FormControl/formControlState';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
|
||||
import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root'],
|
||||
notchedOutline: ['notchedOutline'],
|
||||
input: ['input']
|
||||
};
|
||||
const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
|
||||
return _extends({}, classes, composedClasses);
|
||||
};
|
||||
const OutlinedInputRoot = styled(InputBaseRoot, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiOutlinedInput',
|
||||
slot: 'Root',
|
||||
overridesResolver: inputBaseRootOverridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => {
|
||||
const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
|
||||
return _extends({
|
||||
position: 'relative',
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
||||
borderColor: (theme.vars || theme).palette.text.primary
|
||||
},
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
||||
borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
|
||||
}
|
||||
},
|
||||
[`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
|
||||
borderColor: (theme.vars || theme).palette[ownerState.color].main,
|
||||
borderWidth: 2
|
||||
},
|
||||
[`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
|
||||
borderColor: (theme.vars || theme).palette.error.main
|
||||
},
|
||||
[`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
|
||||
borderColor: (theme.vars || theme).palette.action.disabled
|
||||
}
|
||||
}, ownerState.startAdornment && {
|
||||
paddingLeft: 14
|
||||
}, ownerState.endAdornment && {
|
||||
paddingRight: 14
|
||||
}, ownerState.multiline && _extends({
|
||||
padding: '16.5px 14px'
|
||||
}, ownerState.size === 'small' && {
|
||||
padding: '8.5px 14px'
|
||||
}));
|
||||
});
|
||||
const NotchedOutlineRoot = styled(NotchedOutline, {
|
||||
name: 'MuiOutlinedInput',
|
||||
slot: 'NotchedOutline',
|
||||
overridesResolver: (props, styles) => styles.notchedOutline
|
||||
})(({
|
||||
theme
|
||||
}) => {
|
||||
const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
|
||||
return {
|
||||
borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
|
||||
};
|
||||
});
|
||||
const OutlinedInputInput = styled(InputBaseInput, {
|
||||
name: 'MuiOutlinedInput',
|
||||
slot: 'Input',
|
||||
overridesResolver: inputBaseInputOverridesResolver
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
padding: '16.5px 14px'
|
||||
}, !theme.vars && {
|
||||
'&:-webkit-autofill': {
|
||||
WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
|
||||
WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
|
||||
caretColor: theme.palette.mode === 'light' ? null : '#fff',
|
||||
borderRadius: 'inherit'
|
||||
}
|
||||
}, theme.vars && {
|
||||
'&:-webkit-autofill': {
|
||||
borderRadius: 'inherit'
|
||||
},
|
||||
[theme.getColorSchemeSelector('dark')]: {
|
||||
'&:-webkit-autofill': {
|
||||
WebkitBoxShadow: '0 0 0 100px #266798 inset',
|
||||
WebkitTextFillColor: '#fff',
|
||||
caretColor: '#fff'
|
||||
}
|
||||
}
|
||||
}, ownerState.size === 'small' && {
|
||||
padding: '8.5px 14px'
|
||||
}, ownerState.multiline && {
|
||||
padding: 0
|
||||
}, ownerState.startAdornment && {
|
||||
paddingLeft: 0
|
||||
}, ownerState.endAdornment && {
|
||||
paddingRight: 0
|
||||
}));
|
||||
const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
|
||||
var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiOutlinedInput'
|
||||
});
|
||||
const {
|
||||
components = {},
|
||||
fullWidth = false,
|
||||
inputComponent = 'input',
|
||||
label,
|
||||
multiline = false,
|
||||
notched,
|
||||
slots = {},
|
||||
type = 'text'
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const classes = useUtilityClasses(props);
|
||||
const muiFormControl = useFormControl();
|
||||
const fcs = formControlState({
|
||||
props,
|
||||
muiFormControl,
|
||||
states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
|
||||
});
|
||||
const ownerState = _extends({}, props, {
|
||||
color: fcs.color || 'primary',
|
||||
disabled: fcs.disabled,
|
||||
error: fcs.error,
|
||||
focused: fcs.focused,
|
||||
formControl: muiFormControl,
|
||||
fullWidth,
|
||||
hiddenLabel: fcs.hiddenLabel,
|
||||
multiline,
|
||||
size: fcs.size,
|
||||
type
|
||||
});
|
||||
const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
|
||||
const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
|
||||
return /*#__PURE__*/_jsx(InputBase, _extends({
|
||||
slots: {
|
||||
root: RootSlot,
|
||||
input: InputSlot
|
||||
},
|
||||
renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
|
||||
ownerState: ownerState,
|
||||
className: classes.notchedOutline,
|
||||
label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
|
||||
children: [label, "\u2009", '*']
|
||||
})) : label,
|
||||
notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
|
||||
}),
|
||||
fullWidth: fullWidth,
|
||||
inputComponent: inputComponent,
|
||||
multiline: multiline,
|
||||
ref: ref,
|
||||
type: type
|
||||
}, other, {
|
||||
classes: _extends({}, classes, {
|
||||
notchedOutline: null
|
||||
})
|
||||
}));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? OutlinedInput.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 helps users to fill forms faster, especially on mobile devices.
|
||||
* The name can be confusing, as it's more like an autofill.
|
||||
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
||||
*/
|
||||
autoComplete: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the `input` element is focused during the first mount.
|
||||
*/
|
||||
autoFocus: PropTypes.bool,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* 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).
|
||||
* The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
Input: PropTypes.elementType,
|
||||
Root: PropTypes.elementType
|
||||
}),
|
||||
/**
|
||||
* The default value. Use when the component is not controlled.
|
||||
*/
|
||||
defaultValue: PropTypes.any,
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* End `InputAdornment` for this component.
|
||||
*/
|
||||
endAdornment: PropTypes.node,
|
||||
/**
|
||||
* If `true`, the `input` will indicate an error.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` will take up the full width of its container.
|
||||
* @default false
|
||||
*/
|
||||
fullWidth: PropTypes.bool,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: PropTypes.string,
|
||||
/**
|
||||
* The component used for the `input` element.
|
||||
* Either a string to use a HTML element or a component.
|
||||
* @default 'input'
|
||||
*/
|
||||
inputComponent: PropTypes.elementType,
|
||||
/**
|
||||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
||||
* @default {}
|
||||
*/
|
||||
inputProps: PropTypes.object,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* The label of the `input`. It is only used for layout. The actual labelling
|
||||
* is handled by `InputLabel`.
|
||||
*/
|
||||
label: PropTypes.node,
|
||||
/**
|
||||
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
||||
* FormControl.
|
||||
* The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
|
||||
*/
|
||||
margin: PropTypes.oneOf(['dense', 'none']),
|
||||
/**
|
||||
* Maximum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* Minimum number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
|
||||
* @default false
|
||||
*/
|
||||
multiline: PropTypes.bool,
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* If `true`, the outline is notched to accommodate the label.
|
||||
*/
|
||||
notched: PropTypes.bool,
|
||||
/**
|
||||
* Callback fired when the value is changed.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* The short hint displayed in the `input` before the user enters a value.
|
||||
*/
|
||||
placeholder: PropTypes.string,
|
||||
/**
|
||||
* It prevents the user from changing the value of the field
|
||||
* (not from interacting with the field).
|
||||
*/
|
||||
readOnly: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the `input` element is required.
|
||||
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* Number of rows to display when multiline option is set to true.
|
||||
*/
|
||||
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
/**
|
||||
* 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({
|
||||
input: PropTypes.elementType,
|
||||
root: PropTypes.elementType
|
||||
}),
|
||||
/**
|
||||
* Start `InputAdornment` for this component.
|
||||
*/
|
||||
startAdornment: PropTypes.node,
|
||||
/**
|
||||
* 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]),
|
||||
/**
|
||||
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
|
||||
* @default 'text'
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
/**
|
||||
* The value of the `input` element, required for a controlled component.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
OutlinedInput.muiName = 'Input';
|
||||
export default OutlinedInput;
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
import { inputBaseClasses } from '../InputBase';
|
||||
export function getOutlinedInputUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiOutlinedInput', slot);
|
||||
}
|
||||
const outlinedInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
|
||||
export default outlinedInputClasses;
|
||||
+2
-2
@@ -12,7 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import styled from '../styles/styled';
|
||||
import getOverlayAlpha from '../styles/getOverlayAlpha';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import useTheme from '../styles/useTheme';
|
||||
import { getPaperUtilityClass } from './paperClasses';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
@@ -59,7 +59,7 @@ const PaperRoot = styled('div', {
|
||||
}));
|
||||
});
|
||||
const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiPaper'
|
||||
});
|
||||
|
||||
+4
-3
@@ -8,15 +8,16 @@ const _excluded = ["onEntering"],
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import { useSlotProps, isHostComponent } from '@mui/base/utils';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import HTMLElementType from '@mui/utils/HTMLElementType';
|
||||
import refType from '@mui/utils/refType';
|
||||
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
|
||||
import integerPropType from '@mui/utils/integerPropType';
|
||||
import chainPropTypes from '@mui/utils/chainPropTypes';
|
||||
import useSlotProps from '@mui/utils/useSlotProps';
|
||||
import isHostComponent from '@mui/utils/isHostComponent';
|
||||
import styled from '../styles/styled';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import { useDefaultProps } from '../DefaultPropsProvider';
|
||||
import debounce from '../utils/debounce';
|
||||
import ownerDocument from '../utils/ownerDocument';
|
||||
import ownerWindow from '../utils/ownerWindow';
|
||||
@@ -88,7 +89,7 @@ export const PopoverPaper = styled(PaperBase, {
|
||||
});
|
||||
const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
|
||||
var _slotProps$paper, _slots$root, _slots$paper;
|
||||
const props = useThemeProps({
|
||||
const props = useDefaultProps({
|
||||
props: inProps,
|
||||
name: 'MuiPopover'
|
||||
});
|
||||
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactElementRef as getReactElementRef } from '@mui/utils';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
function getContainer(container) {
|
||||
return typeof container === 'function' ? container() : container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Portals provide a first-class way to render children into a DOM node
|
||||
* that exists outside the DOM hierarchy of the parent component.
|
||||
*
|
||||
* Demos:
|
||||
*
|
||||
* - [Portal](https://mui.com/material-ui/react-portal/)
|
||||
*
|
||||
* API:
|
||||
*
|
||||
* - [Portal API](https://mui.com/material-ui/api/portal/)
|
||||
*/
|
||||
const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
|
||||
const {
|
||||
children,
|
||||
container,
|
||||
disablePortal = false
|
||||
} = props;
|
||||
const [mountNode, setMountNode] = React.useState(null);
|
||||
const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
|
||||
useEnhancedEffect(() => {
|
||||
if (!disablePortal) {
|
||||
setMountNode(getContainer(container) || document.body);
|
||||
}
|
||||
}, [container, disablePortal]);
|
||||
useEnhancedEffect(() => {
|
||||
if (mountNode && !disablePortal) {
|
||||
setRef(forwardedRef, mountNode);
|
||||
return () => {
|
||||
setRef(forwardedRef, null);
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}, [forwardedRef, mountNode, disablePortal]);
|
||||
if (disablePortal) {
|
||||
if ( /*#__PURE__*/React.isValidElement(children)) {
|
||||
const newProps = {
|
||||
ref: handleRef
|
||||
};
|
||||
return /*#__PURE__*/React.cloneElement(children, newProps);
|
||||
}
|
||||
return /*#__PURE__*/_jsx(React.Fragment, {
|
||||
children: children
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/_jsx(React.Fragment, {
|
||||
children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
|
||||
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
||||
// │ These PropTypes are generated from the TypeScript type definitions. │
|
||||
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* The children to render into the `container`.
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* An HTML element or function that returns one.
|
||||
* The `container` will have the portal children appended to it.
|
||||
*
|
||||
* You can also provide a callback, which is called in a React layout effect.
|
||||
* This lets you set the container from a ref, and also makes server-side rendering possible.
|
||||
*
|
||||
* By default, it uses the body of the top-level document object,
|
||||
* so it's simply `document.body` most of the time.
|
||||
*/
|
||||
container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
|
||||
/**
|
||||
* The `children` will be under the DOM hierarchy of the parent component.
|
||||
* @default false
|
||||
*/
|
||||
disablePortal: PropTypes.bool
|
||||
} : void 0;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line
|
||||
Portal['propTypes' + ''] = exactProp(Portal.propTypes);
|
||||
}
|
||||
export default Portal;
|
||||
-214
@@ -1,214 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import refType from '@mui/utils/refType';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import { alpha } from '@mui/system/colorManipulator';
|
||||
import SwitchBase from '../internal/SwitchBase';
|
||||
import useThemeProps from '../styles/useThemeProps';
|
||||
import RadioButtonIcon from './RadioButtonIcon';
|
||||
import capitalize from '../utils/capitalize';
|
||||
import createChainedFunction from '../utils/createChainedFunction';
|
||||
import useRadioGroup from '../RadioGroup/useRadioGroup';
|
||||
import radioClasses, { getRadioUtilityClass } from './radioClasses';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = ownerState => {
|
||||
const {
|
||||
classes,
|
||||
color,
|
||||
size
|
||||
} = ownerState;
|
||||
const slots = {
|
||||
root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
|
||||
};
|
||||
return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
|
||||
};
|
||||
const RadioRoot = styled(SwitchBase, {
|
||||
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
||||
name: 'MuiRadio',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => {
|
||||
const {
|
||||
ownerState
|
||||
} = props;
|
||||
return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
|
||||
}
|
||||
})(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
color: (theme.vars || theme).palette.text.secondary
|
||||
}, !ownerState.disableRipple && {
|
||||
'&:hover': {
|
||||
backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
||||
// Reset on touch devices, it doesn't add specificity
|
||||
'@media (hover: none)': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}, ownerState.color !== 'default' && {
|
||||
[`&.${radioClasses.checked}`]: {
|
||||
color: (theme.vars || theme).palette[ownerState.color].main
|
||||
}
|
||||
}, {
|
||||
[`&.${radioClasses.disabled}`]: {
|
||||
color: (theme.vars || theme).palette.action.disabled
|
||||
}
|
||||
}));
|
||||
function areEqualValues(a, b) {
|
||||
if (typeof b === 'object' && b !== null) {
|
||||
return a === b;
|
||||
}
|
||||
|
||||
// The value could be a number, the DOM will stringify it anyway.
|
||||
return String(a) === String(b);
|
||||
}
|
||||
const defaultCheckedIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {
|
||||
checked: true
|
||||
});
|
||||
const defaultIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {});
|
||||
const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
|
||||
var _defaultIcon$props$fo, _defaultCheckedIcon$p;
|
||||
const props = useThemeProps({
|
||||
props: inProps,
|
||||
name: 'MuiRadio'
|
||||
});
|
||||
const {
|
||||
checked: checkedProp,
|
||||
checkedIcon = defaultCheckedIcon,
|
||||
color = 'primary',
|
||||
icon = defaultIcon,
|
||||
name: nameProp,
|
||||
onChange: onChangeProp,
|
||||
size = 'medium',
|
||||
className
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = _extends({}, props, {
|
||||
color,
|
||||
size
|
||||
});
|
||||
const classes = useUtilityClasses(ownerState);
|
||||
const radioGroup = useRadioGroup();
|
||||
let checked = checkedProp;
|
||||
const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
|
||||
let name = nameProp;
|
||||
if (radioGroup) {
|
||||
if (typeof checked === 'undefined') {
|
||||
checked = areEqualValues(radioGroup.value, props.value);
|
||||
}
|
||||
if (typeof name === 'undefined') {
|
||||
name = radioGroup.name;
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/_jsx(RadioRoot, _extends({
|
||||
type: "radio",
|
||||
icon: /*#__PURE__*/React.cloneElement(icon, {
|
||||
fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
|
||||
}),
|
||||
checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
|
||||
fontSize: (_defaultCheckedIcon$p = defaultCheckedIcon.props.fontSize) != null ? _defaultCheckedIcon$p : size
|
||||
}),
|
||||
ownerState: ownerState,
|
||||
classes: classes,
|
||||
name: name,
|
||||
checked: checked,
|
||||
onChange: onChange,
|
||||
ref: ref,
|
||||
className: clsx(classes.root, className)
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Radio.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`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* If `true`, the component is checked.
|
||||
*/
|
||||
checked: PropTypes.bool,
|
||||
/**
|
||||
* The icon to display when the component is checked.
|
||||
* @default <RadioButtonIcon checked />
|
||||
*/
|
||||
checkedIcon: 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', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
||||
/**
|
||||
* If `true`, the component is disabled.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, the ripple effect is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disableRipple: PropTypes.bool,
|
||||
/**
|
||||
* The icon to display when the component is unchecked.
|
||||
* @default <RadioButtonIcon />
|
||||
*/
|
||||
icon: PropTypes.node,
|
||||
/**
|
||||
* The id of the `input` element.
|
||||
*/
|
||||
id: PropTypes.string,
|
||||
/**
|
||||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
||||
*/
|
||||
inputProps: PropTypes.object,
|
||||
/**
|
||||
* Pass a ref to the `input` element.
|
||||
*/
|
||||
inputRef: refType,
|
||||
/**
|
||||
* Name attribute of the `input` element.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when the state is changed.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* If `true`, the `input` element is required.
|
||||
* @default false
|
||||
*/
|
||||
required: PropTypes.bool,
|
||||
/**
|
||||
* The size of the component.
|
||||
* `small` is equivalent to the dense radio styling.
|
||||
* @default 'medium'
|
||||
*/
|
||||
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), 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 value of the component. The DOM API casts this to a string.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
export default Radio;
|
||||
-81
@@ -1,81 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
|
||||
import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
|
||||
import styled, { rootShouldForwardProp } from '../styles/styled';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
const RadioButtonIconRoot = styled('span', {
|
||||
shouldForwardProp: rootShouldForwardProp
|
||||
})({
|
||||
position: 'relative',
|
||||
display: 'flex'
|
||||
});
|
||||
const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
|
||||
// Scale applied to prevent dot misalignment in Safari
|
||||
transform: 'scale(1)'
|
||||
});
|
||||
const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
|
||||
theme,
|
||||
ownerState
|
||||
}) => _extends({
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'scale(0)',
|
||||
transition: theme.transitions.create('transform', {
|
||||
easing: theme.transitions.easing.easeIn,
|
||||
duration: theme.transitions.duration.shortest
|
||||
})
|
||||
}, ownerState.checked && {
|
||||
transform: 'scale(1)',
|
||||
transition: theme.transitions.create('transform', {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.shortest
|
||||
})
|
||||
}));
|
||||
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
function RadioButtonIcon(props) {
|
||||
const {
|
||||
checked = false,
|
||||
classes = {},
|
||||
fontSize
|
||||
} = props;
|
||||
const ownerState = _extends({}, props, {
|
||||
checked
|
||||
});
|
||||
return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
|
||||
className: classes.root,
|
||||
ownerState: ownerState,
|
||||
children: [/*#__PURE__*/_jsx(RadioButtonIconBackground, {
|
||||
fontSize: fontSize,
|
||||
className: classes.background,
|
||||
ownerState: ownerState
|
||||
}), /*#__PURE__*/_jsx(RadioButtonIconDot, {
|
||||
fontSize: fontSize,
|
||||
className: classes.dot,
|
||||
ownerState: ownerState
|
||||
})]
|
||||
});
|
||||
}
|
||||
process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
|
||||
/**
|
||||
* If `true`, the component is checked.
|
||||
*/
|
||||
checked: PropTypes.bool,
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: PropTypes.object,
|
||||
/**
|
||||
* The size of the component.
|
||||
* `small` is equivalent to the dense radio styling.
|
||||
*/
|
||||
fontSize: PropTypes.oneOf(['small', 'medium'])
|
||||
} : void 0;
|
||||
export default RadioButtonIcon;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getRadioUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiRadio', slot);
|
||||
}
|
||||
const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
|
||||
export default radioClasses;
|
||||
-117
@@ -1,117 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import FormGroup from '../FormGroup';
|
||||
import { getRadioGroupUtilityClass } from './radioGroupClasses';
|
||||
import useForkRef from '../utils/useForkRef';
|
||||
import useControlled from '../utils/useControlled';
|
||||
import RadioGroupContext from './RadioGroupContext';
|
||||
import useId from '../utils/useId';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const useUtilityClasses = props => {
|
||||
const {
|
||||
classes,
|
||||
row,
|
||||
error
|
||||
} = props;
|
||||
const slots = {
|
||||
root: ['root', row && 'row', error && 'error']
|
||||
};
|
||||
return composeClasses(slots, getRadioGroupUtilityClass, classes);
|
||||
};
|
||||
const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
|
||||
const {
|
||||
// private
|
||||
// eslint-disable-next-line react/prop-types
|
||||
actions,
|
||||
children,
|
||||
className,
|
||||
defaultValue,
|
||||
name: nameProp,
|
||||
onChange,
|
||||
value: valueProp
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const rootRef = React.useRef(null);
|
||||
const classes = useUtilityClasses(props);
|
||||
const [value, setValueState] = useControlled({
|
||||
controlled: valueProp,
|
||||
default: defaultValue,
|
||||
name: 'RadioGroup'
|
||||
});
|
||||
React.useImperativeHandle(actions, () => ({
|
||||
focus: () => {
|
||||
let input = rootRef.current.querySelector('input:not(:disabled):checked');
|
||||
if (!input) {
|
||||
input = rootRef.current.querySelector('input:not(:disabled)');
|
||||
}
|
||||
if (input) {
|
||||
input.focus();
|
||||
}
|
||||
}
|
||||
}), []);
|
||||
const handleRef = useForkRef(ref, rootRef);
|
||||
const name = useId(nameProp);
|
||||
const contextValue = React.useMemo(() => ({
|
||||
name,
|
||||
onChange(event) {
|
||||
setValueState(event.target.value);
|
||||
if (onChange) {
|
||||
onChange(event, event.target.value);
|
||||
}
|
||||
},
|
||||
value
|
||||
}), [name, onChange, setValueState, value]);
|
||||
return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
|
||||
value: contextValue,
|
||||
children: /*#__PURE__*/_jsx(FormGroup, _extends({
|
||||
role: "radiogroup",
|
||||
ref: handleRef,
|
||||
className: clsx(classes.root, className)
|
||||
}, other, {
|
||||
children: children
|
||||
}))
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? RadioGroup.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,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The default value. Use when the component is not controlled.
|
||||
*/
|
||||
defaultValue: PropTypes.any,
|
||||
/**
|
||||
* The name used to reference the value of the control.
|
||||
* If you don't provide this prop, it falls back to a randomly generated name.
|
||||
*/
|
||||
name: PropTypes.string,
|
||||
/**
|
||||
* Callback fired when a radio button is selected.
|
||||
*
|
||||
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
|
||||
* @param {string} value The value of the selected radio button.
|
||||
* You can pull out the new value by accessing `event.target.value` (string).
|
||||
*/
|
||||
onChange: PropTypes.func,
|
||||
/**
|
||||
* Value of the selected radio button. The DOM API casts this to a string.
|
||||
*/
|
||||
value: PropTypes.any
|
||||
} : void 0;
|
||||
export default RadioGroup;
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
import * as React from 'react';
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
const RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
RadioGroupContext.displayName = 'RadioGroupContext';
|
||||
}
|
||||
export default RadioGroupContext;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getRadioGroupUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiRadioGroup', slot);
|
||||
}
|
||||
const radioGroupClasses = generateUtilityClasses('MuiRadioGroup', ['root', 'row', 'error']);
|
||||
export default radioGroupClasses;
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RadioGroupContext from './RadioGroupContext';
|
||||
export default function useRadioGroup() {
|
||||
return React.useContext(RadioGroupContext);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user