@mantine/core 6.0.9 → 6.0.11
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.
- package/cjs/Badge/Badge.js.map +1 -1
- package/cjs/Checkbox/Checkbox.styles.js +1 -0
- package/cjs/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/Chip/Chip.styles.js +24 -1
- package/cjs/Chip/Chip.styles.js.map +1 -1
- package/cjs/ColorInput/ColorInput.js +6 -3
- package/cjs/ColorInput/ColorInput.js.map +1 -1
- package/cjs/ColorPicker/converters/parsers.js +4 -4
- package/cjs/ColorPicker/converters/parsers.js.map +1 -1
- package/cjs/InlineInput/InlineInput.styles.js +5 -2
- package/cjs/InlineInput/InlineInput.styles.js.map +1 -1
- package/cjs/Input/Input.styles.js +13 -2
- package/cjs/Input/Input.styles.js.map +1 -1
- package/cjs/JsonInput/JsonInput.js +1 -1
- package/cjs/JsonInput/JsonInput.js.map +1 -1
- package/cjs/MultiSelect/MultiSelect.js +2 -4
- package/cjs/MultiSelect/MultiSelect.js.map +1 -1
- package/cjs/MultiSelect/MultiSelect.styles.js +24 -5
- package/cjs/MultiSelect/MultiSelect.styles.js.map +1 -1
- package/cjs/NumberInput/NumberInput.styles.js +0 -3
- package/cjs/NumberInput/NumberInput.styles.js.map +1 -1
- package/cjs/PasswordInput/PasswordInput.styles.js +8 -1
- package/cjs/PasswordInput/PasswordInput.styles.js.map +1 -1
- package/cjs/Popover/Popover.js +1 -4
- package/cjs/Popover/Popover.js.map +1 -1
- package/cjs/Rating/Rating.styles.js +5 -1
- package/cjs/Rating/Rating.styles.js.map +1 -1
- package/cjs/Rating/StarSymbol/StarSymbol.styles.js +5 -1
- package/cjs/Rating/StarSymbol/StarSymbol.styles.js.map +1 -1
- package/cjs/SegmentedControl/SegmentedControl.js.map +1 -1
- package/cjs/SegmentedControl/SegmentedControl.styles.js +9 -1
- package/cjs/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/cjs/Slider/Marks/Marks.styles.js +7 -1
- package/cjs/Slider/Marks/Marks.styles.js.map +1 -1
- package/cjs/Slider/Track/Track.styles.js +16 -1
- package/cjs/Slider/Track/Track.styles.js.map +1 -1
- package/cjs/Switch/Switch.styles.js +2 -1
- package/cjs/Switch/Switch.styles.js.map +1 -1
- package/cjs/Tabs/Tab/Tab.js +3 -1
- package/cjs/Tabs/Tab/Tab.js.map +1 -1
- package/cjs/Tabs/Tabs.context.js.map +1 -1
- package/cjs/Tabs/TabsPanel/TabsPanel.js +6 -1
- package/cjs/Tabs/TabsPanel/TabsPanel.js.map +1 -1
- package/cjs/Tabs/TabsProvider.js +3 -0
- package/cjs/Tabs/TabsProvider.js.map +1 -1
- package/cjs/ThemeIcon/ThemeIcon.js.map +1 -1
- package/esm/Badge/Badge.js.map +1 -1
- package/esm/Checkbox/Checkbox.styles.js +1 -0
- package/esm/Checkbox/Checkbox.styles.js.map +1 -1
- package/esm/Chip/Chip.styles.js +24 -1
- package/esm/Chip/Chip.styles.js.map +1 -1
- package/esm/ColorInput/ColorInput.js +6 -3
- package/esm/ColorInput/ColorInput.js.map +1 -1
- package/esm/ColorPicker/converters/parsers.js +4 -4
- package/esm/ColorPicker/converters/parsers.js.map +1 -1
- package/esm/InlineInput/InlineInput.styles.js +5 -2
- package/esm/InlineInput/InlineInput.styles.js.map +1 -1
- package/esm/Input/Input.styles.js +13 -2
- package/esm/Input/Input.styles.js.map +1 -1
- package/esm/JsonInput/JsonInput.js +1 -1
- package/esm/JsonInput/JsonInput.js.map +1 -1
- package/esm/MultiSelect/MultiSelect.js +2 -4
- package/esm/MultiSelect/MultiSelect.js.map +1 -1
- package/esm/MultiSelect/MultiSelect.styles.js +24 -5
- package/esm/MultiSelect/MultiSelect.styles.js.map +1 -1
- package/esm/NumberInput/NumberInput.styles.js +0 -3
- package/esm/NumberInput/NumberInput.styles.js.map +1 -1
- package/esm/PasswordInput/PasswordInput.styles.js +8 -1
- package/esm/PasswordInput/PasswordInput.styles.js.map +1 -1
- package/esm/Popover/Popover.js +1 -4
- package/esm/Popover/Popover.js.map +1 -1
- package/esm/Rating/Rating.styles.js +5 -1
- package/esm/Rating/Rating.styles.js.map +1 -1
- package/esm/Rating/StarSymbol/StarSymbol.styles.js +5 -1
- package/esm/Rating/StarSymbol/StarSymbol.styles.js.map +1 -1
- package/esm/SegmentedControl/SegmentedControl.js.map +1 -1
- package/esm/SegmentedControl/SegmentedControl.styles.js +9 -1
- package/esm/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/esm/Slider/Marks/Marks.styles.js +7 -1
- package/esm/Slider/Marks/Marks.styles.js.map +1 -1
- package/esm/Slider/Track/Track.styles.js +16 -1
- package/esm/Slider/Track/Track.styles.js.map +1 -1
- package/esm/Switch/Switch.styles.js +2 -1
- package/esm/Switch/Switch.styles.js.map +1 -1
- package/esm/Tabs/Tab/Tab.js +3 -1
- package/esm/Tabs/Tab/Tab.js.map +1 -1
- package/esm/Tabs/Tabs.context.js.map +1 -1
- package/esm/Tabs/TabsPanel/TabsPanel.js +7 -2
- package/esm/Tabs/TabsPanel/TabsPanel.js.map +1 -1
- package/esm/Tabs/TabsProvider.js +4 -1
- package/esm/Tabs/TabsProvider.js.map +1 -1
- package/esm/ThemeIcon/ThemeIcon.js.map +1 -1
- package/lib/Badge/Badge.d.ts +2 -1
- package/lib/Badge/Badge.d.ts.map +1 -1
- package/lib/Badge/index.d.ts +1 -1
- package/lib/Badge/index.d.ts.map +1 -1
- package/lib/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/lib/Chip/Chip.styles.d.ts.map +1 -1
- package/lib/ColorInput/ColorInput.d.ts +2 -0
- package/lib/ColorInput/ColorInput.d.ts.map +1 -1
- package/lib/InlineInput/InlineInput.styles.d.ts.map +1 -1
- package/lib/Input/Input.styles.d.ts.map +1 -1
- package/lib/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/lib/MultiSelect/MultiSelect.styles.d.ts.map +1 -1
- package/lib/NumberInput/NumberInput.styles.d.ts.map +1 -1
- package/lib/PasswordInput/PasswordInput.styles.d.ts.map +1 -1
- package/lib/Popover/Popover.d.ts.map +1 -1
- package/lib/Rating/Rating.styles.d.ts.map +1 -1
- package/lib/Rating/StarSymbol/StarSymbol.styles.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControl.d.ts +2 -2
- package/lib/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControl.styles.d.ts.map +1 -1
- package/lib/Slider/Marks/Marks.styles.d.ts.map +1 -1
- package/lib/Slider/Track/Track.styles.d.ts.map +1 -1
- package/lib/Switch/Switch.styles.d.ts.map +1 -1
- package/lib/Tabs/Tab/Tab.d.ts.map +1 -1
- package/lib/Tabs/Tabs.context.d.ts +2 -0
- package/lib/Tabs/Tabs.context.d.ts.map +1 -1
- package/lib/Tabs/TabsPanel/TabsPanel.d.ts.map +1 -1
- package/lib/Tabs/TabsProvider.d.ts.map +1 -1
- package/lib/ThemeIcon/ThemeIcon.d.ts +2 -1
- package/lib/ThemeIcon/ThemeIcon.d.ts.map +1 -1
- package/lib/ThemeIcon/index.d.ts +1 -1
- package/lib/ThemeIcon/index.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, forwardRef } from 'react';\nimport {\n useReducedMotion,\n useResizeObserver,\n useUncontrolled,\n useId,\n useMergedRef,\n useIsomorphicEffect,\n} from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineSize,\n MantineColor,\n Selectors,\n useComponentDefaultProps,\n useMantineTheme,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, {\n WRAPPER_PADDING,\n SegmentedControlStylesParams,\n} from './SegmentedControl.styles';\n\nexport interface SegmentedControlItem {\n value: string;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport type SegmentedControlStylesNames = Selectors<typeof useStyles>;\n\nexport interface SegmentedControlProps\n extends DefaultProps<SegmentedControlStylesNames, SegmentedControlStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n variant?: string;\n\n /** Data based on which controls are rendered */\n data: string[] | SegmentedControlItem[];\n\n /** Current selected value */\n value?: string;\n\n /** Disabled input state */\n disabled?: boolean;\n\n /** Called when value changes */\n onChange?(value: string): void;\n\n /** Name of the radio group, default to random id */\n name?: string;\n\n /** True if component should have 100% width */\n fullWidth?: boolean;\n\n /** Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark */\n color?: MantineColor;\n\n /** Controls font-size, paddings and height */\n size?: MantineSize;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Transition duration in ms, set to 0 to turn off transitions */\n transitionDuration?: number;\n\n /** Transition timing function for all transitions, defaults to theme.transitionTimingFunction */\n transitionTimingFunction?: string;\n\n /** Default value for uncontrolled component */\n defaultValue?: string;\n\n /** Display Vertically */\n orientation?: 'vertical' | 'horizontal';\n\n /** Determines whether the user can change value */\n readOnly?: boolean;\n}\n\nconst defaultProps = {\n disabled: false,\n size: 'sm' as const,\n transitionDuration: 200,\n};\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n const {\n className,\n disabled,\n data: _data,\n name,\n value,\n onChange,\n color,\n fullWidth,\n radius,\n size,\n transitionDuration,\n transitionTimingFunction,\n classNames,\n styles,\n defaultValue,\n orientation,\n unstyled,\n variant,\n readOnly,\n ...others\n } = useComponentDefaultProps('SegmentedControl', defaultProps, props);\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n\n const data = _data.map(\n (item: string | SegmentedControlItem): SegmentedControlItem =>\n typeof item === 'string' ? { label: item, value: item } : item\n );\n const mounted = useRef<Boolean>();\n\n const [shouldAnimate, setShouldAnimate] = useState(false);\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data)\n ? data.find((item) => !item.disabled)?.value ?? data[0]?.value ?? null\n : null,\n onChange,\n });\n\n const { classes, cx } = useStyles(\n {\n fullWidth,\n color,\n radius,\n shouldAnimate: reduceMotion || !shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n orientation,\n },\n { name: 'SegmentedControl', classNames, styles, unstyled, variant, size }\n );\n\n const [activePosition, setActivePosition] = useState({\n width: 0,\n height: 0,\n translate: [0, 0],\n });\n const uuid = useId(name);\n const refs = useRef<Record<string, HTMLLabelElement>>({});\n const [observerRef, containerRect] = useResizeObserver();\n\n useIsomorphicEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n setShouldAnimate(false);\n } else {\n setShouldAnimate(true);\n }\n });\n\n useEffect(() => {\n if (_value in refs.current && observerRef.current) {\n const element = refs.current[_value];\n const elementRect = element.getBoundingClientRect();\n const scaledValue = element.offsetWidth / elementRect.width;\n const width = elementRect.width * scaledValue || 0;\n const height = elementRect.height * scaledValue || 0;\n\n const offsetRight =\n containerRect.width - element.parentElement.offsetLeft + WRAPPER_PADDING - width;\n const offsetLeft = element.parentElement.offsetLeft - WRAPPER_PADDING;\n\n setActivePosition({\n width,\n height,\n translate: [\n theme.dir === 'rtl' ? offsetRight : offsetLeft,\n element.parentElement.offsetTop - WRAPPER_PADDING,\n ],\n });\n }\n }, [_value, containerRect]);\n\n const controls = data.map((item) => (\n <div\n className={cx(classes.control, { [classes.controlActive]: _value === item.value })}\n key={item.value}\n >\n <input\n className={classes.input}\n disabled={disabled || item.disabled}\n type=\"radio\"\n name={uuid}\n value={item.value}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => !readOnly && handleValueChange(item.value)}\n />\n\n <label\n className={classes.label}\n data-active={(_value === item.value && !(disabled || item.disabled)) || undefined}\n data-disabled={disabled || item.disabled || undefined}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => {\n refs.current[item.value] = node;\n }}\n >\n {item.label}\n </label>\n </div>\n ));\n\n const mergedRef = useMergedRef(observerRef, ref);\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n <Box className={cx(classes.root, className)} ref={mergedRef} {...others}>\n {typeof _value === 'string' && shouldAnimate && (\n <Box\n component=\"span\"\n className={classes.indicator}\n sx={{\n width: activePosition.width,\n height: activePosition.height,\n transform: `translate(${activePosition.translate[0]}px, ${activePosition.translate[1]}px)`,\n }}\n />\n )}\n\n {controls}\n </Box>\n );\n});\n\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useMantineTheme","useReducedMotion","useRef","useState","useUncontrolled","useStyles","useId","useResizeObserver","useIsomorphicEffect","useEffect","WRAPPER_PADDING","React","useMergedRef","Box"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, forwardRef } from 'react';\nimport {\n useReducedMotion,\n useResizeObserver,\n useUncontrolled,\n useId,\n useMergedRef,\n useIsomorphicEffect,\n} from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineSize,\n MantineColor,\n Selectors,\n useComponentDefaultProps,\n useMantineTheme,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, {\n WRAPPER_PADDING,\n SegmentedControlStylesParams,\n} from './SegmentedControl.styles';\n\nexport interface SegmentedControlItem {\n value: string;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport type SegmentedControlStylesNames = Selectors<typeof useStyles>;\n\nexport interface SegmentedControlProps\n extends DefaultProps<SegmentedControlStylesNames, SegmentedControlStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n variant?: string;\n\n /** Segments to render */\n data: string[] | SegmentedControlItem[];\n\n /** Current selected value */\n value?: string;\n\n /** Disabled input state */\n disabled?: boolean;\n\n /** Called when value changes */\n onChange?(value: string): void;\n\n /** Name of the radio group, default to random id */\n name?: string;\n\n /** True if component should have 100% width */\n fullWidth?: boolean;\n\n /** Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark */\n color?: MantineColor;\n\n /** Controls font-size, paddings and height */\n size?: MantineSize;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Transition duration in ms, set to 0 to turn off transitions */\n transitionDuration?: number;\n\n /** Transition timing function for all transitions, defaults to theme.transitionTimingFunction */\n transitionTimingFunction?: string;\n\n /** Default value for uncontrolled component */\n defaultValue?: string;\n\n /** The orientation of the component */\n orientation?: 'vertical' | 'horizontal';\n\n /** Determines whether the user can change value */\n readOnly?: boolean;\n}\n\nconst defaultProps = {\n disabled: false,\n size: 'sm' as const,\n transitionDuration: 200,\n};\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n const {\n className,\n disabled,\n data: _data,\n name,\n value,\n onChange,\n color,\n fullWidth,\n radius,\n size,\n transitionDuration,\n transitionTimingFunction,\n classNames,\n styles,\n defaultValue,\n orientation,\n unstyled,\n variant,\n readOnly,\n ...others\n } = useComponentDefaultProps('SegmentedControl', defaultProps, props);\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n\n const data = _data.map(\n (item: string | SegmentedControlItem): SegmentedControlItem =>\n typeof item === 'string' ? { label: item, value: item } : item\n );\n const mounted = useRef<Boolean>();\n\n const [shouldAnimate, setShouldAnimate] = useState(false);\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data)\n ? data.find((item) => !item.disabled)?.value ?? data[0]?.value ?? null\n : null,\n onChange,\n });\n\n const { classes, cx } = useStyles(\n {\n fullWidth,\n color,\n radius,\n shouldAnimate: reduceMotion || !shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n orientation,\n },\n { name: 'SegmentedControl', classNames, styles, unstyled, variant, size }\n );\n\n const [activePosition, setActivePosition] = useState({\n width: 0,\n height: 0,\n translate: [0, 0],\n });\n const uuid = useId(name);\n const refs = useRef<Record<string, HTMLLabelElement>>({});\n const [observerRef, containerRect] = useResizeObserver();\n\n useIsomorphicEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n setShouldAnimate(false);\n } else {\n setShouldAnimate(true);\n }\n });\n\n useEffect(() => {\n if (_value in refs.current && observerRef.current) {\n const element = refs.current[_value];\n const elementRect = element.getBoundingClientRect();\n const scaledValue = element.offsetWidth / elementRect.width;\n const width = elementRect.width * scaledValue || 0;\n const height = elementRect.height * scaledValue || 0;\n\n const offsetRight =\n containerRect.width - element.parentElement.offsetLeft + WRAPPER_PADDING - width;\n const offsetLeft = element.parentElement.offsetLeft - WRAPPER_PADDING;\n\n setActivePosition({\n width,\n height,\n translate: [\n theme.dir === 'rtl' ? offsetRight : offsetLeft,\n element.parentElement.offsetTop - WRAPPER_PADDING,\n ],\n });\n }\n }, [_value, containerRect]);\n\n const controls = data.map((item) => (\n <div\n className={cx(classes.control, { [classes.controlActive]: _value === item.value })}\n key={item.value}\n >\n <input\n className={classes.input}\n disabled={disabled || item.disabled}\n type=\"radio\"\n name={uuid}\n value={item.value}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => !readOnly && handleValueChange(item.value)}\n />\n\n <label\n className={classes.label}\n data-active={(_value === item.value && !(disabled || item.disabled)) || undefined}\n data-disabled={disabled || item.disabled || undefined}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => {\n refs.current[item.value] = node;\n }}\n >\n {item.label}\n </label>\n </div>\n ));\n\n const mergedRef = useMergedRef(observerRef, ref);\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n <Box className={cx(classes.root, className)} ref={mergedRef} {...others}>\n {typeof _value === 'string' && shouldAnimate && (\n <Box\n component=\"span\"\n className={classes.indicator}\n sx={{\n width: activePosition.width,\n height: activePosition.height,\n transform: `translate(${activePosition.translate[0]}px, ${activePosition.translate[1]}px)`,\n }}\n />\n )}\n\n {controls}\n </Box>\n );\n});\n\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useMantineTheme","useReducedMotion","useRef","useState","useUncontrolled","useStyles","useId","useResizeObserver","useIsomorphicEffect","useEffect","WRAPPER_PADDING","React","useMergedRef","Box"],"mappings":"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"}
|
|
@@ -66,7 +66,8 @@ var useStyles = styles.createStyles((theme, {
|
|
|
66
66
|
"&[data-disabled]": {
|
|
67
67
|
"&, &:hover": {
|
|
68
68
|
color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
|
|
69
|
-
cursor: "not-allowed"
|
|
69
|
+
cursor: "not-allowed",
|
|
70
|
+
pointerEvents: "none"
|
|
70
71
|
}
|
|
71
72
|
},
|
|
72
73
|
"&[data-active]": {
|
|
@@ -101,6 +102,13 @@ var useStyles = styles.createStyles((theme, {
|
|
|
101
102
|
"&:focus:not(:focus-visible)": {
|
|
102
103
|
[`& + .${styles.getStylesRef("label")}`]: __spreadValues({}, theme.focusRing === "auto" || theme.focusRing === "never" ? theme.focusRingStyles.resetStyles(theme) : null)
|
|
103
104
|
}
|
|
105
|
+
},
|
|
106
|
+
"&:disabled + label": {
|
|
107
|
+
"&, &:hover": {
|
|
108
|
+
color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
|
|
109
|
+
cursor: "not-allowed",
|
|
110
|
+
pointerEvents: "none"
|
|
111
|
+
}
|
|
104
112
|
}
|
|
105
113
|
},
|
|
106
114
|
root: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.styles.js","sources":["../../src/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, getStylesRef, rem } from '@mantine/styles';\n\nexport const WRAPPER_PADDING = 4;\n\nexport interface SegmentedControlStylesParams {\n fullWidth: boolean;\n color: MantineColor;\n radius: MantineNumberSize;\n shouldAnimate: boolean;\n transitionDuration: number;\n transitionTimingFunction: string;\n orientation: 'vertical' | 'horizontal';\n}\n\nconst sizes = {\n xs: `${rem(3)} ${rem(6)}`,\n sm: `${rem(5)} ${rem(10)}`,\n md: `${rem(7)} ${rem(14)}`,\n lg: `${rem(9)} ${rem(16)}`,\n xl: `${rem(12)} ${rem(20)}`,\n};\n\nexport default createStyles(\n (\n theme,\n {\n fullWidth,\n color,\n radius,\n shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n orientation,\n }: SegmentedControlStylesParams,\n { size }\n ) => {\n const vertical = orientation === 'vertical';\n const colors = theme.fn.variant({ variant: 'filled', color });\n\n return {\n label: {\n ref: getStylesRef('label'),\n ...theme.fn.focusStyles(),\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n borderRadius: theme.fn.radius(radius),\n fontWeight: 500,\n fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,\n cursor: 'pointer',\n display: 'block',\n textAlign: 'center',\n padding: sizes[size in sizes ? size : 'sm'],\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'none',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction || theme.transitionTimingFunction\n }`,\n\n '&:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n\n '&[data-disabled]': {\n '&, &:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n cursor: 'not-allowed',\n },\n },\n\n '&[data-active]': {\n '&, &:hover': {\n color: color || theme.colorScheme === 'dark' ? theme.white : theme.black,\n },\n },\n },\n\n control: {\n ref: getStylesRef('control'),\n position: 'relative',\n boxSizing: 'border-box',\n flex: 1,\n zIndex: 2,\n transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction || theme.transitionTimingFunction\n }`,\n\n '&:not(:first-of-type)': {\n borderStyle: 'solid',\n borderWidth: vertical ? `${rem(1)} 0 0 0` : `0 0 0 ${rem(1)}`,\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n },\n },\n\n input: {\n height: 0,\n width: 0,\n position: 'absolute',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n opacity: 0,\n\n // input is hidden by default, these styles add focus to label when user navigates with keyboard\n '&:focus': {\n outline: 'none',\n\n [`& + .${getStylesRef('label')}`]: {\n ...(theme.focusRing === 'always' || theme.focusRing === 'auto'\n ? theme.focusRingStyles.styles(theme)\n : theme.focusRingStyles.resetStyles(theme)),\n },\n\n '&:focus:not(:focus-visible)': {\n [`& + .${getStylesRef('label')}`]: {\n ...(theme.focusRing === 'auto' || theme.focusRing === 'never'\n ? theme.focusRingStyles.resetStyles(theme)\n : null),\n },\n },\n },\n },\n\n root: {\n position: 'relative',\n display: fullWidth || vertical ? 'flex' : 'inline-flex',\n width: vertical && !fullWidth ? 'max-content' : 'auto',\n flexDirection: vertical ? 'column' : 'row',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],\n borderRadius: theme.fn.radius(radius),\n overflow: 'hidden',\n padding: WRAPPER_PADDING,\n },\n\n controlActive: {\n borderLeftColor: 'transparent !important',\n borderTopColor: 'transparent !important',\n\n [`& + .${getStylesRef('control')}`]: {\n [vertical ? 'borderTopColor' : 'borderLeftColor']: 'transparent !important',\n },\n borderRadius: theme.fn.radius(radius),\n boxShadow: shouldAnimate\n ? color || theme.colorScheme === 'dark'\n ? 'none'\n : theme.shadows.xs\n : undefined,\n backgroundColor: shouldAnimate\n ? color\n ? colors.background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[5]\n : theme.white\n : undefined,\n },\n\n indicator: {\n boxSizing: 'border-box',\n borderRadius: theme.fn.radius(radius),\n position: 'absolute',\n zIndex: 1,\n boxShadow: color || theme.colorScheme === 'dark' ? 'none' : theme.shadows.xs,\n transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${\n theme.transitionTimingFunction\n }, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${\n transitionTimingFunction || theme.transitionTimingFunction\n }`,\n backgroundColor: color\n ? colors.background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[5]\n : theme.white,\n },\n };\n }\n);\n"],"names":["rem","createStyles","getStylesRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControl.styles.js","sources":["../../src/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, getStylesRef, rem } from '@mantine/styles';\n\nexport const WRAPPER_PADDING = 4;\n\nexport interface SegmentedControlStylesParams {\n fullWidth: boolean;\n color: MantineColor;\n radius: MantineNumberSize;\n shouldAnimate: boolean;\n transitionDuration: number;\n transitionTimingFunction: string;\n orientation: 'vertical' | 'horizontal';\n}\n\nconst sizes = {\n xs: `${rem(3)} ${rem(6)}`,\n sm: `${rem(5)} ${rem(10)}`,\n md: `${rem(7)} ${rem(14)}`,\n lg: `${rem(9)} ${rem(16)}`,\n xl: `${rem(12)} ${rem(20)}`,\n};\n\nexport default createStyles(\n (\n theme,\n {\n fullWidth,\n color,\n radius,\n shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n orientation,\n }: SegmentedControlStylesParams,\n { size }\n ) => {\n const vertical = orientation === 'vertical';\n const colors = theme.fn.variant({ variant: 'filled', color });\n\n return {\n label: {\n ref: getStylesRef('label'),\n ...theme.fn.focusStyles(),\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n borderRadius: theme.fn.radius(radius),\n fontWeight: 500,\n fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,\n cursor: 'pointer',\n display: 'block',\n textAlign: 'center',\n padding: sizes[size in sizes ? size : 'sm'],\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'none',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction || theme.transitionTimingFunction\n }`,\n\n '&:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n\n '&[data-disabled]': {\n '&, &:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n cursor: 'not-allowed',\n pointerEvents: 'none',\n },\n },\n\n '&[data-active]': {\n '&, &:hover': {\n color: color || theme.colorScheme === 'dark' ? theme.white : theme.black,\n },\n },\n },\n\n control: {\n ref: getStylesRef('control'),\n position: 'relative',\n boxSizing: 'border-box',\n flex: 1,\n zIndex: 2,\n transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction || theme.transitionTimingFunction\n }`,\n\n '&:not(:first-of-type)': {\n borderStyle: 'solid',\n borderWidth: vertical ? `${rem(1)} 0 0 0` : `0 0 0 ${rem(1)}`,\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n },\n },\n\n input: {\n height: 0,\n width: 0,\n position: 'absolute',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n opacity: 0,\n\n // input is hidden by default, these styles add focus to label when user navigates with keyboard\n '&:focus': {\n outline: 'none',\n\n [`& + .${getStylesRef('label')}`]: {\n ...(theme.focusRing === 'always' || theme.focusRing === 'auto'\n ? theme.focusRingStyles.styles(theme)\n : theme.focusRingStyles.resetStyles(theme)),\n },\n\n '&:focus:not(:focus-visible)': {\n [`& + .${getStylesRef('label')}`]: {\n ...(theme.focusRing === 'auto' || theme.focusRing === 'never'\n ? theme.focusRingStyles.resetStyles(theme)\n : null),\n },\n },\n },\n\n '&:disabled + label': {\n '&, &:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n cursor: 'not-allowed',\n pointerEvents: 'none',\n },\n },\n },\n\n root: {\n position: 'relative',\n display: fullWidth || vertical ? 'flex' : 'inline-flex',\n width: vertical && !fullWidth ? 'max-content' : 'auto',\n flexDirection: vertical ? 'column' : 'row',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],\n borderRadius: theme.fn.radius(radius),\n overflow: 'hidden',\n padding: WRAPPER_PADDING,\n },\n\n controlActive: {\n borderLeftColor: 'transparent !important',\n borderTopColor: 'transparent !important',\n\n [`& + .${getStylesRef('control')}`]: {\n [vertical ? 'borderTopColor' : 'borderLeftColor']: 'transparent !important',\n },\n borderRadius: theme.fn.radius(radius),\n boxShadow: shouldAnimate\n ? color || theme.colorScheme === 'dark'\n ? 'none'\n : theme.shadows.xs\n : undefined,\n backgroundColor: shouldAnimate\n ? color\n ? colors.background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[5]\n : theme.white\n : undefined,\n },\n\n indicator: {\n boxSizing: 'border-box',\n borderRadius: theme.fn.radius(radius),\n position: 'absolute',\n zIndex: 1,\n boxShadow: color || theme.colorScheme === 'dark' ? 'none' : theme.shadows.xs,\n transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${\n theme.transitionTimingFunction\n }, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${\n transitionTimingFunction || theme.transitionTimingFunction\n }`,\n backgroundColor: color\n ? colors.background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[5]\n : theme.white,\n },\n };\n }\n);\n"],"names":["rem","createStyles","getStylesRef"],"mappings":"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"}
|
|
@@ -9,7 +9,13 @@ var useStyles = styles.createStyles((theme, { color, disabled, thumbSize }, { si
|
|
|
9
9
|
marksContainer: {
|
|
10
10
|
position: "absolute",
|
|
11
11
|
right: thumbSize ? styles.rem(thumbSize / 2) : styles.getSize({ sizes: SliderRoot_styles.sizes, size }),
|
|
12
|
-
left: thumbSize ? styles.rem(thumbSize / 2) : styles.getSize({ sizes: SliderRoot_styles.sizes, size })
|
|
12
|
+
left: thumbSize ? styles.rem(thumbSize / 2) : styles.getSize({ sizes: SliderRoot_styles.sizes, size }),
|
|
13
|
+
"&:has(~ input:disabled)": {
|
|
14
|
+
"& .mantine-Slider-markFilled": {
|
|
15
|
+
border: `${styles.rem(2)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
|
|
16
|
+
borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
|
|
17
|
+
}
|
|
18
|
+
}
|
|
13
19
|
},
|
|
14
20
|
markWrapper: {
|
|
15
21
|
position: "absolute",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Marks.styles.js","sources":["../../../src/Slider/Marks/Marks.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, rem, getSize } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface MarksStyles {\n color: MantineColor;\n disabled: boolean;\n thumbSize?: number;\n}\n\nexport default createStyles((theme, { color, disabled, thumbSize }: MarksStyles, { size }) => ({\n marksContainer: {\n position: 'absolute',\n right: thumbSize ? rem(thumbSize / 2) : getSize({ sizes, size }),\n left: thumbSize ? rem(thumbSize / 2) : getSize({ sizes, size }),\n },\n\n markWrapper: {\n position: 'absolute',\n top: `calc(${rem(getSize({ sizes, size }))} / 2)`,\n zIndex: 2,\n height: 0,\n },\n\n mark: {\n boxSizing: 'border-box',\n border: `${rem(2)} solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n }`,\n height: getSize({ sizes, size }),\n width: getSize({ sizes, size }),\n borderRadius: 1000,\n transform: `translateX(calc(-${getSize({ sizes, size })} / 2))`,\n backgroundColor: theme.white,\n pointerEvents: 'none',\n },\n\n markFilled: {\n borderColor: disabled\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.fn.variant({ variant: 'filled', color }).background,\n },\n\n markLabel: {\n transform: `translate(-50%, calc(${theme.spacing.xs} / 2))`,\n fontSize: theme.fontSizes.sm,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n userSelect: 'none',\n },\n}));\n"],"names":["createStyles","rem","getSize","sizes"],"mappings":";;;;;;;AAEA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM;AAClF,EAAE,cAAc,EAAE;AAClB,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,KAAK,EAAE,SAAS,GAAGC,UAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAGC,cAAO,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC;AACpE,IAAI,IAAI,EAAE,SAAS,GAAGF,UAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAGC,cAAO,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC;AACnE,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"Marks.styles.js","sources":["../../../src/Slider/Marks/Marks.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, rem, getSize } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface MarksStyles {\n color: MantineColor;\n disabled: boolean;\n thumbSize?: number;\n}\n\nexport default createStyles((theme, { color, disabled, thumbSize }: MarksStyles, { size }) => ({\n marksContainer: {\n position: 'absolute',\n right: thumbSize ? rem(thumbSize / 2) : getSize({ sizes, size }),\n left: thumbSize ? rem(thumbSize / 2) : getSize({ sizes, size }),\n\n '&:has(~ input:disabled)': {\n '& .mantine-Slider-markFilled': {\n border: `${rem(2)} solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n }`,\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n },\n },\n },\n\n markWrapper: {\n position: 'absolute',\n top: `calc(${rem(getSize({ sizes, size }))} / 2)`,\n zIndex: 2,\n height: 0,\n },\n\n mark: {\n boxSizing: 'border-box',\n border: `${rem(2)} solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n }`,\n height: getSize({ sizes, size }),\n width: getSize({ sizes, size }),\n borderRadius: 1000,\n transform: `translateX(calc(-${getSize({ sizes, size })} / 2))`,\n backgroundColor: theme.white,\n pointerEvents: 'none',\n },\n\n markFilled: {\n borderColor: disabled\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.fn.variant({ variant: 'filled', color }).background,\n },\n\n markLabel: {\n transform: `translate(-50%, calc(${theme.spacing.xs} / 2))`,\n fontSize: theme.fontSizes.sm,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n userSelect: 'none',\n },\n}));\n"],"names":["createStyles","rem","getSize","sizes"],"mappings":"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"}
|
|
@@ -11,7 +11,22 @@ var useStyles = styles.createStyles((theme, { radius, color, disabled, inverted,
|
|
|
11
11
|
alignItems: "center",
|
|
12
12
|
width: "100%",
|
|
13
13
|
height: `calc(${styles.getSize({ sizes: SliderRoot_styles.sizes, size })} * 2)`,
|
|
14
|
-
cursor: "pointer"
|
|
14
|
+
cursor: "pointer",
|
|
15
|
+
"&:has(~ input:disabled)": {
|
|
16
|
+
"&": {
|
|
17
|
+
pointerEvents: "none"
|
|
18
|
+
},
|
|
19
|
+
"& .mantine-Slider-thumb": {
|
|
20
|
+
display: "none"
|
|
21
|
+
},
|
|
22
|
+
"& .mantine-Slider-track::before": {
|
|
23
|
+
content: '""',
|
|
24
|
+
backgroundColor: inverted ? theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4] : theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]
|
|
25
|
+
},
|
|
26
|
+
"& .mantine-Slider-bar": {
|
|
27
|
+
backgroundColor: inverted ? theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2] : theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]
|
|
28
|
+
}
|
|
29
|
+
}
|
|
15
30
|
},
|
|
16
31
|
track: {
|
|
17
32
|
position: "relative",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Track.styles.js","sources":["../../../src/Slider/Track/Track.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, getSize, rem } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface TrackStyles {\n radius: MantineNumberSize;\n color: MantineColor;\n disabled: boolean;\n inverted: boolean;\n thumbSize?: number;\n}\n\nexport default createStyles(\n (theme, { radius, color, disabled, inverted, thumbSize }: TrackStyles, { size }) => ({\n trackContainer: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n height: `calc(${getSize({ sizes, size })} * 2)`,\n cursor: 'pointer',\n },\n\n track: {\n position: 'relative',\n height: getSize({ sizes, size }),\n width: '100%',\n marginRight: thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes }),\n marginLeft: thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes }),\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n borderRadius: theme.fn.radius(radius),\n right: `calc(${thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes })} * -1)`,\n left: `calc(${thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes })} * -1)`,\n backgroundColor: inverted\n ? disabled\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.fn.variant({ variant: 'filled', color }).background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[2],\n zIndex: 0,\n },\n },\n\n bar: {\n position: 'absolute',\n zIndex: 1,\n top: 0,\n bottom: 0,\n backgroundColor: inverted\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[2]\n : disabled\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.fn.variant({ variant: 'filled', color }).background,\n borderRadius: theme.fn.radius(radius),\n },\n })\n);\n"],"names":["createStyles","getSize","sizes","rem"],"mappings":";;;;;;;AAEA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM;AACpG,EAAE,cAAc,EAAE;AAClB,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAEC,cAAO,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC;AACnD,IAAI,MAAM,EAAE,SAAS;AACrB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAED,cAAO,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC;AACpC,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,WAAW,EAAE,SAAS,GAAGC,UAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAGF,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC;AAC1E,IAAI,UAAU,EAAE,SAAS,GAAGC,UAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAGF,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC;AACzE,IAAI,WAAW,EAAE;AACjB,MAAM,OAAO,EAAE,IAAI;AACnB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AAC3C,MAAM,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,GAAGC,UAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAGF,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC,CAAC,MAAM,CAAC;AACtF,MAAM,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,GAAGC,UAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAGF,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC,CAAC,MAAM,CAAC;AACrF,MAAM,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAChQ,MAAM,MAAM,EAAE,CAAC;AACf,KAAK;AACL,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,eAAe,EAAE,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU;AAC9P,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Track.styles.js","sources":["../../../src/Slider/Track/Track.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, getSize, rem } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface TrackStyles {\n radius: MantineNumberSize;\n color: MantineColor;\n disabled: boolean;\n inverted: boolean;\n thumbSize?: number;\n}\n\nexport default createStyles(\n (theme, { radius, color, disabled, inverted, thumbSize }: TrackStyles, { size }) => ({\n trackContainer: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n height: `calc(${getSize({ sizes, size })} * 2)`,\n cursor: 'pointer',\n\n '&:has(~ input:disabled)': {\n '&': {\n pointerEvents: 'none',\n },\n\n '& .mantine-Slider-thumb': {\n display: 'none',\n },\n\n '& .mantine-Slider-track::before': {\n content: '\"\"',\n backgroundColor: inverted\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[2],\n },\n\n '& .mantine-Slider-bar': {\n backgroundColor: inverted\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[2]\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4],\n },\n },\n },\n\n track: {\n position: 'relative',\n height: getSize({ sizes, size }),\n width: '100%',\n marginRight: thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes }),\n marginLeft: thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes }),\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n borderRadius: theme.fn.radius(radius),\n right: `calc(${thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes })} * -1)`,\n left: `calc(${thumbSize ? rem(thumbSize / 2) : getSize({ size, sizes })} * -1)`,\n backgroundColor: inverted\n ? disabled\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.fn.variant({ variant: 'filled', color }).background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[2],\n zIndex: 0,\n },\n },\n\n bar: {\n position: 'absolute',\n zIndex: 1,\n top: 0,\n bottom: 0,\n backgroundColor: inverted\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[2]\n : disabled\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[3]\n : theme.colors.gray[4]\n : theme.fn.variant({ variant: 'filled', color }).background,\n borderRadius: theme.fn.radius(radius),\n },\n })\n);\n"],"names":["createStyles","getSize","sizes","rem"],"mappings":"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"}
|
|
@@ -114,7 +114,8 @@ var useStyles = styles.createStyles((theme, { radius, color, labelPosition, erro
|
|
|
114
114
|
"input:disabled + &": {
|
|
115
115
|
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
|
|
116
116
|
borderColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
|
|
117
|
-
cursor: "not-allowed"
|
|
117
|
+
cursor: "not-allowed",
|
|
118
|
+
pointerEvents: "none"
|
|
118
119
|
}
|
|
119
120
|
}),
|
|
120
121
|
thumb: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.styles.js","sources":["../../src/Switch/Switch.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, rem, getSize } from '@mantine/styles';\n\nexport interface SwitchStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n labelPosition: 'left' | 'right';\n error: boolean;\n}\n\nconst switchHeight = {\n xs: rem(16),\n sm: rem(20),\n md: rem(24),\n lg: rem(30),\n xl: rem(36),\n};\n\nconst switchWidth = {\n xs: rem(32),\n sm: rem(38),\n md: rem(46),\n lg: rem(56),\n xl: rem(72),\n};\n\nconst handleSizes = {\n xs: rem(12),\n sm: rem(14),\n md: rem(18),\n lg: rem(22),\n xl: rem(28),\n};\n\nconst labelFontSizes = {\n xs: rem(5),\n sm: rem(6),\n md: rem(7),\n lg: rem(9),\n xl: rem(11),\n};\n\nconst trackLabelPaddings = {\n xs: rem(4),\n sm: rem(5),\n md: rem(6),\n lg: rem(8),\n xl: rem(10),\n};\n\nexport default createStyles(\n (theme, { radius, color, labelPosition, error }: SwitchStylesParams, { size }) => {\n const handleSize = getSize({ size, sizes: handleSizes });\n const borderRadius = getSize({ size: radius, sizes: theme.radius });\n const colors = theme.fn.variant({ variant: 'filled', color });\n const trackWidth = getSize({ size, sizes: switchWidth });\n const trackPadding = rem(size === 'xs' ? 1 : 2);\n const errorColor = theme.fn.variant({ variant: 'filled', color: 'red' }).background;\n\n return {\n root: {\n position: 'relative',\n },\n\n input: {\n height: 0,\n width: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n padding: 0,\n WebkitClipPath: 'inset(50%)',\n clipPath: 'inset(50%)',\n position: 'absolute',\n },\n\n track: {\n ...theme.fn.focusStyles('input:focus + &'),\n cursor: theme.cursorType,\n overflow: 'hidden',\n WebkitTapHighlightColor: 'transparent',\n position: 'relative',\n borderRadius,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],\n border: `${rem(1)} solid ${\n error\n ? errorColor\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[3]\n }`,\n height: getSize({ size, sizes: switchHeight }),\n minWidth: trackWidth,\n margin: 0,\n transitionProperty: 'background-color, border-color',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: '150ms',\n boxSizing: 'border-box',\n appearance: 'none',\n display: 'flex',\n alignItems: 'center',\n fontSize: getSize({ size, sizes: labelFontSizes }),\n fontWeight: 600,\n order: labelPosition === 'left' ? 2 : 1,\n userSelect: 'none',\n zIndex: 0,\n lineHeight: 0,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],\n transition: `color 150ms ${theme.transitionTimingFunction}`,\n\n 'input:checked + &': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n color: theme.white,\n transition: `color 150ms ${theme.transitionTimingFunction}`,\n },\n\n 'input:disabled + &': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n cursor: 'not-allowed',\n },\n },\n\n thumb: {\n position: 'absolute',\n zIndex: 1,\n borderRadius,\n boxSizing: 'border-box',\n display: 'flex',\n backgroundColor: theme.white,\n height: handleSize,\n width: handleSize,\n border: `${rem(1)} solid ${\n theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[3]\n }`,\n left: trackPadding,\n transition: `left 150ms ${theme.transitionTimingFunction}`,\n\n '& > *': {\n margin: 'auto',\n },\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : '',\n },\n\n 'input:checked + * > &': {\n left: `calc(100% - ${handleSize} - ${trackPadding})`,\n borderColor: theme.white,\n },\n\n 'input:disabled + * > &': {\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],\n },\n },\n\n trackLabel: {\n height: '100%',\n display: 'grid',\n placeContent: 'center',\n\n minWidth: `calc(${trackWidth} - ${handleSize})`,\n paddingInline: getSize({ size, sizes: trackLabelPaddings }),\n margin: `0 0 0 calc(${handleSize} + ${trackPadding})`,\n transition: `margin 150ms ${theme.transitionTimingFunction}`,\n\n 'input:checked + * > &': {\n margin: `0 calc(${handleSize} + ${trackPadding}) 0 0`,\n },\n },\n };\n }\n);\n"],"names":["rem","createStyles","getSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Switch.styles.js","sources":["../../src/Switch/Switch.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, rem, getSize } from '@mantine/styles';\n\nexport interface SwitchStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n labelPosition: 'left' | 'right';\n error: boolean;\n}\n\nconst switchHeight = {\n xs: rem(16),\n sm: rem(20),\n md: rem(24),\n lg: rem(30),\n xl: rem(36),\n};\n\nconst switchWidth = {\n xs: rem(32),\n sm: rem(38),\n md: rem(46),\n lg: rem(56),\n xl: rem(72),\n};\n\nconst handleSizes = {\n xs: rem(12),\n sm: rem(14),\n md: rem(18),\n lg: rem(22),\n xl: rem(28),\n};\n\nconst labelFontSizes = {\n xs: rem(5),\n sm: rem(6),\n md: rem(7),\n lg: rem(9),\n xl: rem(11),\n};\n\nconst trackLabelPaddings = {\n xs: rem(4),\n sm: rem(5),\n md: rem(6),\n lg: rem(8),\n xl: rem(10),\n};\n\nexport default createStyles(\n (theme, { radius, color, labelPosition, error }: SwitchStylesParams, { size }) => {\n const handleSize = getSize({ size, sizes: handleSizes });\n const borderRadius = getSize({ size: radius, sizes: theme.radius });\n const colors = theme.fn.variant({ variant: 'filled', color });\n const trackWidth = getSize({ size, sizes: switchWidth });\n const trackPadding = rem(size === 'xs' ? 1 : 2);\n const errorColor = theme.fn.variant({ variant: 'filled', color: 'red' }).background;\n\n return {\n root: {\n position: 'relative',\n },\n\n input: {\n height: 0,\n width: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n padding: 0,\n WebkitClipPath: 'inset(50%)',\n clipPath: 'inset(50%)',\n position: 'absolute',\n },\n\n track: {\n ...theme.fn.focusStyles('input:focus + &'),\n cursor: theme.cursorType,\n overflow: 'hidden',\n WebkitTapHighlightColor: 'transparent',\n position: 'relative',\n borderRadius,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],\n border: `${rem(1)} solid ${\n error\n ? errorColor\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[3]\n }`,\n height: getSize({ size, sizes: switchHeight }),\n minWidth: trackWidth,\n margin: 0,\n transitionProperty: 'background-color, border-color',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: '150ms',\n boxSizing: 'border-box',\n appearance: 'none',\n display: 'flex',\n alignItems: 'center',\n fontSize: getSize({ size, sizes: labelFontSizes }),\n fontWeight: 600,\n order: labelPosition === 'left' ? 2 : 1,\n userSelect: 'none',\n zIndex: 0,\n lineHeight: 0,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],\n transition: `color 150ms ${theme.transitionTimingFunction}`,\n\n 'input:checked + &': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n color: theme.white,\n transition: `color 150ms ${theme.transitionTimingFunction}`,\n },\n\n 'input:disabled + &': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n cursor: 'not-allowed',\n pointerEvents: 'none',\n },\n },\n\n thumb: {\n position: 'absolute',\n zIndex: 1,\n borderRadius,\n boxSizing: 'border-box',\n display: 'flex',\n backgroundColor: theme.white,\n height: handleSize,\n width: handleSize,\n border: `${rem(1)} solid ${\n theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[3]\n }`,\n left: trackPadding,\n transition: `left 150ms ${theme.transitionTimingFunction}`,\n\n '& > *': {\n margin: 'auto',\n },\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : '',\n },\n\n 'input:checked + * > &': {\n left: `calc(100% - ${handleSize} - ${trackPadding})`,\n borderColor: theme.white,\n },\n\n 'input:disabled + * > &': {\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],\n },\n },\n\n trackLabel: {\n height: '100%',\n display: 'grid',\n placeContent: 'center',\n\n minWidth: `calc(${trackWidth} - ${handleSize})`,\n paddingInline: getSize({ size, sizes: trackLabelPaddings }),\n margin: `0 0 0 calc(${handleSize} + ${trackPadding})`,\n transition: `margin 150ms ${theme.transitionTimingFunction}`,\n\n 'input:checked + * > &': {\n margin: `0 calc(${handleSize} + ${trackPadding}) 0 0`,\n },\n },\n };\n }\n);\n"],"names":["rem","createStyles","getSize"],"mappings":"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"}
|
package/cjs/Tabs/Tab/Tab.js
CHANGED
|
@@ -66,6 +66,8 @@ const Tab = React.forwardRef((props, ref) => {
|
|
|
66
66
|
variant: ctx.variant
|
|
67
67
|
});
|
|
68
68
|
const isActive = value === ctx.value;
|
|
69
|
+
const panelId = ctx.getPanelId(value);
|
|
70
|
+
const ariaControls = ctx.mountedPanelIds.includes(value) ? panelId : void 0;
|
|
69
71
|
const activateTab = (event) => {
|
|
70
72
|
ctx.onTabChange(ctx.allowTabDeactivation ? value === ctx.value ? null : value : value);
|
|
71
73
|
onClick == null ? void 0 : onClick(event);
|
|
@@ -80,7 +82,7 @@ const Tab = React.forwardRef((props, ref) => {
|
|
|
80
82
|
id: ctx.getTabId(value),
|
|
81
83
|
"aria-selected": isActive,
|
|
82
84
|
tabIndex: isActive || ctx.value === null ? 0 : -1,
|
|
83
|
-
"aria-controls":
|
|
85
|
+
"aria-controls": ariaControls,
|
|
84
86
|
onClick: activateTab,
|
|
85
87
|
onKeyDown: utils.createScopedKeydownHandler({
|
|
86
88
|
siblingSelector: '[role="tab"]',
|
package/cjs/Tabs/Tab/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, Selectors, MantineColor, useComponentDefaultProps } from '@mantine/styles';\nimport { createScopedKeydownHandler } from '@mantine/utils';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport useStyles from './Tab.styles';\n\nexport type TabStylesNames = Selectors<typeof useStyles>;\n\nexport interface TabProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {\n /** Value that is used to connect Tab with associated panel */\n value: string;\n\n /** Tab label */\n children?: React.ReactNode;\n\n /** Section of content displayed after label */\n rightSection?: React.ReactNode;\n\n /** Section of content displayed before label */\n icon?: React.ReactNode;\n\n /** Key of theme.colors */\n color?: MantineColor;\n}\n\nconst defaultProps: Partial<TabProps> = {};\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {\n const { value, children, onKeyDown, onClick, className, icon, rightSection, color, ...others } =\n useComponentDefaultProps('TabsTab', defaultProps, props);\n const ctx = useTabsContext();\n\n const hasIcon = !!icon;\n const hasRightSection = !!rightSection;\n\n const { theme, classes, cx } = useStyles(\n {\n withIcon: hasIcon || (hasRightSection && !children),\n withRightSection: hasRightSection || (hasIcon && !children),\n orientation: ctx.orientation,\n color: color || ctx.color,\n radius: ctx.radius,\n inverted: ctx.inverted,\n placement: ctx.placement,\n },\n {\n name: 'Tabs',\n unstyled: ctx.unstyled,\n classNames: ctx.classNames,\n styles: ctx.styles,\n variant: ctx.variant,\n }\n );\n\n const isActive = value === ctx.value;\n const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n ctx.onTabChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n onClick?.(event);\n };\n\n return (\n <UnstyledButton<'button'>\n {...others}\n unstyled={ctx.unstyled}\n className={cx(classes.tab, className)}\n data-active={isActive || undefined}\n ref={ref}\n type=\"button\"\n role=\"tab\"\n id={ctx.getTabId(value)}\n aria-selected={isActive}\n tabIndex={isActive || ctx.value === null ? 0 : -1}\n aria-controls={
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, Selectors, MantineColor, useComponentDefaultProps } from '@mantine/styles';\nimport { createScopedKeydownHandler } from '@mantine/utils';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport useStyles from './Tab.styles';\n\nexport type TabStylesNames = Selectors<typeof useStyles>;\n\nexport interface TabProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {\n /** Value that is used to connect Tab with associated panel */\n value: string;\n\n /** Tab label */\n children?: React.ReactNode;\n\n /** Section of content displayed after label */\n rightSection?: React.ReactNode;\n\n /** Section of content displayed before label */\n icon?: React.ReactNode;\n\n /** Key of theme.colors */\n color?: MantineColor;\n}\n\nconst defaultProps: Partial<TabProps> = {};\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {\n const { value, children, onKeyDown, onClick, className, icon, rightSection, color, ...others } =\n useComponentDefaultProps('TabsTab', defaultProps, props);\n const ctx = useTabsContext();\n\n const hasIcon = !!icon;\n const hasRightSection = !!rightSection;\n\n const { theme, classes, cx } = useStyles(\n {\n withIcon: hasIcon || (hasRightSection && !children),\n withRightSection: hasRightSection || (hasIcon && !children),\n orientation: ctx.orientation,\n color: color || ctx.color,\n radius: ctx.radius,\n inverted: ctx.inverted,\n placement: ctx.placement,\n },\n {\n name: 'Tabs',\n unstyled: ctx.unstyled,\n classNames: ctx.classNames,\n styles: ctx.styles,\n variant: ctx.variant,\n }\n );\n\n const isActive = value === ctx.value;\n const panelId = ctx.getPanelId(value);\n const ariaControls = ctx.mountedPanelIds.includes(value) ? panelId : undefined;\n const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n ctx.onTabChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n onClick?.(event);\n };\n\n return (\n <UnstyledButton<'button'>\n {...others}\n unstyled={ctx.unstyled}\n className={cx(classes.tab, className)}\n data-active={isActive || undefined}\n ref={ref}\n type=\"button\"\n role=\"tab\"\n id={ctx.getTabId(value)}\n aria-selected={isActive}\n tabIndex={isActive || ctx.value === null ? 0 : -1}\n aria-controls={ariaControls}\n onClick={activateTab}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[role=\"tab\"]',\n parentSelector: '[role=\"tablist\"]',\n activateOnFocus: ctx.activateTabWithKeyboard,\n loop: ctx.loop,\n dir: theme.dir,\n orientation: ctx.orientation,\n onKeyDown,\n })}\n >\n {icon && <span className={classes.tabIcon}>{icon}</span>}\n {children && <span className={classes.tabLabel}>{children}</span>}\n {rightSection && <span className={classes.tabRightSection}>{rightSection}</span>}\n </UnstyledButton>\n );\n});\n\nTab.displayName = '@mantine/core/Tab';\n"],"names":["forwardRef","useComponentDefaultProps","useTabsContext","useStyles","React","UnstyledButton","createScopedKeydownHandler"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.context.js","sources":["../../src/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext } from '@mantine/utils';\nimport { MantineColor, MantineNumberSize, ClassNames, Styles } from '@mantine/styles';\nimport {\n TabsOrientation,\n TabsPlacement,\n TabsValue,\n TabsVariant,\n TabsStylesParams,\n} from './Tabs.types';\nimport { TABS_ERRORS } from './Tabs.errors';\nimport type { TabsStylesNames } from './Tabs';\n\ninterface TabsContext {\n id: string;\n value: TabsValue;\n orientation: TabsOrientation;\n loop: boolean;\n activateTabWithKeyboard: boolean;\n allowTabDeactivation: boolean;\n onTabChange(value: TabsValue): void;\n getTabId(value: string): string;\n getPanelId(value: string): string;\n variant: TabsVariant;\n color: MantineColor;\n radius: MantineNumberSize;\n inverted: boolean;\n keepMounted: boolean;\n placement: TabsPlacement;\n classNames: ClassNames<TabsStylesNames>;\n styles: Styles<TabsStylesNames, TabsStylesParams>;\n unstyled: boolean;\n}\n\nexport const [TabsContextProvider, useTabsContext] = createSafeContext<TabsContext>(\n TABS_ERRORS.context\n);\n"],"names":["createSafeContext","TABS_ERRORS"],"mappings":";;;;;;;AAEY,MAAC,CAAC,mBAAmB,EAAE,cAAc,CAAC,GAAGA,uBAAiB,CAACC,uBAAW,CAAC,OAAO;;;;;"}
|
|
1
|
+
{"version":3,"file":"Tabs.context.js","sources":["../../src/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext } from '@mantine/utils';\nimport { MantineColor, MantineNumberSize, ClassNames, Styles } from '@mantine/styles';\nimport {\n TabsOrientation,\n TabsPlacement,\n TabsValue,\n TabsVariant,\n TabsStylesParams,\n} from './Tabs.types';\nimport { TABS_ERRORS } from './Tabs.errors';\nimport type { TabsStylesNames } from './Tabs';\n\ninterface TabsContext {\n id: string;\n value: TabsValue;\n orientation: TabsOrientation;\n loop: boolean;\n activateTabWithKeyboard: boolean;\n allowTabDeactivation: boolean;\n onTabChange(value: TabsValue): void;\n getTabId(value: string): string;\n getPanelId(value: string): string;\n setMountedPanelIds(values: string[] | ((oldValue: string[]) => string[])): void;\n mountedPanelIds: string[];\n variant: TabsVariant;\n color: MantineColor;\n radius: MantineNumberSize;\n inverted: boolean;\n keepMounted: boolean;\n placement: TabsPlacement;\n classNames: ClassNames<TabsStylesNames>;\n styles: Styles<TabsStylesNames, TabsStylesParams>;\n unstyled: boolean;\n}\n\nexport const [TabsContextProvider, useTabsContext] = createSafeContext<TabsContext>(\n TABS_ERRORS.context\n);\n"],"names":["createSafeContext","TABS_ERRORS"],"mappings":";;;;;;;AAEY,MAAC,CAAC,mBAAmB,EAAE,cAAc,CAAC,GAAGA,uBAAiB,CAACC,uBAAW,CAAC,OAAO;;;;;"}
|
|
@@ -61,14 +61,19 @@ const TabsPanel = React.forwardRef((props, ref) => {
|
|
|
61
61
|
styles: ctx.styles,
|
|
62
62
|
variant: ctx.variant
|
|
63
63
|
});
|
|
64
|
+
const panelId = ctx.getPanelId(value);
|
|
64
65
|
const active = ctx.value === value;
|
|
65
66
|
const content = ctx.keepMounted ? children : active ? children : null;
|
|
67
|
+
React.useEffect(() => {
|
|
68
|
+
ctx.setMountedPanelIds((prev) => [...prev, panelId]);
|
|
69
|
+
return ctx.setMountedPanelIds((prev) => prev.filter((id) => id !== panelId));
|
|
70
|
+
}, [panelId]);
|
|
66
71
|
return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadProps(__spreadValues({}, others), {
|
|
67
72
|
ref,
|
|
68
73
|
sx: [{ display: !active ? "none" : void 0 }, ...utils.packSx(sx)],
|
|
69
74
|
className: cx(classes.panel, className),
|
|
70
75
|
role: "tabpanel",
|
|
71
|
-
id:
|
|
76
|
+
id: panelId,
|
|
72
77
|
"aria-labelledby": ctx.getTabId(value)
|
|
73
78
|
}), content);
|
|
74
79
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanel.js","sources":["../../../src/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Selectors, DefaultProps, useComponentDefaultProps } from '@mantine/styles';\nimport { packSx } from '@mantine/utils';\nimport { Box } from '../../Box';\nimport { useTabsContext } from '../Tabs.context';\nimport useStyles from './TabsPanel.styles';\n\nexport type TabsPanelStylesNames = Selectors<typeof useStyles>;\n\nexport interface TabsPanelProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n /** Panel content */\n children: React.ReactNode;\n\n /** Value of associated control */\n value: string;\n}\n\nconst defaultProps: Partial<TabsPanelProps> = {};\n\nexport const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>((props, ref) => {\n const { value, children, sx, className, ...others } = useComponentDefaultProps(\n 'TabsPanel',\n defaultProps,\n props\n );\n\n const ctx = useTabsContext();\n const { classes, cx } = useStyles(\n {\n orientation: ctx.orientation,\n color: ctx.color,\n radius: ctx.radius,\n inverted: ctx.inverted,\n placement: ctx.placement,\n },\n {\n name: 'Tabs',\n unstyled: ctx.unstyled,\n classNames: ctx.classNames,\n styles: ctx.styles,\n variant: ctx.variant,\n }\n );\n\n const active = ctx.value === value;\n const content = ctx.keepMounted ? children : active ? children : null;\n\n return (\n <Box\n {...others}\n ref={ref}\n sx={[{ display: !active ? 'none' : undefined }, ...packSx(sx)]}\n className={cx(classes.panel, className)}\n role=\"tabpanel\"\n id={
|
|
1
|
+
{"version":3,"file":"TabsPanel.js","sources":["../../../src/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from 'react';\nimport { Selectors, DefaultProps, useComponentDefaultProps } from '@mantine/styles';\nimport { packSx } from '@mantine/utils';\nimport { Box } from '../../Box';\nimport { useTabsContext } from '../Tabs.context';\nimport useStyles from './TabsPanel.styles';\n\nexport type TabsPanelStylesNames = Selectors<typeof useStyles>;\n\nexport interface TabsPanelProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n /** Panel content */\n children: React.ReactNode;\n\n /** Value of associated control */\n value: string;\n}\n\nconst defaultProps: Partial<TabsPanelProps> = {};\n\nexport const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>((props, ref) => {\n const { value, children, sx, className, ...others } = useComponentDefaultProps(\n 'TabsPanel',\n defaultProps,\n props\n );\n\n const ctx = useTabsContext();\n const { classes, cx } = useStyles(\n {\n orientation: ctx.orientation,\n color: ctx.color,\n radius: ctx.radius,\n inverted: ctx.inverted,\n placement: ctx.placement,\n },\n {\n name: 'Tabs',\n unstyled: ctx.unstyled,\n classNames: ctx.classNames,\n styles: ctx.styles,\n variant: ctx.variant,\n }\n );\n\n const panelId = ctx.getPanelId(value);\n const active = ctx.value === value;\n const content = ctx.keepMounted ? children : active ? children : null;\n\n /** Set panel as mounted for id referencing */\n useEffect(() => {\n ctx.setMountedPanelIds((prev) => [...prev, panelId]);\n return ctx.setMountedPanelIds((prev) => prev.filter((id) => id !== panelId));\n }, [panelId]);\n\n return (\n <Box\n {...others}\n ref={ref}\n sx={[{ display: !active ? 'none' : undefined }, ...packSx(sx)]}\n className={cx(classes.panel, className)}\n role=\"tabpanel\"\n id={panelId}\n aria-labelledby={ctx.getTabId(value)}\n >\n {content}\n </Box>\n );\n});\n\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"names":["forwardRef","useComponentDefaultProps","useTabsContext","useStyles","useEffect","React","Box","packSx"],"mappings":"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"}
|
package/cjs/Tabs/TabsProvider.js
CHANGED
|
@@ -33,6 +33,7 @@ function TabsProvider({
|
|
|
33
33
|
unstyled
|
|
34
34
|
}) {
|
|
35
35
|
const uid = hooks.useId(id);
|
|
36
|
+
const [mountedPanelIds, setMountedPanelIds] = React.useState([]);
|
|
36
37
|
const [_value, onChange] = hooks.useUncontrolled({
|
|
37
38
|
value,
|
|
38
39
|
defaultValue,
|
|
@@ -50,6 +51,8 @@ function TabsProvider({
|
|
|
50
51
|
getTabId: utils.getSafeId(`${uid}-tab`, Tabs_errors.TABS_ERRORS.value),
|
|
51
52
|
getPanelId: utils.getSafeId(`${uid}-panel`, Tabs_errors.TABS_ERRORS.value),
|
|
52
53
|
onTabChange: onChange,
|
|
54
|
+
setMountedPanelIds,
|
|
55
|
+
mountedPanelIds,
|
|
53
56
|
allowTabDeactivation,
|
|
54
57
|
variant,
|
|
55
58
|
color,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsProvider.js","sources":["../../src/Tabs/TabsProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { getSafeId } from '@mantine/utils';\nimport { useUncontrolled, useId } from '@mantine/hooks';\nimport { ClassNames, MantineColor, MantineNumberSize, Styles } from '@mantine/styles';\nimport { TabsContextProvider } from './Tabs.context';\nimport { TABS_ERRORS } from './Tabs.errors';\nimport {\n TabsValue,\n TabsOrientation,\n TabsVariant,\n TabsPlacement,\n TabsStylesParams,\n} from './Tabs.types';\nimport type { TabsStylesNames } from './Tabs';\n\nexport interface TabsProviderProps {\n /** Default value for uncontrolled component */\n defaultValue?: TabsValue;\n\n /** Value for controlled component */\n value?: TabsValue;\n\n /** Callback for controlled component */\n onTabChange?(value: TabsValue): void;\n\n /** Tabs orientation, vertical or horizontal */\n orientation?: TabsOrientation;\n\n /** Tabs.List placement relative to Tabs.Panel, applicable only for orientation=\"vertical\", left by default */\n placement?: TabsPlacement;\n\n /** Base id, used to generate ids that connect labels with controls, by default generated randomly */\n id?: string;\n\n /** Determines whether arrow key presses should loop though items (first to last and last to first) */\n loop?: boolean;\n\n /** Determines whether tab should be activated with arrow key press, defaults to true */\n activateTabWithKeyboard?: boolean;\n\n /** Determines whether tab can be deactivated, defaults to false */\n allowTabDeactivation?: boolean;\n\n /** Tabs content */\n children: React.ReactNode;\n\n /** Controls component visuals */\n variant?: TabsVariant;\n\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Determines whether tabs should have inverted styles */\n inverted?: boolean;\n\n /** If set to false, Tabs.Panel content will not stay mounted when tab is not active */\n keepMounted?: boolean;\n}\n\ninterface _TabsProviderProps extends TabsProviderProps {\n classNames?: ClassNames<TabsStylesNames>;\n styles?: Styles<TabsStylesNames, TabsStylesParams>;\n unstyled?: boolean;\n}\n\nexport function TabsProvider({\n defaultValue,\n value,\n onTabChange,\n orientation,\n children,\n loop,\n id,\n activateTabWithKeyboard,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n placement,\n keepMounted = true,\n classNames,\n styles,\n unstyled,\n}: _TabsProviderProps) {\n const uid = useId(id);\n\n const [_value, onChange] = useUncontrolled<TabsValue>({\n value,\n defaultValue,\n finalValue: null,\n onChange: onTabChange,\n });\n\n return (\n <TabsContextProvider\n value={{\n placement,\n value: _value,\n orientation,\n id: uid,\n loop,\n activateTabWithKeyboard,\n getTabId: getSafeId(`${uid}-tab`, TABS_ERRORS.value),\n getPanelId: getSafeId(`${uid}-panel`, TABS_ERRORS.value),\n onTabChange: onChange,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n keepMounted,\n classNames,\n styles,\n unstyled,\n }}\n >\n {children}\n </TabsContextProvider>\n );\n}\n\nTabsProvider.displayName = '@mantine/core/TabsProvider';\n"],"names":["useId","useUncontrolled","React","TabsContextProvider","getSafeId","TABS_ERRORS"],"mappings":";;;;;;;;;;;;;;AAKO,SAAS,YAAY,CAAC;AAC7B,EAAE,YAAY;AACd,EAAE,KAAK;AACP,EAAE,WAAW;AACb,EAAE,WAAW;AACb,EAAE,QAAQ;AACV,EAAE,IAAI;AACN,EAAE,EAAE;AACJ,EAAE,uBAAuB;AACzB,EAAE,oBAAoB;AACtB,EAAE,OAAO;AACT,EAAE,KAAK;AACP,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,WAAW,GAAG,IAAI;AACpB,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,CAAC,EAAE;AACH,EAAE,MAAM,GAAG,GAAGA,WAAK,CAAC,EAAE,CAAC,CAAC;AACxB,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAGC,qBAAe,CAAC;AAC7C,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,QAAQ,EAAE,WAAW;AACzB,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,gCAAmB,EAAE;AAClE,IAAI,KAAK,EAAE;AACX,MAAM,SAAS;AACf,MAAM,KAAK,EAAE,MAAM;AACnB,MAAM,WAAW;AACjB,MAAM,EAAE,EAAE,GAAG;AACb,MAAM,IAAI;AACV,MAAM,uBAAuB;AAC7B,MAAM,QAAQ,EAAEC,eAAS,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAEC,uBAAW,CAAC,KAAK,CAAC;AAC1D,MAAM,UAAU,EAAED,eAAS,CAAC,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAAEC,uBAAW,CAAC,KAAK,CAAC;AAC9D,MAAM,WAAW,EAAE,QAAQ;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,OAAO;AACb,MAAM,KAAK;AACX,MAAM,MAAM;AACZ,MAAM,QAAQ;AACd,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,MAAM,MAAM;AACZ,MAAM,QAAQ;AACd,KAAK;AACL,GAAG,EAAE,QAAQ,CAAC,CAAC;AACf,CAAC;AACD,YAAY,CAAC,WAAW,GAAG,4BAA4B;;;;"}
|
|
1
|
+
{"version":3,"file":"TabsProvider.js","sources":["../../src/Tabs/TabsProvider.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { getSafeId } from '@mantine/utils';\nimport { useUncontrolled, useId } from '@mantine/hooks';\nimport { ClassNames, MantineColor, MantineNumberSize, Styles } from '@mantine/styles';\nimport { TabsContextProvider } from './Tabs.context';\nimport { TABS_ERRORS } from './Tabs.errors';\nimport {\n TabsValue,\n TabsOrientation,\n TabsVariant,\n TabsPlacement,\n TabsStylesParams,\n} from './Tabs.types';\nimport type { TabsStylesNames } from './Tabs';\n\nexport interface TabsProviderProps {\n /** Default value for uncontrolled component */\n defaultValue?: TabsValue;\n\n /** Value for controlled component */\n value?: TabsValue;\n\n /** Callback for controlled component */\n onTabChange?(value: TabsValue): void;\n\n /** Tabs orientation, vertical or horizontal */\n orientation?: TabsOrientation;\n\n /** Tabs.List placement relative to Tabs.Panel, applicable only for orientation=\"vertical\", left by default */\n placement?: TabsPlacement;\n\n /** Base id, used to generate ids that connect labels with controls, by default generated randomly */\n id?: string;\n\n /** Determines whether arrow key presses should loop though items (first to last and last to first) */\n loop?: boolean;\n\n /** Determines whether tab should be activated with arrow key press, defaults to true */\n activateTabWithKeyboard?: boolean;\n\n /** Determines whether tab can be deactivated, defaults to false */\n allowTabDeactivation?: boolean;\n\n /** Tabs content */\n children: React.ReactNode;\n\n /** Controls component visuals */\n variant?: TabsVariant;\n\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Determines whether tabs should have inverted styles */\n inverted?: boolean;\n\n /** If set to false, Tabs.Panel content will not stay mounted when tab is not active */\n keepMounted?: boolean;\n}\n\ninterface _TabsProviderProps extends TabsProviderProps {\n classNames?: ClassNames<TabsStylesNames>;\n styles?: Styles<TabsStylesNames, TabsStylesParams>;\n unstyled?: boolean;\n}\n\nexport function TabsProvider({\n defaultValue,\n value,\n onTabChange,\n orientation,\n children,\n loop,\n id,\n activateTabWithKeyboard,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n placement,\n keepMounted = true,\n classNames,\n styles,\n unstyled,\n}: _TabsProviderProps) {\n const uid = useId(id);\n\n const [mountedPanelIds, setMountedPanelIds] = useState([]);\n\n const [_value, onChange] = useUncontrolled<TabsValue>({\n value,\n defaultValue,\n finalValue: null,\n onChange: onTabChange,\n });\n\n return (\n <TabsContextProvider\n value={{\n placement,\n value: _value,\n orientation,\n id: uid,\n loop,\n activateTabWithKeyboard,\n getTabId: getSafeId(`${uid}-tab`, TABS_ERRORS.value),\n getPanelId: getSafeId(`${uid}-panel`, TABS_ERRORS.value),\n onTabChange: onChange,\n setMountedPanelIds,\n mountedPanelIds,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n keepMounted,\n classNames,\n styles,\n unstyled,\n }}\n >\n {children}\n </TabsContextProvider>\n );\n}\n\nTabsProvider.displayName = '@mantine/core/TabsProvider';\n"],"names":["useId","useState","useUncontrolled","React","TabsContextProvider","getSafeId","TABS_ERRORS"],"mappings":";;;;;;;;;;;;;;AAKO,SAAS,YAAY,CAAC;AAC7B,EAAE,YAAY;AACd,EAAE,KAAK;AACP,EAAE,WAAW;AACb,EAAE,WAAW;AACb,EAAE,QAAQ;AACV,EAAE,IAAI;AACN,EAAE,EAAE;AACJ,EAAE,uBAAuB;AACzB,EAAE,oBAAoB;AACtB,EAAE,OAAO;AACT,EAAE,KAAK;AACP,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,WAAW,GAAG,IAAI;AACpB,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,CAAC,EAAE;AACH,EAAE,MAAM,GAAG,GAAGA,WAAK,CAAC,EAAE,CAAC,CAAC;AACxB,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC,CAAC;AAC7D,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAGC,qBAAe,CAAC;AAC7C,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,QAAQ,EAAE,WAAW;AACzB,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,gCAAmB,EAAE;AAClE,IAAI,KAAK,EAAE;AACX,MAAM,SAAS;AACf,MAAM,KAAK,EAAE,MAAM;AACnB,MAAM,WAAW;AACjB,MAAM,EAAE,EAAE,GAAG;AACb,MAAM,IAAI;AACV,MAAM,uBAAuB;AAC7B,MAAM,QAAQ,EAAEC,eAAS,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAEC,uBAAW,CAAC,KAAK,CAAC;AAC1D,MAAM,UAAU,EAAED,eAAS,CAAC,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAAEC,uBAAW,CAAC,KAAK,CAAC;AAC9D,MAAM,WAAW,EAAE,QAAQ;AAC3B,MAAM,kBAAkB;AACxB,MAAM,eAAe;AACrB,MAAM,oBAAoB;AAC1B,MAAM,OAAO;AACb,MAAM,KAAK;AACX,MAAM,MAAM;AACZ,MAAM,QAAQ;AACd,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,MAAM,MAAM;AACZ,MAAM,QAAQ;AACd,KAAK;AACL,GAAG,EAAE,QAAQ,CAAC,CAAC;AACf,CAAC;AACD,YAAY,CAAC,WAAW,GAAG,4BAA4B;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeIcon.js","sources":["../../src/ThemeIcon/ThemeIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineGradient,\n MantineColor,\n useComponentDefaultProps,\n Variants,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { ThemeIconStylesParams } from './ThemeIcon.styles';\n\nexport interface ThemeIconProps\n extends DefaultProps<never, ThemeIconStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Icon */\n children: React.ReactNode;\n\n /** Width and height of theme icon */\n size?: MantineNumberSize;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Icon color from theme */\n color?: MantineColor;\n\n /** Controls appearance */\n variant?:
|
|
1
|
+
{"version":3,"file":"ThemeIcon.js","sources":["../../src/ThemeIcon/ThemeIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineGradient,\n MantineColor,\n useComponentDefaultProps,\n Variants,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { ThemeIconStylesParams } from './ThemeIcon.styles';\n\nexport type ThemeIconVariant = Variants<'filled' | 'light' | 'gradient' | 'outline' | 'default'>;\n\nexport interface ThemeIconProps\n extends DefaultProps<never, ThemeIconStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Icon */\n children: React.ReactNode;\n\n /** Width and height of theme icon */\n size?: MantineNumberSize;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Icon color from theme */\n color?: MantineColor;\n\n /** Controls appearance */\n variant?: ThemeIconVariant;\n\n /** Controls gradient settings in gradient variant only */\n gradient?: MantineGradient;\n}\n\nconst defaultProps: Partial<ThemeIconProps> = {\n size: 'md',\n variant: 'filled',\n};\n\nexport const ThemeIcon = forwardRef<HTMLDivElement, ThemeIconProps>((props, ref) => {\n const { className, size, radius, variant, color, children, gradient, unstyled, ...others } =\n useComponentDefaultProps('ThemeIcon', defaultProps, props);\n\n const { classes, cx } = useStyles(\n { variant, radius, color, gradient },\n { name: 'ThemeIcon', unstyled, variant, size }\n );\n\n return (\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {children}\n </Box>\n );\n});\n\nThemeIcon.displayName = '@mantine/core/ThemeIcon';\n"],"names":["forwardRef","useComponentDefaultProps","useStyles","React","Box"],"mappings":"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"}
|
package/esm/Badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../src/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineSize,\n MantineNumberSize,\n MantineGradient,\n MantineColor,\n Selectors,\n useComponentDefaultProps,\n Variants,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { Box } from '../Box';\nimport useStyles, { BadgeStylesParams } from './Badge.styles';\n\nexport type BadgeStylesNames = Selectors<typeof useStyles>;\n\nexport interface BadgeProps extends DefaultProps<BadgeStylesNames, BadgeStylesParams> {\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Controls appearance */\n variant?:
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../src/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineSize,\n MantineNumberSize,\n MantineGradient,\n MantineColor,\n Selectors,\n useComponentDefaultProps,\n Variants,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { Box } from '../Box';\nimport useStyles, { BadgeStylesParams } from './Badge.styles';\n\nexport type BadgeStylesNames = Selectors<typeof useStyles>;\nexport type BadgeVariant = Variants<'light' | 'filled' | 'outline' | 'dot' | 'gradient'>;\n\nexport interface BadgeProps extends DefaultProps<BadgeStylesNames, BadgeStylesParams> {\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Controls appearance */\n variant?: BadgeVariant;\n\n /** Controls gradient, applied to gradient variant only */\n gradient?: MantineGradient;\n\n /** Badge height and font size */\n size?: MantineSize;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, \"xl\" by default */\n radius?: MantineNumberSize;\n\n /** Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis */\n fullWidth?: boolean;\n\n /** Section rendered on the left side of label */\n leftSection?: React.ReactNode;\n\n /** Section rendered on the right side of label */\n rightSection?: React.ReactNode;\n\n /** Badge label */\n children?: React.ReactNode;\n}\n\nconst defaultProps: Partial<BadgeProps> = {\n variant: 'light',\n size: 'md',\n radius: 'xl',\n};\n\nexport const _Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {\n const {\n className,\n color,\n variant,\n fullWidth,\n children,\n size,\n leftSection,\n rightSection,\n radius,\n gradient,\n classNames,\n styles,\n unstyled,\n ...others\n } = useComponentDefaultProps('Badge', defaultProps, props);\n\n const { classes, cx } = useStyles(\n { fullWidth, color, radius, gradient },\n { classNames, styles, name: 'Badge', unstyled, variant, size }\n );\n\n return (\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {leftSection && <span className={classes.leftSection}>{leftSection}</span>}\n <span className={classes.inner}>{children}</span>\n {rightSection && <span className={classes.rightSection}>{rightSection}</span>}\n </Box>\n );\n});\n\n_Badge.displayName = '@mantine/core/Badge';\n\nexport const Badge = createPolymorphicComponent<'div', BadgeProps>(_Badge);\n"],"names":[],"mappings":"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"}
|
|
@@ -85,6 +85,7 @@ var useStyles = createStyles((theme, {
|
|
|
85
85
|
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
|
|
86
86
|
borderColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[3],
|
|
87
87
|
cursor: "not-allowed",
|
|
88
|
+
pointerEvents: "none",
|
|
88
89
|
[`& + .${getStylesRef("icon")}`]: {
|
|
89
90
|
color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[5]
|
|
90
91
|
}
|