@mantine/core 5.4.0 → 5.4.2
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/Checkbox/Checkbox.js +5 -1
- package/cjs/Checkbox/Checkbox.js.map +1 -1
- package/cjs/Checkbox/Checkbox.styles.js +4 -1
- package/cjs/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/Floating/FloatingArrow/FloatingArrow.js +7 -16
- package/cjs/Floating/FloatingArrow/FloatingArrow.js.map +1 -1
- package/cjs/Floating/FloatingArrow/get-arrow-position-styles.js +10 -8
- package/cjs/Floating/FloatingArrow/get-arrow-position-styles.js.map +1 -1
- package/cjs/Grid/Col/Col.styles.js +1 -1
- package/cjs/Grid/Col/Col.styles.js.map +1 -1
- package/cjs/Grid/Grid.js.map +1 -1
- package/cjs/Image/Image.js +1 -1
- package/cjs/Image/Image.js.map +1 -1
- package/cjs/Popover/Popover.context.js.map +1 -1
- package/cjs/Popover/Popover.js +6 -0
- package/cjs/Popover/Popover.js.map +1 -1
- package/cjs/Popover/PopoverDropdown/PopoverDropdown.js +3 -0
- package/cjs/Popover/PopoverDropdown/PopoverDropdown.js.map +1 -1
- package/cjs/Popover/use-popover.js +1 -0
- package/cjs/Popover/use-popover.js.map +1 -1
- package/cjs/SegmentedControl/SegmentedControl.styles.js +3 -3
- package/cjs/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/cjs/Switch/Switch.js +1 -0
- package/cjs/Switch/Switch.js.map +1 -1
- package/cjs/Switch/Switch.styles.js +4 -1
- package/cjs/Switch/Switch.styles.js.map +1 -1
- package/cjs/Table/Table.js +10 -4
- package/cjs/Table/Table.js.map +1 -1
- package/cjs/Table/Table.styles.js +61 -47
- package/cjs/Table/Table.styles.js.map +1 -1
- package/cjs/Timeline/Timeline.js.map +1 -1
- package/cjs/Tooltip/Tooltip.js +5 -0
- package/cjs/Tooltip/Tooltip.js.map +1 -1
- package/cjs/Tooltip/use-tooltip.js +21 -2
- package/cjs/Tooltip/use-tooltip.js.map +1 -1
- package/esm/Checkbox/Checkbox.js +5 -1
- package/esm/Checkbox/Checkbox.js.map +1 -1
- package/esm/Checkbox/Checkbox.styles.js +4 -1
- package/esm/Checkbox/Checkbox.styles.js.map +1 -1
- package/esm/Floating/FloatingArrow/FloatingArrow.js +8 -17
- package/esm/Floating/FloatingArrow/FloatingArrow.js.map +1 -1
- package/esm/Floating/FloatingArrow/get-arrow-position-styles.js +10 -8
- package/esm/Floating/FloatingArrow/get-arrow-position-styles.js.map +1 -1
- package/esm/Grid/Col/Col.styles.js +1 -1
- package/esm/Grid/Col/Col.styles.js.map +1 -1
- package/esm/Grid/Grid.js.map +1 -1
- package/esm/Image/Image.js +1 -1
- package/esm/Image/Image.js.map +1 -1
- package/esm/Popover/Popover.context.js.map +1 -1
- package/esm/Popover/Popover.js +7 -1
- package/esm/Popover/Popover.js.map +1 -1
- package/esm/Popover/PopoverDropdown/PopoverDropdown.js +3 -0
- package/esm/Popover/PopoverDropdown/PopoverDropdown.js.map +1 -1
- package/esm/Popover/use-popover.js +2 -1
- package/esm/Popover/use-popover.js.map +1 -1
- package/esm/SegmentedControl/SegmentedControl.styles.js +3 -3
- package/esm/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/esm/Switch/Switch.js +1 -0
- package/esm/Switch/Switch.js.map +1 -1
- package/esm/Switch/Switch.styles.js +4 -1
- package/esm/Switch/Switch.styles.js.map +1 -1
- package/esm/Table/Table.js +10 -4
- package/esm/Table/Table.js.map +1 -1
- package/esm/Table/Table.styles.js +61 -47
- package/esm/Table/Table.styles.js.map +1 -1
- package/esm/Timeline/Timeline.js.map +1 -1
- package/esm/Tooltip/Tooltip.js +6 -1
- package/esm/Tooltip/Tooltip.js.map +1 -1
- package/esm/Tooltip/use-tooltip.js +22 -3
- package/esm/Tooltip/use-tooltip.js.map +1 -1
- package/lib/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/lib/Floating/FloatingArrow/FloatingArrow.d.ts +3 -4
- package/lib/Floating/FloatingArrow/FloatingArrow.d.ts.map +1 -1
- package/lib/Floating/FloatingArrow/get-arrow-position-styles.d.ts +3 -1
- package/lib/Floating/FloatingArrow/get-arrow-position-styles.d.ts.map +1 -1
- package/lib/Grid/Grid.d.ts +1 -1
- package/lib/Grid/Grid.d.ts.map +1 -1
- package/lib/Image/Image.d.ts +1 -1
- package/lib/Image/Image.d.ts.map +1 -1
- package/lib/Popover/Popover.context.d.ts +3 -0
- package/lib/Popover/Popover.context.d.ts.map +1 -1
- package/lib/Popover/Popover.d.ts.map +1 -1
- package/lib/Popover/PopoverDropdown/PopoverDropdown.d.ts.map +1 -1
- package/lib/Popover/use-popover.d.ts +2 -0
- package/lib/Popover/use-popover.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControl.styles.d.ts.map +1 -1
- package/lib/Switch/Switch.d.ts.map +1 -1
- package/lib/Switch/Switch.styles.d.ts.map +1 -1
- package/lib/Table/Table.d.ts +4 -0
- package/lib/Table/Table.d.ts.map +1 -1
- package/lib/Table/Table.styles.d.ts +2 -0
- package/lib/Table/Table.styles.d.ts.map +1 -1
- package/lib/Timeline/Timeline.d.ts +1 -1
- package/lib/Timeline/Timeline.d.ts.map +1 -1
- package/lib/Tooltip/Tooltip.d.ts.map +1 -1
- package/lib/Tooltip/use-tooltip.d.ts +4 -0
- package/lib/Tooltip/use-tooltip.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -21,11 +21,28 @@ function useTooltip(settings) {
|
|
|
21
21
|
setCurrentId(uid);
|
|
22
22
|
}
|
|
23
23
|
}, [setCurrentId, uid]);
|
|
24
|
-
const {
|
|
24
|
+
const {
|
|
25
|
+
x,
|
|
26
|
+
y,
|
|
27
|
+
reference,
|
|
28
|
+
floating,
|
|
29
|
+
context,
|
|
30
|
+
refs,
|
|
31
|
+
update,
|
|
32
|
+
placement,
|
|
33
|
+
middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
|
|
34
|
+
} = reactDomInteractions.useFloating({
|
|
25
35
|
placement: settings.position,
|
|
26
36
|
open: opened,
|
|
27
37
|
onOpenChange: onChange,
|
|
28
|
-
middleware: [
|
|
38
|
+
middleware: [
|
|
39
|
+
reactDomInteractions.offset(settings.offset),
|
|
40
|
+
reactDomInteractions.shift({ padding: 8 }),
|
|
41
|
+
reactDomInteractions.flip(),
|
|
42
|
+
reactDomInteractions.arrow({
|
|
43
|
+
element: settings.arrowRef
|
|
44
|
+
})
|
|
45
|
+
]
|
|
29
46
|
});
|
|
30
47
|
const { getReferenceProps, getFloatingProps } = reactDomInteractions.useInteractions([
|
|
31
48
|
reactDomInteractions.useHover(context, {
|
|
@@ -51,6 +68,8 @@ function useTooltip(settings) {
|
|
|
51
68
|
return {
|
|
52
69
|
x,
|
|
53
70
|
y,
|
|
71
|
+
arrowX,
|
|
72
|
+
arrowY,
|
|
54
73
|
reference,
|
|
55
74
|
floating,
|
|
56
75
|
getFloatingProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip.js","sources":["../../src/Tooltip/use-tooltip.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport {\n useFloating,\n flip,\n offset,\n shift,\n useInteractions,\n useHover,\n useFocus,\n useRole,\n useDismiss,\n useDelayGroupContext,\n useDelayGroup,\n} from '@floating-ui/react-dom-interactions';\nimport { useId, useDidUpdate } from '@mantine/hooks';\nimport { useTooltipGroupContext } from './TooltipGroup/TooltipGroup.context';\nimport { FloatingPosition, useFloatingAutoUpdate } from '../Floating';\n\ninterface UseTooltip {\n position: FloatingPosition;\n closeDelay: number;\n openDelay: number;\n onPositionChange?(position: FloatingPosition): void;\n opened?: boolean;\n offset: number;\n events: { hover: boolean; focus: boolean; touch: boolean };\n positionDependencies: any[];\n}\n\nexport function useTooltip(settings: UseTooltip) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(false);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = useTooltipGroupContext();\n const uid = useId();\n\n const { delay: groupDelay, currentId, setCurrentId } = useDelayGroupContext();\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n }\n },\n [setCurrentId, uid]\n );\n\n const {
|
|
1
|
+
{"version":3,"file":"use-tooltip.js","sources":["../../src/Tooltip/use-tooltip.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport {\n useFloating,\n flip,\n arrow,\n offset,\n shift,\n useInteractions,\n useHover,\n useFocus,\n useRole,\n useDismiss,\n useDelayGroupContext,\n useDelayGroup,\n} from '@floating-ui/react-dom-interactions';\nimport { useId, useDidUpdate } from '@mantine/hooks';\nimport { useTooltipGroupContext } from './TooltipGroup/TooltipGroup.context';\nimport { FloatingPosition, useFloatingAutoUpdate } from '../Floating';\n\ninterface UseTooltip {\n position: FloatingPosition;\n closeDelay: number;\n openDelay: number;\n onPositionChange?(position: FloatingPosition): void;\n opened?: boolean;\n offset: number;\n arrowRef?: React.RefObject<HTMLDivElement>;\n events: { hover: boolean; focus: boolean; touch: boolean };\n positionDependencies: any[];\n}\n\nexport function useTooltip(settings: UseTooltip) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(false);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = useTooltipGroupContext();\n const uid = useId();\n\n const { delay: groupDelay, currentId, setCurrentId } = useDelayGroupContext();\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n }\n },\n [setCurrentId, uid]\n );\n\n const {\n x,\n y,\n reference,\n floating,\n context,\n refs,\n update,\n placement,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n } = useFloating({\n placement: settings.position,\n open: opened,\n onOpenChange: onChange,\n middleware: [\n offset(settings.offset),\n shift({ padding: 8 }),\n flip(),\n arrow({\n element: settings.arrowRef,\n }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: settings.events.hover,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n mouseOnly: !settings.events.touch,\n }),\n useFocus(context, { enabled: settings.events.focus, keyboardOnly: true }),\n useRole(context, { role: 'tooltip' }),\n // cannot be used with controlled tooltip, page jumps\n useDismiss(context, { enabled: typeof settings.opened === undefined }),\n useDelayGroup(context, { id: uid }),\n ]);\n\n useFloatingAutoUpdate({\n opened,\n positionDependencies: settings.positionDependencies,\n floating: { refs, update },\n });\n\n useDidUpdate(() => {\n settings.onPositionChange?.(placement);\n }, [placement]);\n\n const isGroupPhase = opened && currentId && currentId !== uid;\n\n return {\n x,\n y,\n arrowX,\n arrowY,\n reference,\n floating,\n getFloatingProps,\n getReferenceProps,\n isGroupPhase,\n opened,\n placement,\n };\n}\n"],"names":["useState","useTooltipGroupContext","useId","useDelayGroupContext","useCallback","useFloating","offset","shift","flip","arrow","useInteractions","useHover","useFocus","useRole","useDismiss","useDelayGroup","useFloatingAutoUpdate","useDidUpdate"],"mappings":"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"}
|
package/esm/Checkbox/Checkbox.js
CHANGED
|
@@ -46,6 +46,7 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
46
46
|
style,
|
|
47
47
|
sx,
|
|
48
48
|
checked,
|
|
49
|
+
disabled,
|
|
49
50
|
color,
|
|
50
51
|
label,
|
|
51
52
|
indeterminate,
|
|
@@ -64,6 +65,7 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
64
65
|
"style",
|
|
65
66
|
"sx",
|
|
66
67
|
"checked",
|
|
68
|
+
"disabled",
|
|
67
69
|
"color",
|
|
68
70
|
"label",
|
|
69
71
|
"indeterminate",
|
|
@@ -97,11 +99,13 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
97
99
|
ref,
|
|
98
100
|
type: "checkbox",
|
|
99
101
|
className: classes.input,
|
|
100
|
-
checked: indeterminate || checked
|
|
102
|
+
checked: indeterminate || checked,
|
|
103
|
+
disabled
|
|
101
104
|
}, rest), contextProps)), /* @__PURE__ */ React.createElement(Icon, {
|
|
102
105
|
indeterminate,
|
|
103
106
|
className: classes.icon
|
|
104
107
|
})), label && /* @__PURE__ */ React.createElement("label", {
|
|
108
|
+
"data-disabled": disabled || void 0,
|
|
105
109
|
className: classes.label,
|
|
106
110
|
htmlFor: uuid
|
|
107
111
|
}, label));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineSize,\n MantineColor,\n Selectors,\n extractSystemStyles,\n MantineNumberSize,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { useId } from '@mantine/hooks';\nimport { Box } from '../Box';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';\nimport { useCheckboxGroupContext } from './CheckboxGroup.context';\nimport useStyles, { CheckboxStylesParams } from './Checkbox.styles';\n\nexport type CheckboxStylesNames = Selectors<typeof useStyles>;\n\nexport interface CheckboxProps\n extends DefaultProps<CheckboxStylesNames, CheckboxStylesParams>,\n Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Key of theme.radius or number to set border-radius in px */\n radius?: MantineNumberSize;\n\n /** Predefined label font-size and checkbox width and height in px */\n size?: MantineSize;\n\n /** Checkbox label */\n label?: React.ReactNode;\n\n /** Indeterminate state of checkbox, overwrites checked */\n indeterminate?: boolean;\n\n /** Props spread to wrapper element */\n wrapperProps?: Record<string, any>;\n\n /** id to connect label with input */\n id?: string;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Icon rendered when checkbox has checked or indeterminate state */\n icon?: React.FC<{ indeterminate: boolean; className: string }>;\n}\n\nconst defaultProps: Partial<CheckboxProps> = {\n size: 'sm',\n transitionDuration: 100,\n icon: CheckboxIcon,\n};\n\ntype CheckboxComponent = ForwardRefWithStaticComponents<\n CheckboxProps,\n { Group: typeof CheckboxGroup }\n>;\n\nexport const Checkbox: CheckboxComponent = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n className,\n style,\n sx,\n checked,\n color,\n label,\n indeterminate,\n id,\n size,\n radius,\n wrapperProps,\n children,\n classNames,\n styles,\n transitionDuration,\n icon: Icon,\n unstyled,\n ...others\n } = useComponentDefaultProps('Checkbox', defaultProps, props);\n\n const ctx = useCheckboxGroupContext();\n const uuid = useId(id);\n const { systemStyles, rest } = extractSystemStyles(others);\n const { classes, cx } = useStyles(\n { size: ctx?.size || size, radius, color, transitionDuration },\n { name: 'Checkbox', classNames, styles, unstyled }\n );\n\n const contextProps = ctx\n ? {\n checked: ctx.value.includes(rest.value as string),\n onChange: ctx.onChange,\n }\n : {};\n\n return (\n <Box\n className={cx(classes.root, className)}\n style={style}\n sx={sx}\n {...systemStyles}\n {...wrapperProps}\n >\n <div className={classes.inner}>\n <input\n id={uuid}\n ref={ref}\n type=\"checkbox\"\n className={classes.input}\n checked={indeterminate || checked}\n {...rest}\n {...contextProps}\n />\n\n <Icon indeterminate={indeterminate} className={classes.icon} />\n </div>\n\n {label && (\n <label className={classes.label} htmlFor={uuid}>\n {label}\n </label>\n )}\n </Box>\n );\n }\n) as any;\n\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineSize,\n MantineColor,\n Selectors,\n extractSystemStyles,\n MantineNumberSize,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { useId } from '@mantine/hooks';\nimport { Box } from '../Box';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';\nimport { useCheckboxGroupContext } from './CheckboxGroup.context';\nimport useStyles, { CheckboxStylesParams } from './Checkbox.styles';\n\nexport type CheckboxStylesNames = Selectors<typeof useStyles>;\n\nexport interface CheckboxProps\n extends DefaultProps<CheckboxStylesNames, CheckboxStylesParams>,\n Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Key of theme.radius or number to set border-radius in px */\n radius?: MantineNumberSize;\n\n /** Predefined label font-size and checkbox width and height in px */\n size?: MantineSize;\n\n /** Checkbox label */\n label?: React.ReactNode;\n\n /** Indeterminate state of checkbox, overwrites checked */\n indeterminate?: boolean;\n\n /** Props spread to wrapper element */\n wrapperProps?: Record<string, any>;\n\n /** id to connect label with input */\n id?: string;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Icon rendered when checkbox has checked or indeterminate state */\n icon?: React.FC<{ indeterminate: boolean; className: string }>;\n}\n\nconst defaultProps: Partial<CheckboxProps> = {\n size: 'sm',\n transitionDuration: 100,\n icon: CheckboxIcon,\n};\n\ntype CheckboxComponent = ForwardRefWithStaticComponents<\n CheckboxProps,\n { Group: typeof CheckboxGroup }\n>;\n\nexport const Checkbox: CheckboxComponent = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n className,\n style,\n sx,\n checked,\n disabled,\n color,\n label,\n indeterminate,\n id,\n size,\n radius,\n wrapperProps,\n children,\n classNames,\n styles,\n transitionDuration,\n icon: Icon,\n unstyled,\n ...others\n } = useComponentDefaultProps('Checkbox', defaultProps, props);\n\n const ctx = useCheckboxGroupContext();\n const uuid = useId(id);\n const { systemStyles, rest } = extractSystemStyles(others);\n const { classes, cx } = useStyles(\n { size: ctx?.size || size, radius, color, transitionDuration },\n { name: 'Checkbox', classNames, styles, unstyled }\n );\n\n const contextProps = ctx\n ? {\n checked: ctx.value.includes(rest.value as string),\n onChange: ctx.onChange,\n }\n : {};\n\n return (\n <Box\n className={cx(classes.root, className)}\n style={style}\n sx={sx}\n {...systemStyles}\n {...wrapperProps}\n >\n <div className={classes.inner}>\n <input\n id={uuid}\n ref={ref}\n type=\"checkbox\"\n className={classes.input}\n checked={indeterminate || checked}\n disabled={disabled}\n {...rest}\n {...contextProps}\n />\n\n <Icon indeterminate={indeterminate} className={classes.icon} />\n </div>\n\n {label && (\n <label data-disabled={disabled || undefined} className={classes.label} htmlFor={uuid}>\n {label}\n </label>\n )}\n </Box>\n );\n }\n) as any;\n\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"names":[],"mappings":"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"}
|
|
@@ -73,7 +73,10 @@ var useStyles = createStyles((theme, { size, radius, color, transitionDuration }
|
|
|
73
73
|
fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
|
|
74
74
|
lineHeight: `${_size}px`,
|
|
75
75
|
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
76
|
-
cursor: theme.cursorType
|
|
76
|
+
cursor: theme.cursorType,
|
|
77
|
+
"&[data-disabled]": {
|
|
78
|
+
color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
|
|
79
|
+
}
|
|
77
80
|
}),
|
|
78
81
|
input: __spreadProps(__spreadValues({}, theme.fn.focusStyles()), {
|
|
79
82
|
appearance: "none",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":["../../src/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { createStyles, MantineSize, MantineColor, MantineNumberSize } from '@mantine/styles';\n\nconst sizes = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 30,\n xl: 36,\n};\n\nconst iconSizes = {\n xs: 8,\n sm: 10,\n md: 14,\n lg: 16,\n xl: 20,\n};\n\nexport interface CheckboxStylesParams {\n size: MantineSize;\n radius: MantineNumberSize;\n color: MantineColor;\n transitionDuration: number;\n}\n\nexport default createStyles(\n (theme, { size, radius, color, transitionDuration }: CheckboxStylesParams, getRef) => {\n const _size = theme.fn.size({ size, sizes });\n const colors = theme.fn.variant({ variant: 'filled', color });\n\n return {\n icon: {\n ref: getRef('icon'),\n color: theme.white,\n transform: 'translateY(5px) scale(0.5)',\n opacity: 0,\n transitionProperty: 'opacity, transform',\n transitionTimingFunction: 'ease',\n transitionDuration: `${transitionDuration}ms`,\n pointerEvents: 'none',\n width: theme.fn.size({ size, sizes: iconSizes }),\n position: 'absolute',\n zIndex: 1,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n margin: 'auto',\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n },\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n inner: {\n position: 'relative',\n width: _size,\n height: _size,\n },\n\n label: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n paddingLeft: theme.spacing.sm,\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n lineHeight: `${_size}px`,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n cursor: theme.cursorType,\n },\n\n input: {\n ...theme.fn.focusStyles(),\n appearance: 'none',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n border: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n }`,\n width: _size,\n height: _size,\n borderRadius: theme.fn.radius(radius),\n padding: 0,\n display: 'block',\n margin: 0,\n transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,\n cursor: theme.cursorType,\n\n '&:checked': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n\n [`& + .${getRef('icon')}`]: {\n opacity: 1,\n transform: 'translateY(0) scale(1)',\n },\n },\n\n '&:disabled': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],\n cursor: 'not-allowed',\n\n [`& + .${getRef('icon')}`]: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n },\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":["../../src/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { createStyles, MantineSize, MantineColor, MantineNumberSize } from '@mantine/styles';\n\nconst sizes = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 30,\n xl: 36,\n};\n\nconst iconSizes = {\n xs: 8,\n sm: 10,\n md: 14,\n lg: 16,\n xl: 20,\n};\n\nexport interface CheckboxStylesParams {\n size: MantineSize;\n radius: MantineNumberSize;\n color: MantineColor;\n transitionDuration: number;\n}\n\nexport default createStyles(\n (theme, { size, radius, color, transitionDuration }: CheckboxStylesParams, getRef) => {\n const _size = theme.fn.size({ size, sizes });\n const colors = theme.fn.variant({ variant: 'filled', color });\n\n return {\n icon: {\n ref: getRef('icon'),\n color: theme.white,\n transform: 'translateY(5px) scale(0.5)',\n opacity: 0,\n transitionProperty: 'opacity, transform',\n transitionTimingFunction: 'ease',\n transitionDuration: `${transitionDuration}ms`,\n pointerEvents: 'none',\n width: theme.fn.size({ size, sizes: iconSizes }),\n position: 'absolute',\n zIndex: 1,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n margin: 'auto',\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n },\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n inner: {\n position: 'relative',\n width: _size,\n height: _size,\n },\n\n label: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n paddingLeft: theme.spacing.sm,\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n lineHeight: `${_size}px`,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n cursor: theme.cursorType,\n '&[data-disabled]': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n },\n\n input: {\n ...theme.fn.focusStyles(),\n appearance: 'none',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n border: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n }`,\n width: _size,\n height: _size,\n borderRadius: theme.fn.radius(radius),\n padding: 0,\n display: 'block',\n margin: 0,\n transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,\n cursor: theme.cursorType,\n\n '&:checked': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n\n [`& + .${getRef('icon')}`]: {\n opacity: 1,\n transform: 'translateY(0) scale(1)',\n },\n },\n\n '&:disabled': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],\n cursor: 'not-allowed',\n\n [`& + .${getRef('icon')}`]: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n },\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
2
|
import { useMantineTheme } from '@mantine/styles';
|
|
3
3
|
import { getArrowPositionStyles } from './get-arrow-position-styles.js';
|
|
4
4
|
|
|
@@ -33,34 +33,25 @@ var __objRest = (source, exclude) => {
|
|
|
33
33
|
}
|
|
34
34
|
return target;
|
|
35
35
|
};
|
|
36
|
-
|
|
37
|
-
var _b = _a, {
|
|
38
|
-
withBorder,
|
|
39
|
-
position,
|
|
40
|
-
arrowSize,
|
|
41
|
-
arrowOffset,
|
|
42
|
-
visible
|
|
43
|
-
} = _b, others = __objRest(_b, [
|
|
44
|
-
"withBorder",
|
|
45
|
-
"position",
|
|
46
|
-
"arrowSize",
|
|
47
|
-
"arrowOffset",
|
|
48
|
-
"visible"
|
|
49
|
-
]);
|
|
36
|
+
const FloatingArrow = forwardRef((_a, ref) => {
|
|
37
|
+
var _b = _a, { withBorder, position, arrowSize, arrowOffset, visible, arrowX, arrowY } = _b, others = __objRest(_b, ["withBorder", "position", "arrowSize", "arrowOffset", "visible", "arrowX", "arrowY"]);
|
|
50
38
|
const theme = useMantineTheme();
|
|
51
39
|
if (!visible) {
|
|
52
40
|
return null;
|
|
53
41
|
}
|
|
54
42
|
return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, others), {
|
|
43
|
+
ref,
|
|
55
44
|
style: getArrowPositionStyles({
|
|
56
45
|
withBorder,
|
|
57
46
|
position,
|
|
58
47
|
arrowSize,
|
|
59
48
|
arrowOffset,
|
|
60
|
-
dir: theme.dir
|
|
49
|
+
dir: theme.dir,
|
|
50
|
+
arrowX,
|
|
51
|
+
arrowY
|
|
61
52
|
})
|
|
62
53
|
}));
|
|
63
|
-
}
|
|
54
|
+
});
|
|
64
55
|
FloatingArrow.displayName = "@mantine/core/FloatingArrow";
|
|
65
56
|
|
|
66
57
|
export { FloatingArrow };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingArrow.js","sources":["../../../src/Floating/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import React from 'react';\nimport { useMantineTheme } from '@mantine/styles';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\nimport { FloatingPosition } from '../types';\n\ninterface FloatingArrowProps extends React.ComponentPropsWithoutRef<'div'> {\n withBorder: boolean;\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n visible: boolean;\n}\n\nexport
|
|
1
|
+
{"version":3,"file":"FloatingArrow.js","sources":["../../../src/Floating/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useMantineTheme } from '@mantine/styles';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\nimport { FloatingPosition } from '../types';\n\ninterface FloatingArrowProps extends React.ComponentPropsWithoutRef<'div'> {\n withBorder: boolean;\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowX: number;\n arrowY: number;\n visible: boolean;\n}\n\nexport const FloatingArrow = forwardRef<HTMLDivElement, FloatingArrowProps>(\n ({ withBorder, position, arrowSize, arrowOffset, visible, arrowX, arrowY, ...others }, ref) => {\n const theme = useMantineTheme();\n\n if (!visible) {\n return null;\n }\n\n return (\n <div\n {...others}\n ref={ref}\n style={getArrowPositionStyles({\n withBorder,\n position,\n arrowSize,\n arrowOffset,\n dir: theme.dir,\n arrowX,\n arrowY,\n })}\n />\n );\n }\n);\n\nFloatingArrow.displayName = '@mantine/core/FloatingArrow';\n"],"names":[],"mappings":"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"}
|
|
@@ -17,9 +17,9 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
function horizontalSide(placement,
|
|
20
|
+
function horizontalSide(placement, arrowY, arrowOffset) {
|
|
21
21
|
if (placement === "center") {
|
|
22
|
-
return { top:
|
|
22
|
+
return { top: arrowY };
|
|
23
23
|
}
|
|
24
24
|
if (placement === "end") {
|
|
25
25
|
return { bottom: arrowOffset };
|
|
@@ -29,9 +29,9 @@ function horizontalSide(placement, arrowSize, arrowOffset) {
|
|
|
29
29
|
}
|
|
30
30
|
return {};
|
|
31
31
|
}
|
|
32
|
-
function verticalSide(placement,
|
|
32
|
+
function verticalSide(placement, arrowX, arrowOffset, dir) {
|
|
33
33
|
if (placement === "center") {
|
|
34
|
-
return {
|
|
34
|
+
return { [dir === "ltr" ? "left" : "right"]: arrowX };
|
|
35
35
|
}
|
|
36
36
|
if (placement === "end") {
|
|
37
37
|
return { [dir === "ltr" ? "right" : "left"]: arrowOffset };
|
|
@@ -46,6 +46,8 @@ function getArrowPositionStyles({
|
|
|
46
46
|
withBorder,
|
|
47
47
|
arrowSize,
|
|
48
48
|
arrowOffset,
|
|
49
|
+
arrowX,
|
|
50
|
+
arrowY,
|
|
49
51
|
dir
|
|
50
52
|
}) {
|
|
51
53
|
const [side, placement = "center"] = position.split("-");
|
|
@@ -57,28 +59,28 @@ function getArrowPositionStyles({
|
|
|
57
59
|
};
|
|
58
60
|
const arrowPosition = withBorder ? -arrowSize / 2 - 1 : -arrowSize / 2;
|
|
59
61
|
if (side === "left") {
|
|
60
|
-
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), horizontalSide(placement,
|
|
62
|
+
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), horizontalSide(placement, arrowY, arrowOffset)), {
|
|
61
63
|
right: arrowPosition,
|
|
62
64
|
borderLeft: 0,
|
|
63
65
|
borderBottom: 0
|
|
64
66
|
});
|
|
65
67
|
}
|
|
66
68
|
if (side === "right") {
|
|
67
|
-
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), horizontalSide(placement,
|
|
69
|
+
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), horizontalSide(placement, arrowY, arrowOffset)), {
|
|
68
70
|
left: arrowPosition,
|
|
69
71
|
borderRight: 0,
|
|
70
72
|
borderTop: 0
|
|
71
73
|
});
|
|
72
74
|
}
|
|
73
75
|
if (side === "top") {
|
|
74
|
-
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), verticalSide(placement,
|
|
76
|
+
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), verticalSide(placement, arrowX, arrowOffset, dir)), {
|
|
75
77
|
bottom: arrowPosition,
|
|
76
78
|
borderTop: 0,
|
|
77
79
|
[dir === "ltr" ? "borderLeft" : "borderRight"]: 0
|
|
78
80
|
});
|
|
79
81
|
}
|
|
80
82
|
if (side === "bottom") {
|
|
81
|
-
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), verticalSide(placement,
|
|
83
|
+
return __spreadProps(__spreadValues(__spreadValues({}, baseStyles), verticalSide(placement, arrowX, arrowOffset, dir)), {
|
|
82
84
|
top: arrowPosition,
|
|
83
85
|
borderBottom: 0,
|
|
84
86
|
[dir === "ltr" ? "borderRight" : "borderLeft"]: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-arrow-position-styles.js","sources":["../../../src/Floating/FloatingArrow/get-arrow-position-styles.ts"],"sourcesContent":["import type { FloatingPosition, FloatingSide, FloatingPlacement } from '../types';\n\nfunction horizontalSide(\n placement: FloatingPlacement | 'center',\n
|
|
1
|
+
{"version":3,"file":"get-arrow-position-styles.js","sources":["../../../src/Floating/FloatingArrow/get-arrow-position-styles.ts"],"sourcesContent":["import type { FloatingPosition, FloatingSide, FloatingPlacement } from '../types';\n\nfunction horizontalSide(\n placement: FloatingPlacement | 'center',\n arrowY: number,\n arrowOffset: number\n) {\n if (placement === 'center') {\n return { top: arrowY };\n }\n\n if (placement === 'end') {\n return { bottom: arrowOffset };\n }\n\n if (placement === 'start') {\n return { top: arrowOffset };\n }\n\n return {};\n}\n\nfunction verticalSide(\n placement: FloatingPlacement | 'center',\n arrowX: number,\n arrowOffset: number,\n dir: 'rtl' | 'ltr'\n) {\n if (placement === 'center') {\n return { [dir === 'ltr' ? 'left' : 'right']: arrowX };\n }\n\n if (placement === 'end') {\n return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };\n }\n\n if (placement === 'start') {\n return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };\n }\n\n return {};\n}\n\nexport function getArrowPositionStyles({\n position,\n withBorder,\n arrowSize,\n arrowOffset,\n arrowX,\n arrowY,\n dir,\n}: {\n position: FloatingPosition;\n withBorder: boolean;\n arrowSize: number;\n arrowOffset: number;\n arrowX: number;\n arrowY: number;\n dir: 'rtl' | 'ltr';\n}) {\n const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];\n const baseStyles = {\n width: arrowSize,\n height: arrowSize,\n transform: 'rotate(45deg)',\n position: 'absolute',\n };\n\n const arrowPosition = withBorder ? -arrowSize / 2 - 1 : -arrowSize / 2;\n\n if (side === 'left') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset),\n right: arrowPosition,\n borderLeft: 0,\n borderBottom: 0,\n };\n }\n\n if (side === 'right') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset),\n left: arrowPosition,\n borderRight: 0,\n borderTop: 0,\n };\n }\n\n if (side === 'top') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, dir),\n bottom: arrowPosition,\n borderTop: 0,\n [dir === 'ltr' ? 'borderLeft' : 'borderRight']: 0,\n };\n }\n\n if (side === 'bottom') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, dir),\n top: arrowPosition,\n borderBottom: 0,\n [dir === 'ltr' ? 'borderRight' : 'borderLeft']: 0,\n };\n }\n\n return {};\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -37,7 +37,7 @@ const getColumnFlexGrow = (colSpan, grow) => {
|
|
|
37
37
|
}
|
|
38
38
|
return colSpan === "auto" || grow ? 1 : 0;
|
|
39
39
|
};
|
|
40
|
-
const getColumnOffset = (offset, columns) => offset ? `${100 / (columns / offset)}%` : void 0;
|
|
40
|
+
const getColumnOffset = (offset, columns) => offset === 0 ? 0 : offset ? `${100 / (columns / offset)}%` : void 0;
|
|
41
41
|
function getBreakpointsStyles({
|
|
42
42
|
sizes,
|
|
43
43
|
offsets,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Col.styles.js","sources":["../../../src/Grid/Col/Col.styles.ts"],"sourcesContent":["import {\n createStyles,\n MantineNumberSize,\n MANTINE_SIZES,\n MantineSize,\n MantineTheme,\n} from '@mantine/styles';\n\nexport type ColSpan = number | 'auto' | 'content';\n\ninterface ColStyles {\n gutter: MantineNumberSize;\n columns: number;\n grow: boolean;\n offset: number;\n offsetXs: number;\n offsetSm: number;\n offsetMd: number;\n offsetLg: number;\n offsetXl: number;\n span: ColSpan;\n xs: ColSpan;\n sm: ColSpan;\n md: ColSpan;\n lg: ColSpan;\n xl: ColSpan;\n order: React.CSSProperties['order'];\n orderXs: React.CSSProperties['order'];\n orderSm: React.CSSProperties['order'];\n orderMd: React.CSSProperties['order'];\n orderLg: React.CSSProperties['order'];\n orderXl: React.CSSProperties['order'];\n}\n\nconst getColumnFlexBasis = (colSpan: ColSpan, columns: number) => {\n if (colSpan === 'content') {\n return 'auto';\n }\n if (colSpan === 'auto') {\n return '0px';\n }\n return colSpan ? `${100 / (columns / colSpan)}%` : undefined;\n};\n\nconst getColumnMaxWidth = (colSpan: ColSpan, columns: number, grow: boolean) => {\n if (grow || colSpan === 'auto' || colSpan === 'content') {\n return 'unset';\n }\n return getColumnFlexBasis(colSpan, columns);\n};\n\nconst getColumnFlexGrow = (colSpan: ColSpan, grow: boolean) => {\n if (!colSpan) {\n return undefined;\n }\n return colSpan === 'auto' || grow ? 1 : 0;\n};\n\nconst getColumnOffset = (offset: number, columns: number) =>\n offset ? `${100 / (columns / offset)}%` : undefined;\n\nfunction getBreakpointsStyles({\n sizes,\n offsets,\n orders,\n theme,\n columns,\n grow,\n}: {\n sizes: Record<MantineSize, ColSpan>;\n offsets: Record<MantineSize, number>;\n orders: Record<MantineSize, React.CSSProperties['order']>;\n grow: boolean;\n theme: MantineTheme;\n columns: number;\n}) {\n return MANTINE_SIZES.reduce((acc, size) => {\n acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {\n order: orders[size],\n flexBasis: getColumnFlexBasis(sizes[size], columns),\n flexShrink: 0,\n width: sizes[size] === 'content' ? 'auto' : undefined,\n maxWidth: getColumnMaxWidth(sizes[size], columns, grow),\n marginLeft: getColumnOffset(offsets[size], columns),\n flexGrow: getColumnFlexGrow(sizes[size], grow),\n };\n return acc;\n }, {});\n}\n\nexport default createStyles(\n (\n theme,\n {\n gutter,\n grow,\n offset,\n offsetXs,\n offsetSm,\n offsetMd,\n offsetLg,\n offsetXl,\n columns,\n span,\n xs,\n sm,\n md,\n lg,\n xl,\n order,\n orderXs,\n orderSm,\n orderMd,\n orderLg,\n orderXl,\n }: ColStyles\n ) => ({\n root: {\n boxSizing: 'border-box',\n flexGrow: getColumnFlexGrow(span, grow),\n order,\n padding: theme.fn.size({ size: gutter, sizes: theme.spacing }) / 2,\n marginLeft: getColumnOffset(offset, columns),\n flexBasis: getColumnFlexBasis(span, columns),\n flexShrink: 0,\n width: span === 'content' ? 'auto' : undefined,\n maxWidth: getColumnMaxWidth(span, columns, grow),\n ...getBreakpointsStyles({\n sizes: { xs, sm, md, lg, xl },\n offsets: { xs: offsetXs, sm: offsetSm, md: offsetMd, lg: offsetLg, xl: offsetXl },\n orders: { xs: orderXs, sm: orderSm, md: orderMd, lg: orderLg, xl: orderXl },\n theme,\n columns,\n grow,\n }),\n },\n })\n);\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;AAKF,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK;AACjD,EAAE,IAAI,OAAO,KAAK,SAAS,EAAE;AAC7B,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH,EAAE,IAAI,OAAO,KAAK,MAAM,EAAE;AAC1B,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,OAAO,GAAG,CAAC,EAAE,GAAG,IAAI,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;AAC5D,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK;AACtD,EAAE,IAAI,IAAI,IAAI,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,SAAS,EAAE;AAC3D,IAAI,OAAO,OAAO,CAAC;AACnB,GAAG;AACH,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAC9C,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,IAAI,KAAK;AAC7C,EAAE,IAAI,CAAC,OAAO,EAAE;AAChB,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG;AACH,EAAE,OAAO,OAAO,KAAK,MAAM,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5C,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Col.styles.js","sources":["../../../src/Grid/Col/Col.styles.ts"],"sourcesContent":["import {\n createStyles,\n MantineNumberSize,\n MANTINE_SIZES,\n MantineSize,\n MantineTheme,\n} from '@mantine/styles';\n\nexport type ColSpan = number | 'auto' | 'content';\n\ninterface ColStyles {\n gutter: MantineNumberSize;\n columns: number;\n grow: boolean;\n offset: number;\n offsetXs: number;\n offsetSm: number;\n offsetMd: number;\n offsetLg: number;\n offsetXl: number;\n span: ColSpan;\n xs: ColSpan;\n sm: ColSpan;\n md: ColSpan;\n lg: ColSpan;\n xl: ColSpan;\n order: React.CSSProperties['order'];\n orderXs: React.CSSProperties['order'];\n orderSm: React.CSSProperties['order'];\n orderMd: React.CSSProperties['order'];\n orderLg: React.CSSProperties['order'];\n orderXl: React.CSSProperties['order'];\n}\n\nconst getColumnFlexBasis = (colSpan: ColSpan, columns: number) => {\n if (colSpan === 'content') {\n return 'auto';\n }\n if (colSpan === 'auto') {\n return '0px';\n }\n return colSpan ? `${100 / (columns / colSpan)}%` : undefined;\n};\n\nconst getColumnMaxWidth = (colSpan: ColSpan, columns: number, grow: boolean) => {\n if (grow || colSpan === 'auto' || colSpan === 'content') {\n return 'unset';\n }\n return getColumnFlexBasis(colSpan, columns);\n};\n\nconst getColumnFlexGrow = (colSpan: ColSpan, grow: boolean) => {\n if (!colSpan) {\n return undefined;\n }\n return colSpan === 'auto' || grow ? 1 : 0;\n};\n\nconst getColumnOffset = (offset: number, columns: number) =>\n offset === 0 ? 0 : offset ? `${100 / (columns / offset)}%` : undefined;\n\nfunction getBreakpointsStyles({\n sizes,\n offsets,\n orders,\n theme,\n columns,\n grow,\n}: {\n sizes: Record<MantineSize, ColSpan>;\n offsets: Record<MantineSize, number>;\n orders: Record<MantineSize, React.CSSProperties['order']>;\n grow: boolean;\n theme: MantineTheme;\n columns: number;\n}) {\n return MANTINE_SIZES.reduce((acc, size) => {\n acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {\n order: orders[size],\n flexBasis: getColumnFlexBasis(sizes[size], columns),\n flexShrink: 0,\n width: sizes[size] === 'content' ? 'auto' : undefined,\n maxWidth: getColumnMaxWidth(sizes[size], columns, grow),\n marginLeft: getColumnOffset(offsets[size], columns),\n flexGrow: getColumnFlexGrow(sizes[size], grow),\n };\n return acc;\n }, {});\n}\n\nexport default createStyles(\n (\n theme,\n {\n gutter,\n grow,\n offset,\n offsetXs,\n offsetSm,\n offsetMd,\n offsetLg,\n offsetXl,\n columns,\n span,\n xs,\n sm,\n md,\n lg,\n xl,\n order,\n orderXs,\n orderSm,\n orderMd,\n orderLg,\n orderXl,\n }: ColStyles\n ) => ({\n root: {\n boxSizing: 'border-box',\n flexGrow: getColumnFlexGrow(span, grow),\n order,\n padding: theme.fn.size({ size: gutter, sizes: theme.spacing }) / 2,\n marginLeft: getColumnOffset(offset, columns),\n flexBasis: getColumnFlexBasis(span, columns),\n flexShrink: 0,\n width: span === 'content' ? 'auto' : undefined,\n maxWidth: getColumnMaxWidth(span, columns, grow),\n ...getBreakpointsStyles({\n sizes: { xs, sm, md, lg, xl },\n offsets: { xs: offsetXs, sm: offsetSm, md: offsetMd, lg: offsetLg, xl: offsetXl },\n orders: { xs: orderXs, sm: orderSm, md: orderMd, lg: orderLg, xl: orderXl },\n theme,\n columns,\n grow,\n }),\n },\n })\n);\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;AAKF,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK;AACjD,EAAE,IAAI,OAAO,KAAK,SAAS,EAAE;AAC7B,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH,EAAE,IAAI,OAAO,KAAK,MAAM,EAAE;AAC1B,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,OAAO,GAAG,CAAC,EAAE,GAAG,IAAI,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;AAC5D,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK;AACtD,EAAE,IAAI,IAAI,IAAI,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,SAAS,EAAE;AAC3D,IAAI,OAAO,OAAO,CAAC;AACnB,GAAG;AACH,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAC9C,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,IAAI,KAAK;AAC7C,EAAE,IAAI,CAAC,OAAO,EAAE;AAChB,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG;AACH,EAAE,OAAO,OAAO,KAAK,MAAM,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5C,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;AACjH,SAAS,oBAAoB,CAAC;AAC9B,EAAE,KAAK;AACP,EAAE,OAAO;AACT,EAAE,MAAM;AACR,EAAE,KAAK;AACP,EAAE,OAAO;AACT,EAAE,IAAI;AACN,CAAC,EAAE;AACH,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK;AAC7C,IAAI,GAAG,CAAC,CAAC,mBAAmB,EAAE,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG;AAClE,MAAM,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC;AACzB,MAAM,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;AACzD,MAAM,UAAU,EAAE,CAAC;AACnB,MAAM,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AACxD,MAAM,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC;AAC7D,MAAM,UAAU,EAAE,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;AACzD,MAAM,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;AACpD,KAAK,CAAC;AACN,IAAI,OAAO,GAAG,CAAC;AACf,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AACD,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE;AACpC,EAAE,MAAM;AACR,EAAE,IAAI;AACN,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,OAAO;AACT,EAAE,IAAI;AACN,EAAE,EAAE;AACJ,EAAE,EAAE;AACJ,EAAE,EAAE;AACJ,EAAE,EAAE;AACJ,EAAE,EAAE;AACJ,EAAE,KAAK;AACP,EAAE,OAAO;AACT,EAAE,OAAO;AACT,EAAE,OAAO;AACT,EAAE,OAAO;AACT,EAAE,OAAO;AACT,CAAC,MAAM;AACP,EAAE,IAAI,EAAE,cAAc,CAAC;AACvB,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,QAAQ,EAAE,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC;AAC3C,IAAI,KAAK;AACT,IAAI,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AACtE,IAAI,UAAU,EAAE,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC;AAChD,IAAI,SAAS,EAAE,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC;AAChD,IAAI,UAAU,EAAE,CAAC;AACjB,IAAI,KAAK,EAAE,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AAC/C,IAAI,QAAQ,EAAE,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC;AACpD,GAAG,EAAE,oBAAoB,CAAC;AAC1B,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACjC,IAAI,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACrF,IAAI,MAAM,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;AAC/E,IAAI,KAAK;AACT,IAAI,OAAO;AACX,IAAI,IAAI;AACR,GAAG,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;;;;"}
|
package/esm/Grid/Grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { Box } from '../Box';\nimport { Col } from './Col/Col';\nimport { GridProvider } from './Grid.context';\nimport useStyles from './Grid.styles';\n\nexport interface GridProps extends DefaultProps, React.
|
|
1
|
+
{"version":3,"file":"Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { Box } from '../Box';\nimport { Col } from './Col/Col';\nimport { GridProvider } from './Grid.context';\nimport useStyles from './Grid.styles';\n\nexport interface GridProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {\n /** <Col /> components only */\n children: React.ReactNode;\n\n /** Spacing between columns predefined value from theme.spacing or number for gutter in px */\n gutter?: MantineNumberSize;\n\n /** Should columns in the last row take 100% of grid width */\n grow?: boolean;\n\n /** Set grid justify-content property */\n justify?: React.CSSProperties['justifyContent'];\n\n /** Set grid align-content property */\n align?: React.CSSProperties['alignContent'];\n\n /** Amount of columns in each row */\n columns?: number;\n}\n\ntype GridComponent = ForwardRefWithStaticComponents<GridProps, { Col: typeof Col }>;\n\nconst defaultProps: Partial<GridProps> = {\n gutter: 'md',\n justify: 'flex-start',\n align: 'stretch',\n columns: 12,\n};\n\nexport const Grid: GridComponent = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n const { gutter, children, grow, justify, align, columns, className, id, unstyled, ...others } =\n useComponentDefaultProps('Grid', defaultProps, props);\n const { classes, cx } = useStyles({ gutter, justify, align }, { unstyled, name: 'Grid' });\n\n return (\n <GridProvider value={{ gutter, grow, columns }}>\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {children}\n </Box>\n </GridProvider>\n );\n}) as any;\n\nGrid.Col = Col;\nGrid.displayName = '@mantine/core/Grid';\n"],"names":[],"mappings":"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"}
|
package/esm/Image/Image.js
CHANGED
|
@@ -77,7 +77,7 @@ const Image = forwardRef((props, ref) => {
|
|
|
77
77
|
"style"
|
|
78
78
|
]);
|
|
79
79
|
const { classes, cx } = useStyles({ radius }, { classNames, styles, unstyled, name: "Image" });
|
|
80
|
-
const [loaded, setLoaded] = useState(
|
|
80
|
+
const [loaded, setLoaded] = useState(!!src);
|
|
81
81
|
const [error, setError] = useState(!src);
|
|
82
82
|
const isPlaceholder = withPlaceholder && (!loaded || error);
|
|
83
83
|
useDidUpdate(() => {
|
package/esm/Image/Image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n Selectors,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles, { ImageStylesParams } from './Image.styles';\n\nexport type ImageStylesNames = Selectors<typeof useStyles>;\n\nexport interface ImageProps\n extends DefaultProps<ImageStylesNames, ImageStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n /** Image src */\n src?: string;\n\n /** Image alt text, used as title for placeholder if image was not loaded */\n alt?: string;\n\n /** Image object-fit property */\n fit?: React.CSSProperties['objectFit'];\n\n /** Image width, defaults to 100%, cannot exceed 100% */\n width?: number | string;\n\n /** Image height, defaults to original image height adjusted to given width */\n height?: number | string;\n\n /** Predefined border-radius value from theme.radius or number for border-radius in px */\n radius?: MantineNumberSize;\n\n /** Enable placeholder when image is loading and when image fails to load */\n withPlaceholder?: boolean;\n\n /** Customize placeholder content */\n placeholder?: React.ReactNode;\n\n /** Props spread to img element */\n imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n /** Get image element ref */\n imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n /** Image figcaption, displayed below image */\n caption?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ImageProps> = {\n fit: 'cover',\n width: '100%',\n height: 'auto',\n radius: 0,\n};\n\nexport const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps, ref) => {\n const {\n className,\n alt,\n src,\n fit,\n width,\n height,\n radius,\n imageProps,\n withPlaceholder,\n placeholder,\n imageRef,\n classNames,\n styles,\n caption,\n unstyled,\n style,\n ...others\n } = useComponentDefaultProps('Image', defaultProps, props);\n const { classes, cx } = useStyles({ radius }, { classNames, styles, unstyled, name: 'Image' });\n const [loaded, setLoaded] = useState(
|
|
1
|
+
{"version":3,"file":"Image.js","sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n Selectors,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles, { ImageStylesParams } from './Image.styles';\n\nexport type ImageStylesNames = Selectors<typeof useStyles>;\n\nexport interface ImageProps\n extends DefaultProps<ImageStylesNames, ImageStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n /** Image src */\n src?: string | null;\n\n /** Image alt text, used as title for placeholder if image was not loaded */\n alt?: string;\n\n /** Image object-fit property */\n fit?: React.CSSProperties['objectFit'];\n\n /** Image width, defaults to 100%, cannot exceed 100% */\n width?: number | string;\n\n /** Image height, defaults to original image height adjusted to given width */\n height?: number | string;\n\n /** Predefined border-radius value from theme.radius or number for border-radius in px */\n radius?: MantineNumberSize;\n\n /** Enable placeholder when image is loading and when image fails to load */\n withPlaceholder?: boolean;\n\n /** Customize placeholder content */\n placeholder?: React.ReactNode;\n\n /** Props spread to img element */\n imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n /** Get image element ref */\n imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n /** Image figcaption, displayed below image */\n caption?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ImageProps> = {\n fit: 'cover',\n width: '100%',\n height: 'auto',\n radius: 0,\n};\n\nexport const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps, ref) => {\n const {\n className,\n alt,\n src,\n fit,\n width,\n height,\n radius,\n imageProps,\n withPlaceholder,\n placeholder,\n imageRef,\n classNames,\n styles,\n caption,\n unstyled,\n style,\n ...others\n } = useComponentDefaultProps('Image', defaultProps, props);\n const { classes, cx } = useStyles({ radius }, { classNames, styles, unstyled, name: 'Image' });\n const [loaded, setLoaded] = useState(!!src);\n const [error, setError] = useState(!src);\n const isPlaceholder = withPlaceholder && (!loaded || error);\n\n useDidUpdate(() => {\n setLoaded(false);\n setError(false);\n }, [src]);\n\n return (\n <Box\n className={cx(classes.root, className)}\n ref={ref}\n style={{ width, height, ...style }}\n {...others}\n >\n <figure className={classes.figure}>\n <div className={classes.imageWrapper}>\n <img\n className={classes.image}\n src={src}\n alt={alt}\n style={{ objectFit: fit, width, height }}\n ref={imageRef}\n onLoad={(event) => {\n setLoaded(true);\n typeof imageProps?.onLoad === 'function' && imageProps.onLoad(event);\n }}\n onError={(event) => {\n setError(true);\n typeof imageProps?.onError === 'function' && imageProps.onError(event);\n }}\n {...imageProps}\n />\n\n {isPlaceholder && (\n <div className={classes.placeholder} title={alt}>\n {placeholder || <ImageIcon style={{ width: 40, height: 40 }} />}\n </div>\n )}\n </div>\n\n {!!caption && (\n <Text component=\"figcaption\" size=\"sm\" align=\"center\" className={classes.caption}>\n {caption}\n </Text>\n )}\n </figure>\n </Box>\n );\n});\n\nImage.displayName = '@mantine/core/Image';\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.context.js","sources":["../../src/Popover/Popover.context.ts"],"sourcesContent":["import { ReferenceType } from '@floating-ui/react-dom-interactions';\nimport { createSafeContext } from '@mantine/utils';\nimport { MantineNumberSize, MantineShadow } from '@mantine/styles';\nimport { FloatingPosition } from '../Floating';\nimport { MantineTransition } from '../Transition';\nimport { POPOVER_ERRORS } from './Popover.errors';\nimport { PopoverWidth } from './Popover.types';\n\ninterface PopoverContext {\n x: number;\n y: number;\n opened: boolean;\n transition: MantineTransition;\n transitionDuration: number;\n exitTransitionDuration: number;\n reference: (node: ReferenceType) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean;\n arrowSize: number;\n arrowOffset: number;\n trapFocus: boolean;\n placement: FloatingPosition;\n withinPortal: boolean;\n closeOnEscape: boolean;\n zIndex: React.CSSProperties['zIndex'];\n radius?: MantineNumberSize;\n shadow?: MantineShadow;\n onClose?(): void;\n getDropdownId(): string;\n getTargetId(): string;\n controlled: boolean;\n onToggle(): void;\n withRoles: boolean;\n targetProps: Record<string, any>;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContext>(\n POPOVER_ERRORS.context\n);\n"],"names":[],"mappings":";;;AAEY,MAAC,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,cAAc,CAAC,OAAO;;;;"}
|
|
1
|
+
{"version":3,"file":"Popover.context.js","sources":["../../src/Popover/Popover.context.ts"],"sourcesContent":["import { ReferenceType } from '@floating-ui/react-dom-interactions';\nimport { createSafeContext } from '@mantine/utils';\nimport { MantineNumberSize, MantineShadow } from '@mantine/styles';\nimport { FloatingPosition } from '../Floating';\nimport { MantineTransition } from '../Transition';\nimport { POPOVER_ERRORS } from './Popover.errors';\nimport { PopoverWidth } from './Popover.types';\n\ninterface PopoverContext {\n x: number;\n y: number;\n arrowX: number;\n arrowY: number;\n arrowRef: React.RefObject<HTMLDivElement>;\n opened: boolean;\n transition: MantineTransition;\n transitionDuration: number;\n exitTransitionDuration: number;\n reference: (node: ReferenceType) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean;\n arrowSize: number;\n arrowOffset: number;\n trapFocus: boolean;\n placement: FloatingPosition;\n withinPortal: boolean;\n closeOnEscape: boolean;\n zIndex: React.CSSProperties['zIndex'];\n radius?: MantineNumberSize;\n shadow?: MantineShadow;\n onClose?(): void;\n getDropdownId(): string;\n getTargetId(): string;\n controlled: boolean;\n onToggle(): void;\n withRoles: boolean;\n targetProps: Record<string, any>;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContext>(\n POPOVER_ERRORS.context\n);\n"],"names":[],"mappings":";;;AAEY,MAAC,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,cAAc,CAAC,OAAO;;;;"}
|
package/esm/Popover/Popover.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import { useId, useClickOutside } from '@mantine/hooks';
|
|
3
3
|
import { getDefaultZIndex, useComponentDefaultProps, useMantineTheme, StylesApiProvider } from '@mantine/styles';
|
|
4
4
|
import { usePopover } from './use-popover.js';
|
|
@@ -41,6 +41,8 @@ const defaultProps = {
|
|
|
41
41
|
__staticSelector: "Popover"
|
|
42
42
|
};
|
|
43
43
|
function Popover(props) {
|
|
44
|
+
var _b, _c, _d, _e, _f, _g;
|
|
45
|
+
const arrowRef = useRef(null);
|
|
44
46
|
const _a = useComponentDefaultProps("Popover", defaultProps, props), {
|
|
45
47
|
children,
|
|
46
48
|
position,
|
|
@@ -115,6 +117,7 @@ function Popover(props) {
|
|
|
115
117
|
width,
|
|
116
118
|
position: getFloatingPosition(theme.dir, position),
|
|
117
119
|
offset: offset + (withArrow ? arrowSize / 2 : 0),
|
|
120
|
+
arrowRef,
|
|
118
121
|
onPositionChange,
|
|
119
122
|
positionDependencies,
|
|
120
123
|
opened,
|
|
@@ -139,7 +142,10 @@ function Popover(props) {
|
|
|
139
142
|
floating: popover.floating.floating,
|
|
140
143
|
x: popover.floating.x,
|
|
141
144
|
y: popover.floating.y,
|
|
145
|
+
arrowX: (_d = (_c = (_b = popover.floating) == null ? void 0 : _b.middlewareData) == null ? void 0 : _c.arrow) == null ? void 0 : _d.x,
|
|
146
|
+
arrowY: (_g = (_f = (_e = popover.floating) == null ? void 0 : _e.middlewareData) == null ? void 0 : _f.arrow) == null ? void 0 : _g.y,
|
|
142
147
|
opened: popover.opened,
|
|
148
|
+
arrowRef,
|
|
143
149
|
transition,
|
|
144
150
|
transitionDuration,
|
|
145
151
|
exitTransitionDuration,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n\nimport React from 'react';\nimport { useId, useClickOutside } from '@mantine/hooks';\nimport {\n useMantineTheme,\n ClassNames,\n Styles,\n StylesApiProvider,\n MantineNumberSize,\n MantineShadow,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { MantineTransition } from '../Transition';\nimport { getFloatingPosition, FloatingPosition } from '../Floating';\nimport { usePopover } from './use-popover';\nimport { PopoverContextProvider } from './Popover.context';\nimport {\n PopoverWidth,\n PopoverMiddlewares,\n PopoverStylesNames,\n PopoverStylesParams,\n} from './Popover.types';\nimport { PopoverTarget } from './PopoverTarget/PopoverTarget';\nimport { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';\n\nexport interface PopoverBaseProps {\n /** Dropdown position relative to target */\n position?: FloatingPosition;\n\n /** Space between target element and dropdown in px */\n offset?: number;\n\n /** Called when dropdown position changes */\n onPositionChange?(position: FloatingPosition): void;\n\n /** useEffect dependencies to force update dropdown position */\n positionDependencies?: any[];\n\n /** Called when dropdown closes */\n onClose?(): void;\n\n /** Called when dropdown opens */\n onOpen?(): void;\n\n /** One of premade transitions ot transition object */\n transition?: MantineTransition;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Dropdown width, or 'target' to make dropdown width the same as target element */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow */\n withArrow?: boolean;\n\n /** Arrow size in px */\n arrowSize?: number;\n\n /** Arrow offset in px */\n arrowOffset?: number;\n\n /** Determines whether dropdown should be rendered within Portal, defaults to false */\n withinPortal?: boolean;\n\n /** Dropdown z-index */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Radius from theme.radius or number to set border-radius in px */\n radius?: MantineNumberSize;\n\n /** Key of theme.shadow or any other valid css box-shadow value */\n shadow?: MantineShadow;\n}\n\nexport interface PopoverProps extends PopoverBaseProps {\n /** Popover.Target and Popover.Dropdown components */\n children: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controls dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?(opened: boolean): void;\n\n /** Determines whether dropdown should be closed on outside clicks, default to true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown, default to false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when Escape key is pressed, defaults to true */\n closeOnEscape?: boolean;\n\n /** id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target element should have accessible roles, defaults to true */\n withRoles?: boolean;\n\n unstyled?: boolean;\n classNames?: ClassNames<PopoverStylesNames>;\n styles?: Styles<PopoverStylesNames, PopoverStylesParams>;\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial<PopoverProps> = {\n position: 'bottom',\n offset: 8,\n positionDependencies: [],\n transition: 'fade',\n transitionDuration: 150,\n middlewares: { flip: true, shift: true },\n arrowSize: 7,\n arrowOffset: 5,\n closeOnClickOutside: true,\n withinPortal: false,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n};\n\nexport function Popover(props: PopoverProps) {\n const {\n children,\n position,\n offset,\n onPositionChange,\n positionDependencies,\n opened,\n transition,\n transitionDuration,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n exitTransitionDuration,\n __staticSelector,\n withRoles,\n ...others\n } = useComponentDefaultProps('Popover', defaultProps, props);\n\n const uid = useId(id);\n const theme = useMantineTheme();\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(theme.dir, position),\n offset: offset + (withArrow ? arrowSize / 2 : 0),\n onPositionChange,\n positionDependencies,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n });\n\n useClickOutside(() => closeOnClickOutside && popover.onClose(), clickOutsideEvents, [\n popover.floating.refs.floating.current,\n popover.floating.refs.reference.current as any,\n ]);\n\n return (\n <StylesApiProvider\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n staticSelector={__staticSelector}\n >\n <PopoverContextProvider\n value={{\n controlled: popover.controlled,\n reference: popover.floating.reference,\n floating: popover.floating.floating,\n x: popover.floating.x,\n y: popover.floating.y,\n opened: popover.opened,\n transition,\n transitionDuration,\n exitTransitionDuration,\n width,\n withArrow,\n arrowSize,\n arrowOffset,\n placement: popover.floating.placement,\n trapFocus,\n withinPortal,\n zIndex,\n radius,\n shadow,\n closeOnEscape,\n onClose: popover.onClose,\n onToggle: popover.onToggle,\n getTargetId: () => `${uid}-target`,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n }}\n >\n {children}\n </PopoverContextProvider>\n </StylesApiProvider>\n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.displayName = '@mantine/core/Popover';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n\nimport React, { useRef } from 'react';\nimport { useId, useClickOutside } from '@mantine/hooks';\nimport {\n useMantineTheme,\n ClassNames,\n Styles,\n StylesApiProvider,\n MantineNumberSize,\n MantineShadow,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { MantineTransition } from '../Transition';\nimport { getFloatingPosition, FloatingPosition } from '../Floating';\nimport { usePopover } from './use-popover';\nimport { PopoverContextProvider } from './Popover.context';\nimport {\n PopoverWidth,\n PopoverMiddlewares,\n PopoverStylesNames,\n PopoverStylesParams,\n} from './Popover.types';\nimport { PopoverTarget } from './PopoverTarget/PopoverTarget';\nimport { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';\n\nexport interface PopoverBaseProps {\n /** Dropdown position relative to target */\n position?: FloatingPosition;\n\n /** Space between target element and dropdown in px */\n offset?: number;\n\n /** Called when dropdown position changes */\n onPositionChange?(position: FloatingPosition): void;\n\n /** useEffect dependencies to force update dropdown position */\n positionDependencies?: any[];\n\n /** Called when dropdown closes */\n onClose?(): void;\n\n /** Called when dropdown opens */\n onOpen?(): void;\n\n /** One of premade transitions ot transition object */\n transition?: MantineTransition;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Dropdown width, or 'target' to make dropdown width the same as target element */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow */\n withArrow?: boolean;\n\n /** Arrow size in px */\n arrowSize?: number;\n\n /** Arrow offset in px */\n arrowOffset?: number;\n\n /** Determines whether dropdown should be rendered within Portal, defaults to false */\n withinPortal?: boolean;\n\n /** Dropdown z-index */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Radius from theme.radius or number to set border-radius in px */\n radius?: MantineNumberSize;\n\n /** Key of theme.shadow or any other valid css box-shadow value */\n shadow?: MantineShadow;\n}\n\nexport interface PopoverProps extends PopoverBaseProps {\n /** Popover.Target and Popover.Dropdown components */\n children: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controls dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?(opened: boolean): void;\n\n /** Determines whether dropdown should be closed on outside clicks, default to true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown, default to false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when Escape key is pressed, defaults to true */\n closeOnEscape?: boolean;\n\n /** id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target element should have accessible roles, defaults to true */\n withRoles?: boolean;\n\n unstyled?: boolean;\n classNames?: ClassNames<PopoverStylesNames>;\n styles?: Styles<PopoverStylesNames, PopoverStylesParams>;\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial<PopoverProps> = {\n position: 'bottom',\n offset: 8,\n positionDependencies: [],\n transition: 'fade',\n transitionDuration: 150,\n middlewares: { flip: true, shift: true },\n arrowSize: 7,\n arrowOffset: 5,\n closeOnClickOutside: true,\n withinPortal: false,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n};\n\nexport function Popover(props: PopoverProps) {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const {\n children,\n position,\n offset,\n onPositionChange,\n positionDependencies,\n opened,\n transition,\n transitionDuration,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n exitTransitionDuration,\n __staticSelector,\n withRoles,\n ...others\n } = useComponentDefaultProps('Popover', defaultProps, props);\n\n const uid = useId(id);\n const theme = useMantineTheme();\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(theme.dir, position),\n offset: offset + (withArrow ? arrowSize / 2 : 0),\n arrowRef,\n onPositionChange,\n positionDependencies,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n });\n\n useClickOutside(() => closeOnClickOutside && popover.onClose(), clickOutsideEvents, [\n popover.floating.refs.floating.current,\n popover.floating.refs.reference.current as any,\n ]);\n\n return (\n <StylesApiProvider\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n staticSelector={__staticSelector}\n >\n <PopoverContextProvider\n value={{\n controlled: popover.controlled,\n reference: popover.floating.reference,\n floating: popover.floating.floating,\n x: popover.floating.x,\n y: popover.floating.y,\n arrowX: popover.floating?.middlewareData?.arrow?.x,\n arrowY: popover.floating?.middlewareData?.arrow?.y,\n opened: popover.opened,\n arrowRef,\n transition,\n transitionDuration,\n exitTransitionDuration,\n width,\n withArrow,\n arrowSize,\n arrowOffset,\n placement: popover.floating.placement,\n trapFocus,\n withinPortal,\n zIndex,\n radius,\n shadow,\n closeOnEscape,\n onClose: popover.onClose,\n onToggle: popover.onToggle,\n getTargetId: () => `${uid}-target`,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n }}\n >\n {children}\n </PopoverContextProvider>\n </StylesApiProvider>\n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.displayName = '@mantine/core/Popover';\n"],"names":[],"mappings":"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"}
|