@mantine/core 5.1.1 → 5.1.4
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/Alert/Alert.js +4 -3
- package/cjs/Alert/Alert.js.map +1 -1
- package/cjs/Alert/Alert.styles.js +7 -2
- package/cjs/Alert/Alert.styles.js.map +1 -1
- package/cjs/AppShell/HorizontalSection/HorizontalSection.styles.js +1 -0
- package/cjs/AppShell/HorizontalSection/HorizontalSection.styles.js.map +1 -1
- package/cjs/Drawer/Drawer.js +6 -3
- package/cjs/Drawer/Drawer.js.map +1 -1
- package/cjs/FileButton/FileButton.js +5 -1
- package/cjs/FileButton/FileButton.js.map +1 -1
- package/cjs/FileInput/FileInput.js +8 -1
- package/cjs/FileInput/FileInput.js.map +1 -1
- package/cjs/Indicator/Indicator.styles.js +5 -1
- package/cjs/Indicator/Indicator.styles.js.map +1 -1
- package/cjs/Input/InputError/InputError.js +2 -1
- package/cjs/Input/InputError/InputError.js.map +1 -1
- package/cjs/Modal/Modal.js +6 -3
- package/cjs/Modal/Modal.js.map +1 -1
- package/cjs/Notification/Notification.js +1 -1
- package/cjs/Notification/Notification.js.map +1 -1
- package/cjs/Notification/Notification.styles.js +3 -6
- package/cjs/Notification/Notification.styles.js.map +1 -1
- package/cjs/Slider/RangeSlider/RangeSlider.js +1 -7
- package/cjs/Slider/RangeSlider/RangeSlider.js.map +1 -1
- package/cjs/Slider/Slider/Slider.js +1 -4
- package/cjs/Slider/Slider/Slider.js.map +1 -1
- package/cjs/Slider/SliderRoot/SliderRoot.styles.js +2 -1
- package/cjs/Slider/SliderRoot/SliderRoot.styles.js.map +1 -1
- package/cjs/Slider/Thumb/Thumb.styles.js +4 -2
- package/cjs/Slider/Thumb/Thumb.styles.js.map +1 -1
- package/esm/Alert/Alert.js +4 -3
- package/esm/Alert/Alert.js.map +1 -1
- package/esm/Alert/Alert.styles.js +7 -2
- package/esm/Alert/Alert.styles.js.map +1 -1
- package/esm/AppShell/HorizontalSection/HorizontalSection.styles.js +1 -0
- package/esm/AppShell/HorizontalSection/HorizontalSection.styles.js.map +1 -1
- package/esm/Drawer/Drawer.js +6 -3
- package/esm/Drawer/Drawer.js.map +1 -1
- package/esm/FileButton/FileButton.js +6 -2
- package/esm/FileButton/FileButton.js.map +1 -1
- package/esm/FileInput/FileInput.js +9 -2
- package/esm/FileInput/FileInput.js.map +1 -1
- package/esm/Indicator/Indicator.styles.js +5 -1
- package/esm/Indicator/Indicator.styles.js.map +1 -1
- package/esm/Input/InputError/InputError.js +2 -1
- package/esm/Input/InputError/InputError.js.map +1 -1
- package/esm/Modal/Modal.js +6 -3
- package/esm/Modal/Modal.js.map +1 -1
- package/esm/Notification/Notification.js +1 -1
- package/esm/Notification/Notification.js.map +1 -1
- package/esm/Notification/Notification.styles.js +3 -6
- package/esm/Notification/Notification.styles.js.map +1 -1
- package/esm/Slider/RangeSlider/RangeSlider.js +1 -7
- package/esm/Slider/RangeSlider/RangeSlider.js.map +1 -1
- package/esm/Slider/Slider/Slider.js +1 -4
- package/esm/Slider/Slider/Slider.js.map +1 -1
- package/esm/Slider/SliderRoot/SliderRoot.styles.js +2 -1
- package/esm/Slider/SliderRoot/SliderRoot.styles.js.map +1 -1
- package/esm/Slider/Thumb/Thumb.styles.js +4 -2
- package/esm/Slider/Thumb/Thumb.styles.js.map +1 -1
- package/lib/Alert/Alert.styles.d.ts.map +1 -1
- package/lib/AppShell/HorizontalSection/HorizontalSection.styles.d.ts.map +1 -1
- package/lib/Drawer/Drawer.d.ts +2 -0
- package/lib/Drawer/Drawer.d.ts.map +1 -1
- package/lib/FileButton/FileButton.d.ts +2 -0
- package/lib/FileButton/FileButton.d.ts.map +1 -1
- package/lib/FileInput/FileInput.d.ts.map +1 -1
- package/lib/Indicator/Indicator.styles.d.ts.map +1 -1
- package/lib/Modal/Modal.d.ts +2 -0
- package/lib/Modal/Modal.d.ts.map +1 -1
- package/lib/Notification/Notification.styles.d.ts +1 -0
- package/lib/Notification/Notification.styles.d.ts.map +1 -1
- package/lib/Slider/RangeSlider/RangeSlider.d.ts.map +1 -1
- package/lib/Slider/Slider/Slider.d.ts.map +1 -1
- package/lib/Slider/SliderRoot/SliderRoot.styles.d.ts.map +1 -1
- package/lib/Slider/Thumb/Thumb.styles.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -64,7 +64,10 @@ var useStyles = createStyles((theme, { color, radius, variant }) => ({
|
|
|
64
64
|
justifyContent: "space-between",
|
|
65
65
|
lineHeight: theme.lineHeight,
|
|
66
66
|
fontSize: theme.fontSizes.sm,
|
|
67
|
-
fontWeight: 700
|
|
67
|
+
fontWeight: 700,
|
|
68
|
+
"&[data-with-close-button]": {
|
|
69
|
+
paddingRight: theme.spacing.md
|
|
70
|
+
}
|
|
68
71
|
},
|
|
69
72
|
label: {
|
|
70
73
|
display: "block",
|
|
@@ -89,7 +92,9 @@ var useStyles = createStyles((theme, { color, radius, variant }) => ({
|
|
|
89
92
|
color: variant === "filled" ? theme.white : theme.colorScheme === "dark" ? variant === "light" ? theme.white : theme.colors.dark[0] : theme.black
|
|
90
93
|
}),
|
|
91
94
|
closeButton: {
|
|
92
|
-
|
|
95
|
+
position: "absolute",
|
|
96
|
+
top: theme.spacing.sm,
|
|
97
|
+
right: theme.spacing.sm,
|
|
93
98
|
color: "inherit"
|
|
94
99
|
}
|
|
95
100
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.styles.js","sources":["../../src/Alert/Alert.styles.ts"],"sourcesContent":["import {\n createStyles,\n CSSObject,\n MantineColor,\n MantineNumberSize,\n MantineTheme,\n} from '@mantine/styles';\n\ntype AlertVariant = 'filled' | 'outline' | 'light';\n\nexport interface AlertStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n variant: AlertVariant;\n}\n\ninterface GetVariantStylesInput {\n variant: AlertVariant;\n color: MantineColor;\n theme: MantineTheme;\n}\n\nfunction getVariantStyles({ variant, color, theme }: GetVariantStylesInput): CSSObject {\n if (variant === 'filled') {\n const colors = theme.fn.variant({ variant: 'filled', color });\n return {\n backgroundColor: colors.background,\n color: theme.white,\n };\n }\n\n if (variant === 'outline') {\n const colors = theme.fn.variant({ variant: 'outline', color });\n return {\n color: colors.color,\n borderColor: colors.border,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n };\n }\n\n const colors = theme.fn.variant({ variant: 'light', color });\n\n return {\n backgroundColor: colors.background,\n color: colors.color,\n };\n}\n\nexport default createStyles((theme, { color, radius, variant }: AlertStylesParams) => ({\n root: {\n ...theme.fn.fontStyles(),\n position: 'relative',\n overflow: 'hidden',\n padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,\n borderRadius: theme.fn.radius(radius),\n border: '1px solid transparent',\n ...getVariantStyles({ variant, color, theme }),\n },\n\n wrapper: {\n display: 'flex',\n },\n\n body: {\n flex: 1,\n },\n\n title: {\n boxSizing: 'border-box',\n margin: 0,\n marginBottom: 7,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n lineHeight: theme.lineHeight,\n fontSize: theme.fontSizes.sm,\n fontWeight: 700,\n },\n\n label: {\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n\n icon: {\n lineHeight: 1,\n width: 20,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n marginRight: theme.spacing.md,\n marginTop: 1,\n },\n\n message: {\n ...theme.fn.fontStyles(),\n lineHeight: theme.lineHeight,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n fontSize: theme.fontSizes.sm,\n color:\n variant === 'filled'\n ? theme.white\n : theme.colorScheme === 'dark'\n ? variant === 'light'\n ? theme.white\n : theme.colors.dark[0]\n : theme.black,\n },\n\n closeButton: {\n
|
|
1
|
+
{"version":3,"file":"Alert.styles.js","sources":["../../src/Alert/Alert.styles.ts"],"sourcesContent":["import {\n createStyles,\n CSSObject,\n MantineColor,\n MantineNumberSize,\n MantineTheme,\n} from '@mantine/styles';\n\ntype AlertVariant = 'filled' | 'outline' | 'light';\n\nexport interface AlertStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n variant: AlertVariant;\n}\n\ninterface GetVariantStylesInput {\n variant: AlertVariant;\n color: MantineColor;\n theme: MantineTheme;\n}\n\nfunction getVariantStyles({ variant, color, theme }: GetVariantStylesInput): CSSObject {\n if (variant === 'filled') {\n const colors = theme.fn.variant({ variant: 'filled', color });\n return {\n backgroundColor: colors.background,\n color: theme.white,\n };\n }\n\n if (variant === 'outline') {\n const colors = theme.fn.variant({ variant: 'outline', color });\n return {\n color: colors.color,\n borderColor: colors.border,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n };\n }\n\n const colors = theme.fn.variant({ variant: 'light', color });\n\n return {\n backgroundColor: colors.background,\n color: colors.color,\n };\n}\n\nexport default createStyles((theme, { color, radius, variant }: AlertStylesParams) => ({\n root: {\n ...theme.fn.fontStyles(),\n position: 'relative',\n overflow: 'hidden',\n padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,\n borderRadius: theme.fn.radius(radius),\n border: '1px solid transparent',\n ...getVariantStyles({ variant, color, theme }),\n },\n\n wrapper: {\n display: 'flex',\n },\n\n body: {\n flex: 1,\n },\n\n title: {\n boxSizing: 'border-box',\n margin: 0,\n marginBottom: 7,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n lineHeight: theme.lineHeight,\n fontSize: theme.fontSizes.sm,\n fontWeight: 700,\n\n '&[data-with-close-button]': {\n paddingRight: theme.spacing.md,\n },\n },\n\n label: {\n display: 'block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n\n icon: {\n lineHeight: 1,\n width: 20,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n marginRight: theme.spacing.md,\n marginTop: 1,\n },\n\n message: {\n ...theme.fn.fontStyles(),\n lineHeight: theme.lineHeight,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n fontSize: theme.fontSizes.sm,\n color:\n variant === 'filled'\n ? theme.white\n : theme.colorScheme === 'dark'\n ? variant === 'light'\n ? theme.white\n : theme.colors.dark[0]\n : theme.black,\n },\n\n closeButton: {\n position: 'absolute',\n top: theme.spacing.sm,\n right: theme.spacing.sm,\n color: 'inherit',\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;AAIlE,SAAS,gBAAgB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;AACrD,EAAE,IAAI,OAAO,KAAK,QAAQ,EAAE;AAC5B,IAAI,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AACnE,IAAI,OAAO;AACX,MAAM,eAAe,EAAE,OAAO,CAAC,UAAU;AACzC,MAAM,KAAK,EAAE,KAAK,CAAC,KAAK;AACxB,KAAK,CAAC;AACN,GAAG;AACH,EAAE,IAAI,OAAO,KAAK,SAAS,EAAE;AAC7B,IAAI,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AACpE,IAAI,OAAO;AACX,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK;AAC1B,MAAM,WAAW,EAAE,OAAO,CAAC,MAAM;AACjC,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACxF,KAAK,CAAC;AACN,GAAG;AACH,EAAE,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AAC/D,EAAE,OAAO;AACT,IAAI,eAAe,EAAE,MAAM,CAAC,UAAU;AACtC,IAAI,KAAK,EAAE,MAAM,CAAC,KAAK;AACvB,GAAG,CAAC;AACJ,CAAC;AACD,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;AACpE,EAAE,IAAI,EAAE,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE;AAChF,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;AAC1D,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,IAAI,MAAM,EAAE,uBAAuB;AACnC,GAAG,CAAC,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD,EAAE,OAAO,EAAE;AACX,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC;AACX,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,YAAY,EAAE,CAAC;AACnB,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,cAAc,EAAE,eAAe;AACnC,IAAI,UAAU,EAAE,KAAK,CAAC,UAAU;AAChC,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE;AAChC,IAAI,UAAU,EAAE,GAAG;AACnB,IAAI,2BAA2B,EAAE;AACjC,MAAM,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACpC,KAAK;AACL,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,YAAY,EAAE,UAAU;AAC5B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,UAAU,EAAE,CAAC;AACjB,IAAI,KAAK,EAAE,EAAE;AACb,IAAI,MAAM,EAAE,EAAE;AACd,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,cAAc,EAAE,YAAY;AAChC,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,IAAI,SAAS,EAAE,CAAC;AAChB,GAAG;AACH,EAAE,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE;AACpE,IAAI,UAAU,EAAE,KAAK,CAAC,UAAU;AAChC,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE;AAChC,IAAI,KAAK,EAAE,OAAO,KAAK,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,OAAO,KAAK,OAAO,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACrJ,GAAG,CAAC;AACJ,EAAE,WAAW,EAAE;AACf,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACzB,IAAI,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AAC3B,IAAI,KAAK,EAAE,SAAS;AACpB,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
|
|
@@ -40,6 +40,7 @@ var useStyles = createStyles((theme, {
|
|
|
40
40
|
return {
|
|
41
41
|
root: __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, theme.fn.fontStyles()), position), {
|
|
42
42
|
top: (position == null ? void 0 : position.top) || "var(--mantine-header-height)",
|
|
43
|
+
bottom: 0,
|
|
43
44
|
zIndex,
|
|
44
45
|
height: height || "calc(100vh - var(--mantine-header-height, 0px) - var(--mantine-footer-height, 0px))",
|
|
45
46
|
width: (width == null ? void 0 : width.base) || "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalSection.styles.js","sources":["../../../src/AppShell/HorizontalSection/HorizontalSection.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\nimport { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints';\n\nexport type HorizontalSectionWidth = Partial<Record<string, string | number>>;\n\nexport interface HorizontalSectionPosition {\n top?: number;\n left?: number;\n bottom?: number;\n right?: number;\n}\n\ninterface HorizontalSectionStyles {\n width: Partial<Record<string, string | number>>;\n height: string | number;\n position: HorizontalSectionPosition;\n hiddenBreakpoint: MantineNumberSize;\n fixed: boolean;\n zIndex: React.CSSProperties['zIndex'];\n section: 'navbar' | 'aside';\n withBorder: boolean;\n}\n\nexport default createStyles(\n (\n theme,\n {\n height,\n width,\n fixed,\n position,\n hiddenBreakpoint,\n zIndex,\n section,\n withBorder,\n }: HorizontalSectionStyles\n ) => {\n const breakpoints =\n typeof width === 'object' && width !== null\n ? getSortedBreakpoints(width, theme).reduce((acc, [breakpoint, breakpointSize]) => {\n acc[`@media (min-width: ${breakpoint + 1}px)`] = {\n width: breakpointSize,\n minWidth: breakpointSize,\n };\n\n return acc;\n }, {})\n : null;\n\n return {\n root: {\n ...theme.fn.fontStyles(),\n ...position,\n top: position?.top || 'var(--mantine-header-height)',\n zIndex,\n height:\n height ||\n 'calc(100vh - var(--mantine-header-height, 0px) - var(--mantine-footer-height, 0px))',\n width: width?.base || '100%',\n position: fixed ? 'fixed' : 'static',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n [withBorder && section === 'navbar' ? 'borderRight' : 'borderLeft']: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]\n }`,\n ...breakpoints,\n\n '&[data-hidden]': {\n [`@media (max-width: ${theme.fn.size({\n size: hiddenBreakpoint,\n sizes: theme.breakpoints,\n })}px)`]: {\n display: 'none',\n },\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HorizontalSection.styles.js","sources":["../../../src/AppShell/HorizontalSection/HorizontalSection.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\nimport { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints';\n\nexport type HorizontalSectionWidth = Partial<Record<string, string | number>>;\n\nexport interface HorizontalSectionPosition {\n top?: number;\n left?: number;\n bottom?: number;\n right?: number;\n}\n\ninterface HorizontalSectionStyles {\n width: Partial<Record<string, string | number>>;\n height: string | number;\n position: HorizontalSectionPosition;\n hiddenBreakpoint: MantineNumberSize;\n fixed: boolean;\n zIndex: React.CSSProperties['zIndex'];\n section: 'navbar' | 'aside';\n withBorder: boolean;\n}\n\nexport default createStyles(\n (\n theme,\n {\n height,\n width,\n fixed,\n position,\n hiddenBreakpoint,\n zIndex,\n section,\n withBorder,\n }: HorizontalSectionStyles\n ) => {\n const breakpoints =\n typeof width === 'object' && width !== null\n ? getSortedBreakpoints(width, theme).reduce((acc, [breakpoint, breakpointSize]) => {\n acc[`@media (min-width: ${breakpoint + 1}px)`] = {\n width: breakpointSize,\n minWidth: breakpointSize,\n };\n\n return acc;\n }, {})\n : null;\n\n return {\n root: {\n ...theme.fn.fontStyles(),\n ...position,\n top: position?.top || 'var(--mantine-header-height)',\n bottom: 0,\n zIndex,\n height:\n height ||\n 'calc(100vh - var(--mantine-header-height, 0px) - var(--mantine-footer-height, 0px))',\n width: width?.base || '100%',\n position: fixed ? 'fixed' : 'static',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n [withBorder && section === 'navbar' ? 'borderRight' : 'borderLeft']: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]\n }`,\n ...breakpoints,\n\n '&[data-hidden]': {\n [`@media (max-width: ${theme.fn.size({\n size: hiddenBreakpoint,\n sizes: theme.breakpoints,\n })}px)`]: {\n display: 'none',\n },\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
package/esm/Drawer/Drawer.js
CHANGED
|
@@ -65,6 +65,7 @@ const defaultProps = {
|
|
|
65
65
|
withOverlay: true,
|
|
66
66
|
withCloseButton: true,
|
|
67
67
|
withinPortal: true,
|
|
68
|
+
withFocusReturn: true,
|
|
68
69
|
overlayBlur: 0
|
|
69
70
|
};
|
|
70
71
|
function Drawer(props) {
|
|
@@ -96,7 +97,8 @@ function Drawer(props) {
|
|
|
96
97
|
target,
|
|
97
98
|
withinPortal,
|
|
98
99
|
overlayBlur,
|
|
99
|
-
unstyled
|
|
100
|
+
unstyled,
|
|
101
|
+
withFocusReturn
|
|
100
102
|
} = _a, others = __objRest(_a, [
|
|
101
103
|
"className",
|
|
102
104
|
"opened",
|
|
@@ -125,7 +127,8 @@ function Drawer(props) {
|
|
|
125
127
|
"target",
|
|
126
128
|
"withinPortal",
|
|
127
129
|
"overlayBlur",
|
|
128
|
-
"unstyled"
|
|
130
|
+
"unstyled",
|
|
131
|
+
"withFocusReturn"
|
|
129
132
|
]);
|
|
130
133
|
const { classes, cx, theme } = useStyles({ size, position, zIndex }, { classNames, styles, unstyled, name: "Drawer" });
|
|
131
134
|
const focusTrapRef = useFocusTrap(trapFocus && opened);
|
|
@@ -144,7 +147,7 @@ function Drawer(props) {
|
|
|
144
147
|
}
|
|
145
148
|
return void 0;
|
|
146
149
|
}, [trapFocus]);
|
|
147
|
-
useFocusReturn({ opened, shouldReturnFocus: trapFocus });
|
|
150
|
+
useFocusReturn({ opened, shouldReturnFocus: trapFocus && withFocusReturn });
|
|
148
151
|
return /* @__PURE__ */ React.createElement(OptionalPortal, {
|
|
149
152
|
withinPortal,
|
|
150
153
|
target
|
package/esm/Drawer/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineShadow,\n Selectors,\n MantineStyleSystemSize,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Paper } from '../Paper';\nimport { Overlay } from '../Overlay';\nimport { OptionalPortal } from '../Portal';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { CloseButton } from '../CloseButton';\nimport { GroupedTransition, MantineTransition } from '../Transition';\nimport useStyles, { DrawerPosition } from './Drawer.styles';\n\nexport type DrawerStylesNames = Exclude<Selectors<typeof useStyles>, 'withOverlay'>;\n\nexport interface DrawerProps\n extends Omit<DefaultProps<DrawerStylesNames>, MantineStyleSystemSize>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n /** If true drawer is mounted to the dom */\n opened: boolean;\n\n /** Called when drawer is closed (Escape key and click outside, depending on options) */\n onClose(): void;\n\n /** Drawer body position */\n position?: DrawerPosition;\n\n /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */\n size?: string | number;\n\n /** Drawer body shadow from theme or any css shadow value */\n shadow?: MantineShadow;\n\n /** Drawer body padding from theme or number for padding in px */\n padding?: MantineNumberSize;\n\n /** Drawer z-index property */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Disables focus trap */\n trapFocus?: boolean;\n\n /** Disables scroll lock */\n lockScroll?: boolean;\n\n /** Disable onMouseDown trigger for outside events */\n closeOnClickOutside?: boolean;\n\n /** Disable onKeyDownCapture trigger for escape key press */\n closeOnEscape?: boolean;\n\n /** Drawer appear and disappear transition, see Transition component for full documentation */\n transition?: MantineTransition;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Drawer transitionTimingFunction css property */\n transitionTimingFunction?: string;\n\n /** Removes overlay entirely */\n withOverlay?: boolean;\n\n /** Overlay opacity, number from 0 to 1 */\n overlayOpacity?: number;\n\n /** Overlay color, for example, #000 */\n overlayColor?: string;\n\n /** Overlay blur in px */\n overlayBlur?: number;\n\n /** Drawer title, displayed in header before close button */\n title?: React.ReactNode;\n\n /** Hides close button if set to false, drawer still can be closed with escape key and by clicking outside */\n withCloseButton?: boolean;\n\n /** Close button aria-label */\n closeButtonLabel?: string;\n\n /** Target element or selector where drawer portal should be rendered */\n target?: HTMLElement | string;\n\n /** Determines whether drawer should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n}\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n top: 'slide-down',\n bottom: 'slide-up',\n left: 'slide-right',\n right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n top: 'slide-down',\n bottom: 'slide-up',\n right: 'slide-right',\n left: 'slide-left',\n};\n\nconst defaultProps: Partial<DrawerProps> = {\n position: 'left',\n size: 'md',\n transitionDuration: 250,\n transitionTimingFunction: 'ease',\n zIndex: getDefaultZIndex('modal'),\n shadow: 'md',\n padding: 0,\n lockScroll: true,\n closeOnClickOutside: true,\n closeOnEscape: true,\n trapFocus: true,\n withOverlay: true,\n withCloseButton: true,\n withinPortal: true,\n overlayBlur: 0,\n};\n\nexport function Drawer(props: DrawerProps) {\n const {\n className,\n opened,\n onClose,\n position,\n size,\n trapFocus,\n lockScroll,\n closeOnClickOutside,\n closeOnEscape,\n transition,\n transitionDuration,\n transitionTimingFunction,\n zIndex,\n overlayColor,\n overlayOpacity,\n children,\n withOverlay,\n shadow,\n padding,\n title,\n withCloseButton,\n closeButtonLabel,\n classNames,\n styles,\n target,\n withinPortal,\n overlayBlur,\n unstyled,\n ...others\n } = useComponentDefaultProps('Drawer', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { size, position, zIndex },\n { classNames, styles, unstyled, name: 'Drawer' }\n );\n\n const focusTrapRef = useFocusTrap(trapFocus && opened);\n\n const [, _lockScroll] = useScrollLock();\n\n const drawerTransition =\n transition || (theme.dir === 'rtl' ? rtlTransitions : transitions)[position];\n const _overlayOpacity =\n typeof overlayOpacity === 'number'\n ? overlayOpacity\n : theme.colorScheme === 'dark'\n ? 0.85\n : 0.75;\n\n const _closeOnEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && closeOnEscape) {\n onClose();\n }\n };\n\n useEffect(() => {\n if (!trapFocus) {\n window.addEventListener('keydown', _closeOnEscape);\n return () => window.removeEventListener('keydown', _closeOnEscape);\n }\n\n return undefined;\n }, [trapFocus]);\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus });\n\n return (\n <OptionalPortal withinPortal={withinPortal} target={target}>\n <GroupedTransition\n onExited={() => _lockScroll(false)}\n onEntered={() => _lockScroll(lockScroll && true)}\n mounted={opened}\n timingFunction={transitionTimingFunction}\n transitions={{\n overlay: { duration: transitionDuration / 2, transition: 'fade', timingFunction: 'ease' },\n drawer: {\n duration: transitionDuration,\n transition: drawerTransition,\n timingFunction: transitionTimingFunction,\n },\n }}\n >\n {(transitionStyles) => (\n <Box className={cx(classes.root, className)} role=\"dialog\" aria-modal {...others}>\n <Paper<'div'>\n className={cx(classes.drawer, className)}\n ref={focusTrapRef}\n style={transitionStyles.drawer}\n radius={0}\n tabIndex={-1}\n onKeyDownCapture={(event) => {\n const shouldTrigger =\n (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n\n shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();\n }}\n shadow={shadow}\n p={padding}\n unstyled={unstyled}\n >\n {(title || withCloseButton) && (\n <div className={classes.header}>\n <Text className={classes.title} unstyled={unstyled}>\n {title}\n </Text>\n\n {withCloseButton && (\n <CloseButton\n iconSize={16}\n onClick={onClose}\n aria-label={closeButtonLabel}\n className={classes.closeButton}\n unstyled={unstyled}\n />\n )}\n </div>\n )}\n {children}\n </Paper>\n\n {withOverlay && (\n <div style={transitionStyles.overlay}>\n <Overlay\n unstyled={unstyled}\n blur={overlayBlur}\n onMouseDown={() => closeOnClickOutside && onClose()}\n className={classes.overlay}\n opacity={_overlayOpacity}\n zIndex={0}\n color={\n overlayColor ||\n (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black)\n }\n />\n </div>\n )}\n </Box>\n )}\n </GroupedTransition>\n </OptionalPortal>\n );\n}\n\nDrawer.displayName = '@mantine/core/Drawer';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineShadow,\n Selectors,\n MantineStyleSystemSize,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Paper } from '../Paper';\nimport { Overlay } from '../Overlay';\nimport { OptionalPortal } from '../Portal';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { CloseButton } from '../CloseButton';\nimport { GroupedTransition, MantineTransition } from '../Transition';\nimport useStyles, { DrawerPosition } from './Drawer.styles';\n\nexport type DrawerStylesNames = Exclude<Selectors<typeof useStyles>, 'withOverlay'>;\n\nexport interface DrawerProps\n extends Omit<DefaultProps<DrawerStylesNames>, MantineStyleSystemSize>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n /** If true drawer is mounted to the dom */\n opened: boolean;\n\n /** Called when drawer is closed (Escape key and click outside, depending on options) */\n onClose(): void;\n\n /** Drawer body position */\n position?: DrawerPosition;\n\n /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */\n size?: string | number;\n\n /** Drawer body shadow from theme or any css shadow value */\n shadow?: MantineShadow;\n\n /** Drawer body padding from theme or number for padding in px */\n padding?: MantineNumberSize;\n\n /** Drawer z-index property */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Disables focus trap */\n trapFocus?: boolean;\n\n /** Disables scroll lock */\n lockScroll?: boolean;\n\n /** Disable onMouseDown trigger for outside events */\n closeOnClickOutside?: boolean;\n\n /** Disable onKeyDownCapture trigger for escape key press */\n closeOnEscape?: boolean;\n\n /** Drawer appear and disappear transition, see Transition component for full documentation */\n transition?: MantineTransition;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Drawer transitionTimingFunction css property */\n transitionTimingFunction?: string;\n\n /** Removes overlay entirely */\n withOverlay?: boolean;\n\n /** Overlay opacity, number from 0 to 1 */\n overlayOpacity?: number;\n\n /** Overlay color, for example, #000 */\n overlayColor?: string;\n\n /** Overlay blur in px */\n overlayBlur?: number;\n\n /** Drawer title, displayed in header before close button */\n title?: React.ReactNode;\n\n /** Hides close button if set to false, drawer still can be closed with escape key and by clicking outside */\n withCloseButton?: boolean;\n\n /** Close button aria-label */\n closeButtonLabel?: string;\n\n /** Target element or selector where drawer portal should be rendered */\n target?: HTMLElement | string;\n\n /** Determines whether drawer should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** Determines whether focus should be returned to the last active element when drawer is closed */\n withFocusReturn?: boolean;\n}\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n top: 'slide-down',\n bottom: 'slide-up',\n left: 'slide-right',\n right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n top: 'slide-down',\n bottom: 'slide-up',\n right: 'slide-right',\n left: 'slide-left',\n};\n\nconst defaultProps: Partial<DrawerProps> = {\n position: 'left',\n size: 'md',\n transitionDuration: 250,\n transitionTimingFunction: 'ease',\n zIndex: getDefaultZIndex('modal'),\n shadow: 'md',\n padding: 0,\n lockScroll: true,\n closeOnClickOutside: true,\n closeOnEscape: true,\n trapFocus: true,\n withOverlay: true,\n withCloseButton: true,\n withinPortal: true,\n withFocusReturn: true,\n overlayBlur: 0,\n};\n\nexport function Drawer(props: DrawerProps) {\n const {\n className,\n opened,\n onClose,\n position,\n size,\n trapFocus,\n lockScroll,\n closeOnClickOutside,\n closeOnEscape,\n transition,\n transitionDuration,\n transitionTimingFunction,\n zIndex,\n overlayColor,\n overlayOpacity,\n children,\n withOverlay,\n shadow,\n padding,\n title,\n withCloseButton,\n closeButtonLabel,\n classNames,\n styles,\n target,\n withinPortal,\n overlayBlur,\n unstyled,\n withFocusReturn,\n ...others\n } = useComponentDefaultProps('Drawer', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { size, position, zIndex },\n { classNames, styles, unstyled, name: 'Drawer' }\n );\n\n const focusTrapRef = useFocusTrap(trapFocus && opened);\n\n const [, _lockScroll] = useScrollLock();\n\n const drawerTransition =\n transition || (theme.dir === 'rtl' ? rtlTransitions : transitions)[position];\n const _overlayOpacity =\n typeof overlayOpacity === 'number'\n ? overlayOpacity\n : theme.colorScheme === 'dark'\n ? 0.85\n : 0.75;\n\n const _closeOnEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && closeOnEscape) {\n onClose();\n }\n };\n\n useEffect(() => {\n if (!trapFocus) {\n window.addEventListener('keydown', _closeOnEscape);\n return () => window.removeEventListener('keydown', _closeOnEscape);\n }\n\n return undefined;\n }, [trapFocus]);\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus && withFocusReturn });\n\n return (\n <OptionalPortal withinPortal={withinPortal} target={target}>\n <GroupedTransition\n onExited={() => _lockScroll(false)}\n onEntered={() => _lockScroll(lockScroll && true)}\n mounted={opened}\n timingFunction={transitionTimingFunction}\n transitions={{\n overlay: { duration: transitionDuration / 2, transition: 'fade', timingFunction: 'ease' },\n drawer: {\n duration: transitionDuration,\n transition: drawerTransition,\n timingFunction: transitionTimingFunction,\n },\n }}\n >\n {(transitionStyles) => (\n <Box className={cx(classes.root, className)} role=\"dialog\" aria-modal {...others}>\n <Paper<'div'>\n className={cx(classes.drawer, className)}\n ref={focusTrapRef}\n style={transitionStyles.drawer}\n radius={0}\n tabIndex={-1}\n onKeyDownCapture={(event) => {\n const shouldTrigger =\n (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n\n shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();\n }}\n shadow={shadow}\n p={padding}\n unstyled={unstyled}\n >\n {(title || withCloseButton) && (\n <div className={classes.header}>\n <Text className={classes.title} unstyled={unstyled}>\n {title}\n </Text>\n\n {withCloseButton && (\n <CloseButton\n iconSize={16}\n onClick={onClose}\n aria-label={closeButtonLabel}\n className={classes.closeButton}\n unstyled={unstyled}\n />\n )}\n </div>\n )}\n {children}\n </Paper>\n\n {withOverlay && (\n <div style={transitionStyles.overlay}>\n <Overlay\n unstyled={unstyled}\n blur={overlayBlur}\n onMouseDown={() => closeOnClickOutside && onClose()}\n className={classes.overlay}\n opacity={_overlayOpacity}\n zIndex={0}\n color={\n overlayColor ||\n (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black)\n }\n />\n </div>\n )}\n </Box>\n )}\n </GroupedTransition>\n </OptionalPortal>\n );\n}\n\nDrawer.displayName = '@mantine/core/Drawer';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef, useRef } from 'react';
|
|
2
2
|
import { useComponentDefaultProps } from '@mantine/styles';
|
|
3
|
-
import { useMergedRef } from '@mantine/hooks';
|
|
3
|
+
import { assignRef, useMergedRef } from '@mantine/hooks';
|
|
4
4
|
|
|
5
5
|
var __defProp = Object.defineProperty;
|
|
6
6
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
@@ -34,7 +34,7 @@ const defaultProps = {
|
|
|
34
34
|
multiple: false
|
|
35
35
|
};
|
|
36
36
|
const FileButton = forwardRef((props, ref) => {
|
|
37
|
-
const _a = useComponentDefaultProps("FileButton", defaultProps, props), { onChange, children, multiple, accept, name, form } = _a, others = __objRest(_a, ["onChange", "children", "multiple", "accept", "name", "form"]);
|
|
37
|
+
const _a = useComponentDefaultProps("FileButton", defaultProps, props), { onChange, children, multiple, accept, name, form, resetRef } = _a, others = __objRest(_a, ["onChange", "children", "multiple", "accept", "name", "form", "resetRef"]);
|
|
38
38
|
const inputRef = useRef();
|
|
39
39
|
const onClick = () => {
|
|
40
40
|
inputRef.current.click();
|
|
@@ -46,6 +46,10 @@ const FileButton = forwardRef((props, ref) => {
|
|
|
46
46
|
onChange(event.currentTarget.files[0] || null);
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
const reset = () => {
|
|
50
|
+
inputRef.current.value = "";
|
|
51
|
+
};
|
|
52
|
+
assignRef(resetRef, reset);
|
|
49
53
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, children(__spreadValues({ onClick }, others)), /* @__PURE__ */ React.createElement("input", {
|
|
50
54
|
style: { display: "none" },
|
|
51
55
|
type: "file",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileButton.js","sources":["../../src/FileButton/FileButton.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { useRef, forwardRef } from 'react';\nimport { useComponentDefaultProps } from '@mantine/styles';\nimport { useMergedRef } from '@mantine/hooks';\n\nexport interface FileButtonProps<Multiple extends boolean = false> {\n /** Called when files are picked */\n onChange(payload: Multiple extends true ? File[] : File | null): void;\n\n /** Function that receives button props and returns react node that should be rendered */\n children(props: { onClick(): void }): React.ReactNode;\n\n /** Determines whether user can pick more than one file */\n multiple?: Multiple;\n\n /** File input accept attribute, for example, \"image/png,image/jpeg\" */\n accept?: string;\n\n /** Input name attribute */\n name?: string;\n\n /** Input form attribute */\n form?: string;\n}\n\nconst defaultProps: Partial<FileButtonProps> = {\n multiple: false,\n};\n\ntype FileButtonComponent = (<Multiple extends boolean = false>(\n props: FileButtonProps<Multiple>\n) => React.ReactElement) & { displayName?: string };\n\nexport const FileButton: FileButtonComponent = forwardRef<HTMLInputElement, FileButtonProps>(\n (props, ref) => {\n const { onChange, children, multiple, accept, name, form, ...others } =\n useComponentDefaultProps('FileButton', defaultProps, props);\n\n const inputRef = useRef<HTMLInputElement>();\n\n const onClick = () => {\n inputRef.current.click();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (multiple) {\n onChange(Array.from(event.currentTarget.files) as any);\n } else {\n onChange(event.currentTarget.files[0] || null);\n }\n };\n\n return (\n <>\n {children({ onClick, ...others })}\n\n <input\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple={multiple}\n onChange={handleChange}\n ref={useMergedRef(ref, inputRef)}\n name={name}\n form={form}\n />\n </>\n );\n }\n) as any;\n\nFileButton.displayName = '@mantine/core/FileButton';\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;AAIF,MAAM,YAAY,GAAG;AACrB,EAAE,QAAQ,EAAE,KAAK;AACjB,CAAC,CAAC;AACU,MAAC,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACrD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"FileButton.js","sources":["../../src/FileButton/FileButton.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { useRef, forwardRef } from 'react';\nimport { useComponentDefaultProps } from '@mantine/styles';\nimport { assignRef, useMergedRef } from '@mantine/hooks';\n\nexport interface FileButtonProps<Multiple extends boolean = false> {\n /** Called when files are picked */\n onChange(payload: Multiple extends true ? File[] : File | null): void;\n\n /** Function that receives button props and returns react node that should be rendered */\n children(props: { onClick(): void }): React.ReactNode;\n\n /** Determines whether user can pick more than one file */\n multiple?: Multiple;\n\n /** File input accept attribute, for example, \"image/png,image/jpeg\" */\n accept?: string;\n\n /** Input name attribute */\n name?: string;\n\n /** Input form attribute */\n form?: string;\n\n /** Function that should be called when value changes to null or empty array */\n resetRef?: React.ForwardedRef<() => void>;\n}\n\nconst defaultProps: Partial<FileButtonProps> = {\n multiple: false,\n};\n\ntype FileButtonComponent = (<Multiple extends boolean = false>(\n props: FileButtonProps<Multiple>\n) => React.ReactElement) & { displayName?: string };\n\nexport const FileButton: FileButtonComponent = forwardRef<HTMLInputElement, FileButtonProps>(\n (props, ref) => {\n const { onChange, children, multiple, accept, name, form, resetRef, ...others } =\n useComponentDefaultProps('FileButton', defaultProps, props);\n\n const inputRef = useRef<HTMLInputElement>();\n\n const onClick = () => {\n inputRef.current.click();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (multiple) {\n onChange(Array.from(event.currentTarget.files) as any);\n } else {\n onChange(event.currentTarget.files[0] || null);\n }\n };\n\n const reset = () => {\n inputRef.current.value = '';\n };\n\n assignRef(resetRef, reset);\n\n return (\n <>\n {children({ onClick, ...others })}\n\n <input\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple={multiple}\n onChange={handleChange}\n ref={useMergedRef(ref, inputRef)}\n name={name}\n form={form}\n />\n </>\n );\n }\n) as any;\n\nFileButton.displayName = '@mantine/core/FileButton';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
1
|
+
import React, { forwardRef, useRef, useEffect } from 'react';
|
|
2
2
|
import { useUncontrolled } from '@mantine/hooks';
|
|
3
3
|
import useStyles from './FileInput.styles.js';
|
|
4
4
|
import { useInputProps } from '../Input/use-input-props.js';
|
|
@@ -92,6 +92,7 @@ const _FileInput = forwardRef((props, ref) => {
|
|
|
92
92
|
"clearButtonLabel",
|
|
93
93
|
"clearButtonTabIndex"
|
|
94
94
|
]);
|
|
95
|
+
const resetRef = useRef();
|
|
95
96
|
const { classes, theme, cx } = useStyles(null, {
|
|
96
97
|
name: "FileInput",
|
|
97
98
|
classNames,
|
|
@@ -113,6 +114,11 @@ const _FileInput = forwardRef((props, ref) => {
|
|
|
113
114
|
tabIndex: clearButtonTabIndex,
|
|
114
115
|
unstyled
|
|
115
116
|
}) : null);
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
if (Array.isArray(_value) && _value.length === 0 || _value === null) {
|
|
119
|
+
resetRef.current();
|
|
120
|
+
}
|
|
121
|
+
}, [_value]);
|
|
116
122
|
return /* @__PURE__ */ React.createElement(Input.Wrapper, __spreadProps(__spreadValues({}, wrapperProps), {
|
|
117
123
|
__staticSelector: "FileInput"
|
|
118
124
|
}), /* @__PURE__ */ React.createElement(FileButton, {
|
|
@@ -120,7 +126,8 @@ const _FileInput = forwardRef((props, ref) => {
|
|
|
120
126
|
multiple,
|
|
121
127
|
accept,
|
|
122
128
|
name,
|
|
123
|
-
form
|
|
129
|
+
form,
|
|
130
|
+
resetRef
|
|
124
131
|
}, (fileButtonProps) => /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues(__spreadValues(__spreadValues({
|
|
125
132
|
multiline: true
|
|
126
133
|
}, fileButtonProps), inputProps), others), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","sources":["../../src/FileInput/FileInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Input,\n InputSharedProps,\n InputStylesNames,\n useInputProps,\n InputWrapperBaseProps,\n InputWrapperStylesNames,\n} from '../Input';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport useStyles from './FileInput.styles';\n\nexport type FileInputStylesNames =\n | InputStylesNames\n | InputWrapperStylesNames\n | Selectors<typeof useStyles>;\n\nexport interface FileInputProps<Multiple extends boolean = false>\n extends DefaultProps<FileInputStylesNames>,\n InputSharedProps,\n InputWrapperBaseProps,\n Omit<React.ComponentPropsWithoutRef<'button'>, 'size' | 'onChange' | 'value' | 'defaultValue'> {\n /** Props passed to root element (InputWrapper component) */\n wrapperProps?: Record<string, any>;\n\n /** Called when user picks files */\n onChange?(payload: Multiple extends true ? File[] : File | null): void;\n\n /** Controlled input value */\n value?: Multiple extends true ? File[] : File | null;\n\n /** Uncontrolled input default value */\n defaultValue?: Multiple extends true ? File[] : File | null;\n\n /** Input size */\n size?: MantineSize;\n\n /** Determines whether user can pick more than one file */\n multiple?: Multiple;\n\n /** File input accept attribute, for example, \"image/png,image/jpeg\" */\n accept?: string;\n\n /** Input name attribute */\n name?: string;\n\n /** Input form attribute */\n form?: string;\n\n /** Current value renderer */\n valueComponent?: React.FC<{ value: null | File | File[] }>;\n\n /** Allow to clear value */\n clearable?: boolean;\n\n /** aria-label for clear button */\n clearButtonLabel?: string;\n\n /** Set the clear button tab index to disabled or default after input field */\n clearButtonTabIndex?: -1 | 0;\n}\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n <span>{Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}</span>\n);\n\nconst defaultProps: Partial<FileInputProps> = {\n size: 'sm',\n valueComponent: DefaultValue,\n clearButtonTabIndex: 0,\n};\n\nconst RIGHT_SECTION_WIDTH = {\n xs: 24,\n sm: 30,\n md: 34,\n lg: 40,\n xl: 44,\n};\n\nexport const _FileInput = forwardRef<HTMLButtonElement, FileInputProps>((props, ref) => {\n const {\n inputProps,\n wrapperProps,\n placeholder,\n value,\n defaultValue,\n onChange,\n multiple,\n accept,\n name,\n form,\n classNames,\n styles,\n unstyled,\n valueComponent: ValueComponent,\n rightSection,\n rightSectionWidth,\n clearable,\n clearButtonLabel,\n clearButtonTabIndex,\n ...others\n } = useInputProps('FileInput', defaultProps, props);\n const { classes, theme, cx } = useStyles(null, {\n name: 'FileInput',\n classNames,\n styles,\n unstyled,\n });\n\n const [_value, setValue] = useUncontrolled<File | File[]>({\n value,\n defaultValue,\n onChange,\n finalValue: multiple ? [] : null,\n });\n\n const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n const _rightSection =\n rightSection ||\n (clearable && hasValue ? (\n <CloseButton\n variant=\"transparent\"\n aria-label={clearButtonLabel}\n onClick={() => setValue(multiple ? [] : null)}\n size={inputProps.size}\n tabIndex={clearButtonTabIndex}\n unstyled={unstyled}\n />\n ) : null);\n\n return (\n <Input.Wrapper {...wrapperProps} __staticSelector=\"FileInput\">\n <FileButton onChange={setValue} multiple={multiple} accept={accept} name={name} form={form}>\n {(fileButtonProps) => (\n <Input\n multiline\n {...fileButtonProps}\n {...inputProps}\n {...others}\n component=\"button\"\n type=\"button\"\n ref={ref}\n __staticSelector=\"FileInput\"\n rightSection={_rightSection}\n rightSectionWidth={\n rightSectionWidth ||\n theme.fn.size({ size: inputProps.size, sizes: RIGHT_SECTION_WIDTH })\n }\n classNames={{ ...classNames, input: cx(classes.input, (classNames as any)?.input) }}\n >\n {!hasValue ? (\n <span className={classes.placeholder}>{placeholder}</span>\n ) : (\n <ValueComponent value={_value} />\n )}\n </Input>\n )}\n </FileButton>\n </Input.Wrapper>\n );\n});\n\n_FileInput.displayName = '@mantine/core/FileInput';\n\ntype FileInputComponent = <Multiple extends boolean = false>(\n props: FileInputProps<Multiple> & {\n ref?: React.ForwardedRef<HTMLButtonElement>;\n }\n) => JSX.Element;\n\nexport const FileInput: FileInputComponent = _FileInput as any;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileInput.js","sources":["../../src/FileInput/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Input,\n InputSharedProps,\n InputStylesNames,\n useInputProps,\n InputWrapperBaseProps,\n InputWrapperStylesNames,\n} from '../Input';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport useStyles from './FileInput.styles';\n\nexport type FileInputStylesNames =\n | InputStylesNames\n | InputWrapperStylesNames\n | Selectors<typeof useStyles>;\n\nexport interface FileInputProps<Multiple extends boolean = false>\n extends DefaultProps<FileInputStylesNames>,\n InputSharedProps,\n InputWrapperBaseProps,\n Omit<React.ComponentPropsWithoutRef<'button'>, 'size' | 'onChange' | 'value' | 'defaultValue'> {\n /** Props passed to root element (InputWrapper component) */\n wrapperProps?: Record<string, any>;\n\n /** Called when user picks files */\n onChange?(payload: Multiple extends true ? File[] : File | null): void;\n\n /** Controlled input value */\n value?: Multiple extends true ? File[] : File | null;\n\n /** Uncontrolled input default value */\n defaultValue?: Multiple extends true ? File[] : File | null;\n\n /** Input size */\n size?: MantineSize;\n\n /** Determines whether user can pick more than one file */\n multiple?: Multiple;\n\n /** File input accept attribute, for example, \"image/png,image/jpeg\" */\n accept?: string;\n\n /** Input name attribute */\n name?: string;\n\n /** Input form attribute */\n form?: string;\n\n /** Current value renderer */\n valueComponent?: React.FC<{ value: null | File | File[] }>;\n\n /** Allow to clear value */\n clearable?: boolean;\n\n /** aria-label for clear button */\n clearButtonLabel?: string;\n\n /** Set the clear button tab index to disabled or default after input field */\n clearButtonTabIndex?: -1 | 0;\n}\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n <span>{Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}</span>\n);\n\nconst defaultProps: Partial<FileInputProps> = {\n size: 'sm',\n valueComponent: DefaultValue,\n clearButtonTabIndex: 0,\n};\n\nconst RIGHT_SECTION_WIDTH = {\n xs: 24,\n sm: 30,\n md: 34,\n lg: 40,\n xl: 44,\n};\n\nexport const _FileInput = forwardRef<HTMLButtonElement, FileInputProps>((props, ref) => {\n const {\n inputProps,\n wrapperProps,\n placeholder,\n value,\n defaultValue,\n onChange,\n multiple,\n accept,\n name,\n form,\n classNames,\n styles,\n unstyled,\n valueComponent: ValueComponent,\n rightSection,\n rightSectionWidth,\n clearable,\n clearButtonLabel,\n clearButtonTabIndex,\n ...others\n } = useInputProps('FileInput', defaultProps, props);\n const resetRef = useRef<() => void>();\n const { classes, theme, cx } = useStyles(null, {\n name: 'FileInput',\n classNames,\n styles,\n unstyled,\n });\n\n const [_value, setValue] = useUncontrolled<File | File[]>({\n value,\n defaultValue,\n onChange,\n finalValue: multiple ? [] : null,\n });\n\n const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n const _rightSection =\n rightSection ||\n (clearable && hasValue ? (\n <CloseButton\n variant=\"transparent\"\n aria-label={clearButtonLabel}\n onClick={() => setValue(multiple ? [] : null)}\n size={inputProps.size}\n tabIndex={clearButtonTabIndex}\n unstyled={unstyled}\n />\n ) : null);\n\n useEffect(() => {\n if ((Array.isArray(_value) && _value.length === 0) || _value === null) {\n resetRef.current();\n }\n }, [_value]);\n\n return (\n <Input.Wrapper {...wrapperProps} __staticSelector=\"FileInput\">\n <FileButton\n onChange={setValue}\n multiple={multiple}\n accept={accept}\n name={name}\n form={form}\n resetRef={resetRef}\n >\n {(fileButtonProps) => (\n <Input\n multiline\n {...fileButtonProps}\n {...inputProps}\n {...others}\n component=\"button\"\n type=\"button\"\n ref={ref}\n __staticSelector=\"FileInput\"\n rightSection={_rightSection}\n rightSectionWidth={\n rightSectionWidth ||\n theme.fn.size({ size: inputProps.size, sizes: RIGHT_SECTION_WIDTH })\n }\n classNames={{ ...classNames, input: cx(classes.input, (classNames as any)?.input) }}\n >\n {!hasValue ? (\n <span className={classes.placeholder}>{placeholder}</span>\n ) : (\n <ValueComponent value={_value} />\n )}\n </Input>\n )}\n </FileButton>\n </Input.Wrapper>\n );\n});\n\n_FileInput.displayName = '@mantine/core/FileInput';\n\ntype FileInputComponent = <Multiple extends boolean = false>(\n props: FileInputProps<Multiple> & {\n ref?: React.ForwardedRef<HTMLButtonElement>;\n }\n) => JSX.Element;\n\nexport const FileInput: FileInputComponent = _FileInput as any;\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;AAUF,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,qBAAqB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AAC9L,MAAM,YAAY,GAAG;AACrB,EAAE,IAAI,EAAE,IAAI;AACZ,EAAE,cAAc,EAAE,YAAY;AAC9B,EAAE,mBAAmB,EAAE,CAAC;AACxB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG;AAC5B,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACU,MAAC,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACrD,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,WAAW,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AAC9D,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,IAAI;AACR,IAAI,IAAI;AACR,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,cAAc,EAAE,cAAc;AAClC,IAAI,YAAY;AAChB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,mBAAmB;AACvB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,YAAY;AAChB,IAAI,cAAc;AAClB,IAAI,aAAa;AACjB,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,gBAAgB;AACpB,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;AACzB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;AAC5B,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE;AACjD,IAAI,IAAI,EAAE,WAAW;AACrB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;AAC7C,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,UAAU,EAAE,QAAQ,GAAG,EAAE,GAAG,IAAI;AACpC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;AACjF,EAAE,MAAM,aAAa,GAAG,YAAY,KAAK,SAAS,IAAI,QAAQ,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AAClH,IAAI,OAAO,EAAE,aAAa;AAC1B,IAAI,YAAY,EAAE,gBAAgB;AAClC,IAAI,OAAO,EAAE,MAAM,QAAQ,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC;AACjD,IAAI,IAAI,EAAE,UAAU,CAAC,IAAI;AACzB,IAAI,QAAQ,EAAE,mBAAmB;AACjC,IAAI,QAAQ;AACZ,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;AACb,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,KAAK,IAAI,EAAE;AACzE,MAAM,QAAQ,CAAC,OAAO,EAAE,CAAC;AACzB,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,YAAY,CAAC,EAAE;AAC5G,IAAI,gBAAgB,EAAE,WAAW;AACjC,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE;AACtD,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,IAAI;AACR,IAAI,IAAI;AACR,IAAI,QAAQ;AACZ,GAAG,EAAE,CAAC,eAAe,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC;AAChI,IAAI,SAAS,EAAE,IAAI;AACnB,GAAG,EAAE,eAAe,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,EAAE;AAC7C,IAAI,SAAS,EAAE,QAAQ;AACvB,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,GAAG;AACP,IAAI,gBAAgB,EAAE,WAAW;AACjC,IAAI,YAAY,EAAE,aAAa;AAC/B,IAAI,iBAAiB,EAAE,iBAAiB,IAAI,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;AAChH,IAAI,UAAU,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;AAC3I,GAAG,CAAC,EAAE,CAAC,QAAQ,mBAAmB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC9D,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,GAAG,EAAE,WAAW,CAAC,mBAAmB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE;AACxE,IAAI,KAAK,EAAE,MAAM;AACjB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACR,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAG,yBAAyB,CAAC;AACvC,MAAC,SAAS,GAAG;;;;"}
|
|
@@ -78,7 +78,11 @@ var useStyles = createStyles((theme, {
|
|
|
78
78
|
paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,
|
|
79
79
|
paddingRight: withLabel ? theme.spacing.xs / 2 : 0,
|
|
80
80
|
borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
|
|
81
|
-
backgroundColor: theme.fn.variant({
|
|
81
|
+
backgroundColor: theme.fn.variant({
|
|
82
|
+
variant: "filled",
|
|
83
|
+
primaryFallback: false,
|
|
84
|
+
color: color || theme.primaryColor
|
|
85
|
+
}).background,
|
|
82
86
|
border: withBorder ? `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}` : void 0,
|
|
83
87
|
color: theme.white,
|
|
84
88
|
whiteSpace: "nowrap"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.styles.js","sources":["../../src/Indicator/Indicator.styles.ts"],"sourcesContent":["import { createStyles, CSSObject, MantineColor, MantineNumberSize } from '@mantine/styles';\nimport { IndicatorPosition } from './Indicator.types';\n\nexport interface IndicatorStylesParams {\n radius: MantineNumberSize;\n size: number;\n color: MantineColor;\n position: IndicatorPosition;\n offset: number;\n inline: boolean;\n withBorder: boolean;\n withLabel: boolean;\n zIndex: React.CSSProperties['zIndex'];\n}\n\nfunction getPositionStyles(_position: IndicatorPosition, offset = 0) {\n const styles: CSSObject = {};\n const [position, placement] = _position.split('-');\n let translateX = '';\n let translateY = '';\n\n if (position === 'top') {\n styles.top = offset;\n translateY = '-50%';\n }\n\n if (position === 'middle') {\n styles.top = '50%';\n translateY = '-50%';\n }\n\n if (position === 'bottom') {\n styles.bottom = offset;\n translateY = '50%';\n }\n\n if (placement === 'start') {\n styles.left = offset;\n translateX = '-50%';\n }\n\n if (placement === 'center') {\n styles.left = '50%';\n translateX = '-50%';\n }\n\n if (placement === 'end') {\n styles.right = offset;\n translateX = '50%';\n }\n\n styles.transform = `translate(${translateX}, ${translateY})`;\n\n return styles;\n}\n\nexport default createStyles(\n (\n theme,\n {\n radius,\n size,\n color,\n position,\n offset,\n inline,\n withBorder,\n withLabel,\n zIndex,\n }: IndicatorStylesParams\n ) => ({\n root: {\n position: 'relative',\n display: inline ? 'inline-block' : 'block',\n },\n\n indicator: {\n ...getPositionStyles(position, offset),\n zIndex,\n position: 'absolute',\n [withLabel ? 'minWidth' : 'width']: size,\n height: size,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: theme.fontSizes.xs,\n paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,\n paddingRight: withLabel ? theme.spacing.xs / 2 : 0,\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n backgroundColor: theme.fn.variant({
|
|
1
|
+
{"version":3,"file":"Indicator.styles.js","sources":["../../src/Indicator/Indicator.styles.ts"],"sourcesContent":["import { createStyles, CSSObject, MantineColor, MantineNumberSize } from '@mantine/styles';\nimport { IndicatorPosition } from './Indicator.types';\n\nexport interface IndicatorStylesParams {\n radius: MantineNumberSize;\n size: number;\n color: MantineColor;\n position: IndicatorPosition;\n offset: number;\n inline: boolean;\n withBorder: boolean;\n withLabel: boolean;\n zIndex: React.CSSProperties['zIndex'];\n}\n\nfunction getPositionStyles(_position: IndicatorPosition, offset = 0) {\n const styles: CSSObject = {};\n const [position, placement] = _position.split('-');\n let translateX = '';\n let translateY = '';\n\n if (position === 'top') {\n styles.top = offset;\n translateY = '-50%';\n }\n\n if (position === 'middle') {\n styles.top = '50%';\n translateY = '-50%';\n }\n\n if (position === 'bottom') {\n styles.bottom = offset;\n translateY = '50%';\n }\n\n if (placement === 'start') {\n styles.left = offset;\n translateX = '-50%';\n }\n\n if (placement === 'center') {\n styles.left = '50%';\n translateX = '-50%';\n }\n\n if (placement === 'end') {\n styles.right = offset;\n translateX = '50%';\n }\n\n styles.transform = `translate(${translateX}, ${translateY})`;\n\n return styles;\n}\n\nexport default createStyles(\n (\n theme,\n {\n radius,\n size,\n color,\n position,\n offset,\n inline,\n withBorder,\n withLabel,\n zIndex,\n }: IndicatorStylesParams\n ) => ({\n root: {\n position: 'relative',\n display: inline ? 'inline-block' : 'block',\n },\n\n indicator: {\n ...getPositionStyles(position, offset),\n zIndex,\n position: 'absolute',\n [withLabel ? 'minWidth' : 'width']: size,\n height: size,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: theme.fontSizes.xs,\n paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,\n paddingRight: withLabel ? theme.spacing.xs / 2 : 0,\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n backgroundColor: theme.fn.variant({\n variant: 'filled',\n primaryFallback: false,\n color: color || theme.primaryColor,\n }).background,\n border: withBorder\n ? `2px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white}`\n : undefined,\n color: theme.white,\n whiteSpace: 'nowrap',\n },\n })\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -35,7 +35,8 @@ const InputError = forwardRef((_a, ref) => {
|
|
|
35
35
|
const { classes, cx } = useStyles({ size }, { name: ["InputWrapper", __staticSelector], classNames, styles, unstyled });
|
|
36
36
|
return /* @__PURE__ */ React.createElement(Text, __spreadValues({
|
|
37
37
|
className: cx(classes.error, className),
|
|
38
|
-
ref
|
|
38
|
+
ref,
|
|
39
|
+
role: "alert"
|
|
39
40
|
}, others), children);
|
|
40
41
|
});
|
|
41
42
|
InputError.displayName = "@mantine/core/InputError";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputError.js","sources":["../../../src/Input/InputError/InputError.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Text } from '../../Text';\nimport useStyles, { InputErrorStylesParams } from './InputError.styles';\n\nexport type InputErrorStylesNames = Selectors<typeof useStyles>;\n\nexport interface InputErrorProps\n extends DefaultProps<InputErrorStylesNames, InputErrorStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Error content */\n children?: React.ReactNode;\n\n /** Predefined size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nexport const InputError = forwardRef<HTMLDivElement, InputErrorProps>(\n (\n { children, className, classNames, styles, unstyled, size = 'sm', __staticSelector, ...others },\n ref\n ) => {\n const { classes, cx } = useStyles(\n { size },\n { name: ['InputWrapper', __staticSelector], classNames, styles, unstyled }\n );\n return (\n <Text className={cx(classes.error, className)} ref={ref} {...others}>\n {children}\n </Text>\n );\n }\n);\n\nInputError.displayName = '@mantine/core/InputError';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputError.js","sources":["../../../src/Input/InputError/InputError.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Text } from '../../Text';\nimport useStyles, { InputErrorStylesParams } from './InputError.styles';\n\nexport type InputErrorStylesNames = Selectors<typeof useStyles>;\n\nexport interface InputErrorProps\n extends DefaultProps<InputErrorStylesNames, InputErrorStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Error content */\n children?: React.ReactNode;\n\n /** Predefined size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nexport const InputError = forwardRef<HTMLDivElement, InputErrorProps>(\n (\n { children, className, classNames, styles, unstyled, size = 'sm', __staticSelector, ...others },\n ref\n ) => {\n const { classes, cx } = useStyles(\n { size },\n { name: ['InputWrapper', __staticSelector], classNames, styles, unstyled }\n );\n return (\n <Text className={cx(classes.error, className)} ref={ref} role=\"alert\" {...others}>\n {children}\n </Text>\n );\n }\n);\n\nInputError.displayName = '@mantine/core/InputError';\n"],"names":[],"mappings":"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"}
|
package/esm/Modal/Modal.js
CHANGED
|
@@ -50,6 +50,7 @@ const defaultProps = {
|
|
|
50
50
|
withCloseButton: true,
|
|
51
51
|
withinPortal: true,
|
|
52
52
|
lockScroll: true,
|
|
53
|
+
withFocusReturn: true,
|
|
53
54
|
overlayBlur: 0,
|
|
54
55
|
zIndex: getDefaultZIndex("modal")
|
|
55
56
|
};
|
|
@@ -85,7 +86,8 @@ function Modal(props) {
|
|
|
85
86
|
transitionTimingFunction,
|
|
86
87
|
fullScreen,
|
|
87
88
|
unstyled,
|
|
88
|
-
lockScroll: shouldLockScroll
|
|
89
|
+
lockScroll: shouldLockScroll,
|
|
90
|
+
withFocusReturn
|
|
89
91
|
} = _a, others = __objRest(_a, [
|
|
90
92
|
"className",
|
|
91
93
|
"opened",
|
|
@@ -117,7 +119,8 @@ function Modal(props) {
|
|
|
117
119
|
"transitionTimingFunction",
|
|
118
120
|
"fullScreen",
|
|
119
121
|
"unstyled",
|
|
120
|
-
"lockScroll"
|
|
122
|
+
"lockScroll",
|
|
123
|
+
"withFocusReturn"
|
|
121
124
|
]);
|
|
122
125
|
const baseId = useId(id);
|
|
123
126
|
const titleId = `${baseId}-title`;
|
|
@@ -138,7 +141,7 @@ function Modal(props) {
|
|
|
138
141
|
}
|
|
139
142
|
return void 0;
|
|
140
143
|
}, [trapFocus]);
|
|
141
|
-
useFocusReturn({ opened, shouldReturnFocus: trapFocus });
|
|
144
|
+
useFocusReturn({ opened, shouldReturnFocus: trapFocus && withFocusReturn });
|
|
142
145
|
return /* @__PURE__ */ React.createElement(OptionalPortal, {
|
|
143
146
|
withinPortal,
|
|
144
147
|
target
|
package/esm/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useScrollLock, useFocusTrap, useFocusReturn, useId } from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineShadow,\n Selectors,\n MantineStyleSystemSize,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { CloseButton } from '../CloseButton';\nimport { Text } from '../Text';\nimport { Paper } from '../Paper';\nimport { Overlay } from '../Overlay';\nimport { OptionalPortal } from '../Portal';\nimport { Box } from '../Box';\nimport { GroupedTransition, MantineTransition } from '../Transition';\nimport useStyles, { ModalStylesParams } from './Modal.styles';\n\nexport type ModalStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalProps\n extends Omit<DefaultProps<ModalStylesNames, ModalStylesParams>, MantineStyleSystemSize>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n /** Mounts modal if true */\n opened: boolean;\n\n /** Called when close button clicked and when escape key is pressed */\n onClose(): void;\n\n /** Modal title, displayed in header before close button */\n title?: React.ReactNode;\n\n /** Modal z-index property */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Control vertical overflow behavior */\n overflow?: 'outside' | 'inside';\n\n /** Hides close button if set to false, modal still can be closed with escape key and by clicking outside */\n withCloseButton?: boolean;\n\n /** Overlay opacity */\n overlayOpacity?: number;\n\n /** Overlay color */\n overlayColor?: string;\n\n /** Overlay blur in px */\n overlayBlur?: number;\n\n /** Determines whether the modal should take the entire screen */\n fullScreen?: boolean;\n\n /** Modal radius */\n radius?: MantineNumberSize;\n\n /** Modal body width */\n size?: string | number;\n\n /** Modal body transition */\n transition?: MantineTransition;\n\n /** Duration in ms of modal transitions, set to 0 to disable all animations */\n transitionDuration?: number;\n\n /** Modal body transitionTimingFunction, defaults to theme.transitionTimingFunction */\n transitionTimingFunction?: string;\n\n /** Close button aria-label */\n closeButtonLabel?: string;\n\n /** id base, used to generate ids to connect modal title and body with aria- attributes, defaults to random id */\n id?: string;\n\n /** Modal shadow from theme or css value */\n shadow?: MantineShadow;\n\n /** Modal padding from theme or number value for padding in px */\n padding?: MantineNumberSize;\n\n /** Should modal be closed when outside click was registered? */\n closeOnClickOutside?: boolean;\n\n /** Should modal be closed when escape is pressed? */\n closeOnEscape?: boolean;\n\n /** Disables focus trap */\n trapFocus?: boolean;\n\n /** Controls if modal should be centered */\n centered?: boolean;\n\n /** Determines whether scroll should be locked when modal is opened, defaults to true */\n lockScroll?: boolean;\n\n /** Target element or selector where modal portal should be rendered */\n target?: HTMLElement | string;\n\n /** Determines whether modal should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n}\n\nconst defaultProps: Partial<ModalProps> = {\n size: 'md',\n transitionDuration: 250,\n overflow: 'outside',\n padding: 'lg',\n shadow: 'lg',\n closeOnClickOutside: true,\n closeOnEscape: true,\n trapFocus: true,\n withCloseButton: true,\n withinPortal: true,\n lockScroll: true,\n overlayBlur: 0,\n zIndex: getDefaultZIndex('modal'),\n};\n\nexport function Modal(props: ModalProps) {\n const {\n className,\n opened,\n title,\n onClose,\n children,\n withCloseButton,\n overlayOpacity,\n size,\n transitionDuration,\n closeButtonLabel,\n overlayColor,\n overflow,\n transition,\n padding,\n shadow,\n radius,\n id,\n classNames,\n styles,\n closeOnClickOutside,\n trapFocus,\n closeOnEscape,\n centered,\n target,\n withinPortal,\n zIndex,\n overlayBlur,\n transitionTimingFunction,\n fullScreen,\n unstyled,\n lockScroll: shouldLockScroll,\n ...others\n } = useComponentDefaultProps('Modal', defaultProps, props);\n const baseId = useId(id);\n const titleId = `${baseId}-title`;\n const bodyId = `${baseId}-body`;\n const { classes, cx, theme } = useStyles(\n { size, overflow, centered, zIndex, fullScreen },\n { unstyled, classNames, styles, name: 'Modal' }\n );\n const focusTrapRef = useFocusTrap(trapFocus && opened);\n const _overlayOpacity =\n typeof overlayOpacity === 'number'\n ? overlayOpacity\n : theme.colorScheme === 'dark'\n ? 0.85\n : 0.75;\n\n const [, lockScroll] = useScrollLock();\n\n const closeOnEscapePress = (event: KeyboardEvent) => {\n if (!trapFocus && event.key === 'Escape' && closeOnEscape) {\n onClose();\n }\n };\n\n useEffect(() => {\n if (!trapFocus) {\n window.addEventListener('keydown', closeOnEscapePress);\n return () => window.removeEventListener('keydown', closeOnEscapePress);\n }\n\n return undefined;\n }, [trapFocus]);\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus });\n\n return (\n <OptionalPortal withinPortal={withinPortal} target={target}>\n <GroupedTransition\n onExited={() => shouldLockScroll && lockScroll(false)}\n onEntered={() => shouldLockScroll && lockScroll(true)}\n mounted={opened}\n duration={transitionDuration}\n exitDuration={transitionDuration}\n timingFunction={transitionTimingFunction}\n transitions={{\n modal: {\n duration: transitionDuration,\n transition: transition || (fullScreen ? 'fade' : 'pop'),\n },\n overlay: {\n duration: transitionDuration / 2,\n transition: 'fade',\n timingFunction: 'ease',\n },\n }}\n >\n {(transitionStyles) => (\n <Box id={baseId} className={cx(classes.root, className)} {...others}>\n <div\n className={classes.inner}\n onKeyDownCapture={(event) => {\n const shouldTrigger =\n (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();\n }}\n ref={focusTrapRef}\n >\n <Paper<'div'>\n className={classes.modal}\n shadow={shadow}\n p={padding}\n radius={radius}\n role=\"dialog\"\n aria-labelledby={titleId}\n aria-describedby={bodyId}\n aria-modal\n tabIndex={-1}\n style={transitionStyles.modal}\n unstyled={unstyled}\n >\n {(title || withCloseButton) && (\n <div className={classes.header}>\n <Text id={titleId} className={classes.title}>\n {title}\n </Text>\n\n {withCloseButton && (\n <CloseButton\n iconSize={16}\n onClick={onClose}\n aria-label={closeButtonLabel}\n className={classes.close}\n />\n )}\n </div>\n )}\n\n <div id={bodyId} className={classes.body}>\n {children}\n </div>\n </Paper>\n <div style={transitionStyles.overlay}>\n <Overlay\n className={classes.overlay}\n sx={{ position: 'fixed' }}\n zIndex={0}\n onMouseDown={() => closeOnClickOutside && onClose()}\n blur={overlayBlur}\n color={\n overlayColor ||\n (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black)\n }\n opacity={_overlayOpacity}\n unstyled={unstyled}\n />\n </div>\n </div>\n </Box>\n )}\n </GroupedTransition>\n </OptionalPortal>\n );\n}\n\nModal.displayName = '@mantine/core/Modal';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useScrollLock, useFocusTrap, useFocusReturn, useId } from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineShadow,\n Selectors,\n MantineStyleSystemSize,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { CloseButton } from '../CloseButton';\nimport { Text } from '../Text';\nimport { Paper } from '../Paper';\nimport { Overlay } from '../Overlay';\nimport { OptionalPortal } from '../Portal';\nimport { Box } from '../Box';\nimport { GroupedTransition, MantineTransition } from '../Transition';\nimport useStyles, { ModalStylesParams } from './Modal.styles';\n\nexport type ModalStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalProps\n extends Omit<DefaultProps<ModalStylesNames, ModalStylesParams>, MantineStyleSystemSize>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n /** Mounts modal if true */\n opened: boolean;\n\n /** Called when close button clicked and when escape key is pressed */\n onClose(): void;\n\n /** Modal title, displayed in header before close button */\n title?: React.ReactNode;\n\n /** Modal z-index property */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Control vertical overflow behavior */\n overflow?: 'outside' | 'inside';\n\n /** Hides close button if set to false, modal still can be closed with escape key and by clicking outside */\n withCloseButton?: boolean;\n\n /** Overlay opacity */\n overlayOpacity?: number;\n\n /** Overlay color */\n overlayColor?: string;\n\n /** Overlay blur in px */\n overlayBlur?: number;\n\n /** Determines whether the modal should take the entire screen */\n fullScreen?: boolean;\n\n /** Modal radius */\n radius?: MantineNumberSize;\n\n /** Modal body width */\n size?: string | number;\n\n /** Modal body transition */\n transition?: MantineTransition;\n\n /** Duration in ms of modal transitions, set to 0 to disable all animations */\n transitionDuration?: number;\n\n /** Modal body transitionTimingFunction, defaults to theme.transitionTimingFunction */\n transitionTimingFunction?: string;\n\n /** Close button aria-label */\n closeButtonLabel?: string;\n\n /** id base, used to generate ids to connect modal title and body with aria- attributes, defaults to random id */\n id?: string;\n\n /** Modal shadow from theme or css value */\n shadow?: MantineShadow;\n\n /** Modal padding from theme or number value for padding in px */\n padding?: MantineNumberSize;\n\n /** Should modal be closed when outside click was registered? */\n closeOnClickOutside?: boolean;\n\n /** Should modal be closed when escape is pressed? */\n closeOnEscape?: boolean;\n\n /** Disables focus trap */\n trapFocus?: boolean;\n\n /** Controls if modal should be centered */\n centered?: boolean;\n\n /** Determines whether scroll should be locked when modal is opened, defaults to true */\n lockScroll?: boolean;\n\n /** Target element or selector where modal portal should be rendered */\n target?: HTMLElement | string;\n\n /** Determines whether modal should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** Determines whether focus should be returned to the last active element when drawer is closed */\n withFocusReturn?: boolean;\n}\n\nconst defaultProps: Partial<ModalProps> = {\n size: 'md',\n transitionDuration: 250,\n overflow: 'outside',\n padding: 'lg',\n shadow: 'lg',\n closeOnClickOutside: true,\n closeOnEscape: true,\n trapFocus: true,\n withCloseButton: true,\n withinPortal: true,\n lockScroll: true,\n withFocusReturn: true,\n overlayBlur: 0,\n zIndex: getDefaultZIndex('modal'),\n};\n\nexport function Modal(props: ModalProps) {\n const {\n className,\n opened,\n title,\n onClose,\n children,\n withCloseButton,\n overlayOpacity,\n size,\n transitionDuration,\n closeButtonLabel,\n overlayColor,\n overflow,\n transition,\n padding,\n shadow,\n radius,\n id,\n classNames,\n styles,\n closeOnClickOutside,\n trapFocus,\n closeOnEscape,\n centered,\n target,\n withinPortal,\n zIndex,\n overlayBlur,\n transitionTimingFunction,\n fullScreen,\n unstyled,\n lockScroll: shouldLockScroll,\n withFocusReturn,\n ...others\n } = useComponentDefaultProps('Modal', defaultProps, props);\n const baseId = useId(id);\n const titleId = `${baseId}-title`;\n const bodyId = `${baseId}-body`;\n const { classes, cx, theme } = useStyles(\n { size, overflow, centered, zIndex, fullScreen },\n { unstyled, classNames, styles, name: 'Modal' }\n );\n const focusTrapRef = useFocusTrap(trapFocus && opened);\n const _overlayOpacity =\n typeof overlayOpacity === 'number'\n ? overlayOpacity\n : theme.colorScheme === 'dark'\n ? 0.85\n : 0.75;\n\n const [, lockScroll] = useScrollLock();\n\n const closeOnEscapePress = (event: KeyboardEvent) => {\n if (!trapFocus && event.key === 'Escape' && closeOnEscape) {\n onClose();\n }\n };\n\n useEffect(() => {\n if (!trapFocus) {\n window.addEventListener('keydown', closeOnEscapePress);\n return () => window.removeEventListener('keydown', closeOnEscapePress);\n }\n\n return undefined;\n }, [trapFocus]);\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus && withFocusReturn });\n\n return (\n <OptionalPortal withinPortal={withinPortal} target={target}>\n <GroupedTransition\n onExited={() => shouldLockScroll && lockScroll(false)}\n onEntered={() => shouldLockScroll && lockScroll(true)}\n mounted={opened}\n duration={transitionDuration}\n exitDuration={transitionDuration}\n timingFunction={transitionTimingFunction}\n transitions={{\n modal: {\n duration: transitionDuration,\n transition: transition || (fullScreen ? 'fade' : 'pop'),\n },\n overlay: {\n duration: transitionDuration / 2,\n transition: 'fade',\n timingFunction: 'ease',\n },\n }}\n >\n {(transitionStyles) => (\n <Box id={baseId} className={cx(classes.root, className)} {...others}>\n <div\n className={classes.inner}\n onKeyDownCapture={(event) => {\n const shouldTrigger =\n (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();\n }}\n ref={focusTrapRef}\n >\n <Paper<'div'>\n className={classes.modal}\n shadow={shadow}\n p={padding}\n radius={radius}\n role=\"dialog\"\n aria-labelledby={titleId}\n aria-describedby={bodyId}\n aria-modal\n tabIndex={-1}\n style={transitionStyles.modal}\n unstyled={unstyled}\n >\n {(title || withCloseButton) && (\n <div className={classes.header}>\n <Text id={titleId} className={classes.title}>\n {title}\n </Text>\n\n {withCloseButton && (\n <CloseButton\n iconSize={16}\n onClick={onClose}\n aria-label={closeButtonLabel}\n className={classes.close}\n />\n )}\n </div>\n )}\n\n <div id={bodyId} className={classes.body}>\n {children}\n </div>\n </Paper>\n <div style={transitionStyles.overlay}>\n <Overlay\n className={classes.overlay}\n sx={{ position: 'fixed' }}\n zIndex={0}\n onMouseDown={() => closeOnClickOutside && onClose()}\n blur={overlayBlur}\n color={\n overlayColor ||\n (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black)\n }\n opacity={_overlayOpacity}\n unstyled={unstyled}\n />\n </div>\n </div>\n </Box>\n )}\n </GroupedTransition>\n </OptionalPortal>\n );\n}\n\nModal.displayName = '@mantine/core/Modal';\n"],"names":[],"mappings":"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"}
|
|
@@ -67,7 +67,7 @@ const Notification = forwardRef((props, ref) => {
|
|
|
67
67
|
"styles",
|
|
68
68
|
"unstyled"
|
|
69
69
|
]);
|
|
70
|
-
const { classes, cx } = useStyles({ color, radius }, { classNames, styles, unstyled, name: "Notification" });
|
|
70
|
+
const { classes, cx } = useStyles({ color, radius, withTitle: !!title }, { classNames, styles, unstyled, name: "Notification" });
|
|
71
71
|
const withIcon = icon || loading;
|
|
72
72
|
return /* @__PURE__ */ React.createElement(Box, __spreadValues({
|
|
73
73
|
className: cx(classes.root, { [classes.withIcon]: withIcon }, className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineColor,\n Selectors,\n MantineNumberSize,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Text } from '../Text';\nimport { Loader } from '../Loader';\nimport { CloseButton } from '../CloseButton';\nimport { Box } from '../Box';\nimport useStyles, { NotificationStylesParams } from './Notification.styles';\n\nexport type NotificationStylesNames = Exclude<Selectors<typeof useStyles>, 'withIcon'>;\n\nexport interface NotificationProps\n extends DefaultProps<NotificationStylesNames, NotificationStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n /** Called when close button is clicked */\n onClose?(): void;\n\n /** Notification line or icon color */\n color?: MantineColor;\n\n /** Radius from theme.radius, or number to set border-radius in px */\n radius?: MantineNumberSize;\n\n /** Notification icon, replaces color line */\n icon?: React.ReactNode;\n\n /** Notification title, displayed before body */\n title?: React.ReactNode;\n\n /** Notification body, place main text here */\n children?: React.ReactNode;\n\n /** Replaces colored line or icon with Loader component */\n loading?: boolean;\n\n /** Removes close button */\n disallowClose?: boolean;\n\n /** Props spread to close button */\n closeButtonProps?: Record<string, any>;\n}\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {\n const {\n className,\n color,\n radius,\n loading,\n disallowClose,\n title,\n icon,\n children,\n onClose,\n closeButtonProps,\n classNames,\n styles,\n unstyled,\n ...others\n } = useComponentDefaultProps('Notification', {}, props);\n\n const { classes, cx } = useStyles(\n { color, radius },\n { classNames, styles, unstyled, name: 'Notification' }\n );\n const withIcon = icon || loading;\n\n return (\n <Box\n className={cx(classes.root, { [classes.withIcon]: withIcon }, className)}\n role=\"alert\"\n ref={ref}\n {...others}\n >\n {icon && !loading && <div className={classes.icon}>{icon}</div>}\n {loading && <Loader size={28} color={color} className={classes.loader} />}\n\n <div className={classes.body}>\n {title && (\n <Text className={classes.title} size=\"sm\" weight={500}>\n {title}\n </Text>\n )}\n\n <Text color=\"dimmed\" className={classes.description} size=\"sm\">\n {children}\n </Text>\n </div>\n\n {!disallowClose && (\n <CloseButton\n {...closeButtonProps}\n iconSize={16}\n color=\"gray\"\n onClick={onClose}\n className={classes.closeButton}\n />\n )}\n </Box>\n );\n});\n\nNotification.displayName = '@mantine/core/Notification';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Notification.js","sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineColor,\n Selectors,\n MantineNumberSize,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Text } from '../Text';\nimport { Loader } from '../Loader';\nimport { CloseButton } from '../CloseButton';\nimport { Box } from '../Box';\nimport useStyles, { NotificationStylesParams } from './Notification.styles';\n\nexport type NotificationStylesNames = Exclude<Selectors<typeof useStyles>, 'withIcon'>;\n\nexport interface NotificationProps\n extends DefaultProps<NotificationStylesNames, NotificationStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n /** Called when close button is clicked */\n onClose?(): void;\n\n /** Notification line or icon color */\n color?: MantineColor;\n\n /** Radius from theme.radius, or number to set border-radius in px */\n radius?: MantineNumberSize;\n\n /** Notification icon, replaces color line */\n icon?: React.ReactNode;\n\n /** Notification title, displayed before body */\n title?: React.ReactNode;\n\n /** Notification body, place main text here */\n children?: React.ReactNode;\n\n /** Replaces colored line or icon with Loader component */\n loading?: boolean;\n\n /** Removes close button */\n disallowClose?: boolean;\n\n /** Props spread to close button */\n closeButtonProps?: Record<string, any>;\n}\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {\n const {\n className,\n color,\n radius,\n loading,\n disallowClose,\n title,\n icon,\n children,\n onClose,\n closeButtonProps,\n classNames,\n styles,\n unstyled,\n ...others\n } = useComponentDefaultProps('Notification', {}, props);\n\n const { classes, cx } = useStyles(\n { color, radius, withTitle: !!title },\n { classNames, styles, unstyled, name: 'Notification' }\n );\n const withIcon = icon || loading;\n\n return (\n <Box\n className={cx(classes.root, { [classes.withIcon]: withIcon }, className)}\n role=\"alert\"\n ref={ref}\n {...others}\n >\n {icon && !loading && <div className={classes.icon}>{icon}</div>}\n {loading && <Loader size={28} color={color} className={classes.loader} />}\n\n <div className={classes.body}>\n {title && (\n <Text className={classes.title} size=\"sm\" weight={500}>\n {title}\n </Text>\n )}\n\n <Text color=\"dimmed\" className={classes.description} size=\"sm\">\n {children}\n </Text>\n </div>\n\n {!disallowClose && (\n <CloseButton\n {...closeButtonProps}\n iconSize={16}\n color=\"gray\"\n onClick={onClose}\n className={classes.closeButton}\n />\n )}\n </Box>\n );\n});\n\nNotification.displayName = '@mantine/core/Notification';\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;AAUU,MAAC,YAAY,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACvD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,cAAc,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE;AAClE,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,MAAM;AACV,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,KAAK;AACT,IAAI,IAAI;AACR,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;AACnI,EAAE,MAAM,QAAQ,GAAG,IAAI,IAAI,OAAO,CAAC;AACnC,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,EAAE,SAAS,CAAC;AAC5E,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7E,IAAI,SAAS,EAAE,OAAO,CAAC,IAAI;AAC3B,GAAG,EAAE,IAAI,CAAC,EAAE,OAAO,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACnE,IAAI,IAAI,EAAE,EAAE;AACZ,IAAI,KAAK;AACT,IAAI,SAAS,EAAE,OAAO,CAAC,MAAM;AAC7B,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,OAAO,CAAC,IAAI;AAC3B,GAAG,EAAE,KAAK,oBAAoB,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AACxD,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,IAAI,IAAI,EAAE,IAAI;AACd,IAAI,MAAM,EAAE,GAAG;AACf,GAAG,EAAE,KAAK,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AACvD,IAAI,KAAK,EAAE,QAAQ;AACnB,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,IAAI,IAAI,EAAE,IAAI;AACd,GAAG,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,aAAa,oBAAoB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,gBAAgB,CAAC,EAAE;AACxI,IAAI,QAAQ,EAAE,EAAE;AAChB,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,GAAG,CAAC,CAAC,CAAC,CAAC;AACP,CAAC,EAAE;AACH,YAAY,CAAC,WAAW,GAAG,4BAA4B;;;;"}
|