@mantine/core 5.5.0 → 5.5.1
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/ActionIcon/ActionIcon.js +1 -1
- package/cjs/ActionIcon/ActionIcon.js.map +1 -1
- package/cjs/Button/Button.js +1 -1
- package/cjs/Button/Button.js.map +1 -1
- package/cjs/Checkbox/Checkbox.js +1 -0
- package/cjs/Checkbox/Checkbox.js.map +1 -1
- package/cjs/Checkbox/Checkbox.styles.js +7 -5
- package/cjs/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/Collapse/Collapse.js +3 -7
- package/cjs/Collapse/Collapse.js.map +1 -1
- package/cjs/Collapse/use-collapse.js +15 -74
- package/cjs/Collapse/use-collapse.js.map +1 -1
- package/cjs/Input/InputWrapper/InputWrapper.js +7 -4
- package/cjs/Input/InputWrapper/InputWrapper.js.map +1 -1
- package/cjs/List/List.styles.js +1 -1
- package/cjs/List/List.styles.js.map +1 -1
- package/cjs/List/ListItem/ListItem.styles.js +4 -1
- package/cjs/List/ListItem/ListItem.styles.js.map +1 -1
- package/cjs/MultiSelect/MultiSelect.js +8 -9
- package/cjs/MultiSelect/MultiSelect.js.map +1 -1
- package/cjs/Radio/Radio.js +1 -0
- package/cjs/Radio/Radio.js.map +1 -1
- package/cjs/Radio/Radio.styles.js +7 -5
- package/cjs/Radio/Radio.styles.js.map +1 -1
- package/cjs/SegmentedControl/SegmentedControl.js +2 -1
- package/cjs/SegmentedControl/SegmentedControl.js.map +1 -1
- package/cjs/Select/Select.js +3 -7
- package/cjs/Select/Select.js.map +1 -1
- package/cjs/Select/SelectItems/SelectItems.styles.js +5 -2
- package/cjs/Select/SelectItems/SelectItems.styles.js.map +1 -1
- package/cjs/Select/SelectPopover/SelectPopover.styles.js +2 -1
- package/cjs/Select/SelectPopover/SelectPopover.styles.js.map +1 -1
- package/cjs/Switch/Switch.js +1 -0
- package/cjs/Switch/Switch.js.map +1 -1
- package/cjs/Switch/Switch.styles.js +7 -7
- package/cjs/Switch/Switch.styles.js.map +1 -1
- package/esm/ActionIcon/ActionIcon.js +1 -1
- package/esm/ActionIcon/ActionIcon.js.map +1 -1
- package/esm/Button/Button.js +1 -1
- package/esm/Button/Button.js.map +1 -1
- package/esm/Checkbox/Checkbox.js +1 -0
- package/esm/Checkbox/Checkbox.js.map +1 -1
- package/esm/Checkbox/Checkbox.styles.js +7 -5
- package/esm/Checkbox/Checkbox.styles.js.map +1 -1
- package/esm/Collapse/Collapse.js +3 -7
- package/esm/Collapse/Collapse.js.map +1 -1
- package/esm/Collapse/use-collapse.js +17 -75
- package/esm/Collapse/use-collapse.js.map +1 -1
- package/esm/Input/InputWrapper/InputWrapper.js +7 -4
- package/esm/Input/InputWrapper/InputWrapper.js.map +1 -1
- package/esm/List/List.styles.js +1 -1
- package/esm/List/List.styles.js.map +1 -1
- package/esm/List/ListItem/ListItem.styles.js +4 -1
- package/esm/List/ListItem/ListItem.styles.js.map +1 -1
- package/esm/MultiSelect/MultiSelect.js +8 -9
- package/esm/MultiSelect/MultiSelect.js.map +1 -1
- package/esm/Radio/Radio.js +1 -0
- package/esm/Radio/Radio.js.map +1 -1
- package/esm/Radio/Radio.styles.js +7 -5
- package/esm/Radio/Radio.styles.js.map +1 -1
- package/esm/SegmentedControl/SegmentedControl.js +2 -1
- package/esm/SegmentedControl/SegmentedControl.js.map +1 -1
- package/esm/Select/Select.js +3 -7
- package/esm/Select/Select.js.map +1 -1
- package/esm/Select/SelectItems/SelectItems.styles.js +5 -2
- package/esm/Select/SelectItems/SelectItems.styles.js.map +1 -1
- package/esm/Select/SelectPopover/SelectPopover.styles.js +2 -1
- package/esm/Select/SelectPopover/SelectPopover.styles.js.map +1 -1
- package/esm/Switch/Switch.js +1 -0
- package/esm/Switch/Switch.js.map +1 -1
- package/esm/Switch/Switch.styles.js +7 -7
- package/esm/Switch/Switch.styles.js.map +1 -1
- package/lib/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/Checkbox/Checkbox.styles.d.ts +2 -2
- package/lib/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/lib/Collapse/Collapse.d.ts +0 -2
- package/lib/Collapse/Collapse.d.ts.map +1 -1
- package/lib/Collapse/use-collapse.d.ts +1 -7
- package/lib/Collapse/use-collapse.d.ts.map +1 -1
- package/lib/Input/InputWrapper/InputWrapper.d.ts.map +1 -1
- package/lib/List/ListItem/ListItem.styles.d.ts.map +1 -1
- package/lib/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/lib/Radio/Radio.styles.d.ts +2 -2
- package/lib/Radio/Radio.styles.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/lib/Select/Select.d.ts.map +1 -1
- package/lib/Select/SelectItems/SelectItems.styles.d.ts.map +1 -1
- package/lib/Select/SelectPopover/SelectPopover.styles.d.ts.map +1 -1
- package/lib/Switch/Switch.d.ts.map +1 -1
- package/lib/Switch/Switch.styles.d.ts +2 -2
- package/package.json +4 -4
|
@@ -47,10 +47,15 @@ var useStyles = createStyles((theme, {
|
|
|
47
47
|
const errorColor = theme.fn.variant({ variant: "filled", color: "red" }).background;
|
|
48
48
|
return {
|
|
49
49
|
description: {
|
|
50
|
-
marginTop: `calc(${theme.spacing.xs}px / 2)
|
|
50
|
+
marginTop: `calc(${theme.spacing.xs}px / 2)`,
|
|
51
|
+
[labelPosition === "left" ? "paddingRight" : "paddingLeft"]: theme.spacing.sm
|
|
51
52
|
},
|
|
52
53
|
error: {
|
|
53
|
-
marginTop: `calc(${theme.spacing.xs}px / 2)
|
|
54
|
+
marginTop: `calc(${theme.spacing.xs}px / 2)`,
|
|
55
|
+
[labelPosition === "left" ? "paddingRight" : "paddingLeft"]: theme.spacing.sm
|
|
56
|
+
},
|
|
57
|
+
label: {
|
|
58
|
+
[labelPosition === "left" ? "paddingRight" : "paddingLeft"]: theme.spacing.sm
|
|
54
59
|
},
|
|
55
60
|
icon: {
|
|
56
61
|
ref: getRef("icon"),
|
|
@@ -91,9 +96,6 @@ var useStyles = createStyles((theme, {
|
|
|
91
96
|
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
92
97
|
cursor: theme.cursorType,
|
|
93
98
|
order: labelPosition === "left" ? 1 : 2,
|
|
94
|
-
"& *": {
|
|
95
|
-
[labelPosition === "left" ? "paddingRight" : "paddingLeft"]: theme.spacing.sm
|
|
96
|
-
},
|
|
97
99
|
"& label[data-disabled]": {
|
|
98
100
|
color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
|
|
99
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":["../../src/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { createStyles, MantineSize, MantineColor, MantineNumberSize } from '@mantine/styles';\n\nconst sizes = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 30,\n xl: 36,\n};\n\nconst iconSizes = {\n xs: 8,\n sm: 10,\n md: 14,\n lg: 16,\n xl: 20,\n};\n\nexport interface CheckboxStylesParams {\n size: MantineSize;\n radius: MantineNumberSize;\n color: MantineColor;\n transitionDuration: number;\n labelPosition: 'left' | 'right';\n error: boolean;\n indeterminate: boolean;\n}\n\nexport default createStyles(\n (\n theme,\n {\n size,\n radius,\n color,\n transitionDuration,\n labelPosition,\n error,\n indeterminate,\n }: CheckboxStylesParams,\n getRef\n ) => {\n const _size = theme.fn.size({ size, sizes });\n const colors = theme.fn.variant({ variant: 'filled', color });\n const errorColor = theme.fn.variant({ variant: 'filled', color: 'red' }).background;\n\n return {\n description: {\n marginTop: `calc(${theme.spacing.xs}px / 2)`,\n },\n\n error: {\n marginTop: `calc(${theme.spacing.xs}px / 2)`,\n },\n\n icon: {\n ref: getRef('icon'),\n color: indeterminate ? 'inherit' : theme.white,\n transform: indeterminate ? 'none' : 'translateY(5px) scale(0.5)',\n opacity: indeterminate ? 1 : 0,\n transitionProperty: 'opacity, transform',\n transitionTimingFunction: 'ease',\n transitionDuration: `${transitionDuration}ms`,\n pointerEvents: 'none',\n width: theme.fn.size({ size, sizes: iconSizes }),\n position: 'absolute',\n zIndex: 1,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n margin: 'auto',\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n },\n },\n\n root: {},\n\n body: {\n display: 'flex',\n marginBlock: '5px',\n },\n\n inner: {\n position: 'relative',\n width: _size,\n height: _size,\n order: labelPosition === 'left' ? 2 : 1,\n },\n\n labelWrapper: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n lineHeight: `${_size}px`,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n cursor: theme.cursorType,\n order: labelPosition === 'left' ? 1 : 2,\n '& *': {\n [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,\n },\n '& label[data-disabled]': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n },\n\n input: {\n ...theme.fn.focusStyles(),\n appearance: 'none',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n border: `1px solid ${\n error\n ? errorColor\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[4]\n }`,\n width: _size,\n height: _size,\n borderRadius: theme.fn.radius(radius),\n padding: 0,\n display: 'block',\n margin: 0,\n transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,\n cursor: theme.cursorType,\n\n '&:checked': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n\n [`& + .${getRef('icon')}`]: {\n opacity: 1,\n color: theme.white,\n transform: 'translateY(0) scale(1)',\n },\n },\n\n '&:disabled': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],\n cursor: 'not-allowed',\n\n [`& + .${getRef('icon')}`]: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n },\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":["../../src/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { createStyles, MantineSize, MantineColor, MantineNumberSize } from '@mantine/styles';\n\nconst sizes = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 30,\n xl: 36,\n};\n\nconst iconSizes = {\n xs: 8,\n sm: 10,\n md: 14,\n lg: 16,\n xl: 20,\n};\n\nexport interface CheckboxStylesParams {\n size: MantineSize;\n radius: MantineNumberSize;\n color: MantineColor;\n transitionDuration: number;\n labelPosition: 'left' | 'right';\n error: boolean;\n indeterminate: boolean;\n}\n\nexport default createStyles(\n (\n theme,\n {\n size,\n radius,\n color,\n transitionDuration,\n labelPosition,\n error,\n indeterminate,\n }: CheckboxStylesParams,\n getRef\n ) => {\n const _size = theme.fn.size({ size, sizes });\n const colors = theme.fn.variant({ variant: 'filled', color });\n const errorColor = theme.fn.variant({ variant: 'filled', color: 'red' }).background;\n\n return {\n description: {\n marginTop: `calc(${theme.spacing.xs}px / 2)`,\n [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,\n },\n\n error: {\n marginTop: `calc(${theme.spacing.xs}px / 2)`,\n [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,\n },\n\n label: {\n [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,\n },\n\n icon: {\n ref: getRef('icon'),\n color: indeterminate ? 'inherit' : theme.white,\n transform: indeterminate ? 'none' : 'translateY(5px) scale(0.5)',\n opacity: indeterminate ? 1 : 0,\n transitionProperty: 'opacity, transform',\n transitionTimingFunction: 'ease',\n transitionDuration: `${transitionDuration}ms`,\n pointerEvents: 'none',\n width: theme.fn.size({ size, sizes: iconSizes }),\n position: 'absolute',\n zIndex: 1,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n margin: 'auto',\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n },\n },\n\n root: {},\n\n body: {\n display: 'flex',\n marginBlock: '5px',\n },\n\n inner: {\n position: 'relative',\n width: _size,\n height: _size,\n order: labelPosition === 'left' ? 2 : 1,\n },\n\n labelWrapper: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n lineHeight: `${_size}px`,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n cursor: theme.cursorType,\n order: labelPosition === 'left' ? 1 : 2,\n\n '& label[data-disabled]': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n },\n\n input: {\n ...theme.fn.focusStyles(),\n appearance: 'none',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n border: `1px solid ${\n error\n ? errorColor\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[4]\n }`,\n width: _size,\n height: _size,\n borderRadius: theme.fn.radius(radius),\n padding: 0,\n display: 'block',\n margin: 0,\n transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,\n cursor: theme.cursorType,\n\n '&:checked': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n\n [`& + .${getRef('icon')}`]: {\n opacity: 1,\n color: theme.white,\n transform: 'translateY(0) scale(1)',\n },\n },\n\n '&:disabled': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],\n cursor: 'not-allowed',\n\n [`& + .${getRef('icon')}`]: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n },\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
package/esm/Collapse/Collapse.js
CHANGED
|
@@ -35,8 +35,7 @@ var __objRest = (source, exclude) => {
|
|
|
35
35
|
const defaultProps = {
|
|
36
36
|
transitionDuration: 200,
|
|
37
37
|
transitionTimingFunction: "ease",
|
|
38
|
-
animateOpacity: true
|
|
39
|
-
axis: "y"
|
|
38
|
+
animateOpacity: true
|
|
40
39
|
};
|
|
41
40
|
const Collapse = forwardRef((props, ref) => {
|
|
42
41
|
const _a = useComponentDefaultProps("Collapse", defaultProps, props), {
|
|
@@ -46,8 +45,7 @@ const Collapse = forwardRef((props, ref) => {
|
|
|
46
45
|
transitionTimingFunction,
|
|
47
46
|
style,
|
|
48
47
|
onTransitionEnd,
|
|
49
|
-
animateOpacity
|
|
50
|
-
axis
|
|
48
|
+
animateOpacity
|
|
51
49
|
} = _a, others = __objRest(_a, [
|
|
52
50
|
"children",
|
|
53
51
|
"in",
|
|
@@ -55,8 +53,7 @@ const Collapse = forwardRef((props, ref) => {
|
|
|
55
53
|
"transitionTimingFunction",
|
|
56
54
|
"style",
|
|
57
55
|
"onTransitionEnd",
|
|
58
|
-
"animateOpacity"
|
|
59
|
-
"axis"
|
|
56
|
+
"animateOpacity"
|
|
60
57
|
]);
|
|
61
58
|
const theme = useMantineTheme();
|
|
62
59
|
const shouldReduceMotion = useReducedMotion();
|
|
@@ -64,7 +61,6 @@ const Collapse = forwardRef((props, ref) => {
|
|
|
64
61
|
const duration = reduceMotion ? 0 : transitionDuration;
|
|
65
62
|
const { systemStyles, rest } = extractSystemStyles(others);
|
|
66
63
|
const getCollapseProps = useCollapse({
|
|
67
|
-
axis,
|
|
68
64
|
opened,
|
|
69
65
|
transitionDuration: duration,
|
|
70
66
|
transitionTimingFunction,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapse.js","sources":["../../src/Collapse/Collapse.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useReducedMotion } from '@mantine/hooks';\nimport {\n extractSystemStyles,\n DefaultProps,\n useComponentDefaultProps,\n useMantineTheme,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { useCollapse } from './use-collapse';\n\nexport interface CollapseProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n /** Content that should be collapsed */\n children: React.ReactNode;\n\n /** Opened state */\n in: boolean;\n\n /** Called each time transition ends */\n onTransitionEnd?: () => void;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Transition timing function */\n transitionTimingFunction?: string;\n\n /** Should opacity be animated */\n animateOpacity?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Collapse.js","sources":["../../src/Collapse/Collapse.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useReducedMotion } from '@mantine/hooks';\nimport {\n extractSystemStyles,\n DefaultProps,\n useComponentDefaultProps,\n useMantineTheme,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { useCollapse } from './use-collapse';\n\nexport interface CollapseProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n /** Content that should be collapsed */\n children: React.ReactNode;\n\n /** Opened state */\n in: boolean;\n\n /** Called each time transition ends */\n onTransitionEnd?: () => void;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Transition timing function */\n transitionTimingFunction?: string;\n\n /** Should opacity be animated */\n animateOpacity?: boolean;\n}\n\nconst defaultProps: Partial<CollapseProps> = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n};\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n const {\n children,\n in: opened,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n animateOpacity,\n ...others\n } = useComponentDefaultProps('Collapse', defaultProps, props);\n const theme = useMantineTheme();\n\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n\n const duration = reduceMotion ? 0 : transitionDuration;\n const { systemStyles, rest } = extractSystemStyles(others);\n const getCollapseProps = useCollapse({\n opened,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n });\n\n if (duration === 0) {\n return opened ? <Box {...rest}>{children}</Box> : null;\n }\n\n return (\n <Box {...getCollapseProps({ style, ref, ...rest, ...systemStyles })}>\n <div\n style={{\n opacity: opened || !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n }}\n >\n {children}\n </div>\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"names":[],"mappings":";;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAUF,MAAM,YAAY,GAAG;AACrB,EAAE,kBAAkB,EAAE,GAAG;AACzB,EAAE,wBAAwB,EAAE,MAAM;AAClC,EAAE,cAAc,EAAE,IAAI;AACtB,CAAC,CAAC;AACU,MAAC,QAAQ,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACnD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACxE,IAAI,QAAQ;AACZ,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,kBAAkB;AACtB,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,IAAI,eAAe;AACnB,IAAI,cAAc;AAClB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,OAAO;AACX,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;AAClC,EAAE,MAAM,kBAAkB,GAAG,gBAAgB,EAAE,CAAC;AAChD,EAAE,MAAM,YAAY,GAAG,KAAK,CAAC,oBAAoB,GAAG,kBAAkB,GAAG,KAAK,CAAC;AAC/E,EAAE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,kBAAkB,CAAC;AACzD,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAC7D,EAAE,MAAM,gBAAgB,GAAG,WAAW,CAAC;AACvC,IAAI,MAAM;AACV,IAAI,kBAAkB,EAAE,QAAQ;AAChC,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,IAAI,QAAQ,KAAK,CAAC,EAAE;AACtB,IAAI,OAAO,MAAM,mBAAmB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC;AACxG,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAE,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACvM,IAAI,KAAK,EAAE;AACX,MAAM,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,CAAC;AAChD,MAAM,UAAU,EAAE,cAAc,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAC,GAAG,MAAM;AAC/F,KAAK;AACL,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AAChB,CAAC,EAAE;AACH,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useRef, useState
|
|
1
|
+
import { useRef, useState } from 'react';
|
|
2
2
|
import { flushSync } from 'react-dom';
|
|
3
3
|
import { mergeRefs, useDidUpdate } from '@mantine/hooks';
|
|
4
4
|
|
|
@@ -43,21 +43,22 @@ function getAutoHeightDuration(height) {
|
|
|
43
43
|
function getElementHeight(el) {
|
|
44
44
|
return (el == null ? void 0 : el.current) ? el.current.scrollHeight : "auto";
|
|
45
45
|
}
|
|
46
|
-
function getElementWidth(el) {
|
|
47
|
-
return (el == null ? void 0 : el.current) ? el.current.scrollWidth : "auto";
|
|
48
|
-
}
|
|
49
46
|
const raf = typeof window !== "undefined" && window.requestAnimationFrame;
|
|
50
47
|
function useCollapse({
|
|
51
48
|
transitionDuration,
|
|
52
49
|
transitionTimingFunction = "ease",
|
|
53
50
|
onTransitionEnd = () => {
|
|
54
51
|
},
|
|
55
|
-
opened
|
|
56
|
-
axis
|
|
52
|
+
opened
|
|
57
53
|
}) {
|
|
58
54
|
const el = useRef(null);
|
|
59
55
|
const collapsedHeight = "0px";
|
|
60
|
-
const
|
|
56
|
+
const collapsedStyles = {
|
|
57
|
+
display: "none",
|
|
58
|
+
height: "0px",
|
|
59
|
+
overflow: "hidden"
|
|
60
|
+
};
|
|
61
|
+
const [styles, setStylesRaw] = useState(opened ? {} : collapsedStyles);
|
|
61
62
|
const setStyles = (newStyles) => {
|
|
62
63
|
flushSync(() => setStylesRaw(newStyles));
|
|
63
64
|
};
|
|
@@ -67,38 +68,10 @@ function useCollapse({
|
|
|
67
68
|
function getTransitionStyles(height) {
|
|
68
69
|
const _duration = transitionDuration || getAutoHeightDuration(height);
|
|
69
70
|
return {
|
|
70
|
-
|
|
71
|
-
transitionDuration: `${_duration}ms`,
|
|
72
|
-
transitionTimingFunction: `${transitionTimingFunction}`
|
|
71
|
+
transition: `height ${_duration}ms ${transitionTimingFunction}`
|
|
73
72
|
};
|
|
74
73
|
}
|
|
75
|
-
const getDefaultSizes = () => {
|
|
76
|
-
const oldStyles = styles;
|
|
77
|
-
setStyles({});
|
|
78
|
-
const sizes = { width: getElementWidth(el), height: getElementHeight(el) };
|
|
79
|
-
setStyles(oldStyles);
|
|
80
|
-
return sizes;
|
|
81
|
-
};
|
|
82
|
-
const getCollapsedStyles = () => {
|
|
83
|
-
const { height } = getDefaultSizes();
|
|
84
|
-
return {
|
|
85
|
-
x: { height, width: "0px", overflow: "hidden" },
|
|
86
|
-
y: { display: "none", height: "0px", overflow: "hidden" }
|
|
87
|
-
};
|
|
88
|
-
};
|
|
89
|
-
useEffect(() => {
|
|
90
|
-
raf(() => {
|
|
91
|
-
const { x, y } = getCollapsedStyles();
|
|
92
|
-
if (axis === "x" && !opened) {
|
|
93
|
-
setStyles(__spreadValues({}, x));
|
|
94
|
-
} else if (axis === "y" && !opened) {
|
|
95
|
-
setStyles(__spreadValues({}, y));
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
}, []);
|
|
99
74
|
useDidUpdate(() => {
|
|
100
|
-
if (axis === "x")
|
|
101
|
-
return;
|
|
102
75
|
if (opened) {
|
|
103
76
|
raf(() => {
|
|
104
77
|
mergeStyles({ willChange: "height", display: "block", overflow: "hidden" });
|
|
@@ -115,51 +88,20 @@ function useCollapse({
|
|
|
115
88
|
});
|
|
116
89
|
}
|
|
117
90
|
}, [opened]);
|
|
118
|
-
useDidUpdate(() => {
|
|
119
|
-
if (axis === "y")
|
|
120
|
-
return;
|
|
121
|
-
if (opened) {
|
|
122
|
-
raf(() => {
|
|
123
|
-
const { width } = getDefaultSizes();
|
|
124
|
-
mergeStyles({
|
|
125
|
-
display: "block",
|
|
126
|
-
overflow: "hidden",
|
|
127
|
-
willChange: "width",
|
|
128
|
-
flexShrink: 0
|
|
129
|
-
});
|
|
130
|
-
raf(() => {
|
|
131
|
-
mergeStyles(__spreadProps(__spreadValues({}, getTransitionStyles(width)), { width }));
|
|
132
|
-
});
|
|
133
|
-
});
|
|
134
|
-
} else {
|
|
135
|
-
raf(() => {
|
|
136
|
-
const { width, height } = getDefaultSizes();
|
|
137
|
-
mergeStyles(__spreadProps(__spreadValues({}, getTransitionStyles(width)), {
|
|
138
|
-
flexShrink: 0,
|
|
139
|
-
willChange: "width",
|
|
140
|
-
width,
|
|
141
|
-
height
|
|
142
|
-
}));
|
|
143
|
-
raf(() => mergeStyles({ width: "0px", overflow: "hidden" }));
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
}, [opened]);
|
|
147
91
|
const handleTransitionEnd = (e) => {
|
|
148
|
-
if (e.target !== el.current ||
|
|
92
|
+
if (e.target !== el.current || e.propertyName !== "height") {
|
|
149
93
|
return;
|
|
150
94
|
}
|
|
151
|
-
const { height, width } = getDefaultSizes();
|
|
152
95
|
if (opened) {
|
|
153
|
-
|
|
96
|
+
const height = getElementHeight(el);
|
|
97
|
+
if (height === styles.height) {
|
|
154
98
|
setStyles({});
|
|
99
|
+
} else {
|
|
100
|
+
mergeStyles({ height });
|
|
155
101
|
}
|
|
156
102
|
onTransitionEnd();
|
|
157
|
-
} else if (styles.
|
|
158
|
-
|
|
159
|
-
if (axis === "x")
|
|
160
|
-
setStyles(x);
|
|
161
|
-
else
|
|
162
|
-
setStyles(y);
|
|
103
|
+
} else if (styles.height === collapsedHeight) {
|
|
104
|
+
setStyles(collapsedStyles);
|
|
163
105
|
onTransitionEnd();
|
|
164
106
|
}
|
|
165
107
|
};
|
|
@@ -177,5 +119,5 @@ function useCollapse({
|
|
|
177
119
|
return getCollapseProps;
|
|
178
120
|
}
|
|
179
121
|
|
|
180
|
-
export { getElementHeight,
|
|
122
|
+
export { getElementHeight, useCollapse };
|
|
181
123
|
//# sourceMappingURL=use-collapse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-collapse.js","sources":["../../src/Collapse/use-collapse.ts"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate, mergeRefs } from '@mantine/hooks';\n\nfunction getAutoHeightDuration(height: number | string) {\n if (!height || typeof height === 'string') {\n return 0;\n }\n const constant = height / 36;\n return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(\n el: React.RefObject<HTMLElement> | { current?: { scrollHeight: number } }\n) {\n return el?.current ? el.current.scrollHeight : 'auto';\n}\n\nexport function getElementWidth(\n el: React.RefObject<HTMLElement> | { current?: { scrollWidth: number } }\n) {\n return el?.current ? el.current.scrollWidth : 'auto';\n}\n\nconst raf = typeof window !== 'undefined' && window.requestAnimationFrame;\n\ninterface UseCollapse {\n axis: 'x' | 'y';\n opened: boolean;\n transitionDuration?: number;\n transitionTimingFunction?: string;\n onTransitionEnd?: () => void;\n}\n\ninterface GetCollapseProps {\n [key: string]: unknown;\n style?: React.CSSProperties;\n onTransitionEnd?: (e: TransitionEvent) => void;\n refKey?: string;\n ref?: React.MutableRefObject<HTMLDivElement> | ((node: HTMLDivElement) => void);\n}\n\nexport function useCollapse({\n transitionDuration,\n transitionTimingFunction = 'ease',\n onTransitionEnd = () => {},\n opened,\n axis,\n}: UseCollapse): (props: GetCollapseProps) => Record<string, any> {\n const el = useRef<HTMLElement | null>(null);\n const collapsedHeight = '0px';\n const [styles, setStylesRaw] = useState<React.CSSProperties>({});\n\n const setStyles = (newStyles: {} | ((oldStyles: {}) => {})): void => {\n flushSync(() => setStylesRaw(newStyles));\n };\n\n const mergeStyles = (newStyles: {}): void => {\n setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n };\n\n function getTransitionStyles(height: number | string): {\n transition?: string;\n transitionProperty?: string;\n transitionDuration?: string;\n transitionTimingFunction?: string;\n } {\n const _duration = transitionDuration || getAutoHeightDuration(height);\n return {\n transitionProperty: `${axis === 'x' ? 'width' : 'height'}`,\n transitionDuration: `${_duration}ms`,\n transitionTimingFunction: `${transitionTimingFunction}`,\n };\n }\n\n const getDefaultSizes = () => {\n const oldStyles = styles;\n setStyles({});\n const sizes = { width: getElementWidth(el), height: getElementHeight(el) };\n setStyles(oldStyles);\n return sizes;\n };\n\n const getCollapsedStyles = () => {\n const { height } = getDefaultSizes();\n return {\n x: { height, width: '0px', overflow: 'hidden' },\n y: { display: 'none', height: '0px', overflow: 'hidden' },\n };\n };\n\n useEffect(() => {\n raf(() => {\n const { x, y } = getCollapsedStyles();\n if (axis === 'x' && !opened) {\n setStyles({ ...x });\n } else if (axis === 'y' && !opened) {\n setStyles({ ...y });\n }\n });\n }, []);\n\n // y axis\n useDidUpdate(() => {\n if (axis === 'x') return;\n\n if (opened) {\n raf(() => {\n mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n raf(() => {\n const height = getElementHeight(el);\n mergeStyles({ ...getTransitionStyles(height), height });\n });\n });\n } else {\n raf(() => {\n const height = getElementHeight(el);\n mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n raf(() => mergeStyles({ height: collapsedHeight, overflow: 'hidden' }));\n });\n }\n }, [opened]);\n\n // x axis\n useDidUpdate(() => {\n if (axis === 'y') return;\n\n if (opened) {\n raf(() => {\n const { width } = getDefaultSizes();\n mergeStyles({\n display: 'block',\n overflow: 'hidden',\n willChange: 'width',\n flexShrink: 0,\n });\n raf(() => {\n mergeStyles({ ...getTransitionStyles(width), width });\n });\n });\n } else {\n raf(() => {\n const { width, height } = getDefaultSizes();\n mergeStyles({\n ...getTransitionStyles(width),\n flexShrink: 0,\n willChange: 'width',\n width,\n height,\n });\n raf(() => mergeStyles({ width: '0px', overflow: 'hidden' }));\n });\n }\n }, [opened]);\n\n const handleTransitionEnd = (e: React.TransitionEvent): void => {\n if (e.target !== el.current || !(e.propertyName === 'width' || 'height')) {\n return;\n }\n\n const { height, width } = getDefaultSizes();\n\n if (opened) {\n if (width === styles.width || height === styles.height) {\n setStyles({});\n }\n\n onTransitionEnd();\n } else if (styles.width === '0px' || styles.height === '0px') {\n const { x, y } = getCollapsedStyles();\n\n if (axis === 'x') setStyles(x);\n else setStyles(y);\n\n onTransitionEnd();\n }\n };\n\n function getCollapseProps({ style = {}, refKey = 'ref', ...rest }: GetCollapseProps = {}) {\n const theirRef: any = rest[refKey];\n return {\n 'aria-hidden': !opened,\n ...rest,\n [refKey]: mergeRefs(el, theirRef),\n onTransitionEnd: handleTransitionEnd,\n style: { boxSizing: 'border-box', ...style, ...styles },\n };\n }\n\n return getCollapseProps;\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-collapse.js","sources":["../../src/Collapse/use-collapse.ts"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useDidUpdate, mergeRefs } from '@mantine/hooks';\n\nfunction getAutoHeightDuration(height: number | string) {\n if (!height || typeof height === 'string') {\n return 0;\n }\n const constant = height / 36;\n return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);\n}\n\nexport function getElementHeight(\n el: React.RefObject<HTMLElement> | { current?: { scrollHeight: number } }\n) {\n return el?.current ? el.current.scrollHeight : 'auto';\n}\n\nconst raf = typeof window !== 'undefined' && window.requestAnimationFrame;\n\ninterface UseCollapse {\n opened: boolean;\n transitionDuration?: number;\n transitionTimingFunction?: string;\n onTransitionEnd?: () => void;\n}\n\ninterface GetCollapseProps {\n [key: string]: unknown;\n style?: React.CSSProperties;\n onTransitionEnd?: (e: TransitionEvent) => void;\n refKey?: string;\n ref?: React.MutableRefObject<HTMLDivElement> | ((node: HTMLDivElement) => void);\n}\n\nexport function useCollapse({\n transitionDuration,\n transitionTimingFunction = 'ease',\n onTransitionEnd = () => {},\n opened,\n}: UseCollapse): (props: GetCollapseProps) => Record<string, any> {\n const el = useRef<HTMLElement | null>(null);\n const collapsedHeight = '0px';\n const collapsedStyles = {\n display: 'none',\n height: '0px',\n overflow: 'hidden',\n };\n const [styles, setStylesRaw] = useState<React.CSSProperties>(opened ? {} : collapsedStyles);\n const setStyles = (newStyles: {} | ((oldStyles: {}) => {})): void => {\n flushSync(() => setStylesRaw(newStyles));\n };\n\n const mergeStyles = (newStyles: {}): void => {\n setStyles((oldStyles) => ({ ...oldStyles, ...newStyles }));\n };\n\n function getTransitionStyles(height: number | string): {\n transition: string;\n } {\n const _duration = transitionDuration || getAutoHeightDuration(height);\n return {\n transition: `height ${_duration}ms ${transitionTimingFunction}`,\n };\n }\n\n useDidUpdate(() => {\n if (opened) {\n raf(() => {\n mergeStyles({ willChange: 'height', display: 'block', overflow: 'hidden' });\n raf(() => {\n const height = getElementHeight(el);\n mergeStyles({ ...getTransitionStyles(height), height });\n });\n });\n } else {\n raf(() => {\n const height = getElementHeight(el);\n mergeStyles({ ...getTransitionStyles(height), willChange: 'height', height });\n raf(() => mergeStyles({ height: collapsedHeight, overflow: 'hidden' }));\n });\n }\n }, [opened]);\n\n const handleTransitionEnd = (e: React.TransitionEvent): void => {\n if (e.target !== el.current || e.propertyName !== 'height') {\n return;\n }\n\n if (opened) {\n const height = getElementHeight(el);\n\n if (height === styles.height) {\n setStyles({});\n } else {\n mergeStyles({ height });\n }\n\n onTransitionEnd();\n } else if (styles.height === collapsedHeight) {\n setStyles(collapsedStyles);\n onTransitionEnd();\n }\n };\n\n function getCollapseProps({ style = {}, refKey = 'ref', ...rest }: GetCollapseProps = {}) {\n const theirRef: any = rest[refKey];\n return {\n 'aria-hidden': !opened,\n ...rest,\n [refKey]: mergeRefs(el, theirRef),\n onTransitionEnd: handleTransitionEnd,\n style: { boxSizing: 'border-box', ...style, ...styles },\n };\n }\n\n return getCollapseProps;\n}\n"],"names":[],"mappings":";;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAIF,SAAS,qBAAqB,CAAC,MAAM,EAAE;AACvC,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AAC7C,IAAI,OAAO,CAAC,CAAC;AACb,GAAG;AACH,EAAE,MAAM,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;AAC/B,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,QAAQ,IAAI,IAAI,GAAG,QAAQ,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;AACrE,CAAC;AACM,SAAS,gBAAgB,CAAC,EAAE,EAAE;AACrC,EAAE,OAAO,CAAC,EAAE,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,OAAO,CAAC,YAAY,GAAG,MAAM,CAAC;AAC/E,CAAC;AACD,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,qBAAqB,CAAC;AACnE,SAAS,WAAW,CAAC;AAC5B,EAAE,kBAAkB;AACpB,EAAE,wBAAwB,GAAG,MAAM;AACnC,EAAE,eAAe,GAAG,MAAM;AAC1B,GAAG;AACH,EAAE,MAAM;AACR,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC1B,EAAE,MAAM,eAAe,GAAG,KAAK,CAAC;AAChC,EAAE,MAAM,eAAe,GAAG;AAC1B,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,MAAM,EAAE,KAAK;AACjB,IAAI,QAAQ,EAAE,QAAQ;AACtB,GAAG,CAAC;AACJ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,EAAE,GAAG,eAAe,CAAC,CAAC;AACzE,EAAE,MAAM,SAAS,GAAG,CAAC,SAAS,KAAK;AACnC,IAAI,SAAS,CAAC,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC7C,GAAG,CAAC;AACJ,EAAE,MAAM,WAAW,GAAG,CAAC,SAAS,KAAK;AACrC,IAAI,SAAS,CAAC,CAAC,SAAS,KAAK,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;AACvF,GAAG,CAAC;AACJ,EAAE,SAAS,mBAAmB,CAAC,MAAM,EAAE;AACvC,IAAI,MAAM,SAAS,GAAG,kBAAkB,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAC1E,IAAI,OAAO;AACX,MAAM,UAAU,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAC;AACrE,KAAK,CAAC;AACN,GAAG;AACH,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,GAAG,CAAC,MAAM;AAChB,QAAQ,WAAW,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AACpF,QAAQ,GAAG,CAAC,MAAM;AAClB,UAAU,MAAM,MAAM,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAC9C,UAAU,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAClG,SAAS,CAAC,CAAC;AACX,OAAO,CAAC,CAAC;AACT,KAAK,MAAM;AACX,MAAM,GAAG,CAAC,MAAM;AAChB,QAAQ,MAAM,MAAM,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAC5C,QAAQ,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACtH,QAAQ,GAAG,CAAC,MAAM,WAAW,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AAChF,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK;AACrC,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,EAAE,CAAC,OAAO,IAAI,CAAC,CAAC,YAAY,KAAK,QAAQ,EAAE;AAChE,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,MAAM,MAAM,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,IAAI,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE;AACpC,QAAQ,SAAS,CAAC,EAAE,CAAC,CAAC;AACtB,OAAO,MAAM;AACb,QAAQ,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;AAChC,OAAO;AACP,MAAM,eAAe,EAAE,CAAC;AACxB,KAAK,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,eAAe,EAAE;AAClD,MAAM,SAAS,CAAC,eAAe,CAAC,CAAC;AACjC,MAAM,eAAe,EAAE,CAAC;AACxB,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,gBAAgB,CAAC,EAAE,GAAG,EAAE,EAAE;AACrC,IAAI,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;AAChG,IAAI,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAClC,IAAI,OAAO,aAAa,CAAC,cAAc,CAAC;AACxC,MAAM,aAAa,EAAE,CAAC,MAAM;AAC5B,KAAK,EAAE,IAAI,CAAC,EAAE;AACd,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC;AACvC,MAAM,eAAe,EAAE,mBAAmB;AAC1C,MAAM,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;AACvF,KAAK,CAAC,CAAC;AACP,GAAG;AACH,EAAE,OAAO,gBAAgB,CAAC;AAC1B;;;;"}
|
|
@@ -108,15 +108,18 @@ const InputWrapper = forwardRef((props, ref) => {
|
|
|
108
108
|
htmlFor: id,
|
|
109
109
|
required: isRequired
|
|
110
110
|
}, sharedProps), labelProps), label);
|
|
111
|
-
const _description = description && /* @__PURE__ */ React.createElement(InputDescription, __spreadValues(__spreadValues({
|
|
111
|
+
const _description = description && /* @__PURE__ */ React.createElement(InputDescription, __spreadProps(__spreadValues(__spreadValues({
|
|
112
112
|
key: "description"
|
|
113
|
-
},
|
|
113
|
+
}, descriptionProps), sharedProps), {
|
|
114
|
+
size: (descriptionProps == null ? void 0 : descriptionProps.size) || sharedProps.size
|
|
115
|
+
}), description);
|
|
114
116
|
const _input = /* @__PURE__ */ React.createElement(Fragment, {
|
|
115
117
|
key: "input"
|
|
116
118
|
}, inputContainer(children));
|
|
117
|
-
const _error = typeof error !== "boolean" && error && /* @__PURE__ */ React.createElement(InputError,
|
|
119
|
+
const _error = typeof error !== "boolean" && error && /* @__PURE__ */ React.createElement(InputError, __spreadProps(__spreadValues(__spreadValues({}, errorProps), sharedProps), {
|
|
120
|
+
size: (errorProps == null ? void 0 : errorProps.size) || sharedProps.size,
|
|
118
121
|
key: "error"
|
|
119
|
-
}),
|
|
122
|
+
}), error);
|
|
120
123
|
const content = inputWrapperOrder.map((part) => {
|
|
121
124
|
switch (part) {
|
|
122
125
|
case "label":
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputWrapper.js","sources":["../../../src/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { InputLabel, InputLabelStylesNames } from '../InputLabel/InputLabel';\nimport { InputError, InputErrorStylesNames } from '../InputError/InputError';\nimport {\n InputDescription,\n InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport { InputWrapperProvider } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets';\nimport useStyles from './InputWrapper.styles';\n\nexport type InputWrapperStylesNames =\n | Selectors<typeof useStyles>\n | InputLabelStylesNames\n | InputErrorStylesNames\n | InputDescriptionStylesNames;\n\nexport interface InputWrapperBaseProps {\n /** Input label, displayed before input */\n label?: React.ReactNode;\n\n /** Input description, displayed after label */\n description?: React.ReactNode;\n\n /** Displays error message after input */\n error?: React.ReactNode;\n\n /** Adds required attribute to the input and red asterisk on the right side of label */\n required?: boolean;\n\n /** Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input */\n withAsterisk?: boolean;\n\n /** Props spread to label element */\n labelProps?: Record<string, any>;\n\n /** Props spread to description element */\n descriptionProps?: Record<string, any>;\n\n /** Props spread to error element */\n errorProps?: Record<string, any>;\n\n /** Input container component, defaults to React.Fragment */\n inputContainer?(children: React.ReactNode): React.ReactNode;\n\n /** Controls order of the Input.Wrapper elements */\n inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n extends DefaultProps<InputWrapperStylesNames>,\n InputWrapperBaseProps,\n React.ComponentPropsWithoutRef<'div'> {\n /** Input that should be wrapped */\n children: React.ReactNode;\n\n /** htmlFor label prop */\n id?: string;\n\n /** Render label as label with htmlFor or as div */\n labelElement?: 'label' | 'div';\n\n /** Controls all elements font-size */\n size?: MantineSize;\n\n /** Static css selector base */\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial<InputWrapperProps> = {\n labelElement: 'label',\n size: 'sm',\n inputContainer: (children) => children,\n inputWrapperOrder: ['label', 'description', 'input', 'error'],\n};\n\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>((props, ref) => {\n const {\n className,\n label,\n children,\n required,\n id,\n error,\n description,\n labelElement,\n labelProps,\n descriptionProps,\n errorProps,\n classNames,\n styles,\n size,\n inputContainer,\n __staticSelector,\n unstyled,\n inputWrapperOrder,\n withAsterisk,\n ...others\n } = useComponentDefaultProps('InputWrapper', defaultProps, props);\n\n const { classes, cx } = useStyles(null, {\n classNames,\n styles,\n name: ['InputWrapper', __staticSelector],\n unstyled,\n });\n\n const sharedProps = {\n classNames,\n styles,\n unstyled,\n size,\n __staticSelector,\n };\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n\n const _label = label && (\n <InputLabel\n key=\"label\"\n labelElement={labelElement}\n id={id ? `${id}-label` : undefined}\n htmlFor={id}\n required={isRequired}\n {...sharedProps}\n {...labelProps}\n >\n {label}\n </InputLabel>\n );\n\n const _description = description && (\n <InputDescription key=\"description\" {...sharedProps} {...descriptionProps}>\n {description}\n </InputDescription>\n );\n\n const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n const _error = typeof error !== 'boolean' && error && (\n <InputError {...errorProps} key=\"error\" {...sharedProps}>\n {error}\n </InputError>\n );\n\n const content = inputWrapperOrder.map((part) => {\n switch (part) {\n case 'label':\n return _label;\n case 'input':\n return _input;\n case 'description':\n return _description;\n case 'error':\n return _error;\n default:\n return null;\n }\n });\n\n return (\n <InputWrapperProvider\n value={getInputOffsets(inputWrapperOrder, {\n hasDescription: !!_description,\n hasError: !!_error,\n })}\n >\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {content}\n </Box>\n </InputWrapperProvider>\n );\n});\n\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputWrapper.js","sources":["../../../src/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { InputLabel, InputLabelStylesNames } from '../InputLabel/InputLabel';\nimport { InputError, InputErrorStylesNames } from '../InputError/InputError';\nimport {\n InputDescription,\n InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport { InputWrapperProvider } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets';\nimport useStyles from './InputWrapper.styles';\n\nexport type InputWrapperStylesNames =\n | Selectors<typeof useStyles>\n | InputLabelStylesNames\n | InputErrorStylesNames\n | InputDescriptionStylesNames;\n\nexport interface InputWrapperBaseProps {\n /** Input label, displayed before input */\n label?: React.ReactNode;\n\n /** Input description, displayed after label */\n description?: React.ReactNode;\n\n /** Displays error message after input */\n error?: React.ReactNode;\n\n /** Adds required attribute to the input and red asterisk on the right side of label */\n required?: boolean;\n\n /** Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input */\n withAsterisk?: boolean;\n\n /** Props spread to label element */\n labelProps?: Record<string, any>;\n\n /** Props spread to description element */\n descriptionProps?: Record<string, any>;\n\n /** Props spread to error element */\n errorProps?: Record<string, any>;\n\n /** Input container component, defaults to React.Fragment */\n inputContainer?(children: React.ReactNode): React.ReactNode;\n\n /** Controls order of the Input.Wrapper elements */\n inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n extends DefaultProps<InputWrapperStylesNames>,\n InputWrapperBaseProps,\n React.ComponentPropsWithoutRef<'div'> {\n /** Input that should be wrapped */\n children: React.ReactNode;\n\n /** htmlFor label prop */\n id?: string;\n\n /** Render label as label with htmlFor or as div */\n labelElement?: 'label' | 'div';\n\n /** Controls all elements font-size */\n size?: MantineSize;\n\n /** Static css selector base */\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial<InputWrapperProps> = {\n labelElement: 'label',\n size: 'sm',\n inputContainer: (children) => children,\n inputWrapperOrder: ['label', 'description', 'input', 'error'],\n};\n\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>((props, ref) => {\n const {\n className,\n label,\n children,\n required,\n id,\n error,\n description,\n labelElement,\n labelProps,\n descriptionProps,\n errorProps,\n classNames,\n styles,\n size,\n inputContainer,\n __staticSelector,\n unstyled,\n inputWrapperOrder,\n withAsterisk,\n ...others\n } = useComponentDefaultProps('InputWrapper', defaultProps, props);\n\n const { classes, cx } = useStyles(null, {\n classNames,\n styles,\n name: ['InputWrapper', __staticSelector],\n unstyled,\n });\n\n const sharedProps = {\n classNames,\n styles,\n unstyled,\n size,\n __staticSelector,\n };\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n\n const _label = label && (\n <InputLabel\n key=\"label\"\n labelElement={labelElement}\n id={id ? `${id}-label` : undefined}\n htmlFor={id}\n required={isRequired}\n {...sharedProps}\n {...labelProps}\n >\n {label}\n </InputLabel>\n );\n\n const _description = description && (\n <InputDescription\n key=\"description\"\n {...descriptionProps}\n {...sharedProps}\n size={descriptionProps?.size || sharedProps.size}\n >\n {description}\n </InputDescription>\n );\n\n const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n const _error = typeof error !== 'boolean' && error && (\n <InputError\n {...errorProps}\n {...sharedProps}\n size={errorProps?.size || sharedProps.size}\n key=\"error\"\n >\n {error}\n </InputError>\n );\n\n const content = inputWrapperOrder.map((part) => {\n switch (part) {\n case 'label':\n return _label;\n case 'input':\n return _input;\n case 'description':\n return _description;\n case 'error':\n return _error;\n default:\n return null;\n }\n });\n\n return (\n <InputWrapperProvider\n value={getInputOffsets(inputWrapperOrder, {\n hasDescription: !!_description,\n hasError: !!_error,\n })}\n >\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {content}\n </Box>\n </InputWrapperProvider>\n );\n});\n\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"names":[],"mappings":"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"}
|
package/esm/List/List.styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.styles.js","sources":["../../src/List/List.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\nexport interface ListStylesParams {\n withPadding: boolean;\n size: MantineNumberSize;\n listStyleType: string;\n}\n\nexport default createStyles((theme, { withPadding, size, listStyleType }: ListStylesParams) => ({\n root: {\n ...theme.fn.fontStyles(),\n listStyleType,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n lineHeight: theme.lineHeight,\n margin: 0,\n paddingLeft: withPadding ? theme.spacing.xl : 0,\n listStylePosition: '
|
|
1
|
+
{"version":3,"file":"List.styles.js","sources":["../../src/List/List.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\nexport interface ListStylesParams {\n withPadding: boolean;\n size: MantineNumberSize;\n listStyleType: string;\n}\n\nexport default createStyles((theme, { withPadding, size, listStyleType }: ListStylesParams) => ({\n root: {\n ...theme.fn.fontStyles(),\n listStyleType,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n lineHeight: theme.lineHeight,\n margin: 0,\n paddingLeft: withPadding ? theme.spacing.xl : 0,\n listStylePosition: 'inside',\n },\n}));\n"],"names":[],"mappings":";;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM;AAC9E,EAAE,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE;AACjE,IAAI,aAAa;AACjB,IAAI,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AAC5E,IAAI,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;AAC7D,IAAI,UAAU,EAAE,KAAK,CAAC,UAAU;AAChC,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,WAAW,EAAE,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;AACnD,IAAI,iBAAiB,EAAE,QAAQ;AAC/B,GAAG,CAAC;AACJ,CAAC,CAAC,CAAC;;;;"}
|
|
@@ -3,9 +3,12 @@ import { createStyles } from '@mantine/styles';
|
|
|
3
3
|
var useStyles = createStyles((theme, { spacing, center }, getRef) => ({
|
|
4
4
|
itemWrapper: {
|
|
5
5
|
ref: getRef("itemWrapper"),
|
|
6
|
-
display: "inline"
|
|
6
|
+
display: "inline-flex",
|
|
7
|
+
flexDirection: "column",
|
|
8
|
+
whiteSpace: "normal"
|
|
7
9
|
},
|
|
8
10
|
item: {
|
|
11
|
+
whiteSpace: "nowrap",
|
|
9
12
|
lineHeight: center ? 1 : theme.lineHeight,
|
|
10
13
|
"&:not(:first-of-type)": {
|
|
11
14
|
marginTop: theme.fn.size({ size: spacing, sizes: theme.spacing })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sources":["../../../src/List/ListItem/ListItem.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\ninterface ListItemStyles {\n spacing: MantineNumberSize;\n center: boolean;\n}\n\nexport default createStyles((theme, { spacing, center }: ListItemStyles, getRef) => ({\n itemWrapper: {\n ref: getRef('itemWrapper'),\n display: 'inline',\n },\n\n item: {\n lineHeight: center ? 1 : theme.lineHeight,\n\n '&:not(:first-of-type)': {\n marginTop: theme.fn.size({ size: spacing, sizes: theme.spacing }),\n },\n },\n\n withIcon: {\n listStyle: 'none',\n\n [`& .${getRef('itemWrapper')}`]: {\n display: 'inline-flex',\n alignItems: center ? 'center' : 'flex-start',\n },\n },\n\n itemIcon: {\n display: 'inline-block',\n verticalAlign: 'middle',\n marginRight: theme.spacing.sm,\n },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,MAAM,MAAM;AACrE,EAAE,WAAW,EAAE;AACf,IAAI,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC;AAC9B,IAAI,OAAO,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sources":["../../../src/List/ListItem/ListItem.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\ninterface ListItemStyles {\n spacing: MantineNumberSize;\n center: boolean;\n}\n\nexport default createStyles((theme, { spacing, center }: ListItemStyles, getRef) => ({\n itemWrapper: {\n ref: getRef('itemWrapper'),\n display: 'inline-flex',\n flexDirection: 'column',\n whiteSpace: 'normal',\n },\n\n item: {\n whiteSpace: 'nowrap',\n lineHeight: center ? 1 : theme.lineHeight,\n\n '&:not(:first-of-type)': {\n marginTop: theme.fn.size({ size: spacing, sizes: theme.spacing }),\n },\n },\n\n withIcon: {\n listStyle: 'none',\n\n [`& .${getRef('itemWrapper')}`]: {\n display: 'inline-flex',\n alignItems: center ? 'center' : 'flex-start',\n },\n },\n\n itemIcon: {\n display: 'inline-block',\n verticalAlign: 'middle',\n marginRight: theme.spacing.sm,\n },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,MAAM,MAAM;AACrE,EAAE,WAAW,EAAE;AACf,IAAI,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC;AAC9B,IAAI,OAAO,EAAE,aAAa;AAC1B,IAAI,aAAa,EAAE,QAAQ;AAC3B,IAAI,UAAU,EAAE,QAAQ;AACxB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,UAAU,EAAE,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,UAAU;AAC7C,IAAI,uBAAuB,EAAE;AAC7B,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AACvE,KAAK;AACL,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG;AACrC,MAAM,OAAO,EAAE,aAAa;AAC5B,MAAM,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY;AAClD,KAAK;AACL,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,OAAO,EAAE,cAAc;AAC3B,IAAI,aAAa,EAAE,QAAQ;AAC3B,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
|
|
@@ -234,7 +234,7 @@ const MultiSelect = forwardRef((props, ref) => {
|
|
|
234
234
|
const wrapperRef = useRef();
|
|
235
235
|
const itemsRefs = useRef({});
|
|
236
236
|
const uuid = useId(id);
|
|
237
|
-
const [dropdownOpened,
|
|
237
|
+
const [dropdownOpened, setDropdownOpened] = useState(initiallyOpened);
|
|
238
238
|
const [hovered, setHovered] = useState(-1);
|
|
239
239
|
const [direction, setDirection] = useState("column");
|
|
240
240
|
const [_searchValue, handleSearchChange] = useUncontrolled({
|
|
@@ -252,11 +252,6 @@ const MultiSelect = forwardRef((props, ref) => {
|
|
|
252
252
|
});
|
|
253
253
|
const isCreatable = creatable && typeof getCreateLabel === "function";
|
|
254
254
|
let createLabel = null;
|
|
255
|
-
const setDropdownOpened = (opened) => {
|
|
256
|
-
_setDropdownOpened(opened);
|
|
257
|
-
const handler = opened ? onDropdownOpen : onDropdownClose;
|
|
258
|
-
typeof handler === "function" && handler();
|
|
259
|
-
};
|
|
260
255
|
const formattedData = data.map((item) => typeof item === "string" ? { label: item, value: item } : item);
|
|
261
256
|
const sortedData = groupOptions({ data: formattedData });
|
|
262
257
|
const [_value, setValue] = useUncontrolled({
|
|
@@ -314,9 +309,6 @@ const MultiSelect = forwardRef((props, ref) => {
|
|
|
314
309
|
valuesOverflow.current = true;
|
|
315
310
|
setDropdownOpened(false);
|
|
316
311
|
}
|
|
317
|
-
if (filteredData.length === 0) {
|
|
318
|
-
setDropdownOpened(false);
|
|
319
|
-
}
|
|
320
312
|
}, [_value]);
|
|
321
313
|
const handleItemSelect = (item) => {
|
|
322
314
|
if (!readOnly) {
|
|
@@ -343,6 +335,9 @@ const MultiSelect = forwardRef((props, ref) => {
|
|
|
343
335
|
if (hovered === filteredData.length - 1) {
|
|
344
336
|
setHovered(filteredData.length - 2);
|
|
345
337
|
}
|
|
338
|
+
if (filteredData.length === 1) {
|
|
339
|
+
setDropdownOpened(false);
|
|
340
|
+
}
|
|
346
341
|
}
|
|
347
342
|
}
|
|
348
343
|
};
|
|
@@ -506,6 +501,10 @@ const MultiSelect = forwardRef((props, ref) => {
|
|
|
506
501
|
filteredData.push({ label: _searchValue, value: _searchValue, creatable: true });
|
|
507
502
|
}
|
|
508
503
|
const shouldRenderDropdown = !readOnly && (filteredData.length > 0 ? dropdownOpened : dropdownOpened && !!nothingFound);
|
|
504
|
+
useDidUpdate(() => {
|
|
505
|
+
const handler = shouldRenderDropdown ? onDropdownOpen : onDropdownClose;
|
|
506
|
+
typeof handler === "function" && handler();
|
|
507
|
+
}, [shouldRenderDropdown]);
|
|
509
508
|
return /* @__PURE__ */ React.createElement(Input.Wrapper, __spreadValues(__spreadValues({
|
|
510
509
|
required,
|
|
511
510
|
id: uuid,
|