From a28f3f0a84ee088a1673be98b510b6d6cf93bb24 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 20 Feb 2024 12:43:46 +0100 Subject: [PATCH 01/13] wip --- .../src/app/slider/page.tsx | 4 +- .../Slider/{ZeroSlider.tsx => Slider.js} | 415 ++++++--------- packages/mui-material/src/Slider/Slider.js | 485 +++++++++++------- packages/mui-material/src/utils/index.d.ts | 1 + packages/mui-material/src/utils/index.js | 1 + .../utils/shouldSpreadAdditionalProps.d.ts | 3 + 6 files changed, 465 insertions(+), 444 deletions(-) rename apps/zero-runtime-next-app/src/components/Slider/{ZeroSlider.tsx => Slider.js} (72%) create mode 100644 packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts diff --git a/apps/zero-runtime-next-app/src/app/slider/page.tsx b/apps/zero-runtime-next-app/src/app/slider/page.tsx index 1c2a9b735bf559..096102ca4a7004 100644 --- a/apps/zero-runtime-next-app/src/app/slider/page.tsx +++ b/apps/zero-runtime-next-app/src/app/slider/page.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import { styled } from '@mui/zero-runtime'; import { Button } from 'local-ui-lib'; -import Slider from '@/components/Slider/ZeroSlider'; +import Slider from '@/components/Slider/Slider'; const HalfWidth = styled.div(({ theme }) => ({ marginLeft: 20, width: '50%', maxHeight: 100, padding: 20, - border: `1px solid ${theme.vars.palette.primary.main}`, + // border: `1px solid ${theme.vars.palette.primary.main}`, })); export default function SliderPage() { diff --git a/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx b/apps/zero-runtime-next-app/src/components/Slider/Slider.js similarity index 72% rename from apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx rename to apps/zero-runtime-next-app/src/components/Slider/Slider.js index 3f193c182caf6a..de60c520eeeff6 100644 --- a/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx +++ b/apps/zero-runtime-next-app/src/components/Slider/Slider.js @@ -1,49 +1,40 @@ +'use client'; import * as React from 'react'; import clsx from 'clsx'; -import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { - type SliderOwnerState, - type SliderProps, - sliderClasses, - getSliderUtilityClass, -} from '@mui/material/Slider'; import { isHostComponent, useSlotProps } from '@mui/base/utils'; -import { styled } from '@mui/zero-runtime'; -import { capitalize } from '@mui/material/utils'; -import SliderValueLabel from '@mui/material/Slider/SliderValueLabel'; +import composeClasses from '@mui/utils/composeClasses'; import { useSlider, valueToPercent } from '@mui/base/useSlider'; import { alpha, lighten, darken } from '@mui/system/colorManipulator'; -import type { Theme } from '@mui/material/styles'; - -const shouldSpreadAdditionalProps = (Slot?: React.ElementType) => { - return !Slot || !isHostComponent(Slot); -}; +import { styled } from '@mui/zero-runtime'; +// import { slotShouldForwardProp } from '@mui/material/styles/styled'; +import { useTheme, useThemeProps } from '@mui/material/styles'; +import { shouldSpreadAdditionalProps } from '@mui/material/utils'; +import { capitalize } from '@mui/material/utils'; +import BaseSliderValueLabel from '@mui/material/Slider/SliderValueLabel'; +import sliderClasses, { getSliderUtilityClass } from '@mui/material/Slider/sliderClasses'; -function Identity(x: T): T { +function Identity(x) { return x; } -type SliderNestedOwnerState = SliderOwnerState & { - ownerState: SliderOwnerState; -}; - -const SliderRoot = styled('span', { +export const SliderRoot = styled('span', { name: 'MuiSlider', slot: 'Root', - overridesResolver(props, styles) { + overridesResolver: (props, styles) => { const { ownerState } = props; + return [ styles.root, - styles[`color${capitalize(ownerState.color ?? '')}`], - ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size ?? '')}`], + styles[`color${capitalize(ownerState.color)}`], + ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse, ]; }, -})(({ theme }) => ({ - borderRadius: '12px', +})(({ theme }) => ({ + borderRadius: 12, boxSizing: 'content-box', display: 'inline-block', position: 'relative', @@ -51,7 +42,7 @@ const SliderRoot = styled('span', { touchAction: 'none', WebkitTapHighlightColor: 'transparent', '@media print': { - printColorAdjust: 'exact', + colorAdjust: 'exact', }, [`&.${sliderClasses.disabled}`]: { pointerEvents: 'none', @@ -64,26 +55,16 @@ const SliderRoot = styled('span', { }, }, variants: [ + ...Object.keys((theme.vars ?? theme).palette) + .filter((key) => (theme.vars ?? theme).palette[key].main) + .map((color) => ({ + props: { color }, + style: { + color: (theme.vars || theme).palette[color].main, + }, + })), { - props({ color }) { - return color === 'primary'; - }, - style: { - color: (theme.vars || theme).palette.primary.main, - }, - }, - { - props: { - color: 'secondary', - }, - style: { - color: (theme.vars || theme).palette.secondary.main, - }, - }, - { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { height: 4, width: '100%', @@ -96,27 +77,19 @@ const SliderRoot = styled('span', { }, }, { - props: { - orientation: 'horizontal', - size: 'small', - }, + props: { orientation: 'horizontal', size: 'small' }, style: { height: 2, }, }, { - props: { - orientation: 'horizontal', - marked: true, - }, + props: { orientation: 'horizontal', marked: true }, style: { marginBottom: 20, }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { height: '100%', width: 4, @@ -129,19 +102,13 @@ const SliderRoot = styled('span', { }, }, { - props: { - orientation: 'vertical', - size: 'small', - }, + props: { orientation: 'vertical', size: 'small' }, style: { width: 2, }, }, { - props: { - orientation: 'vertical', - marked: true, - }, + props: { orientation: 'vertical', marked: true }, style: { marginRight: 44, }, @@ -149,13 +116,11 @@ const SliderRoot = styled('span', { ], })); -export { SliderRoot }; - -const SliderRail = styled('span', { +export const SliderRail = styled('span', { name: 'MuiSlider', slot: 'Rail', overridesResolver: (props, styles) => styles.rail, -})({ +})({ display: 'block', position: 'absolute', borderRadius: 'inherit', @@ -163,9 +128,7 @@ const SliderRail = styled('span', { opacity: 0.38, variants: [ { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { width: '100%', height: 'inherit', @@ -174,9 +137,7 @@ const SliderRail = styled('span', { }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { height: '100%', width: 'inherit', @@ -185,9 +146,7 @@ const SliderRail = styled('span', { }, }, { - props: { - track: 'inverted', - }, + props: { track: 'inverted' }, style: { opacity: 1, }, @@ -195,26 +154,11 @@ const SliderRail = styled('span', { ], }); -export { SliderRail }; - -const SliderTrack = styled('span', { +export const SliderTrack = styled('span', { name: 'MuiSlider', slot: 'Track', overridesResolver: (props, styles) => styles.track, -})(({ theme }) => { - const lightPrimaryColor = theme.vars - ? theme.vars.palette.Slider.primaryTrack - : lighten(theme.palette.primary.main, 0.62); - const lightSecondaryColor = theme.vars - ? theme.vars.palette.Slider.secondaryTrack - : lighten(theme.palette.secondary.main, 0.62); - const darkPrimaryColor = theme.vars - ? theme.vars.palette.Slider.primaryTrack - : darken(theme.palette.primary.main, 0.5); - const darkSecondaryColor = theme.vars - ? theme.vars.palette.Slider.secondaryTrack - : darken(theme.palette.secondary.main, 0.5); - +})(({ theme }) => { return { display: 'block', position: 'absolute', @@ -226,39 +170,13 @@ const SliderTrack = styled('span', { }), variants: [ { - props: { - color: 'primary', - }, - style: { - '--slider-track-color': lightPrimaryColor, - ...theme.applyStyles('dark', { - '--slider-track-color': darkPrimaryColor, - }), - }, - }, - { - props: { - color: 'secondary', - }, - style: { - '--slider-track-color': lightSecondaryColor, - ...theme.applyStyles('dark', { - '--slider-track-color': darkSecondaryColor, - }), - }, - }, - { - props: { - size: 'small', - }, + props: { size: 'small' }, style: { border: 'none', }, }, { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { height: 'inherit', top: '50%', @@ -266,9 +184,7 @@ const SliderTrack = styled('span', { }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { width: 'inherit', left: '50%', @@ -276,51 +192,49 @@ const SliderTrack = styled('span', { }, }, { - props: { - track: false, - }, + props: { track: false }, style: { display: 'none', }, }, - { - props: { - track: 'inverted', - color: 'primary', - }, - style: { - backgroundColor: (theme.vars ?? theme).palette.Slider?.primaryTrack, - borderColor: (theme.vars ?? theme).palette.Slider?.primaryTrack, - }, - }, - { - props: { - track: 'inverted', - color: 'secondary', - }, - style: { - backgroundColor: (theme.vars ?? theme).palette.Slider?.secondaryTrack, - borderColor: (theme.vars ?? theme).palette.Slider?.secondaryTrack, - }, - }, + ...Object.keys((theme.vars ?? theme).palette) + .filter((key) => (theme.vars ?? theme).palette[key].main) + .map((color) => ({ + props: { color, track: 'inverted' }, + style: { + ...(theme.vars + ? { + backgroundColor: theme.vars.palette.Slider[`${color}Track`], + borderColor: theme.vars.palette.Slider[`${color}Track`], + } + : { + backgroundColor: lighten(theme.palette[color].main, 0.62), + borderColor: lighten(theme.palette[color].main, 0.62), + ...theme.applyStyles('dark', { + backgroundColor: darken(theme.palette[color].main, 0.5), + }), + ...theme.applyStyles('dark', { + borderColor: darken(theme.palette[color].main, 0.5), + }), + }), + }, + })), ], }; }); -export { SliderTrack }; - -const SliderThumb = styled('span', { +export const SliderThumb = styled('span', { name: 'MuiSlider', slot: 'Thumb', overridesResolver: (props, styles) => { const { ownerState } = props; return [ styles.thumb, - styles[`thumbColor${capitalize(ownerState.color ?? '')}`], - ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size ?? '')}`], + styles[`thumbColor${capitalize(ownerState.color)}`], + ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`], ]; }, -})(({ theme }) => ({ +})(({ theme }) => ({ position: 'absolute', width: 20, height: 20, @@ -334,7 +248,7 @@ const SliderThumb = styled('span', { transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], { duration: theme.transitions.duration.shortest, }), - '&:before': { + '&::before': { position: 'absolute', content: '""', borderRadius: 'inherit', @@ -353,66 +267,61 @@ const SliderThumb = styled('span', { left: '50%', transform: 'translate(-50%, -50%)', }, - [`&:hover, &.${sliderClasses.focusVisible}`]: { - boxShadow: `0px 0px 0px 8px var(--slider-thumb-shadow-color)`, - '@media (hover: none)': { - boxShadow: 'none', - }, - }, - [`&.${sliderClasses.active}`]: { - boxShadow: `0px 0px 0px 14px var(--slider-thumb-shadow-color)`, - }, [`&.${sliderClasses.disabled}`]: { '&:hover': { boxShadow: 'none', }, }, variants: [ + ...Object.keys((theme.vars ?? theme).palette) + .filter( + (key) => theme.palette[key]?.main || (theme.vars && theme.vars.palette[key]?.mainChannel), + ) + .map((color) => ({ + props: { color }, + style: { + [`&:hover, &.${sliderClasses.focusVisible}`]: { + ...(theme.vars + ? { + boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`, + } + : { + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`, + }), + '@media (hover: none)': { + boxShadow: 'none', + }, + }, + [`&.${sliderClasses.active}`]: { + ...(theme.vars + ? { + boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`, + } + : { + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`, + }), + }, + }, + })), { - props: { - color: 'primary', - }, - style: { - '--slider-thumb-shadow-color': theme.vars - ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.16)` - : alpha((theme as Theme).palette.primary.main, 0.16), - }, - }, - { - props: { - color: 'secondary', - }, - style: { - '--slider-thumb-shadow-color': theme.vars - ? `rgba(${theme.vars.palette.secondary.mainChannel} / 0.16)` - : alpha((theme as Theme).palette.secondary.main, 0.16), - }, - }, - { - props: { - size: 'small', - }, + props: { size: 'small' }, style: { width: 12, height: 12, - '&:before': { + '&::before': { boxShadow: 'none', }, }, }, { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { top: '50%', transform: 'translate(-50%, -50%)', }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { left: '50%', transform: 'translate(-50%, 50%)', @@ -421,13 +330,11 @@ const SliderThumb = styled('span', { ], })); -export { SliderThumb }; - -const StyledSliderValueLabel = styled(SliderValueLabel, { +export const SliderValueLabel = styled(BaseSliderValueLabel, { name: 'MuiSlider', slot: 'ValueLabel', overridesResolver: (props, styles) => styles.valueLabel, -})(({ theme }) => ({ +})(({ theme }) => ({ zIndex: 1, whiteSpace: 'nowrap', ...theme.typography.body2, @@ -437,7 +344,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, { }), position: 'absolute', backgroundColor: (theme.vars || theme).palette.grey[600], - borderRadius: '2px', + borderRadius: 2, color: (theme.vars || theme).palette.common.white, display: 'flex', alignItems: 'center', @@ -445,23 +352,12 @@ const StyledSliderValueLabel = styled(SliderValueLabel, { padding: '0.25rem 0.75rem', variants: [ { - props: { - size: 'small', - }, - style: { - fontSize: theme.typography.pxToRem(12), - padding: '0.25rem 0.5rem', - }, - }, - { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { + transform: 'translateY(-100%) scale(0)', top: '-10px', transformOrigin: 'bottom center', - transform: 'translateY(-100%) scale(0)', - '&:before': { + '&::before': { position: 'absolute', content: '""', width: 8, @@ -477,15 +373,13 @@ const StyledSliderValueLabel = styled(SliderValueLabel, { }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { - top: '50%', - right: '30px', transform: 'translateY(-50%) scale(0)', + right: '30px', + top: '50%', transformOrigin: 'right center', - '&:before': { + '&::before': { position: 'absolute', content: '""', width: 8, @@ -501,10 +395,14 @@ const StyledSliderValueLabel = styled(SliderValueLabel, { }, }, { - props: { - orientation: 'vertical', - size: 'small', + props: { size: 'small' }, + style: { + fontSize: theme.typography.pxToRem(12), + padding: '0.25rem 0.5rem', }, + }, + { + props: { orientation: 'vertical', size: 'small' }, style: { right: '20px', }, @@ -512,20 +410,17 @@ const StyledSliderValueLabel = styled(SliderValueLabel, { ], })); -export { StyledSliderValueLabel as SliderValueLabel }; - -const SliderMark = styled('span', { +export const SliderMark = styled('span', { name: 'MuiSlider', slot: 'Mark', - shouldForwardProp: (prop) => prop !== 'markActive', - // @TODO - Support this in `styled` implementation + // TODO: support this in the styled call // shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markActive', overridesResolver: (props, styles) => { const { markActive } = props; return [styles.mark, markActive && styles.markActive]; }, -})(({ theme }) => ({ +})(({ theme }) => ({ position: 'absolute', width: 2, height: 2, @@ -533,27 +428,21 @@ const SliderMark = styled('span', { backgroundColor: 'currentColor', variants: [ { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { top: '50%', transform: 'translate(-1px, -50%)', }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { left: '50%', transform: 'translate(-50%, 1px)', }, }, { - props: { - markActive: true, - }, + props: { markActive: true }, style: { backgroundColor: (theme.vars || theme).palette.background.paper, opacity: 0.8, @@ -562,24 +451,20 @@ const SliderMark = styled('span', { ], })); -export { SliderMark }; - -const SliderMarkLabel = styled('span', { +export const SliderMarkLabel = styled('span', { name: 'MuiSlider', slot: 'MarkLabel', - // @TODO + // TODO: support this in the styled call // shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markLabelActive', overridesResolver: (props, styles) => styles.markLabel, -})(({ theme }) => ({ +})(({ theme }) => ({ ...theme.typography.body2, color: (theme.vars || theme).palette.text.secondary, position: 'absolute', whiteSpace: 'nowrap', variants: [ { - props: { - orientation: 'horizontal', - }, + props: { orientation: 'horizontal' }, style: { top: 30, transform: 'translateX(-50%)', @@ -589,9 +474,7 @@ const SliderMarkLabel = styled('span', { }, }, { - props: { - orientation: 'vertical', - }, + props: { orientation: 'vertical' }, style: { left: 36, transform: 'translateY(50%)', @@ -601,9 +484,7 @@ const SliderMarkLabel = styled('span', { }, }, { - props: { - markLabelActive: true, - }, + props: { markLabelActive: true }, style: { color: (theme.vars || theme).palette.text.primary, }, @@ -611,7 +492,7 @@ const SliderMarkLabel = styled('span', { ], })); -const useUtilityClasses = (ownerState: SliderOwnerState) => { +const useUtilityClasses = (ownerState) => { const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState; const slots = { @@ -647,18 +528,19 @@ const useUtilityClasses = (ownerState: SliderOwnerState) => { return composeClasses(slots, getSliderUtilityClass, classes); }; -export { SliderMarkLabel }; +const Forward = ({ children }) => children; -const Forward = ({ children }: React.PropsWithChildren) => children; +const Slider = React.forwardRef(function Slider(inputProps, ref) { + const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); -const Slider = React.forwardRef(function Slider(props, ref) { - // @TODO - Figure out how to persist this information - const isRtl = false; // theme.direction === 'rtl'; + const theme = useTheme(); + const isRtl = theme.direction === 'rtl'; const { 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, 'aria-labelledby': ariaLabelledby, + // eslint-disable-next-line react/prop-types component = 'span', components = {}, componentsProps = {}, @@ -672,19 +554,25 @@ const Slider = React.forwardRef(function Slider(pr marks: marksProp = false, max = 100, min = 0, + name, + onChange, + onChangeCommitted, orientation = 'horizontal', + shiftStep = 10, size = 'medium', step = 1, scale = Identity, slotProps, slots, + tabIndex, track = 'normal', + value: valueProp, valueLabelDisplay = 'off', valueLabelFormat = Identity, ...other } = props; - const ownerState: SliderOwnerState = { + const ownerState = { ...props, isRtl, max, @@ -697,6 +585,7 @@ const Slider = React.forwardRef(function Slider(pr color, size, step, + shiftStep, scale, track, valueLabelDisplay, @@ -719,10 +608,7 @@ const Slider = React.forwardRef(function Slider(pr trackOffset, trackLeap, getThumbStyle, - } = useSlider({ - ...ownerState, - rootRef: ref, - }); + } = useSlider({ ...ownerState, rootRef: ref }); ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label); ownerState.dragging = dragging; @@ -730,11 +616,12 @@ const Slider = React.forwardRef(function Slider(pr const classes = useUtilityClasses(ownerState); + // support both `slots` and `components` for backward compatibility const RootSlot = slots?.root ?? components.Root ?? SliderRoot; const RailSlot = slots?.rail ?? components.Rail ?? SliderRail; const TrackSlot = slots?.track ?? components.Track ?? SliderTrack; const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb; - const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? StyledSliderValueLabel; + const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel; const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark; const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel; const InputSlot = slots?.input ?? components.Input ?? 'input'; diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 5b4e386af1f6d8..9a8d65e26d22ec 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -35,47 +35,14 @@ export const SliderRoot = styled('span', { ownerState.track === false && styles.trackFalse, ]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ borderRadius: 12, boxSizing: 'content-box', display: 'inline-block', position: 'relative', cursor: 'pointer', touchAction: 'none', - color: (theme.vars || theme).palette[ownerState.color].main, WebkitTapHighlightColor: 'transparent', - ...(ownerState.orientation === 'horizontal' && { - height: 4, - width: '100%', - padding: '13px 0', - // The primary input mechanism of the device includes a pointing device of limited accuracy. - '@media (pointer: coarse)': { - // Reach 42px touch target, about ~8mm on screen. - padding: '20px 0', - }, - ...(ownerState.size === 'small' && { - height: 2, - }), - ...(ownerState.marked && { - marginBottom: 20, - }), - }), - ...(ownerState.orientation === 'vertical' && { - height: '100%', - width: 4, - padding: '0 13px', - // The primary input mechanism of the device includes a pointing device of limited accuracy. - '@media (pointer: coarse)': { - // Reach 42px touch target, about ~8mm on screen. - padding: '0 20px', - }, - ...(ownerState.size === 'small' && { - width: 2, - }), - ...(ownerState.marked && { - marginRight: 44, - }), - }), '@media print': { colorAdjust: 'exact', }, @@ -89,44 +56,111 @@ export const SliderRoot = styled('span', { transition: 'none', }, }, + variants: [ + ...Object.keys((theme.vars ?? theme).palette) + .filter((key) => (theme.vars ?? theme).palette[key].main) + .map((color) => ({ + props: { color }, + style: { + color: (theme.vars || theme).palette[color].main, + }, + })), + { + props: { orientation: 'horizontal' }, + style: { + height: 4, + width: '100%', + padding: '13px 0', + // The primary input mechanism of the device includes a pointing device of limited accuracy. + '@media (pointer: coarse)': { + // Reach 42px touch target, about ~8mm on screen. + padding: '20px 0', + }, + }, + }, + { + props: { orientation: 'horizontal', size: 'small' }, + style: { + height: 2, + }, + }, + { + props: { orientation: 'horizontal', marked: true }, + style: { + marginBottom: 20, + }, + }, + { + props: { orientation: 'vertical' }, + style: { + height: '100%', + width: 4, + padding: '0 13px', + // The primary input mechanism of the device includes a pointing device of limited accuracy. + '@media (pointer: coarse)': { + // Reach 42px touch target, about ~8mm on screen. + padding: '0 20px', + }, + }, + }, + { + props: { orientation: 'vertical', size: 'small' }, + style: { + width: 2, + }, + }, + { + props: { orientation: 'vertical', marked: true }, + style: { + marginRight: 44, + }, + }, + ], })); export const SliderRail = styled('span', { name: 'MuiSlider', slot: 'Rail', overridesResolver: (props, styles) => styles.rail, -})(({ ownerState }) => ({ +})({ display: 'block', position: 'absolute', borderRadius: 'inherit', backgroundColor: 'currentColor', opacity: 0.38, - ...(ownerState.orientation === 'horizontal' && { - width: '100%', - height: 'inherit', - top: '50%', - transform: 'translateY(-50%)', - }), - ...(ownerState.orientation === 'vertical' && { - height: '100%', - width: 'inherit', - left: '50%', - transform: 'translateX(-50%)', - }), - ...(ownerState.track === 'inverted' && { - opacity: 1, - }), -})); + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + width: '100%', + height: 'inherit', + top: '50%', + transform: 'translateY(-50%)', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + height: '100%', + width: 'inherit', + left: '50%', + transform: 'translateX(-50%)', + }, + }, + { + props: { track: 'inverted' }, + style: { + opacity: 1, + }, + }, + ], +}); export const SliderTrack = styled('span', { name: 'MuiSlider', slot: 'Track', overridesResolver: (props, styles) => styles.track, -})(({ theme, ownerState }) => { - const color = // Same logic as the LinearProgress track color - theme.palette.mode === 'light' - ? lighten(theme.palette[ownerState.color].main, 0.62) - : darken(theme.palette[ownerState.color].main, 0.5); +})(({ theme }) => { return { display: 'block', position: 'absolute', @@ -136,26 +170,58 @@ export const SliderTrack = styled('span', { transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], { duration: theme.transitions.duration.shortest, }), - ...(ownerState.size === 'small' && { - border: 'none', - }), - ...(ownerState.orientation === 'horizontal' && { - height: 'inherit', - top: '50%', - transform: 'translateY(-50%)', - }), - ...(ownerState.orientation === 'vertical' && { - width: 'inherit', - left: '50%', - transform: 'translateX(-50%)', - }), - ...(ownerState.track === false && { - display: 'none', - }), - ...(ownerState.track === 'inverted' && { - backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color, - borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color, - }), + variants: [ + { + props: { size: 'small' }, + style: { + border: 'none', + }, + }, + { + props: { orientation: 'horizontal' }, + style: { + height: 'inherit', + top: '50%', + transform: 'translateY(-50%)', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + width: 'inherit', + left: '50%', + transform: 'translateX(-50%)', + }, + }, + { + props: { track: false }, + style: { + display: 'none', + }, + }, + ...Object.keys((theme.vars ?? theme).palette) + .filter((key) => (theme.vars ?? theme).palette[key].main) + .map((color) => ({ + props: { color, track: 'inverted' }, + style: { + ...(theme.vars + ? { + backgroundColor: theme.vars.palette.Slider[`${color}Track`], + borderColor: theme.vars.palette.Slider[`${color}Track`], + } + : { + backgroundColor: lighten(theme.palette[color].main, 0.62), + borderColor: lighten(theme.palette[color].main, 0.62), + ...theme.applyStyles('dark', { + backgroundColor: darken(theme.palette[color].main, 0.5), + }), + ...theme.applyStyles('dark', { + borderColor: darken(theme.palette[color].main, 0.5), + }), + }), + }, + })), + ], }; }); @@ -170,7 +236,7 @@ export const SliderThumb = styled('span', { ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`], ]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ position: 'absolute', width: 20, height: 20, @@ -184,18 +250,6 @@ export const SliderThumb = styled('span', { transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], { duration: theme.transitions.duration.shortest, }), - ...(ownerState.size === 'small' && { - width: 12, - height: 12, - }), - ...(ownerState.orientation === 'horizontal' && { - top: '50%', - transform: 'translate(-50%, -50%)', - }), - ...(ownerState.orientation === 'vertical' && { - left: '50%', - transform: 'translate(-50%, 50%)', - }), '&::before': { position: 'absolute', content: '""', @@ -203,9 +257,6 @@ export const SliderThumb = styled('span', { width: '100%', height: '100%', boxShadow: (theme.vars || theme).shadows[2], - ...(ownerState.size === 'small' && { - boxShadow: 'none', - }), }, '&::after': { position: 'absolute', @@ -218,40 +269,74 @@ export const SliderThumb = styled('span', { left: '50%', transform: 'translate(-50%, -50%)', }, - [`&:hover, &.${sliderClasses.focusVisible}`]: { - boxShadow: `0px 0px 0px 8px ${ - theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` - : alpha(theme.palette[ownerState.color].main, 0.16) - }`, - '@media (hover: none)': { - boxShadow: 'none', - }, - }, - [`&.${sliderClasses.active}`]: { - boxShadow: `0px 0px 0px 14px ${ - theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` - : alpha(theme.palette[ownerState.color].main, 0.16) - }`, - }, [`&.${sliderClasses.disabled}`]: { '&:hover': { boxShadow: 'none', }, }, + variants: [ + ...Object.keys((theme.vars ?? theme).palette) + .filter( + (key) => theme.palette[key]?.main || (theme.vars && theme.vars.palette[key]?.mainChannel), + ) + .map((color) => ({ + props: { color }, + style: { + [`&:hover, &.${sliderClasses.focusVisible}`]: { + ...(theme.vars + ? { + boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`, + } + : { + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`, + }), + '@media (hover: none)': { + boxShadow: 'none', + }, + }, + [`&.${sliderClasses.active}`]: { + ...(theme.vars + ? { + boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`, + } + : { + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`, + }), + }, + }, + })), + { + props: { size: 'small' }, + style: { + width: 12, + height: 12, + '&::before': { + boxShadow: 'none', + }, + }, + }, + { + props: { orientation: 'horizontal' }, + style: { + top: '50%', + transform: 'translate(-50%, -50%)', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + left: '50%', + transform: 'translate(-50%, 50%)', + }, + }, + ], })); export const SliderValueLabel = styled(BaseSliderValueLabel, { name: 'MuiSlider', slot: 'ValueLabel', overridesResolver: (props, styles) => styles.valueLabel, -})(({ theme, ownerState }) => ({ - [`&.${sliderClasses.valueLabelOpen}`]: { - transform: `${ - ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)' - } scale(1)`, - }, +})(({ theme }) => ({ zIndex: 1, whiteSpace: 'nowrap', ...theme.typography.body2, @@ -259,9 +344,6 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, { transition: theme.transitions.create(['transform'], { duration: theme.transitions.duration.shortest, }), - transform: `${ - ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)' - } scale(0)`, position: 'absolute', backgroundColor: (theme.vars || theme).palette.grey[600], borderRadius: 2, @@ -270,39 +352,64 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, { alignItems: 'center', justifyContent: 'center', padding: '0.25rem 0.75rem', - ...(ownerState.orientation === 'horizontal' && { - top: '-10px', - transformOrigin: 'bottom center', - '&::before': { - position: 'absolute', - content: '""', - width: 8, - height: 8, - transform: 'translate(-50%, 50%) rotate(45deg)', - backgroundColor: 'inherit', - bottom: 0, - left: '50%', + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + transform: 'translateY(-100%) scale(0)', + top: '-10px', + transformOrigin: 'bottom center', + '&::before': { + position: 'absolute', + content: '""', + width: 8, + height: 8, + transform: 'translate(-50%, 50%) rotate(45deg)', + backgroundColor: 'inherit', + bottom: 0, + left: '50%', + }, + [`&.${sliderClasses.valueLabelOpen}`]: { + transform: 'translateY(-100%) scale(1)', + }, + }, }, - }), - ...(ownerState.orientation === 'vertical' && { - right: ownerState.size === 'small' ? '20px' : '30px', - top: '50%', - transformOrigin: 'right center', - '&::before': { - position: 'absolute', - content: '""', - width: 8, - height: 8, - transform: 'translate(-50%, -50%) rotate(45deg)', - backgroundColor: 'inherit', - right: -8, - top: '50%', + { + props: { orientation: 'vertical' }, + style: { + transform: 'translateY(-50%) scale(0)', + right: '30px', + top: '50%', + transformOrigin: 'right center', + '&::before': { + position: 'absolute', + content: '""', + width: 8, + height: 8, + transform: 'translate(-50%, -50%) rotate(45deg)', + backgroundColor: 'inherit', + right: -8, + top: '50%', + }, + [`&.${sliderClasses.valueLabelOpen}`]: { + transform: 'translateY(-50%) scale(1)', + }, + }, }, - }), - ...(ownerState.size === 'small' && { - fontSize: theme.typography.pxToRem(12), - padding: '0.25rem 0.5rem', - }), + { + props: { size: 'small' }, + style: { + fontSize: theme.typography.pxToRem(12), + padding: '0.25rem 0.5rem', + }, + }, + { + props: { orientation: 'vertical', size: 'small' }, + style: { + right: '20px', + }, + }, + ], })); export const SliderMark = styled('span', { @@ -314,24 +421,35 @@ export const SliderMark = styled('span', { return [styles.mark, markActive && styles.markActive]; }, -})(({ theme, ownerState, markActive }) => ({ +})(({ theme }) => ({ position: 'absolute', width: 2, height: 2, borderRadius: 1, backgroundColor: 'currentColor', - ...(ownerState.orientation === 'horizontal' && { - top: '50%', - transform: 'translate(-1px, -50%)', - }), - ...(ownerState.orientation === 'vertical' && { - left: '50%', - transform: 'translate(-50%, 1px)', - }), - ...(markActive && { - backgroundColor: (theme.vars || theme).palette.background.paper, - opacity: 0.8, - }), + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + top: '50%', + transform: 'translate(-1px, -50%)', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + left: '50%', + transform: 'translate(-50%, 1px)', + }, + }, + { + props: { markActive: true }, + style: { + backgroundColor: (theme.vars || theme).palette.background.paper, + opacity: 0.8, + }, + }, + ], })); export const SliderMarkLabel = styled('span', { @@ -339,28 +457,39 @@ export const SliderMarkLabel = styled('span', { slot: 'MarkLabel', shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markLabelActive', overridesResolver: (props, styles) => styles.markLabel, -})(({ theme, ownerState, markLabelActive }) => ({ +})(({ theme }) => ({ ...theme.typography.body2, color: (theme.vars || theme).palette.text.secondary, position: 'absolute', whiteSpace: 'nowrap', - ...(ownerState.orientation === 'horizontal' && { - top: 30, - transform: 'translateX(-50%)', - '@media (pointer: coarse)': { - top: 40, + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + top: 30, + transform: 'translateX(-50%)', + '@media (pointer: coarse)': { + top: 40, + }, + }, }, - }), - ...(ownerState.orientation === 'vertical' && { - left: 36, - transform: 'translateY(50%)', - '@media (pointer: coarse)': { - left: 44, + { + props: { orientation: 'vertical' }, + style: { + left: 36, + transform: 'translateY(50%)', + '@media (pointer: coarse)': { + left: 44, + }, + }, }, - }), - ...(markLabelActive && { - color: (theme.vars || theme).palette.text.primary, - }), + { + props: { markLabelActive: true }, + style: { + color: (theme.vars || theme).palette.text.primary, + }, + }, + ], })); const useUtilityClasses = (ownerState) => { diff --git a/packages/mui-material/src/utils/index.d.ts b/packages/mui-material/src/utils/index.d.ts index 4f675ba362d039..b4904a3ecf3604 100644 --- a/packages/mui-material/src/utils/index.d.ts +++ b/packages/mui-material/src/utils/index.d.ts @@ -15,4 +15,5 @@ export { default as useControlled } from './useControlled'; export { default as useEventCallback } from './useEventCallback'; export { default as useForkRef } from './useForkRef'; export { default as useIsFocusVisible } from './useIsFocusVisible'; +export { default as shouldSpreadAdditionalProps } from './shouldSpreadAdditionalProps'; export { unstable_ClassNameGenerator } from '@mui/base/ClassNameGenerator'; diff --git a/packages/mui-material/src/utils/index.js b/packages/mui-material/src/utils/index.js index 415505ff745dee..76b0ee352a9ad3 100644 --- a/packages/mui-material/src/utils/index.js +++ b/packages/mui-material/src/utils/index.js @@ -18,6 +18,7 @@ export { default as useControlled } from './useControlled'; export { default as useEventCallback } from './useEventCallback'; export { default as useForkRef } from './useForkRef'; export { default as useIsFocusVisible } from './useIsFocusVisible'; +export { default as shouldSpreadAdditionalProps } from './shouldSpreadAdditionalProps'; // TODO: remove this export once ClassNameGenerator is stable // eslint-disable-next-line @typescript-eslint/naming-convention export const unstable_ClassNameGenerator = { diff --git a/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts b/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts new file mode 100644 index 00000000000000..9d18cd5453a16f --- /dev/null +++ b/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts @@ -0,0 +1,3 @@ +declare const shouldSpreadAdditionalProps: (Slot: React.ElementType) => boolean; + +export default shouldSpreadAdditionalProps; From c5a4f39bb0d0336fcd3502551e797e264b9369c7 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 20 Feb 2024 15:35:40 +0100 Subject: [PATCH 02/13] fixes & prettier --- apps/zero-runtime-next-app/src/app/slider/page.tsx | 4 ++-- apps/zero-runtime-next-app/src/components/Slider/Slider.js | 4 +--- packages/mui-material/src/Slider/Slider.js | 4 +--- .../mui-material/src/utils/shouldSpreadAdditionalProps.d.ts | 4 +++- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/zero-runtime-next-app/src/app/slider/page.tsx b/apps/zero-runtime-next-app/src/app/slider/page.tsx index 096102ca4a7004..7f359ed85775b2 100644 --- a/apps/zero-runtime-next-app/src/app/slider/page.tsx +++ b/apps/zero-runtime-next-app/src/app/slider/page.tsx @@ -9,14 +9,14 @@ const HalfWidth = styled.div(({ theme }) => ({ width: '50%', maxHeight: 100, padding: 20, - // border: `1px solid ${theme.vars.palette.primary.main}`, + border: `1px solid ${theme.vars.palette.primary.main}`, })); export default function SliderPage() { const [value, setValue] = React.useState(50); const [isColorPrimary, setIsColorPrimary] = React.useState(true); const [size, setSize] = React.useState('medium'); - const [showMarks, setShowMarks] = React.useState(true); + const [showMarks, setShowMarks] = React.useState(false); const [isTrackInverted, setIsTrackInverted] = React.useState(false); const [disabled, setDisabled] = React.useState(false); const [isHorizontal, setIsHorizontal] = React.useState(true); diff --git a/apps/zero-runtime-next-app/src/components/Slider/Slider.js b/apps/zero-runtime-next-app/src/components/Slider/Slider.js index de60c520eeeff6..746a31c03b0536 100644 --- a/apps/zero-runtime-next-app/src/components/Slider/Slider.js +++ b/apps/zero-runtime-next-app/src/components/Slider/Slider.js @@ -274,9 +274,7 @@ export const SliderThumb = styled('span', { }, variants: [ ...Object.keys((theme.vars ?? theme).palette) - .filter( - (key) => theme.palette[key]?.main || (theme.vars && theme.vars.palette[key]?.mainChannel), - ) + .filter((key) => (theme.vars ?? theme).palette[key].main) .map((color) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 9a8d65e26d22ec..4212966f06018f 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -276,9 +276,7 @@ export const SliderThumb = styled('span', { }, variants: [ ...Object.keys((theme.vars ?? theme).palette) - .filter( - (key) => theme.palette[key]?.main || (theme.vars && theme.vars.palette[key]?.mainChannel), - ) + .filter((key) => (theme.vars ?? theme).palette[key].main) .map((color) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts b/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts index 9d18cd5453a16f..22bb78a0a5112d 100644 --- a/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts +++ b/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts @@ -1,3 +1,5 @@ -declare const shouldSpreadAdditionalProps: (Slot: React.ElementType) => boolean; +declare const shouldSpreadAdditionalProps: ( + Slot: React.ElementType, +) => boolean; export default shouldSpreadAdditionalProps; From 918d6646f86387726033b72ed9e51cfb1d48db9a Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 12:39:58 +0100 Subject: [PATCH 03/13] linst issues --- .../src/components/Slider/Slider.js | 317 +++++++++++++++++- 1 file changed, 314 insertions(+), 3 deletions(-) diff --git a/apps/zero-runtime-next-app/src/components/Slider/Slider.js b/apps/zero-runtime-next-app/src/components/Slider/Slider.js index 746a31c03b0536..776a282a56a531 100644 --- a/apps/zero-runtime-next-app/src/components/Slider/Slider.js +++ b/apps/zero-runtime-next-app/src/components/Slider/Slider.js @@ -1,6 +1,8 @@ 'use client'; import * as React from 'react'; +import PropTypes from 'prop-types'; import clsx from 'clsx'; +import chainPropTypes from '@mui/utils/chainPropTypes'; import { isHostComponent, useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { useSlider, valueToPercent } from '@mui/base/useSlider'; @@ -8,10 +10,10 @@ import { alpha, lighten, darken } from '@mui/system/colorManipulator'; import { styled } from '@mui/zero-runtime'; // import { slotShouldForwardProp } from '@mui/material/styles/styled'; import { useTheme, useThemeProps } from '@mui/material/styles'; -import { shouldSpreadAdditionalProps } from '@mui/material/utils'; -import { capitalize } from '@mui/material/utils'; +import { shouldSpreadAdditionalProps, capitalize } from '@mui/material/utils'; +/* eslint-disable-next-line no-restricted-imports */ import BaseSliderValueLabel from '@mui/material/Slider/SliderValueLabel'; -import sliderClasses, { getSliderUtilityClass } from '@mui/material/Slider/sliderClasses'; +import { sliderClasses, getSliderUtilityClass } from '@mui/material/Slider'; function Identity(x) { return x; @@ -827,4 +829,313 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ); }); +Slider.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 label of the slider. + */ + 'aria-label': chainPropTypes(PropTypes.string, (props) => { + const range = Array.isArray(props.value || props.defaultValue); + + if (range && props['aria-label'] != null) { + return new Error( + 'MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.', + ); + } + + return null; + }), + /** + * The id of the element containing a label for the slider. + */ + 'aria-labelledby': PropTypes.string, + /** + * A string value that provides a user-friendly name for the current value of the slider. + */ + 'aria-valuetext': chainPropTypes(PropTypes.string, (props) => { + const range = Array.isArray(props.value || props.defaultValue); + + if (range && props['aria-valuetext'] != null) { + return new Error( + 'MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.', + ); + } + + return null; + }), + /** + * @ignore + */ + 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 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, + Mark: PropTypes.elementType, + MarkLabel: PropTypes.elementType, + Rail: PropTypes.elementType, + Root: PropTypes.elementType, + Thumb: PropTypes.elementType, + Track: PropTypes.elementType, + ValueLabel: 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.oneOfType([PropTypes.func, PropTypes.object]), + mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + valueLabel: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + children: PropTypes.element, + className: PropTypes.string, + open: PropTypes.bool, + style: PropTypes.object, + value: PropTypes.number, + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + }), + ]), + }), + /** + * The default value. Use when the component is not controlled. + */ + defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + /** + * If `true`, the component is disabled. + * @default false + */ + disabled: PropTypes.bool, + /** + * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb. + * @default false + */ + disableSwap: PropTypes.bool, + /** + * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. + * This is important for screen reader users. + * @param {number} index The thumb label's index to format. + * @returns {string} + */ + getAriaLabel: PropTypes.func, + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. + * This is important for screen reader users. + * @param {number} value The thumb label's value to format. + * @param {number} index The thumb label's index to format. + * @returns {string} + */ + getAriaValueText: PropTypes.func, + /** + * Marks indicate predetermined values to which the user can move the slider. + * If `true` the marks are spaced according the value of the `step` prop. + * If an array, it should contain objects with `value` and an optional `label` keys. + * @default false + */ + marks: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + value: PropTypes.number.isRequired, + }), + ), + PropTypes.bool, + ]), + /** + * The maximum allowed value of the slider. + * Should not be equal to min. + * @default 100 + */ + max: PropTypes.number, + /** + * The minimum allowed value of the slider. + * Should not be equal to max. + * @default 0 + */ + min: PropTypes.number, + /** + * Name attribute of the hidden `input` element. + */ + name: PropTypes.string, + /** + * Callback function that is fired when the slider's value changed. + * + * @param {Event} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (any). + * **Warning**: This is a generic event not a change event. + * @param {number | number[]} value The new value. + * @param {number} activeThumb Index of the currently moved thumb. + */ + onChange: PropTypes.func, + /** + * Callback function that is fired when the `mouseup` is triggered. + * + * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {number | number[]} value The new value. + */ + onChangeCommitted: PropTypes.func, + /** + * The component orientation. + * @default 'horizontal' + */ + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + /** + * A transformation function, to change the scale of the slider. + * @param {any} x + * @returns {any} + * @default function Identity(x) { + * return x; + * } + */ + scale: PropTypes.func, + /** + * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. + * @default 10 + */ + shiftStep: PropTypes.number, + /** + * The size of the slider. + * @default 'medium' + */ + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['small', 'medium']), + PropTypes.string, + ]), + /** + * The props used for each slot inside the Slider. + * @default {} + */ + slotProps: PropTypes.shape({ + input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + valueLabel: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + children: PropTypes.element, + className: PropTypes.string, + open: PropTypes.bool, + style: PropTypes.object, + value: PropTypes.number, + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + }), + ]), + }), + /** + * The components used for each slot inside the Slider. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots: PropTypes.shape({ + input: PropTypes.elementType, + mark: PropTypes.elementType, + markLabel: PropTypes.elementType, + rail: PropTypes.elementType, + root: PropTypes.elementType, + thumb: PropTypes.elementType, + track: PropTypes.elementType, + valueLabel: PropTypes.elementType, + }), + /** + * The granularity with which the slider can step through values. (A "discrete" slider.) + * The `min` prop serves as the origin for the valid values. + * We recommend (max - min) to be evenly divisible by the step. + * + * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. + * @default 1 + */ + step: PropTypes.number, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + /** + * Tab index attribute of the hidden `input` element. + */ + tabIndex: PropTypes.number, + /** + * The track presentation: + * + * - `normal` the track will render a bar representing the slider value. + * - `inverted` the track will render a bar representing the remaining slider value. + * - `false` the track will render without a bar. + * @default 'normal' + */ + track: PropTypes.oneOf(['inverted', 'normal', false]), + /** + * The value of the slider. + * For ranged sliders, provide an array with two values. + */ + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + /** + * Controls when the value label is displayed: + * + * - `auto` the value label will display when the thumb is hovered or focused. + * - `on` will display persistently. + * - `off` will never display. + * @default 'off' + */ + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + /** + * The format function the value label's value. + * + * When a function is provided, it should have the following signature: + * + * - {number} value The value label's value to format + * - {number} index The value label's index to format + * @param {any} x + * @returns {any} + * @default function Identity(x) { + * return x; + * } + */ + valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), +}; + export default Slider; From b21f6c29c9617d415d8366d6300d054c3cf9eb6e Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:05:47 +0100 Subject: [PATCH 04/13] remove next app changes --- .../src/app/slider/page.tsx | 100 -- .../src/components/Slider/Slider.js | 1141 ----------------- 2 files changed, 1241 deletions(-) delete mode 100644 apps/zero-runtime-next-app/src/app/slider/page.tsx delete mode 100644 apps/zero-runtime-next-app/src/components/Slider/Slider.js diff --git a/apps/zero-runtime-next-app/src/app/slider/page.tsx b/apps/zero-runtime-next-app/src/app/slider/page.tsx deleted file mode 100644 index 7f359ed85775b2..00000000000000 --- a/apps/zero-runtime-next-app/src/app/slider/page.tsx +++ /dev/null @@ -1,100 +0,0 @@ -'use client'; -import * as React from 'react'; -import { styled } from '@mui/zero-runtime'; -import { Button } from 'local-ui-lib'; -import Slider from '@/components/Slider/Slider'; - -const HalfWidth = styled.div(({ theme }) => ({ - marginLeft: 20, - width: '50%', - maxHeight: 100, - padding: 20, - border: `1px solid ${theme.vars.palette.primary.main}`, -})); - -export default function SliderPage() { - const [value, setValue] = React.useState(50); - const [isColorPrimary, setIsColorPrimary] = React.useState(true); - const [size, setSize] = React.useState('medium'); - const [showMarks, setShowMarks] = React.useState(false); - const [isTrackInverted, setIsTrackInverted] = React.useState(false); - const [disabled, setDisabled] = React.useState(false); - const [isHorizontal, setIsHorizontal] = React.useState(true); - - return ( -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- - setValue(val as number)} - /> - -
- ); -} diff --git a/apps/zero-runtime-next-app/src/components/Slider/Slider.js b/apps/zero-runtime-next-app/src/components/Slider/Slider.js deleted file mode 100644 index 776a282a56a531..00000000000000 --- a/apps/zero-runtime-next-app/src/components/Slider/Slider.js +++ /dev/null @@ -1,1141 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import chainPropTypes from '@mui/utils/chainPropTypes'; -import { isHostComponent, useSlotProps } from '@mui/base/utils'; -import composeClasses from '@mui/utils/composeClasses'; -import { useSlider, valueToPercent } from '@mui/base/useSlider'; -import { alpha, lighten, darken } from '@mui/system/colorManipulator'; -import { styled } from '@mui/zero-runtime'; -// import { slotShouldForwardProp } from '@mui/material/styles/styled'; -import { useTheme, useThemeProps } from '@mui/material/styles'; -import { shouldSpreadAdditionalProps, capitalize } from '@mui/material/utils'; -/* eslint-disable-next-line no-restricted-imports */ -import BaseSliderValueLabel from '@mui/material/Slider/SliderValueLabel'; -import { sliderClasses, getSliderUtilityClass } from '@mui/material/Slider'; - -function Identity(x) { - return x; -} - -export const SliderRoot = styled('span', { - name: 'MuiSlider', - slot: 'Root', - overridesResolver: (props, styles) => { - const { ownerState } = props; - - return [ - styles.root, - styles[`color${capitalize(ownerState.color)}`], - ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], - ownerState.marked && styles.marked, - ownerState.orientation === 'vertical' && styles.vertical, - ownerState.track === 'inverted' && styles.trackInverted, - ownerState.track === false && styles.trackFalse, - ]; - }, -})(({ theme }) => ({ - borderRadius: 12, - boxSizing: 'content-box', - display: 'inline-block', - position: 'relative', - cursor: 'pointer', - touchAction: 'none', - WebkitTapHighlightColor: 'transparent', - '@media print': { - colorAdjust: 'exact', - }, - [`&.${sliderClasses.disabled}`]: { - pointerEvents: 'none', - cursor: 'default', - color: (theme.vars || theme).palette.grey[400], - }, - [`&.${sliderClasses.dragging}`]: { - [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: { - transition: 'none', - }, - }, - variants: [ - ...Object.keys((theme.vars ?? theme).palette) - .filter((key) => (theme.vars ?? theme).palette[key].main) - .map((color) => ({ - props: { color }, - style: { - color: (theme.vars || theme).palette[color].main, - }, - })), - { - props: { orientation: 'horizontal' }, - style: { - height: 4, - width: '100%', - padding: '13px 0', - // The primary input mechanism of the device includes a pointing device of limited accuracy. - '@media (pointer: coarse)': { - // Reach 42px touch target, about ~8mm on screen. - padding: '20px 0', - }, - }, - }, - { - props: { orientation: 'horizontal', size: 'small' }, - style: { - height: 2, - }, - }, - { - props: { orientation: 'horizontal', marked: true }, - style: { - marginBottom: 20, - }, - }, - { - props: { orientation: 'vertical' }, - style: { - height: '100%', - width: 4, - padding: '0 13px', - // The primary input mechanism of the device includes a pointing device of limited accuracy. - '@media (pointer: coarse)': { - // Reach 42px touch target, about ~8mm on screen. - padding: '0 20px', - }, - }, - }, - { - props: { orientation: 'vertical', size: 'small' }, - style: { - width: 2, - }, - }, - { - props: { orientation: 'vertical', marked: true }, - style: { - marginRight: 44, - }, - }, - ], -})); - -export const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', - overridesResolver: (props, styles) => styles.rail, -})({ - display: 'block', - position: 'absolute', - borderRadius: 'inherit', - backgroundColor: 'currentColor', - opacity: 0.38, - variants: [ - { - props: { orientation: 'horizontal' }, - style: { - width: '100%', - height: 'inherit', - top: '50%', - transform: 'translateY(-50%)', - }, - }, - { - props: { orientation: 'vertical' }, - style: { - height: '100%', - width: 'inherit', - left: '50%', - transform: 'translateX(-50%)', - }, - }, - { - props: { track: 'inverted' }, - style: { - opacity: 1, - }, - }, - ], -}); - -export const SliderTrack = styled('span', { - name: 'MuiSlider', - slot: 'Track', - overridesResolver: (props, styles) => styles.track, -})(({ theme }) => { - return { - display: 'block', - position: 'absolute', - borderRadius: 'inherit', - border: '1px solid currentColor', - backgroundColor: 'currentColor', - transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], { - duration: theme.transitions.duration.shortest, - }), - variants: [ - { - props: { size: 'small' }, - style: { - border: 'none', - }, - }, - { - props: { orientation: 'horizontal' }, - style: { - height: 'inherit', - top: '50%', - transform: 'translateY(-50%)', - }, - }, - { - props: { orientation: 'vertical' }, - style: { - width: 'inherit', - left: '50%', - transform: 'translateX(-50%)', - }, - }, - { - props: { track: false }, - style: { - display: 'none', - }, - }, - ...Object.keys((theme.vars ?? theme).palette) - .filter((key) => (theme.vars ?? theme).palette[key].main) - .map((color) => ({ - props: { color, track: 'inverted' }, - style: { - ...(theme.vars - ? { - backgroundColor: theme.vars.palette.Slider[`${color}Track`], - borderColor: theme.vars.palette.Slider[`${color}Track`], - } - : { - backgroundColor: lighten(theme.palette[color].main, 0.62), - borderColor: lighten(theme.palette[color].main, 0.62), - ...theme.applyStyles('dark', { - backgroundColor: darken(theme.palette[color].main, 0.5), - }), - ...theme.applyStyles('dark', { - borderColor: darken(theme.palette[color].main, 0.5), - }), - }), - }, - })), - ], - }; -}); - -export const SliderThumb = styled('span', { - name: 'MuiSlider', - slot: 'Thumb', - overridesResolver: (props, styles) => { - const { ownerState } = props; - return [ - styles.thumb, - styles[`thumbColor${capitalize(ownerState.color)}`], - ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`], - ]; - }, -})(({ theme }) => ({ - position: 'absolute', - width: 20, - height: 20, - boxSizing: 'border-box', - borderRadius: '50%', - outline: 0, - backgroundColor: 'currentColor', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], { - duration: theme.transitions.duration.shortest, - }), - '&::before': { - position: 'absolute', - content: '""', - borderRadius: 'inherit', - width: '100%', - height: '100%', - boxShadow: (theme.vars || theme).shadows[2], - }, - '&::after': { - position: 'absolute', - content: '""', - borderRadius: '50%', - // 42px is the hit target - width: 42, - height: 42, - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - }, - [`&.${sliderClasses.disabled}`]: { - '&:hover': { - boxShadow: 'none', - }, - }, - variants: [ - ...Object.keys((theme.vars ?? theme).palette) - .filter((key) => (theme.vars ?? theme).palette[key].main) - .map((color) => ({ - props: { color }, - style: { - [`&:hover, &.${sliderClasses.focusVisible}`]: { - ...(theme.vars - ? { - boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`, - } - : { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`, - }), - '@media (hover: none)': { - boxShadow: 'none', - }, - }, - [`&.${sliderClasses.active}`]: { - ...(theme.vars - ? { - boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`, - } - : { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`, - }), - }, - }, - })), - { - props: { size: 'small' }, - style: { - width: 12, - height: 12, - '&::before': { - boxShadow: 'none', - }, - }, - }, - { - props: { orientation: 'horizontal' }, - style: { - top: '50%', - transform: 'translate(-50%, -50%)', - }, - }, - { - props: { orientation: 'vertical' }, - style: { - left: '50%', - transform: 'translate(-50%, 50%)', - }, - }, - ], -})); - -export const SliderValueLabel = styled(BaseSliderValueLabel, { - name: 'MuiSlider', - slot: 'ValueLabel', - overridesResolver: (props, styles) => styles.valueLabel, -})(({ theme }) => ({ - zIndex: 1, - whiteSpace: 'nowrap', - ...theme.typography.body2, - fontWeight: 500, - transition: theme.transitions.create(['transform'], { - duration: theme.transitions.duration.shortest, - }), - position: 'absolute', - backgroundColor: (theme.vars || theme).palette.grey[600], - borderRadius: 2, - color: (theme.vars || theme).palette.common.white, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - padding: '0.25rem 0.75rem', - variants: [ - { - props: { orientation: 'horizontal' }, - style: { - transform: 'translateY(-100%) scale(0)', - top: '-10px', - transformOrigin: 'bottom center', - '&::before': { - position: 'absolute', - content: '""', - width: 8, - height: 8, - transform: 'translate(-50%, 50%) rotate(45deg)', - backgroundColor: 'inherit', - bottom: 0, - left: '50%', - }, - [`&.${sliderClasses.valueLabelOpen}`]: { - transform: 'translateY(-100%) scale(1)', - }, - }, - }, - { - props: { orientation: 'vertical' }, - style: { - transform: 'translateY(-50%) scale(0)', - right: '30px', - top: '50%', - transformOrigin: 'right center', - '&::before': { - position: 'absolute', - content: '""', - width: 8, - height: 8, - transform: 'translate(-50%, -50%) rotate(45deg)', - backgroundColor: 'inherit', - right: -8, - top: '50%', - }, - [`&.${sliderClasses.valueLabelOpen}`]: { - transform: 'translateY(-50%) scale(1)', - }, - }, - }, - { - props: { size: 'small' }, - style: { - fontSize: theme.typography.pxToRem(12), - padding: '0.25rem 0.5rem', - }, - }, - { - props: { orientation: 'vertical', size: 'small' }, - style: { - right: '20px', - }, - }, - ], -})); - -export const SliderMark = styled('span', { - name: 'MuiSlider', - slot: 'Mark', - // TODO: support this in the styled call - // shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markActive', - overridesResolver: (props, styles) => { - const { markActive } = props; - - return [styles.mark, markActive && styles.markActive]; - }, -})(({ theme }) => ({ - position: 'absolute', - width: 2, - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - variants: [ - { - props: { orientation: 'horizontal' }, - style: { - top: '50%', - transform: 'translate(-1px, -50%)', - }, - }, - { - props: { orientation: 'vertical' }, - style: { - left: '50%', - transform: 'translate(-50%, 1px)', - }, - }, - { - props: { markActive: true }, - style: { - backgroundColor: (theme.vars || theme).palette.background.paper, - opacity: 0.8, - }, - }, - ], -})); - -export const SliderMarkLabel = styled('span', { - name: 'MuiSlider', - slot: 'MarkLabel', - // TODO: support this in the styled call - // shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markLabelActive', - overridesResolver: (props, styles) => styles.markLabel, -})(({ theme }) => ({ - ...theme.typography.body2, - color: (theme.vars || theme).palette.text.secondary, - position: 'absolute', - whiteSpace: 'nowrap', - variants: [ - { - props: { orientation: 'horizontal' }, - style: { - top: 30, - transform: 'translateX(-50%)', - '@media (pointer: coarse)': { - top: 40, - }, - }, - }, - { - props: { orientation: 'vertical' }, - style: { - left: 36, - transform: 'translateY(50%)', - '@media (pointer: coarse)': { - left: 44, - }, - }, - }, - { - props: { markLabelActive: true }, - style: { - color: (theme.vars || theme).palette.text.primary, - }, - }, - ], -})); - -const useUtilityClasses = (ownerState) => { - const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState; - - const slots = { - root: [ - 'root', - disabled && 'disabled', - dragging && 'dragging', - marked && 'marked', - orientation === 'vertical' && 'vertical', - track === 'inverted' && 'trackInverted', - track === false && 'trackFalse', - color && `color${capitalize(color)}`, - size && `size${capitalize(size)}`, - ], - rail: ['rail'], - track: ['track'], - mark: ['mark'], - markActive: ['markActive'], - markLabel: ['markLabel'], - markLabelActive: ['markLabelActive'], - valueLabel: ['valueLabel'], - thumb: [ - 'thumb', - disabled && 'disabled', - size && `thumbSize${capitalize(size)}`, - color && `thumbColor${capitalize(color)}`, - ], - active: ['active'], - disabled: ['disabled'], - focusVisible: ['focusVisible'], - }; - - return composeClasses(slots, getSliderUtilityClass, classes); -}; - -const Forward = ({ children }) => children; - -const Slider = React.forwardRef(function Slider(inputProps, ref) { - const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); - - const theme = useTheme(); - const isRtl = theme.direction === 'rtl'; - - const { - 'aria-label': ariaLabel, - 'aria-valuetext': ariaValuetext, - 'aria-labelledby': ariaLabelledby, - // eslint-disable-next-line react/prop-types - component = 'span', - components = {}, - componentsProps = {}, - color = 'primary', - classes: classesProp, - className, - disableSwap = false, - disabled = false, - getAriaLabel, - getAriaValueText, - marks: marksProp = false, - max = 100, - min = 0, - name, - onChange, - onChangeCommitted, - orientation = 'horizontal', - shiftStep = 10, - size = 'medium', - step = 1, - scale = Identity, - slotProps, - slots, - tabIndex, - track = 'normal', - value: valueProp, - valueLabelDisplay = 'off', - valueLabelFormat = Identity, - ...other - } = props; - - const ownerState = { - ...props, - isRtl, - max, - min, - classes: classesProp, - disabled, - disableSwap, - orientation, - marks: marksProp, - color, - size, - step, - shiftStep, - scale, - track, - valueLabelDisplay, - valueLabelFormat, - }; - - const { - axisProps, - getRootProps, - getHiddenInputProps, - getThumbProps, - open, - active, - axis, - focusedThumbIndex, - range, - dragging, - marks, - values, - trackOffset, - trackLeap, - getThumbStyle, - } = useSlider({ ...ownerState, rootRef: ref }); - - ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label); - ownerState.dragging = dragging; - ownerState.focusedThumbIndex = focusedThumbIndex; - - const classes = useUtilityClasses(ownerState); - - // support both `slots` and `components` for backward compatibility - const RootSlot = slots?.root ?? components.Root ?? SliderRoot; - const RailSlot = slots?.rail ?? components.Rail ?? SliderRail; - const TrackSlot = slots?.track ?? components.Track ?? SliderTrack; - const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb; - const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel; - const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark; - const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel; - const InputSlot = slots?.input ?? components.Input ?? 'input'; - - const rootSlotProps = slotProps?.root ?? componentsProps.root; - const railSlotProps = slotProps?.rail ?? componentsProps.rail; - const trackSlotProps = slotProps?.track ?? componentsProps.track; - const thumbSlotProps = slotProps?.thumb ?? componentsProps.thumb; - const valueLabelSlotProps = slotProps?.valueLabel ?? componentsProps.valueLabel; - const markSlotProps = slotProps?.mark ?? componentsProps.mark; - const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel; - const inputSlotProps = slotProps?.input ?? componentsProps.input; - - const rootProps = useSlotProps({ - elementType: RootSlot, - getSlotProps: getRootProps, - externalSlotProps: rootSlotProps, - externalForwardedProps: other, - additionalProps: { - ...(shouldSpreadAdditionalProps(RootSlot) && { - as: component, - }), - }, - ownerState: { - ...ownerState, - ...rootSlotProps?.ownerState, - }, - className: [classes.root, className], - }); - - const railProps = useSlotProps({ - elementType: RailSlot, - externalSlotProps: railSlotProps, - ownerState, - className: classes.rail, - }); - - const trackProps = useSlotProps({ - elementType: TrackSlot, - externalSlotProps: trackSlotProps, - additionalProps: { - style: { - ...axisProps[axis].offset(trackOffset), - ...axisProps[axis].leap(trackLeap), - }, - }, - ownerState: { - ...ownerState, - ...trackSlotProps?.ownerState, - }, - className: classes.track, - }); - - const thumbProps = useSlotProps({ - elementType: ThumbSlot, - getSlotProps: getThumbProps, - externalSlotProps: thumbSlotProps, - ownerState: { - ...ownerState, - ...thumbSlotProps?.ownerState, - }, - className: classes.thumb, - }); - - const valueLabelProps = useSlotProps({ - elementType: ValueLabelSlot, - externalSlotProps: valueLabelSlotProps, - ownerState: { - ...ownerState, - ...valueLabelSlotProps?.ownerState, - }, - className: classes.valueLabel, - }); - - const markProps = useSlotProps({ - elementType: MarkSlot, - externalSlotProps: markSlotProps, - ownerState, - className: classes.mark, - }); - - const markLabelProps = useSlotProps({ - elementType: MarkLabelSlot, - externalSlotProps: markLabelSlotProps, - ownerState, - className: classes.markLabel, - }); - - const inputSliderProps = useSlotProps({ - elementType: InputSlot, - getSlotProps: getHiddenInputProps, - externalSlotProps: inputSlotProps, - ownerState, - }); - - return ( - - - - {marks - .filter((mark) => mark.value >= min && mark.value <= max) - .map((mark, index) => { - const percent = valueToPercent(mark.value, min, max); - const style = axisProps[axis].offset(percent); - - let markActive; - if (track === false) { - markActive = values.indexOf(mark.value) !== -1; - } else { - markActive = - (track === 'normal' && - (range - ? mark.value >= values[0] && mark.value <= values[values.length - 1] - : mark.value <= values[0])) || - (track === 'inverted' && - (range - ? mark.value <= values[0] || mark.value >= values[values.length - 1] - : mark.value >= values[0])); - } - - return ( - - - {mark.label != null ? ( - - {mark.label} - - ) : null} - - ); - })} - {values.map((value, index) => { - const percent = valueToPercent(value, min, max); - const style = axisProps[axis].offset(percent); - - const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot; - - return ( - /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */ - - - - - - ); - })} - - ); -}); - -Slider.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 label of the slider. - */ - 'aria-label': chainPropTypes(PropTypes.string, (props) => { - const range = Array.isArray(props.value || props.defaultValue); - - if (range && props['aria-label'] != null) { - return new Error( - 'MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.', - ); - } - - return null; - }), - /** - * The id of the element containing a label for the slider. - */ - 'aria-labelledby': PropTypes.string, - /** - * A string value that provides a user-friendly name for the current value of the slider. - */ - 'aria-valuetext': chainPropTypes(PropTypes.string, (props) => { - const range = Array.isArray(props.value || props.defaultValue); - - if (range && props['aria-valuetext'] != null) { - return new Error( - 'MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.', - ); - } - - return null; - }), - /** - * @ignore - */ - 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 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, - Mark: PropTypes.elementType, - MarkLabel: PropTypes.elementType, - Rail: PropTypes.elementType, - Root: PropTypes.elementType, - Thumb: PropTypes.elementType, - Track: PropTypes.elementType, - ValueLabel: 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.oneOfType([PropTypes.func, PropTypes.object]), - mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - valueLabel: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - children: PropTypes.element, - className: PropTypes.string, - open: PropTypes.bool, - style: PropTypes.object, - value: PropTypes.number, - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - }), - ]), - }), - /** - * The default value. Use when the component is not controlled. - */ - defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * If `true`, the component is disabled. - * @default false - */ - disabled: PropTypes.bool, - /** - * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb. - * @default false - */ - disableSwap: PropTypes.bool, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. - * This is important for screen reader users. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaLabel: PropTypes.func, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. - * This is important for screen reader users. - * @param {number} value The thumb label's value to format. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaValueText: PropTypes.func, - /** - * Marks indicate predetermined values to which the user can move the slider. - * If `true` the marks are spaced according the value of the `step` prop. - * If an array, it should contain objects with `value` and an optional `label` keys. - * @default false - */ - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - /** - * The maximum allowed value of the slider. - * Should not be equal to min. - * @default 100 - */ - max: PropTypes.number, - /** - * The minimum allowed value of the slider. - * Should not be equal to max. - * @default 0 - */ - min: PropTypes.number, - /** - * Name attribute of the hidden `input` element. - */ - name: PropTypes.string, - /** - * Callback function that is fired when the slider's value changed. - * - * @param {Event} event The event source of the callback. - * You can pull out the new value by accessing `event.target.value` (any). - * **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - * @param {number} activeThumb Index of the currently moved thumb. - */ - onChange: PropTypes.func, - /** - * Callback function that is fired when the `mouseup` is triggered. - * - * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChangeCommitted: PropTypes.func, - /** - * The component orientation. - * @default 'horizontal' - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * A transformation function, to change the scale of the slider. - * @param {any} x - * @returns {any} - * @default function Identity(x) { - * return x; - * } - */ - scale: PropTypes.func, - /** - * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. - * @default 10 - */ - shiftStep: PropTypes.number, - /** - * The size of the slider. - * @default 'medium' - */ - size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['small', 'medium']), - PropTypes.string, - ]), - /** - * The props used for each slot inside the Slider. - * @default {} - */ - slotProps: PropTypes.shape({ - input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - valueLabel: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - children: PropTypes.element, - className: PropTypes.string, - open: PropTypes.bool, - style: PropTypes.object, - value: PropTypes.number, - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - }), - ]), - }), - /** - * The components used for each slot inside the Slider. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - input: PropTypes.elementType, - mark: PropTypes.elementType, - markLabel: PropTypes.elementType, - rail: PropTypes.elementType, - root: PropTypes.elementType, - thumb: PropTypes.elementType, - track: PropTypes.elementType, - valueLabel: PropTypes.elementType, - }), - /** - * The granularity with which the slider can step through values. (A "discrete" slider.) - * The `min` prop serves as the origin for the valid values. - * We recommend (max - min) to be evenly divisible by the step. - * - * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. - * @default 1 - */ - step: PropTypes.number, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - /** - * Tab index attribute of the hidden `input` element. - */ - tabIndex: PropTypes.number, - /** - * The track presentation: - * - * - `normal` the track will render a bar representing the slider value. - * - `inverted` the track will render a bar representing the remaining slider value. - * - `false` the track will render without a bar. - * @default 'normal' - */ - track: PropTypes.oneOf(['inverted', 'normal', false]), - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ - value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * Controls when the value label is displayed: - * - * - `auto` the value label will display when the thumb is hovered or focused. - * - `on` will display persistently. - * - `off` will never display. - * @default 'off' - */ - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - /** - * The format function the value label's value. - * - * When a function is provided, it should have the following signature: - * - * - {number} value The value label's value to format - * - {number} index The value label's index to format - * @param {any} x - * @returns {any} - * @default function Identity(x) { - * return x; - * } - */ - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), -}; - -export default Slider; From 8c1e8f3ec52c78f2d1bce66a7621493e21e1d349 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:17:31 +0100 Subject: [PATCH 05/13] update the component & generate pages --- .../src/app/material-ui/react-slider/page.tsx | 142 +++++++++++++++++ .../src/pages/material-ui/react-slider.tsx | 143 ++++++++++++++++++ packages/mui-material/src/Slider/Slider.js | 6 +- 3 files changed, 289 insertions(+), 2 deletions(-) create mode 100644 apps/pigment-next-app/src/app/material-ui/react-slider/page.tsx create mode 100644 apps/pigment-vite-app/src/pages/material-ui/react-slider.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/react-slider/page.tsx b/apps/pigment-next-app/src/app/material-ui/react-slider/page.tsx new file mode 100644 index 00000000000000..97fb8108c1cb09 --- /dev/null +++ b/apps/pigment-next-app/src/app/material-ui/react-slider/page.tsx @@ -0,0 +1,142 @@ +'use client'; +import * as React from 'react'; +import ColorSlider from '../../../../../../docs/data/material/components/slider/ColorSlider'; +import ContinuousSlider from '../../../../../../docs/data/material/components/slider/ContinuousSlider'; +import CustomMarks from '../../../../../../docs/data/material/components/slider/CustomMarks'; +import CustomizedSlider from '../../../../../../docs/data/material/components/slider/CustomizedSlider'; +import DiscreteSlider from '../../../../../../docs/data/material/components/slider/DiscreteSlider'; +import DiscreteSliderLabel from '../../../../../../docs/data/material/components/slider/DiscreteSliderLabel'; +import DiscreteSliderMarks from '../../../../../../docs/data/material/components/slider/DiscreteSliderMarks'; +import DiscreteSliderSteps from '../../../../../../docs/data/material/components/slider/DiscreteSliderSteps'; +import DiscreteSliderValues from '../../../../../../docs/data/material/components/slider/DiscreteSliderValues'; +import InputSlider from '../../../../../../docs/data/material/components/slider/InputSlider'; +import MinimumDistanceSlider from '../../../../../../docs/data/material/components/slider/MinimumDistanceSlider'; +import MusicPlayerSlider from '../../../../../../docs/data/material/components/slider/MusicPlayerSlider'; +import NonLinearSlider from '../../../../../../docs/data/material/components/slider/NonLinearSlider'; +import RangeSlider from '../../../../../../docs/data/material/components/slider/RangeSlider'; +import SliderSizes from '../../../../../../docs/data/material/components/slider/SliderSizes'; +import TrackFalseSlider from '../../../../../../docs/data/material/components/slider/TrackFalseSlider'; +import TrackInvertedSlider from '../../../../../../docs/data/material/components/slider/TrackInvertedSlider'; +import VerticalAccessibleSlider from '../../../../../../docs/data/material/components/slider/VerticalAccessibleSlider'; +import VerticalSlider from '../../../../../../docs/data/material/components/slider/VerticalSlider'; + +export default function Slider() { + return ( + +
+

Color Slider

+
+ +
+
+
+

Continuous Slider

+
+ +
+
+
+

Custom Marks

+
+ +
+
+
+

Customized Slider

+
+ +
+
+
+

Discrete Slider

+
+ +
+
+
+

Discrete Slider Label

+
+ +
+
+
+

Discrete Slider Marks

+
+ +
+
+
+

Discrete Slider Steps

+
+ +
+
+
+

Discrete Slider Values

+
+ +
+
+
+

Input Slider

+
+ +
+
+
+

Minimum Distance Slider

+
+ +
+
+
+

Music Player Slider

+
+ +
+
+
+

Non Linear Slider

+
+ +
+
+
+

Range Slider

+
+ +
+
+
+

Slider Sizes

+
+ +
+
+
+

Track False Slider

+
+ +
+
+
+

Track Inverted Slider

+
+ +
+
+
+

Vertical Accessible Slider

+
+ +
+
+
+

Vertical Slider

+
+ +
+
+ + ); +} diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-slider.tsx b/apps/pigment-vite-app/src/pages/material-ui/react-slider.tsx new file mode 100644 index 00000000000000..963612339e2faf --- /dev/null +++ b/apps/pigment-vite-app/src/pages/material-ui/react-slider.tsx @@ -0,0 +1,143 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import ColorSlider from '../../../../../docs/data/material/components/slider/ColorSlider.tsx'; +import ContinuousSlider from '../../../../../docs/data/material/components/slider/ContinuousSlider.tsx'; +import CustomMarks from '../../../../../docs/data/material/components/slider/CustomMarks.tsx'; +import CustomizedSlider from '../../../../../docs/data/material/components/slider/CustomizedSlider.tsx'; +import DiscreteSlider from '../../../../../docs/data/material/components/slider/DiscreteSlider.tsx'; +import DiscreteSliderLabel from '../../../../../docs/data/material/components/slider/DiscreteSliderLabel.tsx'; +import DiscreteSliderMarks from '../../../../../docs/data/material/components/slider/DiscreteSliderMarks.tsx'; +import DiscreteSliderSteps from '../../../../../docs/data/material/components/slider/DiscreteSliderSteps.tsx'; +import DiscreteSliderValues from '../../../../../docs/data/material/components/slider/DiscreteSliderValues.tsx'; +import InputSlider from '../../../../../docs/data/material/components/slider/InputSlider.tsx'; +import MinimumDistanceSlider from '../../../../../docs/data/material/components/slider/MinimumDistanceSlider.tsx'; +import MusicPlayerSlider from '../../../../../docs/data/material/components/slider/MusicPlayerSlider.tsx'; +import NonLinearSlider from '../../../../../docs/data/material/components/slider/NonLinearSlider.tsx'; +import RangeSlider from '../../../../../docs/data/material/components/slider/RangeSlider.tsx'; +import SliderSizes from '../../../../../docs/data/material/components/slider/SliderSizes.tsx'; +import TrackFalseSlider from '../../../../../docs/data/material/components/slider/TrackFalseSlider.tsx'; +import TrackInvertedSlider from '../../../../../docs/data/material/components/slider/TrackInvertedSlider.tsx'; +import VerticalAccessibleSlider from '../../../../../docs/data/material/components/slider/VerticalAccessibleSlider.tsx'; +import VerticalSlider from '../../../../../docs/data/material/components/slider/VerticalSlider.tsx'; + +export default function Slider() { + return ( + +

Slider

+
+

Color Slider

+
+ +
+
+
+

Continuous Slider

+
+ +
+
+
+

Custom Marks

+
+ +
+
+
+

Customized Slider

+
+ +
+
+
+

Discrete Slider

+
+ +
+
+
+

Discrete Slider Label

+
+ +
+
+
+

Discrete Slider Marks

+
+ +
+
+
+

Discrete Slider Steps

+
+ +
+
+
+

Discrete Slider Values

+
+ +
+
+
+

Input Slider

+
+ +
+
+
+

Minimum Distance Slider

+
+ +
+
+
+

Music Player Slider

+
+ +
+
+
+

Non Linear Slider

+
+ +
+
+
+

Range Slider

+
+ +
+
+
+

Slider Sizes

+
+ +
+
+
+

Track False Slider

+
+ +
+
+
+

Track Inverted Slider

+
+ +
+
+
+

Vertical Accessible Slider

+
+ +
+
+
+

Vertical Slider

+
+ +
+
+ + ); +} diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 1d5f8b9a7b16cb..11525563f6c18a 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -8,13 +8,15 @@ import composeClasses from '@mui/utils/composeClasses'; import { useSlider, valueToPercent } from '@mui/base/useSlider'; import { alpha, lighten, darken } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import useThemeProps from '../styles/useThemeProps'; -import styled, { slotShouldForwardProp } from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; +import { slotShouldForwardProp } from '../styles/styled'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; import BaseSliderValueLabel from './SliderValueLabel'; import sliderClasses, { getSliderUtilityClass } from './sliderClasses'; +const useThemeProps = createUseThemeProps('MuiSlider'); + function Identity(x) { return x; } From 09b328adcfd380e54a2f5e02f0373092934e5ca9 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:20:50 +0100 Subject: [PATCH 06/13] revert unnecessary changes --- packages/mui-material/src/utils/index.d.ts | 1 - packages/mui-material/src/utils/index.js | 1 - .../mui-material/src/utils/shouldSpreadAdditionalProps.d.ts | 5 ----- 3 files changed, 7 deletions(-) delete mode 100644 packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts diff --git a/packages/mui-material/src/utils/index.d.ts b/packages/mui-material/src/utils/index.d.ts index b4904a3ecf3604..4f675ba362d039 100644 --- a/packages/mui-material/src/utils/index.d.ts +++ b/packages/mui-material/src/utils/index.d.ts @@ -15,5 +15,4 @@ export { default as useControlled } from './useControlled'; export { default as useEventCallback } from './useEventCallback'; export { default as useForkRef } from './useForkRef'; export { default as useIsFocusVisible } from './useIsFocusVisible'; -export { default as shouldSpreadAdditionalProps } from './shouldSpreadAdditionalProps'; export { unstable_ClassNameGenerator } from '@mui/base/ClassNameGenerator'; diff --git a/packages/mui-material/src/utils/index.js b/packages/mui-material/src/utils/index.js index 76b0ee352a9ad3..415505ff745dee 100644 --- a/packages/mui-material/src/utils/index.js +++ b/packages/mui-material/src/utils/index.js @@ -18,7 +18,6 @@ export { default as useControlled } from './useControlled'; export { default as useEventCallback } from './useEventCallback'; export { default as useForkRef } from './useForkRef'; export { default as useIsFocusVisible } from './useIsFocusVisible'; -export { default as shouldSpreadAdditionalProps } from './shouldSpreadAdditionalProps'; // TODO: remove this export once ClassNameGenerator is stable // eslint-disable-next-line @typescript-eslint/naming-convention export const unstable_ClassNameGenerator = { diff --git a/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts b/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts deleted file mode 100644 index 22bb78a0a5112d..00000000000000 --- a/packages/mui-material/src/utils/shouldSpreadAdditionalProps.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare const shouldSpreadAdditionalProps: ( - Slot: React.ElementType, -) => boolean; - -export default shouldSpreadAdditionalProps; From 8f43a72e5227363f109f435edd25847760217ded Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:30:26 +0100 Subject: [PATCH 07/13] more changes --- packages/mui-material/src/Slider/Slider.js | 2 +- packages/mui-material/src/styles/slotShouldForwardProp.d.ts | 1 + packages/mui-material/src/styles/slotShouldForwardProp.js | 1 + packages/mui-material/src/styles/styled.d.ts | 3 +-- packages/mui-material/src/styles/styled.js | 3 +-- 5 files changed, 5 insertions(+), 5 deletions(-) create mode 100644 packages/mui-material/src/styles/slotShouldForwardProp.d.ts create mode 100644 packages/mui-material/src/styles/slotShouldForwardProp.js diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 11525563f6c18a..5b5ed8c9e97f61 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -9,7 +9,7 @@ import { useSlider, valueToPercent } from '@mui/base/useSlider'; import { alpha, lighten, darken } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; import { styled, createUseThemeProps } from '../zero-styled'; -import { slotShouldForwardProp } from '../styles/styled'; +import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; import BaseSliderValueLabel from './SliderValueLabel'; diff --git a/packages/mui-material/src/styles/slotShouldForwardProp.d.ts b/packages/mui-material/src/styles/slotShouldForwardProp.d.ts new file mode 100644 index 00000000000000..d1befe2d9b64fa --- /dev/null +++ b/packages/mui-material/src/styles/slotShouldForwardProp.d.ts @@ -0,0 +1 @@ +export function slotShouldForwardProp(prop: string): boolean; diff --git a/packages/mui-material/src/styles/slotShouldForwardProp.js b/packages/mui-material/src/styles/slotShouldForwardProp.js new file mode 100644 index 00000000000000..0694ee1f47df28 --- /dev/null +++ b/packages/mui-material/src/styles/slotShouldForwardProp.js @@ -0,0 +1 @@ +export { shouldForwardProp as default } from '@mui/system/createStyled'; diff --git a/packages/mui-material/src/styles/styled.d.ts b/packages/mui-material/src/styles/styled.d.ts index a5977f53ac9977..ed8863e307570f 100644 --- a/packages/mui-material/src/styles/styled.d.ts +++ b/packages/mui-material/src/styles/styled.d.ts @@ -1,10 +1,9 @@ import { CreateMUIStyled } from '@mui/system'; import { Theme } from './createTheme'; +export { default as slotShouldForwardProp } from './slotShouldForwardProp'; export function rootShouldForwardProp(prop: string): boolean; -export function slotShouldForwardProp(prop: string): boolean; - /** * Custom styled utility that has a default MUI theme. * @param tag HTML tag or component that should serve as base. diff --git a/packages/mui-material/src/styles/styled.js b/packages/mui-material/src/styles/styled.js index 4e68a6ab48eaef..84d469c63f24e9 100644 --- a/packages/mui-material/src/styles/styled.js +++ b/packages/mui-material/src/styles/styled.js @@ -2,11 +2,10 @@ import createStyled, { shouldForwardProp } from '@mui/system/createStyled'; import defaultTheme from './defaultTheme'; import THEME_ID from './identifier'; +export { default as slotShouldForwardProp } from './slotShouldForwardProp'; export const rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== 'classes'; -export const slotShouldForwardProp = shouldForwardProp; - const styled = createStyled({ themeId: THEME_ID, defaultTheme, From 103f6049e02a4317af48486a979ca427dd016b9d Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:34:18 +0100 Subject: [PATCH 08/13] avoid imports from @mui/system/createStyled --- .../mui-material/src/styles/slotShouldForwardProp.d.ts | 2 +- packages/mui-material/src/styles/slotShouldForwardProp.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/slotShouldForwardProp.d.ts b/packages/mui-material/src/styles/slotShouldForwardProp.d.ts index d1befe2d9b64fa..6423e131a13b5f 100644 --- a/packages/mui-material/src/styles/slotShouldForwardProp.d.ts +++ b/packages/mui-material/src/styles/slotShouldForwardProp.d.ts @@ -1 +1 @@ -export function slotShouldForwardProp(prop: string): boolean; +export default function slotShouldForwardProp(prop: string): boolean; diff --git a/packages/mui-material/src/styles/slotShouldForwardProp.js b/packages/mui-material/src/styles/slotShouldForwardProp.js index 0694ee1f47df28..7436b180df7e4d 100644 --- a/packages/mui-material/src/styles/slotShouldForwardProp.js +++ b/packages/mui-material/src/styles/slotShouldForwardProp.js @@ -1 +1,6 @@ -export { shouldForwardProp as default } from '@mui/system/createStyled'; +// copied from @mui/system/createStyled +function slotShouldForwardProp(prop) { + return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as'; +} + +export default slotShouldForwardProp; From 73c8bb2a30130a87aba6c7ae1d2bb4fc343de8d8 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:37:32 +0100 Subject: [PATCH 09/13] extract rootShouldForwardProp in a separate file too --- packages/mui-material/src/styles/rootShouldForwardProp.d.ts | 1 + packages/mui-material/src/styles/rootShouldForwardProp.js | 5 +++++ packages/mui-material/src/styles/styled.d.ts | 3 +-- packages/mui-material/src/styles/styled.js | 5 ++--- 4 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 packages/mui-material/src/styles/rootShouldForwardProp.d.ts create mode 100644 packages/mui-material/src/styles/rootShouldForwardProp.js diff --git a/packages/mui-material/src/styles/rootShouldForwardProp.d.ts b/packages/mui-material/src/styles/rootShouldForwardProp.d.ts new file mode 100644 index 00000000000000..063fd1978af133 --- /dev/null +++ b/packages/mui-material/src/styles/rootShouldForwardProp.d.ts @@ -0,0 +1 @@ +export default function rootShouldForwardProp(prop: string): boolean; diff --git a/packages/mui-material/src/styles/rootShouldForwardProp.js b/packages/mui-material/src/styles/rootShouldForwardProp.js new file mode 100644 index 00000000000000..001f1f8ba81ab3 --- /dev/null +++ b/packages/mui-material/src/styles/rootShouldForwardProp.js @@ -0,0 +1,5 @@ +import slotShouldForwardProp from './slotShouldForwardProp'; + +const rootShouldForwardProp = (prop) => slotShouldForwardProp(prop) && prop !== 'classes'; + +export default rootShouldForwardProp; \ No newline at end of file diff --git a/packages/mui-material/src/styles/styled.d.ts b/packages/mui-material/src/styles/styled.d.ts index ed8863e307570f..54b1a0488dfd53 100644 --- a/packages/mui-material/src/styles/styled.d.ts +++ b/packages/mui-material/src/styles/styled.d.ts @@ -1,8 +1,7 @@ import { CreateMUIStyled } from '@mui/system'; import { Theme } from './createTheme'; export { default as slotShouldForwardProp } from './slotShouldForwardProp'; - -export function rootShouldForwardProp(prop: string): boolean; +export { default as rootShouldForwardProp } from './rootShouldForwardProp'; /** * Custom styled utility that has a default MUI theme. diff --git a/packages/mui-material/src/styles/styled.js b/packages/mui-material/src/styles/styled.js index 84d469c63f24e9..461699bd506fc5 100644 --- a/packages/mui-material/src/styles/styled.js +++ b/packages/mui-material/src/styles/styled.js @@ -1,10 +1,9 @@ 'use client'; -import createStyled, { shouldForwardProp } from '@mui/system/createStyled'; +import createStyled from '@mui/system/createStyled'; import defaultTheme from './defaultTheme'; import THEME_ID from './identifier'; export { default as slotShouldForwardProp } from './slotShouldForwardProp'; - -export const rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== 'classes'; +export { default as rootShouldForwardProp } from './rootShouldForwardProp'; const styled = createStyled({ themeId: THEME_ID, From 90048b17c2e8dd158d4db702626e681fecc70a6d Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:41:31 +0100 Subject: [PATCH 10/13] prettier --- packages/mui-material/src/styles/rootShouldForwardProp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/rootShouldForwardProp.js b/packages/mui-material/src/styles/rootShouldForwardProp.js index 001f1f8ba81ab3..513dd934526d45 100644 --- a/packages/mui-material/src/styles/rootShouldForwardProp.js +++ b/packages/mui-material/src/styles/rootShouldForwardProp.js @@ -2,4 +2,4 @@ import slotShouldForwardProp from './slotShouldForwardProp'; const rootShouldForwardProp = (prop) => slotShouldForwardProp(prop) && prop !== 'classes'; -export default rootShouldForwardProp; \ No newline at end of file +export default rootShouldForwardProp; From ac772745b910511471b560ea663de187ce38b2ef Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 8 Mar 2024 12:46:44 +0100 Subject: [PATCH 11/13] add missing imports --- packages/mui-material/src/styles/styled.d.ts | 1 + packages/mui-material/src/styles/styled.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/mui-material/src/styles/styled.d.ts b/packages/mui-material/src/styles/styled.d.ts index 54b1a0488dfd53..3c7fa4938bf0d4 100644 --- a/packages/mui-material/src/styles/styled.d.ts +++ b/packages/mui-material/src/styles/styled.d.ts @@ -1,5 +1,6 @@ import { CreateMUIStyled } from '@mui/system'; import { Theme } from './createTheme'; + export { default as slotShouldForwardProp } from './slotShouldForwardProp'; export { default as rootShouldForwardProp } from './rootShouldForwardProp'; diff --git a/packages/mui-material/src/styles/styled.js b/packages/mui-material/src/styles/styled.js index 461699bd506fc5..3d690d470ed672 100644 --- a/packages/mui-material/src/styles/styled.js +++ b/packages/mui-material/src/styles/styled.js @@ -2,6 +2,8 @@ import createStyled from '@mui/system/createStyled'; import defaultTheme from './defaultTheme'; import THEME_ID from './identifier'; +import rootShouldForwardProp from './rootShouldForwardProp'; + export { default as slotShouldForwardProp } from './slotShouldForwardProp'; export { default as rootShouldForwardProp } from './rootShouldForwardProp'; From b3859781a0c3189a745c36932a25180da7e82348 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 13 Mar 2024 10:36:21 +0100 Subject: [PATCH 12/13] convert to ts files --- packages/mui-material/src/styles/rootShouldForwardProp.d.ts | 1 - .../{rootShouldForwardProp.js => rootShouldForwardProp.ts} | 2 +- packages/mui-material/src/styles/slotShouldForwardProp.d.ts | 1 - .../{slotShouldForwardProp.js => slotShouldForwardProp.ts} | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) delete mode 100644 packages/mui-material/src/styles/rootShouldForwardProp.d.ts rename packages/mui-material/src/styles/{rootShouldForwardProp.js => rootShouldForwardProp.ts} (50%) delete mode 100644 packages/mui-material/src/styles/slotShouldForwardProp.d.ts rename packages/mui-material/src/styles/{slotShouldForwardProp.js => slotShouldForwardProp.ts} (78%) diff --git a/packages/mui-material/src/styles/rootShouldForwardProp.d.ts b/packages/mui-material/src/styles/rootShouldForwardProp.d.ts deleted file mode 100644 index 063fd1978af133..00000000000000 --- a/packages/mui-material/src/styles/rootShouldForwardProp.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function rootShouldForwardProp(prop: string): boolean; diff --git a/packages/mui-material/src/styles/rootShouldForwardProp.js b/packages/mui-material/src/styles/rootShouldForwardProp.ts similarity index 50% rename from packages/mui-material/src/styles/rootShouldForwardProp.js rename to packages/mui-material/src/styles/rootShouldForwardProp.ts index 513dd934526d45..92a781135a85a2 100644 --- a/packages/mui-material/src/styles/rootShouldForwardProp.js +++ b/packages/mui-material/src/styles/rootShouldForwardProp.ts @@ -1,5 +1,5 @@ import slotShouldForwardProp from './slotShouldForwardProp'; -const rootShouldForwardProp = (prop) => slotShouldForwardProp(prop) && prop !== 'classes'; +const rootShouldForwardProp = (prop: string) => slotShouldForwardProp(prop) && prop !== 'classes'; export default rootShouldForwardProp; diff --git a/packages/mui-material/src/styles/slotShouldForwardProp.d.ts b/packages/mui-material/src/styles/slotShouldForwardProp.d.ts deleted file mode 100644 index 6423e131a13b5f..00000000000000 --- a/packages/mui-material/src/styles/slotShouldForwardProp.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function slotShouldForwardProp(prop: string): boolean; diff --git a/packages/mui-material/src/styles/slotShouldForwardProp.js b/packages/mui-material/src/styles/slotShouldForwardProp.ts similarity index 78% rename from packages/mui-material/src/styles/slotShouldForwardProp.js rename to packages/mui-material/src/styles/slotShouldForwardProp.ts index 7436b180df7e4d..8b674ade2bd0cd 100644 --- a/packages/mui-material/src/styles/slotShouldForwardProp.js +++ b/packages/mui-material/src/styles/slotShouldForwardProp.ts @@ -1,5 +1,5 @@ // copied from @mui/system/createStyled -function slotShouldForwardProp(prop) { +function slotShouldForwardProp(prop: string) { return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as'; } From 739f7779671d684afcc0a0900bd75d8618c56c8b Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 13 Mar 2024 14:09:47 +0100 Subject: [PATCH 13/13] regenerate pages --- .../src/app/material-ui/react-slider/page.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/{pigment-next-app => pigment-css-next-app}/src/app/material-ui/react-slider/page.tsx (100%) diff --git a/apps/pigment-next-app/src/app/material-ui/react-slider/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-slider/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/react-slider/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/react-slider/page.tsx