npm - @mantine/core - Versions diffs - 9.0.0-alpha.6 → 9.0.0 - Mend

@mantine/core 9.0.0-alpha.6 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/cjs/components/Radio/Radio.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.cjs","names":["createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","RadioIcon","useStyles","RadioGroupContext","extractStyleProps","InlineInput","Box","classes","RadioGroup","RadioCard","RadioIndicator"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { RadioCard } from './RadioCard/RadioCard';\nimport { RadioGroup, RadioGroupContext } from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { RadioIndicator } from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' \| 'outline';\nexport type RadioStylesNames = InlineInputStylesNames \| 'inner' \| 'radio' \| 'icon';\nexport type RadioCssVariables = {\n root:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Content of the `label` associated with the radio /\n label?: React.ReactNode;\n\n /* Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Position of the label relative to the input @default 'right' /\n labelPosition?: 'left' \| 'right';\n\n /* Description displayed below the label /\n description?: React.ReactNode;\n\n /* Error displayed below the label /\n error?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: ~~ctx?.~~name ?? ~~rest.~~name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Radio.cjs","names":["createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","RadioIcon","useStyles","RadioGroupContext","extractStyleProps","InlineInput","Box","classes","RadioGroup","RadioCard","RadioIndicator"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { RadioCard } from './RadioCard/RadioCard';\nimport { RadioGroup, RadioGroupContext } from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { RadioIndicator } from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' \| 'outline';\nexport type RadioStylesNames = InlineInputStylesNames \| 'inner' \| 'radio' \| 'icon';\nexport type RadioCssVariables = {\n root:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Content of the `label` associated with the radio /\n label?: React.ReactNode;\n\n /* Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Position of the label relative to the input @default 'right' /\n labelPosition?: 'left' \| 'right';\n\n /* Description displayed below the label /\n description?: React.ReactNode;\n\n /* Error displayed below the label /\n error?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: rest.name ?? ctx?.name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n"],"mappings":"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"}

package/cjs/components/SegmentedControl/SegmentedControl.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n --sc-padding-xs: 2px 6px;\n --sc-padding-sm: 3px 10px;\n --sc-padding-md: 4px 14px;\n --sc-padding-lg: 7px 16px;\n --sc-padding-xl: 10px 20px;\n\n --sc-transition-duration: 200ms;\n --sc-padding: var(--sc-padding-sm);\n --sc-transition-timing-function: ease;\n --sc-font-size: var(--mantine-font-size-sm);\n\n position: relative;\n display: inline-flex;\n flex-direction: row;\n width: auto;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n overflow: hidden;\n padding: 4px;\n\n &:where([data-full-width]) {\n display: flex;\n }\n\n &:where([data-orientation='vertical']) {\n display: flex;\n flex-direction: column;\n width: max-content;\n\n &:where([data-full-width]) {\n width: auto;\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n}\n\n.indicator {\n position: absolute;\n display: block;\n z-index: 1;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n}\n\n.label {\n -webkit-tap-highlight-color: transparent;\n font-weight: var(--mantine-font-weight-medium);\n display: block;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n font-size: var(--sc-font-size);\n padding: var(--sc-padding);\n transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n cursor: pointer;\n\n /* outline is controlled by .input */\n outline: var(--segmented-control-outline, none);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-read-only]) {\n cursor: default;\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n }\n\n &:where([data-active]) {\n @mixin where-light {\n color: var(--sc-label-color, var(--mantine-color-black));\n }\n\n @mixin where-dark {\n color: var(--sc-label-color, var(--mantine-color-white));\n }\n\n &::before {\n .root:where([data-initialized]) & {\n display: none;\n }\n content: '';\n inset: 0;\n z-index: 0;\n position: absolute;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n }\n }\n\n &:where(:not([data-disabled], [data-active], [data-read-only])) {\n @mixin hover {\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n }\n }\n }\n\n fieldset:disabled & {\n @mixin hover {\n color: var(--mantine-color-disabled-color) !important;\n }\n }\n}\n\n.input {\n height: 0;\n width: 0;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n\n &[data-focus-ring='auto'] {\n &:focus:focus-visible {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n\n &[data-focus-ring='always'] {\n &:focus {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n}\n\n.control {\n position: relative;\n flex: 1;\n z-index: 2;\n transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n .root[data-with-items-borders] :where(&)::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n background-color: var(--separator-color);\n width: 1px;\n transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n }\n\n &[data-orientation='vertical'] {\n &::before {\n top: 0;\n inset-inline: 0;\n bottom: auto;\n height: 1px;\n width: auto;\n }\n }\n\n @mixin where-light {\n --separator-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --separator-color: var(--mantine-color-dark-4);\n }\n\n &:first-of-type {\n &::before {\n --separator-color: transparent;\n }\n }\n\n &[data-active] {\n [data-mantine-color-scheme] & {\n &,\n & + .control {\n &::before {\n --separator-color: transparent;\n }\n }\n }\n }\n}\n\n.innerLabel {\n position: relative;\n z-index: 2;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n --sc-padding-xs: 2px 6px;\n --sc-padding-sm: 3px 10px;\n --sc-padding-md: 4px 14px;\n --sc-padding-lg: 7px 16px;\n --sc-padding-xl: 10px 20px;\n\n --sc-transition-duration: 200ms;\n --sc-padding: var(--sc-padding-sm);\n --sc-transition-timing-function: ease;\n --sc-font-size: var(--mantine-font-size-sm);\n\n position: relative;\n display: inline-flex;\n flex-direction: row;\n width: auto;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n overflow: hidden;\n padding: 4px;\n\n &:where([data-full-width]) {\n display: flex;\n }\n\n &:where([data-orientation='vertical']) {\n display: flex;\n flex-direction: column;\n width: max-content;\n\n &:where([data-full-width]) {\n width: auto;\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n}\n\n.indicator {\n position: absolute;\n display: block;\n z-index: 1;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n}\n\n.label {\n -webkit-tap-highlight-color: transparent;\n font-weight: var(--mantine-font-weight-medium);\n display: block;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n font-size: var(--sc-font-size);\n padding: var(--sc-padding);\n transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n cursor: pointer;\n\n /* outline is controlled by .input */\n outline: var(--segmented-control-outline, none);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-read-only]) {\n cursor: default;\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n }\n\n &:where([data-active]) {\n @mixin where-light {\n color: var(--sc-label-color, var(--mantine-color-black));\n }\n\n @mixin where-dark {\n color: var(--sc-label-color, var(--mantine-color-white));\n }\n\n &::before {\n .root:where([data-initialized]) & {\n display: none;\n }\n content: '';\n inset: 0;\n z-index: 0;\n position: absolute;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n }\n }\n\n &:where(:not([data-disabled], [data-active], [data-read-only])) {\n @mixin hover {\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n }\n }\n }\n\n fieldset:disabled & {\n @mixin hover {\n color: var(--mantine-color-disabled-color) !important;\n }\n }\n}\n\n.input {\n height: 0;\n width: 0;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n\n &[data-focus-ring='auto'] {\n &:focus:focus-visible {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n\n &[data-focus-ring='always'] {\n &:focus {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n}\n\n.control {\n position: relative;\n flex: 1;\n z-index: 2;\n transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n .root[data-with-items-borders] :where(&)::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n background-color: var(--separator-color);\n width: 1px;\n transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n }\n\n &[data-orientation='vertical'] {\n &::before {\n top: 0;\n inset-inline: 0;\n bottom: auto;\n height: 1px;\n width: auto;\n }\n }\n\n @mixin where-light {\n --separator-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --separator-color: var(--mantine-color-dark-4);\n }\n\n &:first-of-type {\n &::before {\n --separator-color: transparent;\n }\n }\n\n &[data-active] {\n [data-mantine-color-scheme] & {\n &,\n & + .control {\n &::before {\n --separator-color: transparent;\n }\n }\n }\n }\n}\n\n.innerLabel {\n position: relative;\n z-index: 2;\n}\n"],"mappings":""}

package/cjs/components/Select/Select.cjs CHANGED Viewed

@@ -32,7 +32,7 @@ const Select = require_factory.genericFactory((_props) => {
 		finalValue: null,
 		onChange
 	});
-	const selectedOption = typeof _value === "string" ? _value in optionsLockup ? optionsLockup[_value] : retainedSelectedOptions.current[_value] : void 0;
+	const selectedOption = _value != null ? `${_value}` in optionsLockup ? optionsLockup[`${_value}`] : retainedSelectedOptions.current[`${_value}`] : void 0;
 	const previousSelectedOption = (0, _mantine_hooks.usePrevious)(selectedOption);
 	const [search, setSearch, searchControlled] = (0, _mantine_hooks.useUncontrolled)({
 		value: searchValue,
@@ -67,10 +67,10 @@ const Select = require_factory.genericFactory((_props) => {
 	}, [selectFirstOptionOnChange, search]);
 	(0, react.useEffect)(() => {
 		if (value === null) handleSearchChange("");
-		if (typeof value === "string" && selectedOption && (previousSelectedOption?.value !== selectedOption.value || previousSelectedOption?.label !== selectedOption.label)) handleSearchChange(selectedOption.label);
+		if (value != null && selectedOption && (previousSelectedOption?.value !== selectedOption.value || previousSelectedOption?.label !== selectedOption.label)) handleSearchChange(selectedOption.label);
 	}, [value, selectedOption]);
 	(0, react.useEffect)(() => {
-		if (!controlled && !searchControlled) handleSearchChange(typeof _value === "string" ? _value in optionsLockup ? optionsLockup[_value]?.label : retainedSelectedOptions.current[_value]?.label || "" : "");
+		if (!controlled && !searchControlled) handleSearchChange(_value != null ? `${_value}` in optionsLockup ? optionsLockup[`${_value}`]?.label : retainedSelectedOptions.current[`${_value}`]?.label || "" : "");
 	}, [optionsLockup, _value]);
 	(0, react.useEffect)(() => {
 		if (_value) {
@@ -98,16 +98,17 @@ const Select = require_factory.genericFactory((_props) => {
 		keepMounted: autoSelectOnBlur,
 		onOptionSubmit: (val) => {
 			onOptionSubmit?.(val);
-			const optionLockup = allowDeselect ? optionsLockup[val].value === _value ? null : optionsLockup[val] : optionsLockup[val];
+			const optionLockup = allowDeselect ? `${optionsLockup[val].value}` === `${_value}` ? null : optionsLockup[val] : optionsLockup[val];
 			const nextValue = optionLockup ? optionLockup.value : null;
 			nextValue !== _value && setValue(nextValue, optionLockup);
-			!controlled && handleSearchChange(typeof nextValue === "string" ? optionLockup?.label || "" : "");
+			!controlled && handleSearchChange(nextValue != null ? optionLockup?.label || "" : "");
 			combobox.closeDropdown();
 		},
 		...comboboxProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Target, {
 			targetType: searchable ? "input" : "button",
 			autoComplete,
+			withExpandedAttribute: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
 				id: _id,
 				__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
@@ -139,7 +140,7 @@ const Select = require_factory.genericFactory((_props) => {
 				onBlur: (event) => {
 					if (autoSelectOnBlur) combobox.clickSelectedOption();
 					searchable && combobox.closeDropdown();
-					const optionLockup = typeof _value === "string" && (_value in optionsLockup ? optionsLockup[_value] : retainedSelectedOptions.current[_value]);
+					const optionLockup = _value != null && (`${_value}` in optionsLockup ? optionsLockup[`${_value}`] : retainedSelectedOptions.current[`${_value}`]);
 					handleSearchChange(optionLockup ? optionLockup.label || "" : "");
 					onBlur?.(event);
 				},

package/cjs/components/Select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames \| ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' \| 'size' \| 'value' \| 'defaultValue'> {\n /** Controlled component value /\n value?: Value \| null;\n\n /* Uncontrolled component default value /\n defaultValue?: Value \| null;\n\n /* Called when value changes /\n onChange?: (value: Value \| null, option: ComboboxItem<Value>) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Determines whether the select should be searchable @default false /\n searchable?: boolean;\n\n /* Displays check icon near the selected option label @default true /\n withCheckIcon?: boolean;\n\n /* Aligns unchecked labels with the checked one @default false /\n withAlignedLabels?: boolean;\n\n /* Position of the check icon relative to the option label @default 'left' /\n checkIconPosition?: 'left' \| 'right';\n\n /* Message displayed when no options match the search query or when there is no data /\n nothingFoundMessage?: React.ReactNode;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Allows deselecting the selected option by clicking it @default true /\n allowDeselect?: boolean;\n\n /* Displays clear button in the right section when component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* Controls color of the default chevron, by default depends on the color scheme /\n chevronColor?: MantineColor;\n\n /* Automatically selects the highlighted option when input loses focus @default false /\n autoSelectOnBlur?: boolean;\n\n /* Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps('Select', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n typeof _value === 'string'\n ? _value in optionsLockup\n ? optionsLockup[_value]\n : retainedSelectedOptions.current[_value]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n typeof value === 'string' &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value \|\|\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n typeof _value === 'string'\n ? _value in optionsLockup\n ? optionsLockup[_value]?.label\n : retainedSelectedOptions.current[_value]?.label \|\| ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? optionsLockup[val].value === _value\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled &&\n handleSearchChange(typeof nextValue === 'string' ? optionLockup?.label \|\| '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target targetType={searchable ? 'input' : 'button'} autoComplete={autoComplete}>\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly \|\| !searchable}\n value={search}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n typeof _value === 'string' &&\n (_value in optionsLockup\n ? optionsLockup[_value]\n : retainedSelectedOptions.current[_value]);\n handleSearchChange(optionLockup ? optionLockup.label \|\| '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames \| ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' \| 'size' \| 'value' \| 'defaultValue'> {\n /** Controlled component value /\n value?: Value \| null;\n\n /* Uncontrolled component default value /\n defaultValue?: Value \| null;\n\n /* Called when value changes /\n onChange?: (value: Value \| null, option: ComboboxItem<Value>) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Determines whether the select should be searchable @default false /\n searchable?: boolean;\n\n /* Displays check icon near the selected option label @default true /\n withCheckIcon?: boolean;\n\n /* Aligns unchecked labels with the checked one @default false /\n withAlignedLabels?: boolean;\n\n /* Position of the check icon relative to the option label @default 'left' /\n checkIconPosition?: 'left' \| 'right';\n\n /* Message displayed when no options match the search query or when there is no data /\n nothingFoundMessage?: React.ReactNode;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Allows deselecting the selected option by clicking it @default true /\n allowDeselect?: boolean;\n\n /* Displays clear button in the right section when component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* Controls color of the default chevron, by default depends on the color scheme /\n chevronColor?: MantineColor;\n\n /* Automatically selects the highlighted option when input loses focus @default false /\n autoSelectOnBlur?: boolean;\n\n /* Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps('Select', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value \|\|\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label \|\| ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label \|\| '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly \|\| !searchable}\n value={search}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label \|\| '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n"],"mappings":"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"}

package/cjs/components/Stepper/Stepper.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.cjs","names":["createVarsResolver","getThemeColor","getAutoContrastValue","getContrastColor","getSize","rem","getSpacing","getRadius","getFontSize","factory","useProps","useStyles","Children","StepperCompleted","Activity","StepperProvider","Box","classes","StepperStep"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n \| 'root'\n \| 'separator'\n \| 'steps'\n \| 'content'\n \| 'step'\n \| 'stepLoader'\n \| 'verticalSeparator'\n \| 'stepWrapper'\n \| 'stepIcon'\n \| 'stepCompletedIcon'\n \| 'stepBody'\n \| 'stepLabel'\n \| 'stepDescription';\n\nexport type StepperCssVariables = {\n root:\n \| '--stepper-color'\n \| '--stepper-icon-color'\n \| '--stepper-icon-size'\n \| '--stepper-content-padding'\n \| '--stepper-radius'\n \| '--stepper-fz'\n \| '--stepper-spacing';\n};\n\nexport interface StepperProps\n extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n /** `Stepper.Step` components /\n children: React.ReactNode;\n\n /* Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. /\n onStepClick?: (stepIndex: number) => void;\n\n /* Index of the active step /\n active: number;\n\n /* Step icon @default step index + 1 /\n icon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is completed @default CheckIcon /\n completedIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is in progress @default step index + 1 /\n progressIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the step icon, by default icon size is inferred from `size` prop /\n iconSize?: number \| string;\n\n /* Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' /\n contentPadding?: MantineSpacing;\n\n /* Stepper orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Icon position relative to the step body @default 'left' /\n iconPosition?: 'right' \| 'left';\n\n /* Controls size of various Stepper elements /\n size?: MantineSize;\n\n /* Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" /\n radius?: MantineRadius;\n\n /* When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true /\n allowNextStepsSelect?: boolean;\n\n /* Determines whether steps should wrap to the next line if no space is available @default true /\n wrap?: boolean;\n\n /* When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color /\n autoContrast?: boolean;\n\n /* If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n props: StepperProps;\n ref: HTMLDivElement;\n stylesNames: StepperStylesNames;\n vars: StepperCssVariables;\n staticComponents: {\n Step: typeof StepperStep;\n Completed: typeof StepperCompleted;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n iconPosition: 'left',\n allowNextStepsSelect: true,\n wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n root: {\n '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--stepper-icon-size':\n iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n '--stepper-content-padding': getSpacing(contentPadding),\n '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n '--stepper-fz': getFontSize(size),\n '--stepper-spacing': getSpacing(size),\n },\n })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n const props = useProps('Stepper', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n onStepClick,\n active,\n icon,\n completedIcon,\n progressIcon,\n color,\n iconSize,\n contentPadding,\n orientation,\n iconPosition,\n size,\n radius,\n allowNextStepsSelect,\n wrap,\n autoContrast,\n keepMounted,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<StepperFactory>({\n name: 'Stepper',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const convertedChildren = Children.toArray(children) as React.ReactElement[];\n const _children = convertedChildren.filter(\n (child) => child.type !== StepperCompleted\n ) as React.ReactElement<StepperStepProps>[];\n const completedStep = convertedChildren.find(\n (item) => item.type === StepperCompleted\n ) as React.ReactElement<StepperCompletedProps>;\n\n const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n (acc, item: React.ReactElement<StepperStepProps>, index) => {\n const state =\n active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n const shouldAllowSelect = () => {\n if (typeof onStepClick !== 'function') {\n return false;\n }\n\n if (typeof item.props.allowStepSelect === 'boolean') {\n return item.props.allowStepSelect;\n }\n\n return state === 'stepCompleted' \|\| allowNextStepsSelect;\n };\n\n const isStepSelectionEnabled = shouldAllowSelect();\n\n acc.push(\n cloneElement(item, {\n icon: item.props.icon \|\| icon \|\| index + 1,\n key: index,\n step: index,\n state,\n onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n allowStepClick: isStepSelectionEnabled,\n completedIcon: item.props.completedIcon \|\| completedIcon,\n progressIcon: item.props.progressIcon \|\| progressIcon,\n color: item.props.color \|\| color,\n iconSize,\n iconPosition: item.props.iconPosition \|\| iconPosition,\n orientation,\n })\n );\n\n if (orientation === 'horizontal' && index !== _children.length - 1) {\n acc.push(\n <div\n {...getStyles('separator')}\n data-active={index < active \|\| undefined}\n data-orientation={orientation}\n key={`separator-${index}`}\n />\n );\n }\n\n return acc;\n },\n []\n );\n\n const stepContent = _children[active]?.props?.children;\n const completedContent = completedStep?.props?.children;\n const content = active > _children.length - 1 ? completedContent : stepContent;\n\n const contentSection = keepMounted ? (\n <>\n {_children.map((child, index) => (\n <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{child.props.children}</div>\n </Activity>\n ))}\n {completedStep && (\n <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{completedStep.props.children}</div>\n </Activity>\n )}\n </>\n ) : (\n content && <div {...getStyles('content')}>{content}</div>\n );\n\n return (\n <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n <Box {...getStyles('root')} size={size} {...others}>\n <Box\n {...getStyles('steps')}\n mod={{\n orientation,\n 'icon-position': iconPosition,\n wrap: wrap && orientation !== 'vertical',\n }}\n >\n {items}\n </Box>\n {contentSection}\n </Box>\n </StepperProvider>\n );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Stepper.cjs","names":["createVarsResolver","getThemeColor","getAutoContrastValue","getContrastColor","getSize","rem","getSpacing","getRadius","getFontSize","factory","useProps","useStyles","Children","StepperCompleted","Activity","StepperProvider","Box","classes","StepperStep"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n \| 'root'\n \| 'separator'\n \| 'steps'\n \| 'content'\n \| 'step'\n \| 'stepLoader'\n \| 'verticalSeparator'\n \| 'stepWrapper'\n \| 'stepIcon'\n \| 'stepCompletedIcon'\n \| 'stepIconContent'\n \| 'stepBody'\n \| 'stepLabel'\n \| 'stepDescription';\n\nexport type StepperCssVariables = {\n root:\n \| '--stepper-color'\n \| '--stepper-icon-color'\n \| '--stepper-icon-size'\n \| '--stepper-content-padding'\n \| '--stepper-radius'\n \| '--stepper-fz'\n \| '--stepper-spacing';\n};\n\nexport interface StepperProps\n extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n /** `Stepper.Step` components /\n children: React.ReactNode;\n\n /* Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. /\n onStepClick?: (stepIndex: number) => void;\n\n /* Index of the active step /\n active: number;\n\n /* Step icon @default step index + 1 /\n icon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is completed @default CheckIcon /\n completedIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is in progress @default step index + 1 /\n progressIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the step icon, by default icon size is inferred from `size` prop /\n iconSize?: number \| string;\n\n /* Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' /\n contentPadding?: MantineSpacing;\n\n /* Stepper orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Icon position relative to the step body @default 'left' /\n iconPosition?: 'right' \| 'left';\n\n /* Controls size of various Stepper elements /\n size?: MantineSize;\n\n /* Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" /\n radius?: MantineRadius;\n\n /* When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true /\n allowNextStepsSelect?: boolean;\n\n /* Determines whether steps should wrap to the next line if no space is available @default true /\n wrap?: boolean;\n\n /* When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color /\n autoContrast?: boolean;\n\n /* If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n props: StepperProps;\n ref: HTMLDivElement;\n stylesNames: StepperStylesNames;\n vars: StepperCssVariables;\n staticComponents: {\n Step: typeof StepperStep;\n Completed: typeof StepperCompleted;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n iconPosition: 'left',\n allowNextStepsSelect: true,\n wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n root: {\n '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--stepper-icon-size':\n iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n '--stepper-content-padding': getSpacing(contentPadding),\n '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n '--stepper-fz': getFontSize(size),\n '--stepper-spacing': getSpacing(size),\n },\n })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n const props = useProps('Stepper', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n onStepClick,\n active,\n icon,\n completedIcon,\n progressIcon,\n color,\n iconSize,\n contentPadding,\n orientation,\n iconPosition,\n size,\n radius,\n allowNextStepsSelect,\n wrap,\n autoContrast,\n keepMounted,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<StepperFactory>({\n name: 'Stepper',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const convertedChildren = Children.toArray(children) as React.ReactElement[];\n const _children = convertedChildren.filter(\n (child) => child.type !== StepperCompleted\n ) as React.ReactElement<StepperStepProps>[];\n const completedStep = convertedChildren.find(\n (item) => item.type === StepperCompleted\n ) as React.ReactElement<StepperCompletedProps>;\n\n const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n (acc, item: React.ReactElement<StepperStepProps>, index) => {\n const state =\n active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n const shouldAllowSelect = () => {\n if (typeof onStepClick !== 'function') {\n return false;\n }\n\n if (typeof item.props.allowStepSelect === 'boolean') {\n return item.props.allowStepSelect;\n }\n\n return state === 'stepCompleted' \|\| allowNextStepsSelect;\n };\n\n const isStepSelectionEnabled = shouldAllowSelect();\n\n acc.push(\n cloneElement(item, {\n icon: item.props.icon \|\| icon \|\| index + 1,\n key: index,\n step: index,\n state,\n onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n allowStepClick: isStepSelectionEnabled,\n completedIcon: item.props.completedIcon \|\| completedIcon,\n progressIcon: item.props.progressIcon \|\| progressIcon,\n color: item.props.color \|\| color,\n iconSize,\n iconPosition: item.props.iconPosition \|\| iconPosition,\n orientation,\n })\n );\n\n if (orientation === 'horizontal' && index !== _children.length - 1) {\n acc.push(\n <div\n {...getStyles('separator')}\n data-active={index < active \|\| undefined}\n data-orientation={orientation}\n key={`separator-${index}`}\n />\n );\n }\n\n return acc;\n },\n []\n );\n\n const stepContent = _children[active]?.props?.children;\n const completedContent = completedStep?.props?.children;\n const content = active > _children.length - 1 ? completedContent : stepContent;\n\n const contentSection = keepMounted ? (\n <>\n {_children.map((child, index) => (\n <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{child.props.children}</div>\n </Activity>\n ))}\n {completedStep && (\n <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{completedStep.props.children}</div>\n </Activity>\n )}\n </>\n ) : (\n content && <div {...getStyles('content')}>{content}</div>\n );\n\n return (\n <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n <Box {...getStyles('root')} size={size} {...others}>\n <Box\n {...getStyles('steps')}\n mod={{\n orientation,\n 'icon-position': iconPosition,\n wrap: wrap && orientation !== 'vertical',\n }}\n >\n {items}\n </Box>\n {contentSection}\n </Box>\n </StepperProvider>\n );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"mappings":"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"}

package/cjs/components/Stepper/Stepper.module.cjs CHANGED Viewed

@@ -11,6 +11,7 @@ var Stepper_module_default = {
 	"verticalSeparator": "m_6496b3f3",
 	"stepWrapper": "m_818e70b",
 	"stepIcon": "m_1959ad01",
+	"stepIconContent": "m_8faaac38",
 	"stepCompletedIcon": "m_a79331dc",
 	"stepBody": "m_1956aa2a",
 	"stepLabel": "m_12051f6c",

package/cjs/components/Stepper/Stepper.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.module.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".root {\n --stepper-icon-size-xs: 34px;\n --stepper-icon-size-sm: 36px;\n --stepper-icon-size-md: 42px;\n --stepper-icon-size-lg: 48px;\n --stepper-icon-size-xl: 52px;\n\n --stepper-icon-size: var(--stepper-icon-size-md);\n --stepper-color: var(--mantine-primary-color-filled);\n --stepper-content-padding: var(--mantine-spacing-md);\n --stepper-spacing: var(--mantine-spacing-md);\n --stepper-radius: 1000px;\n --stepper-fz: var(--mantine-font-size-md);\n --stepper-outline-thickness: 2px;\n\n @mixin light {\n --stepper-outline-color: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --stepper-outline-color: var(--mantine-color-dark-5);\n }\n}\n\n.steps {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n\n &:where([data-wrap]) {\n flex-wrap: wrap;\n gap: var(--mantine-spacing-md) 0;\n }\n\n &:where([data-orientation='vertical']) {\n flex-direction: column;\n\n &:where([data-icon-position='left']) {\n align-items: flex-start;\n }\n\n &:where([data-icon-position='right']) {\n align-items: flex-end;\n }\n }\n\n &:where([data-orientation='horizontal']) {\n flex-direction: row;\n }\n}\n\n.separator {\n transition: background-color 150ms ease;\n flex: 1;\n height: var(--stepper-outline-thickness);\n margin-inline: var(--mantine-spacing-md);\n background-color: var(--stepper-outline-color);\n\n &:where([data-active]) {\n background-color: var(--stepper-color);\n }\n}\n\n.content {\n padding-top: var(--stepper-content-padding);\n}\n\n.step {\n --step-color: var(--stepper-color);\n\n display: flex;\n cursor: default;\n\n &:where([data-allow-click]) {\n cursor: pointer;\n }\n\n &:where([data-icon-position='left']) {\n flex-direction: row;\n }\n\n &:where([data-icon-position='right']) {\n flex-direction: row-reverse;\n }\n}\n\n.step--horizontal {\n align-items: center;\n}\n\n.step--vertical {\n --separator-spacing: calc(var(--mantine-spacing-xs) / 2);\n\n justify-content: flex-start;\n min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));\n margin-top: var(--separator-spacing);\n overflow: hidden;\n\n &:where(:first-of-type) {\n margin-top: 0;\n }\n\n &:where(:last-of-type) {\n min-height: auto;\n\n & .verticalSeparator {\n display: none;\n }\n }\n}\n\n.stepWrapper {\n position: relative;\n}\n\n.verticalSeparator {\n top: calc(var(--stepper-icon-size) + var(--separator-spacing));\n inset-inline-start: calc(var(--stepper-icon-size) / 2);\n height: 100vh;\n position: absolute;\n border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n\n &:where([data-active]) {\n border-color: var(--stepper-color);\n }\n}\n\n.stepIcon {\n height: var(--stepper-icon-size);\n width: var(--stepper-icon-size);\n min-height: var(--stepper-icon-size);\n min-width: var(--stepper-icon-size);\n border-radius: var(--stepper-radius);\n font-size: var(--stepper-fz);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-weight: bold;\n transition:\n background-color 150ms ease,\n border-color 150ms ease;\n border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n background-color: var(--stepper-outline-color);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-progress]) {\n border-color: var(--step-color);\n }\n\n &:where([data-completed]) {\n color: var(--stepper-icon-color, var(--mantine-color-white));\n background-color: var(--step-color);\n border-color: var(--step-color);\n }\n}\n\n.stepCompletedIcon {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--stepper-icon-color, var(--mantine-color-white));\n}\n\n.stepBody {\n display: flex;\n flex-direction: column;\n\n &:where([data-icon-position='left']) {\n margin-inline-start: var(--mantine-spacing-sm);\n }\n\n &:where([data-icon-position='right']) {\n text-align: right;\n margin-inline-end: var(--mantine-spacing-sm);\n\n @mixin where-rtl {\n text-align: left;\n }\n }\n}\n\n.stepLabel {\n font-weight: var(--mantine-font-weight-medium);\n font-size: var(--stepper-fz);\n line-height: 1;\n}\n\n.stepDescription {\n margin-top: calc(var(--stepper-spacing) / 3);\n margin-bottom: calc(var(--stepper-spacing) / 3);\n font-size: calc(var(--stepper-fz) - rem(2px));\n line-height: 1;\n color: var(--mantine-color-dimmed);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Stepper.module.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".root {\n --stepper-icon-size-xs: 34px;\n --stepper-icon-size-sm: 36px;\n --stepper-icon-size-md: 42px;\n --stepper-icon-size-lg: 48px;\n --stepper-icon-size-xl: 52px;\n\n --stepper-icon-size: var(--stepper-icon-size-md);\n --stepper-color: var(--mantine-primary-color-filled);\n --stepper-content-padding: var(--mantine-spacing-md);\n --stepper-spacing: var(--mantine-spacing-md);\n --stepper-radius: 1000px;\n --stepper-fz: var(--mantine-font-size-md);\n --stepper-outline-thickness: 2px;\n\n @mixin light {\n --stepper-outline-color: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --stepper-outline-color: var(--mantine-color-dark-5);\n }\n}\n\n.steps {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n\n &:where([data-wrap]) {\n flex-wrap: wrap;\n gap: var(--mantine-spacing-md) 0;\n }\n\n &:where([data-orientation='vertical']) {\n flex-direction: column;\n\n &:where([data-icon-position='left']) {\n align-items: flex-start;\n }\n\n &:where([data-icon-position='right']) {\n align-items: flex-end;\n }\n }\n\n &:where([data-orientation='horizontal']) {\n flex-direction: row;\n }\n}\n\n.separator {\n transition: background-color 150ms ease;\n flex: 1;\n height: var(--stepper-outline-thickness);\n margin-inline: var(--mantine-spacing-md);\n background-color: var(--stepper-outline-color);\n\n &:where([data-active]) {\n background-color: var(--stepper-color);\n }\n}\n\n.content {\n padding-top: var(--stepper-content-padding);\n}\n\n.step {\n --step-color: var(--stepper-color);\n\n display: flex;\n cursor: default;\n\n &:where([data-allow-click]) {\n cursor: pointer;\n }\n\n &:where([data-icon-position='left']) {\n flex-direction: row;\n }\n\n &:where([data-icon-position='right']) {\n flex-direction: row-reverse;\n }\n}\n\n.step--horizontal {\n align-items: center;\n}\n\n.step--vertical {\n --separator-spacing: calc(var(--mantine-spacing-xs) / 2);\n\n justify-content: flex-start;\n min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));\n margin-top: var(--separator-spacing);\n overflow: hidden;\n\n &:where(:first-of-type) {\n margin-top: 0;\n }\n\n &:where(:last-of-type) {\n min-height: auto;\n\n & .verticalSeparator {\n display: none;\n }\n }\n}\n\n.stepWrapper {\n position: relative;\n}\n\n.verticalSeparator {\n top: calc(var(--stepper-icon-size) + var(--separator-spacing));\n inset-inline-start: calc(var(--stepper-icon-size) / 2);\n height: 100vh;\n position: absolute;\n border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n\n &:where([data-active]) {\n border-color: var(--stepper-color);\n }\n}\n\n.stepIcon {\n height: var(--stepper-icon-size);\n width: var(--stepper-icon-size);\n min-height: var(--stepper-icon-size);\n min-width: var(--stepper-icon-size);\n border-radius: var(--stepper-radius);\n font-size: var(--stepper-fz);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-weight: bold;\n transition:\n background-color 150ms ease,\n border-color 150ms ease;\n border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n background-color: var(--stepper-outline-color);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-progress]) {\n border-color: var(--step-color);\n }\n\n &:where([data-completed]) {\n color: var(--stepper-icon-color, var(--mantine-color-white));\n background-color: var(--step-color);\n border-color: var(--step-color);\n }\n}\n\n.stepIconContent {\n display: flex;\n}\n\n.stepCompletedIcon {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--stepper-icon-color, var(--mantine-color-white));\n}\n\n.stepBody {\n display: flex;\n flex-direction: column;\n\n &:where([data-icon-position='left']) {\n margin-inline-start: var(--mantine-spacing-sm);\n }\n\n &:where([data-icon-position='right']) {\n text-align: right;\n margin-inline-end: var(--mantine-spacing-sm);\n\n @mixin where-rtl {\n text-align: left;\n }\n }\n}\n\n.stepLabel {\n font-weight: var(--mantine-font-weight-medium);\n font-size: var(--stepper-fz);\n line-height: 1;\n}\n\n.stepDescription {\n margin-top: calc(var(--stepper-spacing) / 3);\n margin-bottom: calc(var(--stepper-spacing) / 3);\n font-size: calc(var(--stepper-fz) - rem(2px));\n line-height: 1;\n color: var(--mantine-color-dimmed);\n}\n"],"mappings":""}

package/cjs/components/Stepper/StepperStep/StepperStep.cjs CHANGED Viewed

@@ -69,11 +69,14 @@ const StepperStep = require_factory.factory((props) => {
 							...ctx.getStyles("stepLoader", stylesApi)
 						}) : getStepFragment(completedIcon, step) || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { size: "60%" })
 					})
-				}), state !== "stepCompleted" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
-					...ctx.getStyles("stepLoader", stylesApi),
-					size: "calc(var(--stepper-icon-size) / 2)",
-					color
-				}) : getStepFragment(_icon || icon, step) }) : null]
+				}), state !== "stepCompleted" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...ctx.getStyles("stepIconContent", stylesApi),
+					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
+						...ctx.getStyles("stepLoader", stylesApi),
+						size: "calc(var(--stepper-icon-size) / 2)",
+						color
+					}) : getStepFragment(_icon || icon, step)
+				}) : null]
 			}), orientation === "vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				...ctx.getStyles("verticalSeparator", stylesApi),
 				"data-active": state === "stepCompleted" || void 0

package/cjs/components/Stepper/StepperStep/StepperStep.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepperStep.cjs","names":["factory","useProps","useStepperContext","useMantineTheme","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon","classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n Fragment: StepFragmentComponent \| React.ReactNode,\n step: number \| undefined\n) => {\n if (typeof Fragment === 'function') {\n return <Fragment step={step \|\| 0} />;\n }\n\n return Fragment;\n};\n\nexport type StepperStepStylesNames =\n \| 'step'\n \| 'stepLoader'\n \| 'verticalSeparator'\n \| 'stepWrapper'\n \| 'stepIcon'\n \| 'stepCompletedIcon'\n \| 'stepBody'\n \| 'stepLabel'\n \| 'stepDescription';\n\nexport interface StepperStepProps\n extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n /** 0-based step index, automatically set by Stepper component /\n step?: number;\n\n /* Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed /\n state?: 'stepInactive' \| 'stepProgress' \| 'stepCompleted';\n\n /* Key of `theme.colors`, by default controlled by Stepper component /\n color?: MantineColor;\n\n /* When false, hides the step icon. Useful for creating compact steppers with only labels @default true /\n withIcon?: boolean;\n\n /* Step icon, defaults to `step index + 1` when rendered within Stepper /\n icon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is completed /\n completedIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is in progress /\n progressIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step label, render after icon /\n label?: React.ReactNode \| StepFragmentComponent;\n\n /* Step description /\n description?: React.ReactNode \| StepFragmentComponent;\n\n /* Icon wrapper size /\n iconSize?: string \| number;\n\n /* Icon position relative to step body, controlled by Stepper component /\n iconPosition?: 'right' \| 'left';\n\n /* Indicates loading state of the step /\n loading?: boolean;\n\n /* Set to false to disable clicks on step /\n allowStepClick?: boolean;\n\n /* Should step selection be allowed /\n allowStepSelect?: boolean;\n\n /* Static selector base /\n __staticSelector?: string;\n\n /* Component orientation */\n orientation?: 'vertical' \| 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n props: StepperStepProps;\n ref: HTMLButtonElement;\n stylesNames: StepperStepStylesNames;\n compound: true;\n}>;\n\nconst defaultProps = {\n withIcon: true,\n allowStepClick: true,\n iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n step,\n state,\n color,\n icon,\n completedIcon,\n progressIcon,\n label,\n description,\n withIcon,\n iconSize,\n loading,\n allowStepClick,\n allowStepSelect,\n iconPosition,\n orientation,\n mod,\n ...others\n } = useProps('StepperStep', defaultProps, props);\n\n const ctx = useStepperContext();\n const theme = useMantineTheme();\n const stylesApi = { classNames, styles };\n\n const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n const dataAttributes = {\n 'data-progress': state === 'stepProgress' \|\| undefined,\n 'data-completed': state === 'stepCompleted' \|\| undefined,\n };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n mod={[\n { 'icon-position': iconPosition \|\| ctx.iconPosition, 'allow-click': allowStepClick },\n mod,\n ]}\n {...dataAttributes}\n {...others}\n __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n tabIndex={allowStepClick ? 0 : -1}\n >\n {withIcon && (\n <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n {(transitionStyles) => (\n <span\n {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n >\n {loading ? (\n <Loader\n color=\"var(--mantine-color-white)\"\n size=\"calc(var(--stepper-icon-size) / 2)\"\n {...ctx.getStyles('stepLoader', stylesApi)}\n />\n ) : (\n getStepFragment(completedIcon, step) \|\| <CheckIcon size=\"60%\" />\n )}\n </span>\n )}\n </Transition>\n\n {state !== 'stepCompleted' ? (\n <span>\n {loading ? (\n <Loader\n {...ctx.getStyles('stepLoader', stylesApi)}\n size=\"calc(var(--stepper-icon-size) / 2)\"\n color={color}\n />\n ) : (\n getStepFragment(_icon \|\| icon, step)\n )}\n </span>\n ) : null}\n </span>\n {orientation === 'vertical' && (\n <span\n {...ctx.getStyles('verticalSeparator', stylesApi)}\n data-active={state === 'stepCompleted' \|\| undefined}\n />\n )}\n </span>\n )}\n\n {(label \|\| description) && (\n <span\n {...ctx.getStyles('stepBody', stylesApi)}\n data-orientation={ctx.orientation}\n data-icon-position={iconPosition \|\| ctx.iconPosition}\n >\n {label && (\n <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n )}\n {description && (\n <span {...ctx.getStyles('stepDescription', stylesApi)}>\n {getStepFragment(description, step)}\n </span>\n )}\n </span>\n )}\n </UnstyledButton>\n );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;AACH,KAAI,OAAO,aAAa,WACtB,QAAO,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAU,MAAM,QAAQ,GAAK,CAAA;AAGtC,QAAO;;~~AAwET~~,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;CACf;AAED,MAAa,cAAcA,gBAAAA,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACDC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,MAAMC,wBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,YAAY;EAAE;EAAY;EAAQ;CAExC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;EAChD;AAED,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;GAAW,CAAC;EACvF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;GAAgB,EACpF,IACD;EACD,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,UAAU;aAAjD,CACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,UAAU;IAAE,GAAI;cAApD,CACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;OAAW,CAAC;gBAEhF,UACC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,UAAU;OAC1C,CAAA,GAEF,gBAAgB,eAAe,KAAK,IAAI,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAW,MAAK,OAAQ,CAAA;MAE7D,CAAA;KAEE,CAAA,EAEZ,UAAU,kBACT,iBAAA,GAAA,kBAAA,KAAC,QAAD,~~EAAA~~,~~UACG~~,UACC,iBAAA,GAAA,kBAAA,KAACD,eAAAA,QAAD;~~KACE~~,GAAI,IAAI,UAAU,cAAc,UAAU;~~KAC1C~~,MAAK;~~KACE~~;~~KACP~~,CAAA,GAEF,gBAAgB,SAAS,MAAM,KAAK,~~EAEjC,~~CAAA,GACL,KACC;OACN,gBAAgB,cACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,UAAU;IACjD,eAAa,UAAU,mBAAmB,KAAA;IAC1C,CAAA,CAEC;OAGP,SAAS,gBACT,iBAAA,GAAA,kBAAA,MAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,UAAU;GACxC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,UAAU;cAAG,gBAAgB,OAAO,KAAK;IAAQ,CAAA,EAEvF,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;cAClD,gBAAgB,aAAa,KAAK;IAC9B,CAAA,CAEJ;KAEM;;EAEnB;AAEF,YAAY,UAAUE,uBAAAA;AACtB,YAAY,cAAc"}
1	+ {"version":3,"file":"StepperStep.cjs","names":["factory","useProps","useStepperContext","useMantineTheme","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon","classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n Fragment: StepFragmentComponent \| React.ReactNode,\n step: number \| undefined\n) => {\n if (typeof Fragment === 'function') {\n return <Fragment step={step \|\| 0} />;\n }\n\n return Fragment;\n};\n\nexport type StepperStepStylesNames =\n \| 'step'\n \| 'stepLoader'\n \| 'verticalSeparator'\n \| 'stepWrapper'\n \| 'stepIcon'\n \| 'stepCompletedIcon'\n \| 'stepIconContent'\n \| 'stepBody'\n \| 'stepLabel'\n \| 'stepDescription';\n\nexport interface StepperStepProps\n extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n /** 0-based step index, automatically set by Stepper component /\n step?: number;\n\n /* Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed /\n state?: 'stepInactive' \| 'stepProgress' \| 'stepCompleted';\n\n /* Key of `theme.colors`, by default controlled by Stepper component /\n color?: MantineColor;\n\n /* When false, hides the step icon. Useful for creating compact steppers with only labels @default true /\n withIcon?: boolean;\n\n /* Step icon, defaults to `step index + 1` when rendered within Stepper /\n icon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is completed /\n completedIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is in progress /\n progressIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step label, render after icon /\n label?: React.ReactNode \| StepFragmentComponent;\n\n /* Step description /\n description?: React.ReactNode \| StepFragmentComponent;\n\n /* Icon wrapper size /\n iconSize?: string \| number;\n\n /* Icon position relative to step body, controlled by Stepper component /\n iconPosition?: 'right' \| 'left';\n\n /* Indicates loading state of the step /\n loading?: boolean;\n\n /* Set to false to disable clicks on step /\n allowStepClick?: boolean;\n\n /* Should step selection be allowed /\n allowStepSelect?: boolean;\n\n /* Static selector base /\n __staticSelector?: string;\n\n /* Component orientation */\n orientation?: 'vertical' \| 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n props: StepperStepProps;\n ref: HTMLButtonElement;\n stylesNames: StepperStepStylesNames;\n compound: true;\n}>;\n\nconst defaultProps = {\n withIcon: true,\n allowStepClick: true,\n iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n step,\n state,\n color,\n icon,\n completedIcon,\n progressIcon,\n label,\n description,\n withIcon,\n iconSize,\n loading,\n allowStepClick,\n allowStepSelect,\n iconPosition,\n orientation,\n mod,\n ...others\n } = useProps('StepperStep', defaultProps, props);\n\n const ctx = useStepperContext();\n const theme = useMantineTheme();\n const stylesApi = { classNames, styles };\n\n const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n const dataAttributes = {\n 'data-progress': state === 'stepProgress' \|\| undefined,\n 'data-completed': state === 'stepCompleted' \|\| undefined,\n };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n mod={[\n { 'icon-position': iconPosition \|\| ctx.iconPosition, 'allow-click': allowStepClick },\n mod,\n ]}\n {...dataAttributes}\n {...others}\n __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n tabIndex={allowStepClick ? 0 : -1}\n >\n {withIcon && (\n <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n {(transitionStyles) => (\n <span\n {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n >\n {loading ? (\n <Loader\n color=\"var(--mantine-color-white)\"\n size=\"calc(var(--stepper-icon-size) / 2)\"\n {...ctx.getStyles('stepLoader', stylesApi)}\n />\n ) : (\n getStepFragment(completedIcon, step) \|\| <CheckIcon size=\"60%\" />\n )}\n </span>\n )}\n </Transition>\n\n {state !== 'stepCompleted' ? (\n <span {...ctx.getStyles('stepIconContent', stylesApi)}>\n {loading ? (\n <Loader\n {...ctx.getStyles('stepLoader', stylesApi)}\n size=\"calc(var(--stepper-icon-size) / 2)\"\n color={color}\n />\n ) : (\n getStepFragment(_icon \|\| icon, step)\n )}\n </span>\n ) : null}\n </span>\n {orientation === 'vertical' && (\n <span\n {...ctx.getStyles('verticalSeparator', stylesApi)}\n data-active={state === 'stepCompleted' \|\| undefined}\n />\n )}\n </span>\n )}\n\n {(label \|\| description) && (\n <span\n {...ctx.getStyles('stepBody', stylesApi)}\n data-orientation={ctx.orientation}\n data-icon-position={iconPosition \|\| ctx.iconPosition}\n >\n {label && (\n <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n )}\n {description && (\n <span {...ctx.getStyles('stepDescription', stylesApi)}>\n {getStepFragment(description, step)}\n </span>\n )}\n </span>\n )}\n </UnstyledButton>\n );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;AACH,KAAI,OAAO,aAAa,WACtB,QAAO,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAU,MAAM,QAAQ,GAAK,CAAA;AAGtC,QAAO;;AAyET,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;CACf;AAED,MAAa,cAAcA,gBAAAA,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACDC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,MAAMC,wBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,YAAY;EAAE;EAAY;EAAQ;CAExC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;EAChD;AAED,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;GAAW,CAAC;EACvF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;GAAgB,EACpF,IACD;EACD,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,UAAU;aAAjD,CACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,UAAU;IAAE,GAAI;cAApD,CACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;OAAW,CAAC;gBAEhF,UACC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,UAAU;OAC1C,CAAA,GAEF,gBAAgB,eAAe,KAAK,IAAI,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAW,MAAK,OAAQ,CAAA;MAE7D,CAAA;KAEE,CAAA,EAEZ,UAAU,kBACT,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;eAClD,UACC,iBAAA,GAAA,kBAAA,KAACD,eAAAA,QAAD;MACE,GAAI,IAAI,UAAU,cAAc,UAAU;MAC1C,MAAK;MACE;MACP,CAAA,GAEF,gBAAgB,SAAS,MAAM,KAAK;KAEjC,CAAA,GACL,KACC;OACN,gBAAgB,cACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,UAAU;IACjD,eAAa,UAAU,mBAAmB,KAAA;IAC1C,CAAA,CAEC;OAGP,SAAS,gBACT,iBAAA,GAAA,kBAAA,MAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,UAAU;GACxC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,UAAU;cAAG,gBAAgB,OAAO,KAAK;IAAQ,CAAA,EAEvF,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;cAClD,gBAAgB,aAAa,KAAK;IAC9B,CAAA,CAEJ;KAEM;;EAEnB;AAEF,YAAY,UAAUE,uBAAAA;AACtB,YAAY,cAAc"}

package/cjs/components/TagsInput/TagsInput.cjs CHANGED Viewed

@@ -246,6 +246,7 @@ const TagsInput = require_factory.factory((_props) => {
 				...getStyles("pillsList"),
 				children: [values, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.EventsTarget, {
 					autoComplete,
+					withExpandedAttribute: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput.Field, {
 						...rest,
 						ref: _ref,

package/cjs/components/TagsInput/TagsInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsInput.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","useStyles","useResolvedStylesApi","getSplittedTags","Fragment","Pill","Combobox","PillsInput","OptionsDropdown","filterPickedTags","InputBase"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxGenericData,\n ComboboxGenericItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n \| __InputStylesNames\n \| ComboboxLikeStylesNames\n \| 'pill'\n \| 'pillsList'\n \| 'inputField';\n\nexport interface TagsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n Omit<ComboboxLikeProps, 'data'>,\n StylesApiProps<TagsInputFactory>,\n ElementProps<'input', 'size' \| 'value' \| 'defaultValue' \| 'onChange'> {\n /** Data displayed in the dropdown. Values must be unique. /\n data?: ComboboxGenericData;\n\n /* Controlled component value /\n value?: string[];\n\n /* Uncontrolled component default value /\n defaultValue?: string[];\n\n /* Called when value changes /\n onChange?: (value: string[]) => void;\n\n /* Called when tag is removed /\n onRemove?: (value: string) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Maximum number of tags @default Infinity /\n maxTags?: number;\n\n /* Called when user tries to add more tags than maxTags /\n onMaxTags?: (value: string) => void;\n\n /* If set, duplicate tags are allowed @default false /\n allowDuplicates?: boolean;\n\n /* Called when user tries to submit a duplicated tag /\n onDuplicate?: (value: string) => void;\n\n /* Characters that should trigger tags split, `[',']` by default /\n splitChars?: string[];\n\n /* If set, the clear button is displayed in the right section when the component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* Divider used to separate values in the hidden input `value` attribute @default ',' /\n hiddenInputValuesDivider?: string;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n /* A function to render content of the pill, replaces the default content of the pill /\n renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true /\n acceptValueOnBlur?: boolean;\n\n /* Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. /\n isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n /* If set, the dropdown opens when the input receives focus @default true */\n openOnFocus?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n props: TagsInputProps;\n ref: HTMLInputElement;\n stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n maxTags: Infinity,\n acceptValueOnBlur: true,\n splitChars: [','],\n hiddenInputValuesDivider: ',',\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n const props = useProps('TagsInput', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n maxTags,\n allowDuplicates,\n onDuplicate,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n splitChars,\n onFocus,\n onBlur,\n onPaste,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n required,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n hiddenInputValuesDivider,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxTags,\n scrollAreaProps,\n acceptValueOnBlur,\n isDuplicate,\n openOnFocus,\n attributes,\n ref,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const inputRef = useRef<HTMLInputElement>(null);\n const _ref = useMergedRef(inputRef, ref);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<TagsInputFactory>({\n name: 'TagsInput',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleValueSelect = (val: string) => {\n const isDuplicated = isDuplicate\n ? isDuplicate(val, _value)\n : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n if (isDuplicated) {\n onDuplicate?.(val);\n if (!allowDuplicates) {\n handleSearchChange('');\n return;\n }\n }\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n return;\n }\n\n onOptionSubmit?.(val);\n handleSearchChange('');\n if (val.length > 0) {\n setValue([..._value, val]);\n }\n };\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.isPropagationStopped()) {\n return;\n }\n\n const inputValue = _searchValue.trim();\n const { length } = inputValue;\n\n if (splitChars.includes(event.key) && length > 0) {\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: _searchValue,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n event.preventDefault();\n }\n\n if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n event.preventDefault();\n\n const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n );\n\n if (hasActiveSelection) {\n return;\n }\n\n handleValueSelect(inputValue);\n }\n\n if (\n event.key === 'Backspace' &&\n length === 0 &&\n _value.length > 0 &&\n !event.nativeEvent.isComposing &&\n !readOnly\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n event.preventDefault();\n\n if (event.clipboardData) {\n const pastedText = event.clipboardData.getData('text/plain');\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: `${_searchValue}${pastedText}`,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n }\n };\n\n const values = _value.map((item, index) => {\n const onRemoveItem = () => {\n const next_value = _value.slice();\n next_value.splice(index, 1);\n setValue(next_value);\n onRemove?.(item);\n };\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionsLockup[item] \|\| { value: item, label: item, disabled: false },\n value: item,\n onRemove: onRemoveItem,\n disabled: disabled \|\| readOnly,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly}\n onRemove={onRemoveItem}\n unstyled={unstyled}\n disabled={disabled}\n attributes={attributes}\n {...getStyles('pill')}\n >\n {item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue([]);\n handleSearchChange('');\n inputRef.current?.focus();\n combobox.openDropdown();\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"TagsInput\"\n attributes={attributes}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val);\n handleSearchChange('');\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n } else {\n setValue([..._value, optionsLockup[val].value]);\n }\n\n combobox.resetSelectedOption();\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"TagsInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n __clearSectionMode={clearSectionMode}\n rightSectionWidth={rightSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n required={required}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{ ...props, multiline: true }}\n id={_id}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group disabled={disabled} unstyled={unstyled} {...getStyles('pillsList')}>\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete}>\n <PillsInput.Field\n {...rest}\n ref={_ref}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onKeyDown={handleInputKeydown}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n acceptValueOnBlur && handleValueSelect(_searchValue);\n combobox.closeDropdown();\n }}\n onPaste={handlePaste}\n value={_searchValue}\n onChange={(event) => handleSearchChange(event.currentTarget.value)}\n required={required && _value.length === 0}\n disabled={disabled}\n readOnly={readOnly}\n id={_id}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={filterPickedTags({ data: parsedData, value: _value })}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n form={form}\n value={_value}\n valuesDivider={hiddenInputValuesDivider}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n"],"mappings":"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"}
1	+ {"version":3,"file":"TagsInput.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","useStyles","useResolvedStylesApi","getSplittedTags","Fragment","Pill","Combobox","PillsInput","OptionsDropdown","filterPickedTags","InputBase"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxGenericData,\n ComboboxGenericItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n \| __InputStylesNames\n \| ComboboxLikeStylesNames\n \| 'pill'\n \| 'pillsList'\n \| 'inputField';\n\nexport interface TagsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n Omit<ComboboxLikeProps, 'data'>,\n StylesApiProps<TagsInputFactory>,\n ElementProps<'input', 'size' \| 'value' \| 'defaultValue' \| 'onChange'> {\n /** Data displayed in the dropdown. Values must be unique. /\n data?: ComboboxGenericData;\n\n /* Controlled component value /\n value?: string[];\n\n /* Uncontrolled component default value /\n defaultValue?: string[];\n\n /* Called when value changes /\n onChange?: (value: string[]) => void;\n\n /* Called when tag is removed /\n onRemove?: (value: string) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Maximum number of tags @default Infinity /\n maxTags?: number;\n\n /* Called when user tries to add more tags than maxTags /\n onMaxTags?: (value: string) => void;\n\n /* If set, duplicate tags are allowed @default false /\n allowDuplicates?: boolean;\n\n /* Called when user tries to submit a duplicated tag /\n onDuplicate?: (value: string) => void;\n\n /* Characters that should trigger tags split, `[',']` by default /\n splitChars?: string[];\n\n /* If set, the clear button is displayed in the right section when the component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* Divider used to separate values in the hidden input `value` attribute @default ',' /\n hiddenInputValuesDivider?: string;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n /* A function to render content of the pill, replaces the default content of the pill /\n renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true /\n acceptValueOnBlur?: boolean;\n\n /* Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. /\n isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n /* If set, the dropdown opens when the input receives focus @default true */\n openOnFocus?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n props: TagsInputProps;\n ref: HTMLInputElement;\n stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n maxTags: Infinity,\n acceptValueOnBlur: true,\n splitChars: [','],\n hiddenInputValuesDivider: ',',\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n const props = useProps('TagsInput', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n maxTags,\n allowDuplicates,\n onDuplicate,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n splitChars,\n onFocus,\n onBlur,\n onPaste,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n required,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n hiddenInputValuesDivider,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxTags,\n scrollAreaProps,\n acceptValueOnBlur,\n isDuplicate,\n openOnFocus,\n attributes,\n ref,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const inputRef = useRef<HTMLInputElement>(null);\n const _ref = useMergedRef(inputRef, ref);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<TagsInputFactory>({\n name: 'TagsInput',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleValueSelect = (val: string) => {\n const isDuplicated = isDuplicate\n ? isDuplicate(val, _value)\n : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n if (isDuplicated) {\n onDuplicate?.(val);\n if (!allowDuplicates) {\n handleSearchChange('');\n return;\n }\n }\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n return;\n }\n\n onOptionSubmit?.(val);\n handleSearchChange('');\n if (val.length > 0) {\n setValue([..._value, val]);\n }\n };\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.isPropagationStopped()) {\n return;\n }\n\n const inputValue = _searchValue.trim();\n const { length } = inputValue;\n\n if (splitChars.includes(event.key) && length > 0) {\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: _searchValue,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n event.preventDefault();\n }\n\n if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n event.preventDefault();\n\n const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n );\n\n if (hasActiveSelection) {\n return;\n }\n\n handleValueSelect(inputValue);\n }\n\n if (\n event.key === 'Backspace' &&\n length === 0 &&\n _value.length > 0 &&\n !event.nativeEvent.isComposing &&\n !readOnly\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n event.preventDefault();\n\n if (event.clipboardData) {\n const pastedText = event.clipboardData.getData('text/plain');\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: `${_searchValue}${pastedText}`,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n }\n };\n\n const values = _value.map((item, index) => {\n const onRemoveItem = () => {\n const next_value = _value.slice();\n next_value.splice(index, 1);\n setValue(next_value);\n onRemove?.(item);\n };\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionsLockup[item] \|\| { value: item, label: item, disabled: false },\n value: item,\n onRemove: onRemoveItem,\n disabled: disabled \|\| readOnly,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly}\n onRemove={onRemoveItem}\n unstyled={unstyled}\n disabled={disabled}\n attributes={attributes}\n {...getStyles('pill')}\n >\n {item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue([]);\n handleSearchChange('');\n inputRef.current?.focus();\n combobox.openDropdown();\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"TagsInput\"\n attributes={attributes}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val);\n handleSearchChange('');\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n } else {\n setValue([..._value, optionsLockup[val].value]);\n }\n\n combobox.resetSelectedOption();\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"TagsInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n __clearSectionMode={clearSectionMode}\n rightSectionWidth={rightSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n required={required}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{ ...props, multiline: true }}\n id={_id}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group disabled={disabled} unstyled={unstyled} {...getStyles('pillsList')}>\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n ref={_ref}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onKeyDown={handleInputKeydown}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n acceptValueOnBlur && handleValueSelect(_searchValue);\n combobox.closeDropdown();\n }}\n onPaste={handlePaste}\n value={_searchValue}\n onChange={(event) => handleSearchChange(event.currentTarget.value)}\n required={required && _value.length === 0}\n disabled={disabled}\n readOnly={readOnly}\n id={_id}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={filterPickedTags({ data: parsedData, value: _value })}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n form={form}\n value={_value}\n valuesDivider={hiddenInputValuesDivider}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n"],"mappings":"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"}

package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs CHANGED Viewed

@@ -29,7 +29,7 @@ const TimelineItem = require_factory.factory((_props) => {
 			active: __active
 		}, mod],
 		__vars: {
-			"--tli-radius": radius ? require_get_size.getRadius(radius) : void 0,
+			"--tli-radius": radius !== void 0 ? require_get_size.getRadius(radius) : void 0,
 			"--tli-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0,
 			"--tli-border-style": lineVariant || void 0
 		},

package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n \| 'itemBody'\n \| 'itemContent'\n \| 'itemBullet'\n \| 'item'\n \| 'itemTitle';\n\nexport interface TimelineItemProps\n extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n __active?: boolean;\n __lineActive?: boolean;\n __align?: 'right' \| 'left';\n\n /** Item title, displayed next to the bullet /\n title?: React.ReactNode;\n\n /* Content displayed below the title /\n children?: React.ReactNode;\n\n /* React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. /\n bullet?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls line border style @default 'solid' */\n lineVariant?: 'solid' \| 'dashed' \| 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n props: TimelineItemProps;\n ref: HTMLDivElement;\n stylesNames: TimelineItemStylesNames;\n compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n const props = useProps('TimelineItem', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n __active,\n __align,\n __lineActive,\n __vars,\n bullet,\n radius,\n color,\n lineVariant,\n children,\n title,\n mod,\n ...others\n } = props;\n\n const ctx = useTimelineContext();\n const theme = useMantineTheme();\n\n const stylesApiProps = { classNames, styles };\n\n return (\n <Box\n {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n __vars={{\n '--tli-radius': radius ? getRadius(radius) : undefined,\n '--tli-color': color ? getThemeColor(color, theme) : undefined,\n '--tli-border-style': lineVariant \|\| undefined,\n }}\n {...others}\n >\n <Box\n {...ctx.getStyles('itemBullet', stylesApiProps)}\n mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n >\n {bullet}\n </Box>\n\n <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n </div>\n </Box>\n );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;;AAwDA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBSC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,~~SAASC~~,iBAAAA,UAAU,OAAO,GAAG,KAAA;~~GAC7C~~,eAAe,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}
1	+ {"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n \| 'itemBody'\n \| 'itemContent'\n \| 'itemBullet'\n \| 'item'\n \| 'itemTitle';\n\nexport interface TimelineItemProps\n extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n __active?: boolean;\n __lineActive?: boolean;\n __align?: 'right' \| 'left';\n\n /** Item title, displayed next to the bullet /\n title?: React.ReactNode;\n\n /* Content displayed below the title /\n children?: React.ReactNode;\n\n /* React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. /\n bullet?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls line border style @default 'solid' */\n lineVariant?: 'solid' \| 'dashed' \| 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n props: TimelineItemProps;\n ref: HTMLDivElement;\n stylesNames: TimelineItemStylesNames;\n compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n const props = useProps('TimelineItem', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n __active,\n __align,\n __lineActive,\n __vars,\n bullet,\n radius,\n color,\n lineVariant,\n children,\n title,\n mod,\n ...others\n } = props;\n\n const ctx = useTimelineContext();\n const theme = useMantineTheme();\n\n const stylesApiProps = { classNames, styles };\n\n return (\n <Box\n {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n __vars={{\n '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--tli-color': color ? getThemeColor(color, theme) : undefined,\n '--tli-border-style': lineVariant \|\| undefined,\n }}\n {...others}\n >\n <Box\n {...ctx.getStyles('itemBullet', stylesApiProps)}\n mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n >\n {bullet}\n </Box>\n\n <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n </div>\n </Box>\n );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;;AAwDA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBSC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,OAAO,GAAG,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}

package/cjs/core/MantineProvider/default-theme.cjs CHANGED Viewed

@@ -27,7 +27,7 @@ const DEFAULT_THEME = {
 		to: "cyan",
 		deg: 45
 	},
-	defaultRadius: "sm",
+	defaultRadius: "md",
 	activeClassName: "mantine-active",
 	focusClassName: "",
 	headings: {

package/cjs/core/MantineProvider/default-theme.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default-theme.cjs","names":["DEFAULT_COLORS","defaultVariantColorsResolver","rem"],"sources":["../../../src/core/MantineProvider/default-theme.ts"],"sourcesContent":["import { rem } from '../utils';\nimport { defaultVariantColorsResolver } from './color-functions';\nimport { DEFAULT_COLORS } from './default-colors';\nimport type { MantineTheme } from './theme.types';\n\nconst DEFAULT_FONT_FAMILY =\n '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji';\n\nexport const DEFAULT_THEME: MantineTheme = {\n scale: 1,\n fontSmoothing: true,\n focusRing: 'auto',\n white: '#fff',\n black: '#000',\n colors: DEFAULT_COLORS,\n primaryShade: { light: 6, dark: 8 },\n primaryColor: 'blue',\n variantColorResolver: defaultVariantColorsResolver,\n autoContrast: false,\n luminanceThreshold: 0.3,\n fontFamily: DEFAULT_FONT_FAMILY,\n fontFamilyMonospace:\n 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',\n respectReducedMotion: false,\n cursorType: 'default',\n defaultGradient: { from: 'blue', to: 'cyan', deg: 45 },\n defaultRadius: 'sm',\n activeClassName: 'mantine-active',\n focusClassName: '',\n\n headings: {\n fontFamily: DEFAULT_FONT_FAMILY,\n fontWeight: '700',\n textWrap: 'wrap',\n sizes: {\n h1: { fontSize: rem(34), lineHeight: '1.3' },\n h2: { fontSize: rem(26), lineHeight: '1.35' },\n h3: { fontSize: rem(22), lineHeight: '1.4' },\n h4: { fontSize: rem(18), lineHeight: '1.45' },\n h5: { fontSize: rem(16), lineHeight: '1.5' },\n h6: { fontSize: rem(14), lineHeight: '1.5' },\n },\n },\n\n fontSizes: {\n xs: rem(12),\n sm: rem(14),\n md: rem(16),\n lg: rem(18),\n xl: rem(20),\n },\n\n lineHeights: {\n xs: '1.4',\n sm: '1.45',\n md: '1.55',\n lg: '1.6',\n xl: '1.65',\n },\n\n fontWeights: {\n regular: '400',\n medium: '600',\n bold: '700',\n },\n\n radius: {\n xs: rem(2),\n sm: rem(4),\n md: rem(8),\n lg: rem(16),\n xl: rem(32),\n },\n\n spacing: {\n xs: rem(10),\n sm: rem(12),\n md: rem(16),\n lg: rem(20),\n xl: rem(32),\n },\n\n breakpoints: {\n xs: '36em',\n sm: '48em',\n md: '62em',\n lg: '75em',\n xl: '88em',\n },\n\n shadows: {\n xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,\n sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(\n 15\n )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,\n md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(\n 25\n )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,\n lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(\n 23\n )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,\n xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(\n 28\n )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`,\n },\n\n other: {},\n components: {},\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"default-theme.cjs","names":["DEFAULT_COLORS","defaultVariantColorsResolver","rem"],"sources":["../../../src/core/MantineProvider/default-theme.ts"],"sourcesContent":["import { rem } from '../utils';\nimport { defaultVariantColorsResolver } from './color-functions';\nimport { DEFAULT_COLORS } from './default-colors';\nimport type { MantineTheme } from './theme.types';\n\nconst DEFAULT_FONT_FAMILY =\n '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji';\n\nexport const DEFAULT_THEME: MantineTheme = {\n scale: 1,\n fontSmoothing: true,\n focusRing: 'auto',\n white: '#fff',\n black: '#000',\n colors: DEFAULT_COLORS,\n primaryShade: { light: 6, dark: 8 },\n primaryColor: 'blue',\n variantColorResolver: defaultVariantColorsResolver,\n autoContrast: false,\n luminanceThreshold: 0.3,\n fontFamily: DEFAULT_FONT_FAMILY,\n fontFamilyMonospace:\n 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',\n respectReducedMotion: false,\n cursorType: 'default',\n defaultGradient: { from: 'blue', to: 'cyan', deg: 45 },\n defaultRadius: 'md',\n activeClassName: 'mantine-active',\n focusClassName: '',\n\n headings: {\n fontFamily: DEFAULT_FONT_FAMILY,\n fontWeight: '700',\n textWrap: 'wrap',\n sizes: {\n h1: { fontSize: rem(34), lineHeight: '1.3' },\n h2: { fontSize: rem(26), lineHeight: '1.35' },\n h3: { fontSize: rem(22), lineHeight: '1.4' },\n h4: { fontSize: rem(18), lineHeight: '1.45' },\n h5: { fontSize: rem(16), lineHeight: '1.5' },\n h6: { fontSize: rem(14), lineHeight: '1.5' },\n },\n },\n\n fontSizes: {\n xs: rem(12),\n sm: rem(14),\n md: rem(16),\n lg: rem(18),\n xl: rem(20),\n },\n\n lineHeights: {\n xs: '1.4',\n sm: '1.45',\n md: '1.55',\n lg: '1.6',\n xl: '1.65',\n },\n\n fontWeights: {\n regular: '400',\n medium: '600',\n bold: '700',\n },\n\n radius: {\n xs: rem(2),\n sm: rem(4),\n md: rem(8),\n lg: rem(16),\n xl: rem(32),\n },\n\n spacing: {\n xs: rem(10),\n sm: rem(12),\n md: rem(16),\n lg: rem(20),\n xl: rem(32),\n },\n\n breakpoints: {\n xs: '36em',\n sm: '48em',\n md: '62em',\n lg: '75em',\n xl: '88em',\n },\n\n shadows: {\n xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,\n sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(\n 15\n )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,\n md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(\n 25\n )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,\n lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(\n 23\n )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,\n xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(\n 28\n )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`,\n },\n\n other: {},\n components: {},\n};\n"],"mappings":";;;;AAKA,MAAM,sBACJ;AAEF,MAAa,gBAA8B;CACzC,OAAO;CACP,eAAe;CACf,WAAW;CACX,OAAO;CACP,OAAO;CACP,QAAQA,uBAAAA;CACR,cAAc;EAAE,OAAO;EAAG,MAAM;EAAG;CACnC,cAAc;CACd,sBAAsBC,wCAAAA;CACtB,cAAc;CACd,oBAAoB;CACpB,YAAY;CACZ,qBACE;CACF,sBAAsB;CACtB,YAAY;CACZ,iBAAiB;EAAE,MAAM;EAAQ,IAAI;EAAQ,KAAK;EAAI;CACtD,eAAe;CACf,iBAAiB;CACjB,gBAAgB;CAEhB,UAAU;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,OAAO;GACL,IAAI;IAAE,UAAUC,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC7C;EACF;CAED,WAAW;EACT,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,aAAa;EACX,SAAS;EACT,QAAQ;EACR,MAAM;EACP;CAED,QAAQ;EACN,IAAIA,YAAAA,IAAI,EAAE;EACV,IAAIA,YAAAA,IAAI,EAAE;EACV,IAAIA,YAAAA,IAAI,EAAE;EACV,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACZ;CAED,SAAS;EACP,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,SAAS;EACP,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,0BAA0BA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC;EACrE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,GAAG;EAClE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG;EACpE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG;EACpE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG;EACrE;CAED,OAAO,EAAE;CACT,YAAY,EAAE;CACf"}