From 0c6c3bdafd36ce522bdad7eac328f449f04325c1 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 12:57:33 +0100 Subject: [PATCH 1/6] [Accordion] Convert to support zero-runtime --- .../mui-material/src/Accordion/Accordion.js | 47 ++++++++++--------- .../src/AccordionActions/AccordionActions.js | 17 ++++--- .../src/AccordionSummary/AccordionSummary.js | 36 ++++++++------ 3 files changed, 57 insertions(+), 43 deletions(-) diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index d7274d92b2d1a9..5e15a780673c20 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -91,28 +91,33 @@ const AccordionRoot = styled(Paper, { }, }; }, - ({ theme, ownerState }) => ({ - ...(!ownerState.square && { - borderRadius: 0, - '&:first-of-type': { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - // Fix a rendering issue on Edge - '@supports (-ms-ime-align: auto)': { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, + ({ theme }) => ({ + variants: [{ + props: props => !props.ownerState.square, + style: { + borderRadius: 0, + '&:first-of-type': { + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, }, - }, - }), - ...(!ownerState.disableGutters && { - [`&.${accordionClasses.expanded}`]: { - margin: '16px 0', - }, - }), + '&:last-of-type': { + borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, + borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, + // Fix a rendering issue on Edge + '@supports (-ms-ime-align: auto)': { + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + }, + }, + } + }, { + props: props => !props.ownerState.disableGutters, + style: { + [`&.${accordionClasses.expanded}`]: { + margin: '16px 0', + }, + } + }] }), ); diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js index c6bc67b81056e9..0c79a535f8ae7a 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.js +++ b/packages/mui-material/src/AccordionActions/AccordionActions.js @@ -25,17 +25,20 @@ const AccordionActionsRoot = styled('div', { return [styles.root, !ownerState.disableSpacing && styles.spacing]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', alignItems: 'center', padding: 8, justifyContent: 'flex-end', - ...(!ownerState.disableSpacing && { - '& > :not(style) ~ :not(style)': { - marginLeft: 8, - }, - }), -})); + variants: [{ + props: props => !props.ownerState.disableSpacing, + style: { + '& > :not(style) ~ :not(style)': { + marginLeft: 8, + }, + } + }] +}); const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' }); diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js index 922f9615d5d6e4..b9b97d0614c689 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js @@ -28,7 +28,7 @@ const AccordionSummaryRoot = styled(ButtonBase, { name: 'MuiAccordionSummary', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})(({ theme, ownerState }) => { +})(({ theme }) => { const transition = { duration: theme.transitions.duration.shortest, }; @@ -47,11 +47,14 @@ const AccordionSummaryRoot = styled(ButtonBase, { [`&:hover:not(.${accordionSummaryClasses.disabled})`]: { cursor: 'pointer', }, - ...(!ownerState.disableGutters && { - [`&.${accordionSummaryClasses.expanded}`]: { - minHeight: 64, - }, - }), + variants: [{ + props: props => !props.ownerState.disableGutters, + style: { + [`&.${accordionSummaryClasses.expanded}`]: { + minHeight: 64, + }, + } + }] }; }); @@ -59,18 +62,21 @@ const AccordionSummaryContent = styled('div', { name: 'MuiAccordionSummary', slot: 'Content', overridesResolver: (props, styles) => styles.content, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'flex', flexGrow: 1, margin: '12px 0', - ...(!ownerState.disableGutters && { - transition: theme.transitions.create(['margin'], { - duration: theme.transitions.duration.shortest, - }), - [`&.${accordionSummaryClasses.expanded}`]: { - margin: '20px 0', - }, - }), + variants: [{ + props: props => !props.ownerState.disableGutters, + style: { + transition: theme.transitions.create(['margin'], { + duration: theme.transitions.duration.shortest, + }), + [`&.${accordionSummaryClasses.expanded}`]: { + margin: '20px 0', + }, + } + }] })); const AccordionSummaryExpandIconWrapper = styled('div', { From de6baac95ceecc33a1b31cce84dd3e8504f92972 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 13:27:15 +0100 Subject: [PATCH 2/6] Drop using ownerState in the props callback --- packages/mui-material/src/Accordion/Accordion.js | 4 ++-- .../mui-material/src/AccordionActions/AccordionActions.js | 2 +- .../mui-material/src/AccordionSummary/AccordionSummary.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index 5e15a780673c20..8fa55bb490d58d 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -93,7 +93,7 @@ const AccordionRoot = styled(Paper, { }, ({ theme }) => ({ variants: [{ - props: props => !props.ownerState.square, + props: props => !props.square, style: { borderRadius: 0, '&:first-of-type': { @@ -111,7 +111,7 @@ const AccordionRoot = styled(Paper, { }, } }, { - props: props => !props.ownerState.disableGutters, + props: props => !props.disableGutters, style: { [`&.${accordionClasses.expanded}`]: { margin: '16px 0', diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js index 0c79a535f8ae7a..89591473d9b53e 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.js +++ b/packages/mui-material/src/AccordionActions/AccordionActions.js @@ -31,7 +31,7 @@ const AccordionActionsRoot = styled('div', { padding: 8, justifyContent: 'flex-end', variants: [{ - props: props => !props.ownerState.disableSpacing, + props: props => !props.disableSpacing, style: { '& > :not(style) ~ :not(style)': { marginLeft: 8, diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js index b9b97d0614c689..c9d93685929528 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js @@ -48,7 +48,7 @@ const AccordionSummaryRoot = styled(ButtonBase, { cursor: 'pointer', }, variants: [{ - props: props => !props.ownerState.disableGutters, + props: props => !props.disableGutters, style: { [`&.${accordionSummaryClasses.expanded}`]: { minHeight: 64, @@ -67,7 +67,7 @@ const AccordionSummaryContent = styled('div', { flexGrow: 1, margin: '12px 0', variants: [{ - props: props => !props.ownerState.disableGutters, + props: props => !props.disableGutters, style: { transition: theme.transitions.create(['margin'], { duration: theme.transitions.duration.shortest, From 562e80e590630d5423261e7310aad913b8e229fb Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 13:45:47 +0100 Subject: [PATCH 3/6] add zero-runtime example --- .../src/app/accordion/page.tsx | 33 ++ .../src/components/Accordion/Accordion.js | 315 ++++++++++++++++++ .../components/Accordion/AccordionActions.js | 94 ++++++ .../components/Accordion/AccordionSummary.js | 200 +++++++++++ .../mui-material/src/Accordion/Accordion.js | 49 +-- .../src/AccordionActions/AccordionActions.js | 16 +- .../src/AccordionSummary/AccordionSummary.js | 38 ++- 7 files changed, 698 insertions(+), 47 deletions(-) create mode 100644 apps/zero-runtime-next-app/src/app/accordion/page.tsx create mode 100644 apps/zero-runtime-next-app/src/components/Accordion/Accordion.js create mode 100644 apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js create mode 100644 apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js diff --git a/apps/zero-runtime-next-app/src/app/accordion/page.tsx b/apps/zero-runtime-next-app/src/app/accordion/page.tsx new file mode 100644 index 00000000000000..ad3990c6112c7d --- /dev/null +++ b/apps/zero-runtime-next-app/src/app/accordion/page.tsx @@ -0,0 +1,33 @@ +import Typography from '@mui/material/Typography'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import Accordion from '@/components/Accordion/Accordion'; +import AccordionSummary from '@/components/Accordion/AccordionSummary'; + +export default function AccordionExpandDefault() { + return ( +
+ + + Expanded by default + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + + + + + + Header + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + + + +
+ ); +} diff --git a/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js b/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js new file mode 100644 index 00000000000000..ed939a5cef6ce9 --- /dev/null +++ b/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js @@ -0,0 +1,315 @@ +'use client'; +import * as React from 'react'; +import { isFragment } from 'react-is'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import chainPropTypes from '@mui/utils/chainPropTypes'; +import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '@mui/zero-runtime'; +import { useThemeProps } from '@mui/material/styles'; +import Collapse from '@mui/material/Collapse'; +import Paper from '@mui/material/Paper'; +/* eslint-disable-next-line no-restricted-imports */ +import AccordionContext from '@mui/material/Accordion/AccordionContext'; +import { useControlled } from '@mui/material/utils'; +/* eslint-disable-next-line no-restricted-imports */ +import useSlot from '@mui/material/utils/useSlot'; +import { accordionClasses, getAccordionUtilityClass } from '@mui/material/Accordion'; + +const useUtilityClasses = (ownerState) => { + const { classes, square, expanded, disabled, disableGutters } = ownerState; + + const slots = { + root: [ + 'root', + !square && 'rounded', + expanded && 'expanded', + disabled && 'disabled', + !disableGutters && 'gutters', + ], + region: ['region'], + }; + + return composeClasses(slots, getAccordionUtilityClass, classes); +}; + +const AccordionRoot = styled(Paper, { + name: 'MuiAccordion', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + { [`& .${accordionClasses.region}`]: styles.region }, + styles.root, + !ownerState.square && styles.rounded, + !ownerState.disableGutters && styles.gutters, + ]; + }, +})( + ({ theme }) => { + const transition = { + duration: theme.transitions.duration.shortest, + }; + + return { + position: 'relative', + transition: theme.transitions.create(['margin'], transition), + overflowAnchor: 'none', // Keep the same scrolling position + '&::before': { + position: 'absolute', + left: 0, + top: -1, + right: 0, + height: 1, + content: '""', + opacity: 1, + backgroundColor: (theme.vars || theme).palette.divider, + transition: theme.transitions.create(['opacity', 'background-color'], transition), + }, + '&:first-of-type': { + '&::before': { + display: 'none', + }, + }, + [`&.${accordionClasses.expanded}`]: { + '&::before': { + opacity: 0, + }, + '&:first-of-type': { + marginTop: 0, + }, + '&:last-of-type': { + marginBottom: 0, + }, + '& + &': { + '&::before': { + display: 'none', + }, + }, + }, + [`&.${accordionClasses.disabled}`]: { + backgroundColor: (theme.vars || theme).palette.action.disabledBackground, + }, + }; + }, + ({ theme }) => ({ + variants: [ + { + props: (props) => !props.square, + style: { + borderRadius: 0, + '&:first-of-type': { + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, + borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, + // Fix a rendering issue on Edge + '@supports (-ms-ime-align: auto)': { + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + }, + }, + }, + }, + { + props: (props) => !props.disableGutters, + style: { + [`&.${accordionClasses.expanded}`]: { + margin: '16px 0', + }, + }, + }, + ], + }), +); + +const Accordion = React.forwardRef(function Accordion(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiAccordion' }); + const { + children: childrenProp, + className, + defaultExpanded = false, + disabled = false, + disableGutters = false, + expanded: expandedProp, + onChange, + square = false, + slots = {}, + slotProps = {}, + TransitionComponent: TransitionComponentProp, + TransitionProps: TransitionPropsProp, + ...other + } = props; + + const [expanded, setExpandedState] = useControlled({ + controlled: expandedProp, + default: defaultExpanded, + name: 'Accordion', + state: 'expanded', + }); + + const handleChange = React.useCallback( + (event) => { + setExpandedState(!expanded); + + if (onChange) { + onChange(event, !expanded); + } + }, + [expanded, onChange, setExpandedState], + ); + + const [summary, ...children] = React.Children.toArray(childrenProp); + const contextValue = React.useMemo( + () => ({ expanded, disabled, disableGutters, toggle: handleChange }), + [expanded, disabled, disableGutters, handleChange], + ); + + const ownerState = { + ...props, + square, + disabled, + disableGutters, + expanded, + }; + + const classes = useUtilityClasses(ownerState); + + const backwardCompatibleSlots = { transition: TransitionComponentProp, ...slots }; + const backwardCompatibleSlotProps = { transition: TransitionPropsProp, ...slotProps }; + + const [TransitionSlot, transitionProps] = useSlot('transition', { + elementType: Collapse, + externalForwardedProps: { + slots: backwardCompatibleSlots, + slotProps: backwardCompatibleSlotProps, + }, + ownerState, + }); + + return ( + + {summary} + +
+ {children} +
+ + + ); +}); + +Accordion.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: chainPropTypes(PropTypes.node.isRequired, (props) => { + const summary = React.Children.toArray(props.children)[0]; + if (isFragment(summary)) { + return new Error( + "MUI: The Accordion doesn't accept a Fragment as a child. " + + 'Consider providing an array instead.', + ); + } + + if (!React.isValidElement(summary)) { + return new Error('MUI: Expected the first child of Accordion to be a valid element.'); + } + + return null; + }), + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, expands the accordion by default. + * @default false + */ + defaultExpanded: PropTypes.bool, + /** + * If `true`, the component is disabled. + * @default false + */ + disabled: PropTypes.bool, + /** + * If `true`, it removes the margin between two expanded accordion items and the increase of height. + * @default false + */ + disableGutters: PropTypes.bool, + /** + * If `true`, expands the accordion, otherwise collapse it. + * Setting this prop enables control over the accordion. + */ + expanded: PropTypes.bool, + /** + * Callback fired when the expand/collapse state is changed. + * + * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {boolean} expanded The `expanded` state of the accordion. + */ + onChange: PropTypes.func, + /** + * The props used for each slot inside. + * @default {} + */ + slotProps: PropTypes.shape({ + transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), + /** + * The components used for each slot inside. + * @default {} + */ + slots: PropTypes.shape({ + transition: PropTypes.elementType, + }), + /** + * If `true`, rounded corners are disabled. + * @default false + */ + square: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + /** + * The component used for the transition. + * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ + TransitionComponent: PropTypes.elementType, + /** + * Props applied to the transition element. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. + * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ + TransitionProps: PropTypes.object, +}; + +export default Accordion; diff --git a/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js b/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js new file mode 100644 index 00000000000000..01380e00bb63ab --- /dev/null +++ b/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js @@ -0,0 +1,94 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '@mui/zero-runtime'; +import { useThemeProps } from '@mui/material/styles'; +import { getAccordionActionsUtilityClass } from '@mui/material/AccordionActions'; + +const useUtilityClasses = (ownerState) => { + const { classes, disableSpacing } = ownerState; + + const slots = { + root: ['root', !disableSpacing && 'spacing'], + }; + + return composeClasses(slots, getAccordionActionsUtilityClass, classes); +}; + +const AccordionActionsRoot = styled('div', { + name: 'MuiAccordionActions', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [styles.root, !ownerState.disableSpacing && styles.spacing]; + }, +})({ + display: 'flex', + alignItems: 'center', + padding: 8, + justifyContent: 'flex-end', + variants: [ + { + props: (props) => !props.disableSpacing, + style: { + '& > :not(style) ~ :not(style)': { + marginLeft: 8, + }, + }, + }, + ], +}); + +const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' }); + const { className, disableSpacing = false, ...other } = props; + const ownerState = { ...props, disableSpacing }; + + const classes = useUtilityClasses(ownerState); + + return ( + + ); +}); + +AccordionActions.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, the actions do not have additional margin. + * @default false + */ + disableSpacing: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +}; + +export default AccordionActions; diff --git a/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js b/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js new file mode 100644 index 00000000000000..3cbb1874a147fd --- /dev/null +++ b/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js @@ -0,0 +1,200 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '@mui/zero-runtime'; +import { useThemeProps } from '@mui/material/styles'; +import ButtonBase from '@mui/material/ButtonBase'; +/* eslint-disable-next-line no-restricted-imports */ +import AccordionContext from '@mui/material/Accordion/AccordionContext'; +import { + accordionSummaryClasses, + getAccordionSummaryUtilityClass, +} from '@mui/material/AccordionSummary'; + +const useUtilityClasses = (ownerState) => { + const { classes, expanded, disabled, disableGutters } = ownerState; + + const slots = { + root: ['root', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'], + focusVisible: ['focusVisible'], + content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'], + expandIconWrapper: ['expandIconWrapper', expanded && 'expanded'], + }; + + return composeClasses(slots, getAccordionSummaryUtilityClass, classes); +}; + +const AccordionSummaryRoot = styled(ButtonBase, { + name: 'MuiAccordionSummary', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})(({ theme }) => { + const transition = { + duration: theme.transitions.duration.shortest, + }; + + return { + display: 'flex', + minHeight: 48, + padding: theme.spacing(0, 2), + transition: theme.transitions.create(['min-height', 'background-color'], transition), + [`&.${accordionSummaryClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette.action.focus, + }, + [`&.${accordionSummaryClasses.disabled}`]: { + opacity: (theme.vars || theme).palette.action.disabledOpacity, + }, + [`&:hover:not(.${accordionSummaryClasses.disabled})`]: { + cursor: 'pointer', + }, + variants: [ + { + props: (props) => !props.disableGutters, + style: { + [`&.${accordionSummaryClasses.expanded}`]: { + minHeight: 64, + }, + }, + }, + ], + }; +}); + +const AccordionSummaryContent = styled('div', { + name: 'MuiAccordionSummary', + slot: 'Content', + overridesResolver: (props, styles) => styles.content, +})(({ theme }) => ({ + display: 'flex', + flexGrow: 1, + margin: '12px 0', + variants: [ + { + props: (props) => !props.disableGutters, + style: { + transition: theme.transitions.create(['margin'], { + duration: theme.transitions.duration.shortest, + }), + [`&.${accordionSummaryClasses.expanded}`]: { + margin: '20px 0', + }, + }, + }, + ], +})); + +const AccordionSummaryExpandIconWrapper = styled('div', { + name: 'MuiAccordionSummary', + slot: 'ExpandIconWrapper', + overridesResolver: (props, styles) => styles.expandIconWrapper, +})(({ theme }) => ({ + display: 'flex', + color: (theme.vars || theme).palette.action.active, + transform: 'rotate(0deg)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + [`&.${accordionSummaryClasses.expanded}`]: { + transform: 'rotate(180deg)', + }, +})); + +const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiAccordionSummary' }); + const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props; + + const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext); + const handleChange = (event) => { + if (toggle) { + toggle(event); + } + if (onClick) { + onClick(event); + } + }; + + const ownerState = { + ...props, + expanded, + disabled, + disableGutters, + }; + + const classes = useUtilityClasses(ownerState); + + return ( + + + {children} + + {expandIcon && ( + + {expandIcon} + + )} + + ); +}); + +AccordionSummary.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The icon to display as the expand indicator. + */ + expandIcon: PropTypes.node, + /** + * This prop can help identify which element has keyboard focus. + * The class name will be applied when the element gains the focus through keyboard interaction. + * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). + * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md). + * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components + * if needed. + */ + focusVisibleClassName: PropTypes.string, + /** + * @ignore + */ + onClick: PropTypes.func, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +}; + +export default AccordionSummary; diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index 8fa55bb490d58d..3997d62c75be3a 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -92,32 +92,35 @@ const AccordionRoot = styled(Paper, { }; }, ({ theme }) => ({ - variants: [{ - props: props => !props.square, - style: { - borderRadius: 0, - '&:first-of-type': { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - // Fix a rendering issue on Edge - '@supports (-ms-ime-align: auto)': { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, + variants: [ + { + props: (props) => !props.square, + style: { + borderRadius: 0, + '&:first-of-type': { + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, + borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, + // Fix a rendering issue on Edge + '@supports (-ms-ime-align: auto)': { + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + }, }, }, - } - }, { - props: props => !props.disableGutters, - style: { - [`&.${accordionClasses.expanded}`]: { - margin: '16px 0', + }, + { + props: (props) => !props.disableGutters, + style: { + [`&.${accordionClasses.expanded}`]: { + margin: '16px 0', + }, }, - } - }] + }, + ], }), ); diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js index 89591473d9b53e..5bd5980b21d680 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.js +++ b/packages/mui-material/src/AccordionActions/AccordionActions.js @@ -30,14 +30,16 @@ const AccordionActionsRoot = styled('div', { alignItems: 'center', padding: 8, justifyContent: 'flex-end', - variants: [{ - props: props => !props.disableSpacing, - style: { - '& > :not(style) ~ :not(style)': { - marginLeft: 8, + variants: [ + { + props: (props) => !props.disableSpacing, + style: { + '& > :not(style) ~ :not(style)': { + marginLeft: 8, + }, }, - } - }] + }, + ], }); const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) { diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js index c9d93685929528..f4cfc07b1cd4b1 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js @@ -47,14 +47,16 @@ const AccordionSummaryRoot = styled(ButtonBase, { [`&:hover:not(.${accordionSummaryClasses.disabled})`]: { cursor: 'pointer', }, - variants: [{ - props: props => !props.disableGutters, - style: { - [`&.${accordionSummaryClasses.expanded}`]: { - minHeight: 64, + variants: [ + { + props: (props) => !props.disableGutters, + style: { + [`&.${accordionSummaryClasses.expanded}`]: { + minHeight: 64, + }, }, - } - }] + }, + ], }; }); @@ -66,17 +68,19 @@ const AccordionSummaryContent = styled('div', { display: 'flex', flexGrow: 1, margin: '12px 0', - variants: [{ - props: props => !props.disableGutters, - style: { - transition: theme.transitions.create(['margin'], { - duration: theme.transitions.duration.shortest, - }), - [`&.${accordionSummaryClasses.expanded}`]: { - margin: '20px 0', + variants: [ + { + props: (props) => !props.disableGutters, + style: { + transition: theme.transitions.create(['margin'], { + duration: theme.transitions.duration.shortest, + }), + [`&.${accordionSummaryClasses.expanded}`]: { + margin: '20px 0', + }, }, - } - }] + }, + ], })); const AccordionSummaryExpandIconWrapper = styled('div', { From 5e3a02fe2c8d123eb300bf2d6fa1d92484d1b6e8 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 14:39:41 +0100 Subject: [PATCH 4/6] remove unnecessary components --- .../src/app/accordion/page.tsx | 33 -- .../src/components/Accordion/Accordion.js | 315 ------------------ .../components/Accordion/AccordionActions.js | 94 ------ .../components/Accordion/AccordionSummary.js | 200 ----------- 4 files changed, 642 deletions(-) delete mode 100644 apps/zero-runtime-next-app/src/app/accordion/page.tsx delete mode 100644 apps/zero-runtime-next-app/src/components/Accordion/Accordion.js delete mode 100644 apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js delete mode 100644 apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js diff --git a/apps/zero-runtime-next-app/src/app/accordion/page.tsx b/apps/zero-runtime-next-app/src/app/accordion/page.tsx deleted file mode 100644 index ad3990c6112c7d..00000000000000 --- a/apps/zero-runtime-next-app/src/app/accordion/page.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Typography from '@mui/material/Typography'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Accordion from '@/components/Accordion/Accordion'; -import AccordionSummary from '@/components/Accordion/AccordionSummary'; - -export default function AccordionExpandDefault() { - return ( -
- - - Expanded by default - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, - sit amet blandit leo lobortis eget. - - - - - - Header - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, - sit amet blandit leo lobortis eget. - - - -
- ); -} diff --git a/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js b/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js deleted file mode 100644 index ed939a5cef6ce9..00000000000000 --- a/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js +++ /dev/null @@ -1,315 +0,0 @@ -'use client'; -import * as React from 'react'; -import { isFragment } from 'react-is'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import chainPropTypes from '@mui/utils/chainPropTypes'; -import composeClasses from '@mui/utils/composeClasses'; -import { styled } from '@mui/zero-runtime'; -import { useThemeProps } from '@mui/material/styles'; -import Collapse from '@mui/material/Collapse'; -import Paper from '@mui/material/Paper'; -/* eslint-disable-next-line no-restricted-imports */ -import AccordionContext from '@mui/material/Accordion/AccordionContext'; -import { useControlled } from '@mui/material/utils'; -/* eslint-disable-next-line no-restricted-imports */ -import useSlot from '@mui/material/utils/useSlot'; -import { accordionClasses, getAccordionUtilityClass } from '@mui/material/Accordion'; - -const useUtilityClasses = (ownerState) => { - const { classes, square, expanded, disabled, disableGutters } = ownerState; - - const slots = { - root: [ - 'root', - !square && 'rounded', - expanded && 'expanded', - disabled && 'disabled', - !disableGutters && 'gutters', - ], - region: ['region'], - }; - - return composeClasses(slots, getAccordionUtilityClass, classes); -}; - -const AccordionRoot = styled(Paper, { - name: 'MuiAccordion', - slot: 'Root', - overridesResolver: (props, styles) => { - const { ownerState } = props; - - return [ - { [`& .${accordionClasses.region}`]: styles.region }, - styles.root, - !ownerState.square && styles.rounded, - !ownerState.disableGutters && styles.gutters, - ]; - }, -})( - ({ theme }) => { - const transition = { - duration: theme.transitions.duration.shortest, - }; - - return { - position: 'relative', - transition: theme.transitions.create(['margin'], transition), - overflowAnchor: 'none', // Keep the same scrolling position - '&::before': { - position: 'absolute', - left: 0, - top: -1, - right: 0, - height: 1, - content: '""', - opacity: 1, - backgroundColor: (theme.vars || theme).palette.divider, - transition: theme.transitions.create(['opacity', 'background-color'], transition), - }, - '&:first-of-type': { - '&::before': { - display: 'none', - }, - }, - [`&.${accordionClasses.expanded}`]: { - '&::before': { - opacity: 0, - }, - '&:first-of-type': { - marginTop: 0, - }, - '&:last-of-type': { - marginBottom: 0, - }, - '& + &': { - '&::before': { - display: 'none', - }, - }, - }, - [`&.${accordionClasses.disabled}`]: { - backgroundColor: (theme.vars || theme).palette.action.disabledBackground, - }, - }; - }, - ({ theme }) => ({ - variants: [ - { - props: (props) => !props.square, - style: { - borderRadius: 0, - '&:first-of-type': { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - // Fix a rendering issue on Edge - '@supports (-ms-ime-align: auto)': { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - }, - }, - }, - }, - { - props: (props) => !props.disableGutters, - style: { - [`&.${accordionClasses.expanded}`]: { - margin: '16px 0', - }, - }, - }, - ], - }), -); - -const Accordion = React.forwardRef(function Accordion(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiAccordion' }); - const { - children: childrenProp, - className, - defaultExpanded = false, - disabled = false, - disableGutters = false, - expanded: expandedProp, - onChange, - square = false, - slots = {}, - slotProps = {}, - TransitionComponent: TransitionComponentProp, - TransitionProps: TransitionPropsProp, - ...other - } = props; - - const [expanded, setExpandedState] = useControlled({ - controlled: expandedProp, - default: defaultExpanded, - name: 'Accordion', - state: 'expanded', - }); - - const handleChange = React.useCallback( - (event) => { - setExpandedState(!expanded); - - if (onChange) { - onChange(event, !expanded); - } - }, - [expanded, onChange, setExpandedState], - ); - - const [summary, ...children] = React.Children.toArray(childrenProp); - const contextValue = React.useMemo( - () => ({ expanded, disabled, disableGutters, toggle: handleChange }), - [expanded, disabled, disableGutters, handleChange], - ); - - const ownerState = { - ...props, - square, - disabled, - disableGutters, - expanded, - }; - - const classes = useUtilityClasses(ownerState); - - const backwardCompatibleSlots = { transition: TransitionComponentProp, ...slots }; - const backwardCompatibleSlotProps = { transition: TransitionPropsProp, ...slotProps }; - - const [TransitionSlot, transitionProps] = useSlot('transition', { - elementType: Collapse, - externalForwardedProps: { - slots: backwardCompatibleSlots, - slotProps: backwardCompatibleSlotProps, - }, - ownerState, - }); - - return ( - - {summary} - -
- {children} -
- - - ); -}); - -Accordion.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The content of the component. - */ - children: chainPropTypes(PropTypes.node.isRequired, (props) => { - const summary = React.Children.toArray(props.children)[0]; - if (isFragment(summary)) { - return new Error( - "MUI: The Accordion doesn't accept a Fragment as a child. " + - 'Consider providing an array instead.', - ); - } - - if (!React.isValidElement(summary)) { - return new Error('MUI: Expected the first child of Accordion to be a valid element.'); - } - - return null; - }), - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * If `true`, expands the accordion by default. - * @default false - */ - defaultExpanded: PropTypes.bool, - /** - * If `true`, the component is disabled. - * @default false - */ - disabled: PropTypes.bool, - /** - * If `true`, it removes the margin between two expanded accordion items and the increase of height. - * @default false - */ - disableGutters: PropTypes.bool, - /** - * If `true`, expands the accordion, otherwise collapse it. - * Setting this prop enables control over the accordion. - */ - expanded: PropTypes.bool, - /** - * Callback fired when the expand/collapse state is changed. - * - * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {boolean} expanded The `expanded` state of the accordion. - */ - onChange: PropTypes.func, - /** - * The props used for each slot inside. - * @default {} - */ - slotProps: PropTypes.shape({ - transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }), - /** - * The components used for each slot inside. - * @default {} - */ - slots: PropTypes.shape({ - transition: PropTypes.elementType, - }), - /** - * If `true`, rounded corners are disabled. - * @default false - */ - square: PropTypes.bool, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - /** - * The component used for the transition. - * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. - * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). - */ - TransitionComponent: PropTypes.elementType, - /** - * Props applied to the transition element. - * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. - * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). - */ - TransitionProps: PropTypes.object, -}; - -export default Accordion; diff --git a/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js b/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js deleted file mode 100644 index 01380e00bb63ab..00000000000000 --- a/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js +++ /dev/null @@ -1,94 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import composeClasses from '@mui/utils/composeClasses'; -import { styled } from '@mui/zero-runtime'; -import { useThemeProps } from '@mui/material/styles'; -import { getAccordionActionsUtilityClass } from '@mui/material/AccordionActions'; - -const useUtilityClasses = (ownerState) => { - const { classes, disableSpacing } = ownerState; - - const slots = { - root: ['root', !disableSpacing && 'spacing'], - }; - - return composeClasses(slots, getAccordionActionsUtilityClass, classes); -}; - -const AccordionActionsRoot = styled('div', { - name: 'MuiAccordionActions', - slot: 'Root', - overridesResolver: (props, styles) => { - const { ownerState } = props; - - return [styles.root, !ownerState.disableSpacing && styles.spacing]; - }, -})({ - display: 'flex', - alignItems: 'center', - padding: 8, - justifyContent: 'flex-end', - variants: [ - { - props: (props) => !props.disableSpacing, - style: { - '& > :not(style) ~ :not(style)': { - marginLeft: 8, - }, - }, - }, - ], -}); - -const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' }); - const { className, disableSpacing = false, ...other } = props; - const ownerState = { ...props, disableSpacing }; - - const classes = useUtilityClasses(ownerState); - - return ( - - ); -}); - -AccordionActions.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * If `true`, the actions do not have additional margin. - * @default false - */ - disableSpacing: PropTypes.bool, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), -}; - -export default AccordionActions; diff --git a/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js b/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js deleted file mode 100644 index 3cbb1874a147fd..00000000000000 --- a/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js +++ /dev/null @@ -1,200 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import composeClasses from '@mui/utils/composeClasses'; -import { styled } from '@mui/zero-runtime'; -import { useThemeProps } from '@mui/material/styles'; -import ButtonBase from '@mui/material/ButtonBase'; -/* eslint-disable-next-line no-restricted-imports */ -import AccordionContext from '@mui/material/Accordion/AccordionContext'; -import { - accordionSummaryClasses, - getAccordionSummaryUtilityClass, -} from '@mui/material/AccordionSummary'; - -const useUtilityClasses = (ownerState) => { - const { classes, expanded, disabled, disableGutters } = ownerState; - - const slots = { - root: ['root', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'], - focusVisible: ['focusVisible'], - content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'], - expandIconWrapper: ['expandIconWrapper', expanded && 'expanded'], - }; - - return composeClasses(slots, getAccordionSummaryUtilityClass, classes); -}; - -const AccordionSummaryRoot = styled(ButtonBase, { - name: 'MuiAccordionSummary', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, -})(({ theme }) => { - const transition = { - duration: theme.transitions.duration.shortest, - }; - - return { - display: 'flex', - minHeight: 48, - padding: theme.spacing(0, 2), - transition: theme.transitions.create(['min-height', 'background-color'], transition), - [`&.${accordionSummaryClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette.action.focus, - }, - [`&.${accordionSummaryClasses.disabled}`]: { - opacity: (theme.vars || theme).palette.action.disabledOpacity, - }, - [`&:hover:not(.${accordionSummaryClasses.disabled})`]: { - cursor: 'pointer', - }, - variants: [ - { - props: (props) => !props.disableGutters, - style: { - [`&.${accordionSummaryClasses.expanded}`]: { - minHeight: 64, - }, - }, - }, - ], - }; -}); - -const AccordionSummaryContent = styled('div', { - name: 'MuiAccordionSummary', - slot: 'Content', - overridesResolver: (props, styles) => styles.content, -})(({ theme }) => ({ - display: 'flex', - flexGrow: 1, - margin: '12px 0', - variants: [ - { - props: (props) => !props.disableGutters, - style: { - transition: theme.transitions.create(['margin'], { - duration: theme.transitions.duration.shortest, - }), - [`&.${accordionSummaryClasses.expanded}`]: { - margin: '20px 0', - }, - }, - }, - ], -})); - -const AccordionSummaryExpandIconWrapper = styled('div', { - name: 'MuiAccordionSummary', - slot: 'ExpandIconWrapper', - overridesResolver: (props, styles) => styles.expandIconWrapper, -})(({ theme }) => ({ - display: 'flex', - color: (theme.vars || theme).palette.action.active, - transform: 'rotate(0deg)', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), - [`&.${accordionSummaryClasses.expanded}`]: { - transform: 'rotate(180deg)', - }, -})); - -const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiAccordionSummary' }); - const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props; - - const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext); - const handleChange = (event) => { - if (toggle) { - toggle(event); - } - if (onClick) { - onClick(event); - } - }; - - const ownerState = { - ...props, - expanded, - disabled, - disableGutters, - }; - - const classes = useUtilityClasses(ownerState); - - return ( - - - {children} - - {expandIcon && ( - - {expandIcon} - - )} - - ); -}); - -AccordionSummary.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * The icon to display as the expand indicator. - */ - expandIcon: PropTypes.node, - /** - * This prop can help identify which element has keyboard focus. - * The class name will be applied when the element gains the focus through keyboard interaction. - * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). - * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md). - * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components - * if needed. - */ - focusVisibleClassName: PropTypes.string, - /** - * @ignore - */ - onClick: PropTypes.func, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), -}; - -export default AccordionSummary; From a9a5821a6bcc5c81412b86fdd940cb4c3fa1b276 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 13 Mar 2024 11:34:29 +0100 Subject: [PATCH 5/6] update imports --- packages/mui-material/src/Accordion/Accordion.js | 5 +++-- .../mui-material/src/AccordionActions/AccordionActions.js | 5 +++-- .../mui-material/src/AccordionDetails/AccordionDetails.js | 5 +++-- .../mui-material/src/AccordionSummary/AccordionSummary.js | 5 +++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index 3997d62c75be3a..4fcaf33da96b29 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -5,8 +5,7 @@ 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 { styled, createUseThemeProps } from '../zero-styled'; import Collapse from '../Collapse'; import Paper from '../Paper'; import AccordionContext from './AccordionContext'; @@ -14,6 +13,8 @@ import useControlled from '../utils/useControlled'; import useSlot from '../utils/useSlot'; import accordionClasses, { getAccordionUtilityClass } from './accordionClasses'; +const useThemeProps = createUseThemeProps('MuiAccordion'); + const useUtilityClasses = (ownerState) => { const { classes, square, expanded, disabled, disableGutters } = ownerState; diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js index 5bd5980b21d680..48414535b5d490 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.js +++ b/packages/mui-material/src/AccordionActions/AccordionActions.js @@ -3,10 +3,11 @@ 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 { styled, createUseThemeProps } from '../zero-styled'; import { getAccordionActionsUtilityClass } from './accordionActionsClasses'; +const useThemeProps = createUseThemeProps('MuiAccordionActions'); + const useUtilityClasses = (ownerState) => { const { classes, disableSpacing } = ownerState; diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.js index d39ee3bd0b5f72..d49d13b141d3aa 100644 --- a/packages/mui-material/src/AccordionDetails/AccordionDetails.js +++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.js @@ -3,10 +3,11 @@ 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 { styled, createUseThemeProps } from '../zero-styled'; import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses'; +const useThemeProps = createUseThemeProps('MuiAccordionDetails'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js index f4cfc07b1cd4b1..6c9ed037c3bd7a 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js @@ -3,14 +3,15 @@ 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 { styled, createUseThemeProps } from '../zero-styled'; import ButtonBase from '../ButtonBase'; import AccordionContext from '../Accordion/AccordionContext'; import accordionSummaryClasses, { getAccordionSummaryUtilityClass, } from './accordionSummaryClasses'; +const useThemeProps = createUseThemeProps('MuiAccordionSummary'); + const useUtilityClasses = (ownerState) => { const { classes, expanded, disabled, disableGutters } = ownerState; From 979ad31e88151e144a4a582af0a2ee1d2192ed7a Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 13 Mar 2024 12:50:02 +0100 Subject: [PATCH 6/6] add pages --- .../app/material-ui/react-accordion/page.tsx | 58 ++++++++++++++++++ .../src/pages/material-ui/react-accordion.tsx | 59 +++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx new file mode 100644 index 00000000000000..7d47e9c5a83194 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx @@ -0,0 +1,58 @@ +'use client'; +import * as React from 'react'; +import AccordionExpandDefault from '../../../../../../docs/data/material/components/accordion/AccordionExpandDefault'; +import AccordionExpandIcon from '../../../../../../docs/data/material/components/accordion/AccordionExpandIcon'; +import AccordionTransition from '../../../../../../docs/data/material/components/accordion/AccordionTransition'; +import AccordionUsage from '../../../../../../docs/data/material/components/accordion/AccordionUsage'; +import ControlledAccordions from '../../../../../../docs/data/material/components/accordion/ControlledAccordions'; +import CustomizedAccordions from '../../../../../../docs/data/material/components/accordion/CustomizedAccordions'; +import DisabledAccordion from '../../../../../../docs/data/material/components/accordion/DisabledAccordion'; + +export default function Accordion() { + return ( + +
+

Accordion Expand Default

+
+ +
+
+
+

Accordion Expand Icon

+
+ +
+
+
+

Accordion Transition

+
+ +
+
+
+

Accordion Usage

+
+ +
+
+
+

Controlled Accordions

+
+ +
+
+
+

Customized Accordions

+
+ +
+
+
+

Disabled Accordion

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx new file mode 100644 index 00000000000000..3920a1e6f9b6f9 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import AccordionExpandDefault from '../../../../../docs/data/material/components/accordion/AccordionExpandDefault.tsx'; +import AccordionExpandIcon from '../../../../../docs/data/material/components/accordion/AccordionExpandIcon.tsx'; +import AccordionTransition from '../../../../../docs/data/material/components/accordion/AccordionTransition.tsx'; +import AccordionUsage from '../../../../../docs/data/material/components/accordion/AccordionUsage.tsx'; +import ControlledAccordions from '../../../../../docs/data/material/components/accordion/ControlledAccordions.tsx'; +import CustomizedAccordions from '../../../../../docs/data/material/components/accordion/CustomizedAccordions.tsx'; +import DisabledAccordion from '../../../../../docs/data/material/components/accordion/DisabledAccordion.tsx'; + +export default function Accordion() { + return ( + +

Accordion

+
+

Accordion Expand Default

+
+ +
+
+
+

Accordion Expand Icon

+
+ +
+
+
+

Accordion Transition

+
+ +
+
+
+

Accordion Usage

+
+ +
+
+
+

Controlled Accordions

+
+ +
+
+
+

Customized Accordions

+
+ +
+
+
+

Disabled Accordion

+
+ +
+
+ + ); +}