@mantine/core 9.6.1 → 9.6.3
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/components/Combobox/use-combobox/use-combobox.cjs +1 -4
- package/cjs/components/Combobox/use-combobox/use-combobox.cjs.map +1 -1
- package/cjs/components/ComboboxPopover/ComboboxPopover.cjs +1 -1
- package/cjs/components/ComboboxPopover/ComboboxPopover.cjs.map +1 -1
- package/cjs/components/Input/InputWrapper/InputWrapper.cjs +1 -1
- package/cjs/components/Input/InputWrapper/InputWrapper.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.module.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInput.cjs +32 -22
- package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
- package/cjs/components/NumberInput/get-caret-position-after-paste/get-caret-position-after-paste.cjs +19 -0
- package/cjs/components/NumberInput/get-caret-position-after-paste/get-caret-position-after-paste.cjs.map +1 -0
- package/cjs/components/NumberInput/normalize-pasted-value/normalize-pasted-value.cjs +35 -0
- package/cjs/components/NumberInput/normalize-pasted-value/normalize-pasted-value.cjs.map +1 -0
- package/cjs/components/PasswordInput/PasswordInput.cjs +10 -5
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/PinInput/PinInput.cjs.map +1 -1
- package/cjs/components/Portal/Portal.cjs +10 -1
- package/cjs/components/Portal/Portal.cjs.map +1 -1
- package/cjs/components/Rating/Rating.cjs +35 -12
- package/cjs/components/Rating/Rating.cjs.map +1 -1
- package/cjs/components/Select/Select.cjs +1 -1
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/Slider/Thumb/Thumb.cjs +7 -2
- package/cjs/components/Slider/Thumb/Thumb.cjs.map +1 -1
- package/cjs/components/Table/Table.cjs +23 -10
- package/cjs/components/Table/Table.cjs.map +1 -1
- package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/cjs/core/Box/Box.cjs +1 -1
- package/cjs/core/Box/Box.cjs.map +1 -1
- package/cjs/core/Box/style-props/style-props-data.cjs +2 -2
- package/cjs/core/Box/style-props/style-props-data.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/use-styles.cjs +32 -2
- package/cjs/core/styles-api/use-styles/use-styles.cjs.map +1 -1
- package/cjs/core/utils/shallow-equal/shallow-equal.cjs +19 -0
- package/cjs/core/utils/shallow-equal/shallow-equal.cjs.map +1 -0
- package/cjs/index.cjs +1 -1
- package/esm/components/Combobox/use-combobox/use-combobox.mjs +1 -4
- package/esm/components/Combobox/use-combobox/use-combobox.mjs.map +1 -1
- package/esm/components/ComboboxPopover/ComboboxPopover.mjs +1 -1
- package/esm/components/ComboboxPopover/ComboboxPopover.mjs.map +1 -1
- package/esm/components/Input/InputWrapper/InputWrapper.mjs +1 -1
- package/esm/components/Input/InputWrapper/InputWrapper.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.module.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInput.mjs +32 -22
- package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
- package/esm/components/NumberInput/get-caret-position-after-paste/get-caret-position-after-paste.mjs +19 -0
- package/esm/components/NumberInput/get-caret-position-after-paste/get-caret-position-after-paste.mjs.map +1 -0
- package/esm/components/NumberInput/normalize-pasted-value/normalize-pasted-value.mjs +35 -0
- package/esm/components/NumberInput/normalize-pasted-value/normalize-pasted-value.mjs.map +1 -0
- package/esm/components/PasswordInput/PasswordInput.mjs +12 -7
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/PinInput/PinInput.mjs.map +1 -1
- package/esm/components/Portal/Portal.mjs +10 -1
- package/esm/components/Portal/Portal.mjs.map +1 -1
- package/esm/components/Rating/Rating.mjs +35 -12
- package/esm/components/Rating/Rating.mjs.map +1 -1
- package/esm/components/Select/Select.mjs +1 -1
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/Slider/Thumb/Thumb.mjs +7 -2
- package/esm/components/Slider/Thumb/Thumb.mjs.map +1 -1
- package/esm/components/Table/Table.mjs +23 -10
- package/esm/components/Table/Table.mjs.map +1 -1
- package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/esm/core/Box/Box.mjs +2 -2
- package/esm/core/Box/Box.mjs.map +1 -1
- package/esm/core/Box/style-props/style-props-data.mjs +2 -2
- package/esm/core/Box/style-props/style-props-data.mjs.map +1 -1
- package/esm/core/styles-api/use-styles/use-styles.mjs +32 -2
- package/esm/core/styles-api/use-styles/use-styles.mjs.map +1 -1
- package/esm/core/utils/shallow-equal/shallow-equal.mjs +19 -0
- package/esm/core/utils/shallow-equal/shallow-equal.mjs.map +1 -0
- package/esm/index.mjs +2 -2
- package/lib/components/Combobox/Combobox.types.d.ts +1 -1
- package/lib/components/ComboboxPopover/ComboboxPopover.d.ts +1 -1
- package/lib/components/Marquee/Marquee.d.ts +1 -1
- package/lib/components/NumberInput/get-caret-position-after-paste/get-caret-position-after-paste.d.ts +1 -0
- package/lib/components/NumberInput/normalize-pasted-value/normalize-pasted-value.d.ts +7 -0
- package/lib/components/PinInput/PinInput.d.ts +1 -1
- package/lib/components/Slider/Thumb/Thumb.d.ts +1 -1
- package/lib/components/Tooltip/Tooltip.d.ts +1 -1
- package/lib/core/Box/style-props/index.d.ts +1 -1
- package/lib/core/Box/style-props/style-props-data.d.ts +1 -1
- package/lib/core/styles-api/use-styles/use-styles.d.ts +2 -1
- package/lib/core/utils/shallow-equal/shallow-equal.d.ts +1 -0
- package/package.json +2 -2
- package/styles/Marquee.css +1 -1
- package/styles/Marquee.layer.css +1 -1
- package/styles.css +1 -1
- package/styles.layer.css +1 -1
|
@@ -19,6 +19,8 @@ function roundValueTo(value, to) {
|
|
|
19
19
|
const precision = `${to}`.split(".")[1]?.length || 0;
|
|
20
20
|
return Number(rounded.toFixed(precision));
|
|
21
21
|
}
|
|
22
|
+
const TOUCH_MOVE_THRESHOLD = 10;
|
|
23
|
+
const EMULATED_CLICK_TIMEOUT = 500;
|
|
22
24
|
const defaultProps = {
|
|
23
25
|
size: "sm",
|
|
24
26
|
getSymbolLabel: (value) => `${value}`,
|
|
@@ -32,7 +34,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { s
|
|
|
32
34
|
} }));
|
|
33
35
|
const Rating = require_factory.factory((_props) => {
|
|
34
36
|
const props = require_use_props.useProps("Rating", defaultProps, _props);
|
|
35
|
-
const { classNames, className, style, styles, unstyled, vars, name, id, value, defaultValue, onChange, fractions, count, onMouseEnter, readOnly, allowClear, onMouseMove, onHover, onMouseLeave, onTouchStart, onTouchEnd, size, variant, getSymbolLabel, color, emptySymbol, fullSymbol, highlightSelectedOnly, attributes, ref, ...others } = props;
|
|
37
|
+
const { classNames, className, style, styles, unstyled, vars, name, id, value, defaultValue, onChange, fractions, count, onMouseEnter, readOnly, allowClear, onMouseMove, onHover, onMouseLeave, onTouchStart, onTouchMove, onTouchCancel, onTouchEnd, size, variant, getSymbolLabel, color, emptySymbol, fullSymbol, highlightSelectedOnly, attributes, ref, ...others } = props;
|
|
36
38
|
const getStyles = require_use_styles.useStyles({
|
|
37
39
|
name: "Rating",
|
|
38
40
|
classes: require_Rating_module.default,
|
|
@@ -50,6 +52,8 @@ const Rating = require_factory.factory((_props) => {
|
|
|
50
52
|
const _name = (0, _mantine_hooks.useId)(name);
|
|
51
53
|
const _id = (0, _mantine_hooks.useId)(id);
|
|
52
54
|
const rootRef = (0, react.useRef)(null);
|
|
55
|
+
const touchStartPosition = (0, react.useRef)(null);
|
|
56
|
+
const lastTouchTimestamp = (0, react.useRef)(0);
|
|
53
57
|
const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
|
|
54
58
|
value,
|
|
55
59
|
defaultValue,
|
|
@@ -70,6 +74,10 @@ const Rating = require_factory.factory((_props) => {
|
|
|
70
74
|
const hoverValue = (dir === "rtl" ? right - x : x - left) / symbolWidth;
|
|
71
75
|
return (0, _mantine_hooks.clamp)(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);
|
|
72
76
|
};
|
|
77
|
+
const applyValue = (newValue) => {
|
|
78
|
+
if (allowClear && newValue === stableValueRounded) setValue(0);
|
|
79
|
+
else setValue(newValue);
|
|
80
|
+
};
|
|
73
81
|
const handleMouseEnter = (event) => {
|
|
74
82
|
onMouseEnter?.(event);
|
|
75
83
|
!readOnly && setOutside(false);
|
|
@@ -90,15 +98,31 @@ const Rating = require_factory.factory((_props) => {
|
|
|
90
98
|
};
|
|
91
99
|
const handleTouchStart = (event) => {
|
|
92
100
|
const { touches } = event;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
101
|
+
touchStartPosition.current = touches.length === 1 ? {
|
|
102
|
+
x: touches[0].clientX,
|
|
103
|
+
y: touches[0].clientY
|
|
104
|
+
} : null;
|
|
98
105
|
onTouchStart?.(event);
|
|
99
106
|
};
|
|
107
|
+
const handleTouchMove = (event) => {
|
|
108
|
+
const startPosition = touchStartPosition.current;
|
|
109
|
+
const touch = event.touches[0];
|
|
110
|
+
if (startPosition && touch && Math.hypot(touch.clientX - startPosition.x, touch.clientY - startPosition.y) > TOUCH_MOVE_THRESHOLD) touchStartPosition.current = null;
|
|
111
|
+
onTouchMove?.(event);
|
|
112
|
+
};
|
|
113
|
+
const handleTouchCancel = (event) => {
|
|
114
|
+
touchStartPosition.current = null;
|
|
115
|
+
onTouchCancel?.(event);
|
|
116
|
+
};
|
|
100
117
|
const handleTouchEnd = (event) => {
|
|
101
|
-
|
|
118
|
+
const startPosition = touchStartPosition.current;
|
|
119
|
+
const touch = event.changedTouches[0];
|
|
120
|
+
touchStartPosition.current = null;
|
|
121
|
+
if (startPosition && touch && !readOnly) {
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
applyValue(getRatingFromCoordinates(touch.clientX));
|
|
124
|
+
lastTouchTimestamp.current = Date.now();
|
|
125
|
+
}
|
|
102
126
|
onTouchEnd?.(event);
|
|
103
127
|
};
|
|
104
128
|
const handleItemBlur = () => isOutside && setHovered(-1);
|
|
@@ -109,11 +133,8 @@ const Rating = require_factory.factory((_props) => {
|
|
|
109
133
|
}
|
|
110
134
|
};
|
|
111
135
|
const handleChange = (event) => {
|
|
112
|
-
if (
|
|
113
|
-
|
|
114
|
-
if (allowClear && newValue === stableValueRounded) setValue(0);
|
|
115
|
-
else setValue(newValue);
|
|
116
|
-
}
|
|
136
|
+
if (readOnly || Date.now() - lastTouchTimestamp.current < EMULATED_CLICK_TIMEOUT) return;
|
|
137
|
+
applyValue(typeof event === "number" ? event : parseFloat(event.target.value));
|
|
117
138
|
};
|
|
118
139
|
const items = Array(_count).fill(0).map((_, index) => {
|
|
119
140
|
const integerValue = index + 1;
|
|
@@ -152,6 +173,8 @@ const Rating = require_factory.factory((_props) => {
|
|
|
152
173
|
onMouseEnter: handleMouseEnter,
|
|
153
174
|
onMouseLeave: handleMouseLeave,
|
|
154
175
|
onTouchStart: handleTouchStart,
|
|
176
|
+
onTouchMove: handleTouchMove,
|
|
177
|
+
onTouchCancel: handleTouchCancel,
|
|
155
178
|
onTouchEnd: handleTouchEnd,
|
|
156
179
|
variant,
|
|
157
180
|
size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","useId","useRef","useUncontrolled","useState","clamp","RatingItem","RatingProvider","Box","useMergedRef","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n getThemeColor,\n MantineColor,\n MantineSize,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n const rounded = Math.round(value / to) * to;\n const precision = `${to}`.split('.')[1]?.length || 0;\n return Number(rounded.toFixed(precision));\n}\n\nexport type RatingStylesNames =\n | 'root'\n | 'starSymbol'\n | 'input'\n | 'label'\n | 'symbolBody'\n | 'symbolGroup';\n\nexport type RatingCssVariables = {\n root: '--rating-size' | '--rating-color';\n};\n\nexport interface RatingProps\n extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n /** Uncontrolled component default value */\n defaultValue?: number;\n\n /** Controlled component value */\n value?: number;\n\n /** Called when value changes */\n onChange?: (value: number) => void;\n\n /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */\n emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Icon displayed for selected rating items. Can be a function that receives the rating value. */\n fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Number of fractions each item can be divided into, default is 1 */\n fractions?: number;\n\n /** Controls component size @default 'sm' */\n size?: MantineSize | number | (string & {});\n\n /** Number of rating items (stars), default is 5 */\n count?: number;\n\n /** Called when rating item is hovered. Receives -1 when hover ends. */\n onHover?: (value: number) => void;\n\n /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */\n getSymbolLabel?: (index: number) => string;\n\n /** Name attribute for form submission. If not provided, a unique id will be generated. */\n name?: string;\n\n /** When true, rating cannot be changed by user interaction, default is false */\n readOnly?: boolean;\n\n /** When true, clicking the same rating value clears the rating to 0, default is false */\n allowClear?: boolean;\n\n /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */\n highlightSelectedOnly?: boolean;\n\n /** Key of theme.colors or any CSS color value, default is 'yellow' */\n color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n props: RatingProps;\n ref: HTMLDivElement;\n stylesNames: RatingStylesNames;\n vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n getSymbolLabel: (value) => `${value}`,\n count: 5,\n fractions: 1,\n color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n root: {\n '--rating-size': getSize(size, 'rating-size'),\n '--rating-color': getThemeColor(color, theme),\n },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n const props = useProps('Rating', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n name,\n id,\n value,\n defaultValue,\n onChange,\n fractions,\n count,\n onMouseEnter,\n readOnly,\n allowClear,\n onMouseMove,\n onHover,\n onMouseLeave,\n onTouchStart,\n onTouchEnd,\n size,\n variant,\n getSymbolLabel,\n color,\n emptySymbol,\n fullSymbol,\n highlightSelectedOnly,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RatingFactory>({\n name: 'Rating',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { dir } = useDirection();\n\n const _name = useId(name);\n const _id = useId(id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: 0,\n onChange,\n });\n\n const [hovered, setHovered] = useState(-1);\n const [isOutside, setOutside] = useState(true);\n\n const _fractions = Math.floor(fractions);\n const _count = Math.floor(count);\n\n const decimalUnit = 1 / _fractions;\n const stableValueRounded = roundValueTo(_value, decimalUnit);\n const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n const getRatingFromCoordinates = (x: number) => {\n if (!rootRef.current) {\n return 0;\n }\n\n const { left, right, width } = rootRef.current.getBoundingClientRect();\n const symbolWidth = width / _count;\n\n const hoverPosition = dir === 'rtl' ? right - x : x - left;\n const hoverValue = hoverPosition / symbolWidth;\n\n return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n };\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseEnter?.(event);\n !readOnly && setOutside(false);\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseMove?.(event);\n\n if (readOnly) {\n return;\n }\n\n const rounded = getRatingFromCoordinates(event.clientX);\n\n setHovered(rounded);\n rounded !== hovered && onHover?.(rounded);\n };\n\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseLeave?.(event);\n\n if (readOnly) {\n return;\n }\n\n setHovered(-1);\n setOutside(true);\n hovered !== -1 && onHover?.(-1);\n };\n\n const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n const { touches } = event;\n if (touches.length !== 1) {\n return;\n }\n\n if (!readOnly) {\n const touch = touches[0];\n setValue(getRatingFromCoordinates(touch.clientX));\n }\n\n onTouchStart?.(event);\n };\n\n const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n event.preventDefault();\n\n onTouchEnd?.(event);\n };\n\n const handleItemBlur = () => isOutside && setHovered(-1);\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n if (!readOnly) {\n if (typeof event === 'number') {\n setHovered(event);\n } else {\n setHovered(parseFloat(event.target.value));\n }\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n if (!readOnly) {\n const newValue = typeof event === 'number' ? event : parseFloat(event.target.value);\n\n // If allowClear is true and clicking the same value, reset to 0\n if (allowClear && newValue === stableValueRounded) {\n setValue(0);\n } else {\n setValue(newValue);\n }\n }\n };\n\n const items = Array(_count)\n .fill(0)\n .map((_, index) => {\n const integerValue = index + 1;\n const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n return (\n <div\n key={integerValue}\n data-active={isGroupActive || undefined}\n {...getStyles('symbolGroup')}\n >\n {fractionItems.map((__, fractionIndex) => {\n const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);\n const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n return (\n <RatingItem\n key={`${integerValue}-${symbolValue}`}\n getSymbolLabel={getSymbolLabel}\n emptyIcon={emptySymbol}\n fullIcon={fullSymbol}\n full={\n highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n }\n active={symbolValue === finalValue}\n checked={symbolValue === stableValueRounded}\n readOnly={readOnly}\n fractionValue={fractionValue}\n value={symbolValue}\n name={_name}\n onChange={handleChange}\n onBlur={handleItemBlur}\n onInputChange={handleInputChange}\n id={`${_id}-${index}-${fractionIndex}`}\n />\n );\n })}\n </div>\n );\n });\n\n return (\n <RatingProvider value={{ getStyles }}>\n <Box\n ref={useMergedRef(rootRef, ref)}\n {...getStyles('root')}\n onMouseMove={handleMouseMove}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n variant={variant}\n size={size}\n id={_id}\n {...others}\n >\n {items}\n </Box>\n </RatingProvider>\n );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n export type Props = RatingProps;\n export type StylesNames = RatingStylesNames;\n export type Factory = RatingFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,SAAS,aAAa,OAAe,IAAY;CAC/C,MAAM,UAAU,KAAK,MAAM,QAAQ,EAAE,IAAI;CACzC,MAAM,YAAY,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,UAAU;CACnD,OAAO,OAAO,QAAQ,QAAQ,SAAS,CAAC;AAC1C;AAqEA,MAAM,eAAe;CACnB,MAAM;CACN,iBAAiB,UAAU,GAAG;CAC9B,OAAO;CACP,WAAW;CACX,OAAO;AACT;AAEA,MAAM,eAAeA,6BAAAA,oBAAmC,OAAO,EAAE,MAAM,aAAa,EAClF,MAAM;CACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,aAAa;CAC5C,kBAAkBC,wBAAAA,cAAc,OAAO,KAAK;AAC9C,EACF,EAAE;AAEF,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,IACA,OACA,cACA,UACA,WACA,OACA,cACA,UACA,YACA,aACA,SACA,cACA,cACA,YACA,MACA,SACA,gBACA,OACA,aACA,YACA,uBACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,SAAA,GAAQC,eAAAA,MAAAA,CAAM,IAAI;CACxB,MAAM,OAAA,GAAMA,eAAAA,MAAAA,CAAM,EAAE;CACpB,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAuB,IAAI;CAE3C,MAAM,CAAC,QAAQ,aAAA,GAAYC,eAAAA,gBAAAA,CAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,EAAE;CACzC,MAAM,CAAC,WAAW,eAAA,GAAcA,MAAAA,SAAAA,CAAS,IAAI;CAE7C,MAAM,aAAa,KAAK,MAAM,SAAS;CACvC,MAAM,SAAS,KAAK,MAAM,KAAK;CAE/B,MAAM,cAAc,IAAI;CACxB,MAAM,qBAAqB,aAAa,QAAQ,WAAW;CAC3D,MAAM,aAAa,YAAY,KAAK,UAAU;CAE9C,MAAM,4BAA4B,MAAc;EAC9C,IAAI,CAAC,QAAQ,SACX,OAAO;EAGT,MAAM,EAAE,MAAM,OAAO,UAAU,QAAQ,QAAQ,sBAAsB;EACrE,MAAM,cAAc,QAAQ;EAG5B,MAAM,cADgB,QAAQ,QAAQ,QAAQ,IAAI,IAAI,QACnB;EAEnC,QAAA,GAAOC,eAAAA,MAAAA,CAAM,aAAa,aAAa,cAAc,GAAG,WAAW,GAAG,aAAa,MAAM;CAC3F;CAEA,MAAM,oBAAoB,UAA4C;EACpE,eAAe,KAAK;EACpB,CAAC,YAAY,WAAW,KAAK;CAC/B;CAEA,MAAM,mBAAmB,UAA4C;EACnE,cAAc,KAAK;EAEnB,IAAI,UACF;EAGF,MAAM,UAAU,yBAAyB,MAAM,OAAO;EAEtD,WAAW,OAAO;EAClB,YAAY,WAAW,UAAU,OAAO;CAC1C;CAEA,MAAM,oBAAoB,UAA4C;EACpE,eAAe,KAAK;EAEpB,IAAI,UACF;EAGF,WAAW,EAAE;EACb,WAAW,IAAI;EACf,YAAY,MAAM,UAAU,EAAE;CAChC;CAEA,MAAM,oBAAoB,UAA4C;EACpE,MAAM,EAAE,YAAY;EACpB,IAAI,QAAQ,WAAW,GACrB;EAGF,IAAI,CAAC,UAAU;GACb,MAAM,QAAQ,QAAQ;GACtB,SAAS,yBAAyB,MAAM,OAAO,CAAC;EAClD;EAEA,eAAe,KAAK;CACtB;CAEA,MAAM,kBAAkB,UAA4C;EAClE,MAAM,eAAe;EAErB,aAAa,KAAK;CACpB;CAEA,MAAM,uBAAuB,aAAa,WAAW,EAAE;CAEvD,MAAM,qBAAqB,UAAwD;EACjF,IAAI,CAAC,UAAU;GACb,IAAI,OAAO,UAAU,UACnB,WAAW,KAAK;QAEhB,WAAW,WAAW,MAAM,OAAO,KAAK,CAAC;EAE7C;CACF;CAEA,MAAM,gBAAgB,UAAwD;EAC5E,IAAI,CAAC,UAAU;GACb,MAAM,WAAW,OAAO,UAAU,WAAW,QAAQ,WAAW,MAAM,OAAO,KAAK;GAGlF,IAAI,cAAc,aAAa,oBAC7B,SAAS,CAAC;QAEV,SAAS,QAAQ;EAErB;CACF;CAEA,MAAM,QAAQ,MAAM,MAAM,CAAC,CACxB,KAAK,CAAC,CAAC,CACP,KAAK,GAAG,UAAU;EACjB,MAAM,eAAe,QAAQ;EAC7B,MAAM,gBAAgB,MAAM,KAAK,IAAI,MAAM,UAAU,IAAI,aAAa,IAAI,UAAU,CAAC;EAGrF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAEE,eALkB,CAAC,YAAY,KAAK,KAAK,OAAO,MAAM,gBAKxB,KAAA;GAC9B,GAAI,UAAU,aAAa;GAE1B,UAAA,cAAc,KAAK,IAAI,kBAAkB;IACxC,MAAM,gBAAgB,eAAe,UAAU,IAAI,gBAAgB,gBAAgB;IACnF,MAAM,cAAc,aAAa,eAAe,IAAI,eAAe,WAAW;IAE9E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KAEkB;KAChB,WAAW;KACX,UAAU;KACV,MACE,wBAAwB,gBAAgB,aAAa,eAAe;KAEtE,QAAQ,gBAAgB;KACxB,SAAS,gBAAgB;KACf;KACK;KACf,OAAO;KACP,MAAM;KACN,UAAU;KACV,QAAQ;KACR,eAAe;KACf,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG;IACxB,GAjBM,GAAG,aAAa,GAAG,aAiBzB;GAEL,CAAC;EACE,GA9BE,YA8BF;CAET,CAAC;CAEH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;EAAgB,OAAO,EAAE,UAAU;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,MAAA,GAAKC,eAAAA,aAAAA,CAAa,SAAS,GAAG;GAC9B,GAAI,UAAU,MAAM;GACpB,aAAa;GACb,cAAc;GACd,cAAc;GACd,cAAc;GACd,YAAY;GACH;GACH;GACN,IAAI;GACJ,GAAI;GAEH,UAAA;EACE,CAAA;CACS,CAAA;AAEpB,CAAC;AAED,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
|
|
1
|
+
{"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","useId","useRef","useUncontrolled","useState","clamp","RatingItem","RatingProvider","Box","useMergedRef","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n getThemeColor,\n MantineColor,\n MantineSize,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n const rounded = Math.round(value / to) * to;\n const precision = `${to}`.split('.')[1]?.length || 0;\n return Number(rounded.toFixed(precision));\n}\n\nconst TOUCH_MOVE_THRESHOLD = 10;\nconst EMULATED_CLICK_TIMEOUT = 500;\n\nexport type RatingStylesNames =\n | 'root'\n | 'starSymbol'\n | 'input'\n | 'label'\n | 'symbolBody'\n | 'symbolGroup';\n\nexport type RatingCssVariables = {\n root: '--rating-size' | '--rating-color';\n};\n\nexport interface RatingProps\n extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n /** Uncontrolled component default value */\n defaultValue?: number;\n\n /** Controlled component value */\n value?: number;\n\n /** Called when value changes */\n onChange?: (value: number) => void;\n\n /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */\n emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Icon displayed for selected rating items. Can be a function that receives the rating value. */\n fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Number of fractions each item can be divided into, default is 1 */\n fractions?: number;\n\n /** Controls component size @default 'sm' */\n size?: MantineSize | number | (string & {});\n\n /** Number of rating items (stars), default is 5 */\n count?: number;\n\n /** Called when rating item is hovered. Receives -1 when hover ends. */\n onHover?: (value: number) => void;\n\n /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */\n getSymbolLabel?: (index: number) => string;\n\n /** Name attribute for form submission. If not provided, a unique id will be generated. */\n name?: string;\n\n /** When true, rating cannot be changed by user interaction, default is false */\n readOnly?: boolean;\n\n /** When true, clicking the same rating value clears the rating to 0, default is false */\n allowClear?: boolean;\n\n /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */\n highlightSelectedOnly?: boolean;\n\n /** Key of theme.colors or any CSS color value, default is 'yellow' */\n color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n props: RatingProps;\n ref: HTMLDivElement;\n stylesNames: RatingStylesNames;\n vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n getSymbolLabel: (value) => `${value}`,\n count: 5,\n fractions: 1,\n color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n root: {\n '--rating-size': getSize(size, 'rating-size'),\n '--rating-color': getThemeColor(color, theme),\n },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n const props = useProps('Rating', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n name,\n id,\n value,\n defaultValue,\n onChange,\n fractions,\n count,\n onMouseEnter,\n readOnly,\n allowClear,\n onMouseMove,\n onHover,\n onMouseLeave,\n onTouchStart,\n onTouchMove,\n onTouchCancel,\n onTouchEnd,\n size,\n variant,\n getSymbolLabel,\n color,\n emptySymbol,\n fullSymbol,\n highlightSelectedOnly,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RatingFactory>({\n name: 'Rating',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { dir } = useDirection();\n\n const _name = useId(name);\n const _id = useId(id);\n const rootRef = useRef<HTMLDivElement>(null);\n const touchStartPosition = useRef<{ x: number; y: number } | null>(null);\n const lastTouchTimestamp = useRef(0);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: 0,\n onChange,\n });\n\n const [hovered, setHovered] = useState(-1);\n const [isOutside, setOutside] = useState(true);\n\n const _fractions = Math.floor(fractions);\n const _count = Math.floor(count);\n\n const decimalUnit = 1 / _fractions;\n const stableValueRounded = roundValueTo(_value, decimalUnit);\n const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n const getRatingFromCoordinates = (x: number) => {\n if (!rootRef.current) {\n return 0;\n }\n\n const { left, right, width } = rootRef.current.getBoundingClientRect();\n const symbolWidth = width / _count;\n\n const hoverPosition = dir === 'rtl' ? right - x : x - left;\n const hoverValue = hoverPosition / symbolWidth;\n\n return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n };\n\n const applyValue = (newValue: number) => {\n // If allowClear is true and selecting the same value, reset to 0\n if (allowClear && newValue === stableValueRounded) {\n setValue(0);\n } else {\n setValue(newValue);\n }\n };\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseEnter?.(event);\n !readOnly && setOutside(false);\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseMove?.(event);\n\n if (readOnly) {\n return;\n }\n\n const rounded = getRatingFromCoordinates(event.clientX);\n\n setHovered(rounded);\n rounded !== hovered && onHover?.(rounded);\n };\n\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseLeave?.(event);\n\n if (readOnly) {\n return;\n }\n\n setHovered(-1);\n setOutside(true);\n hovered !== -1 && onHover?.(-1);\n };\n\n const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n const { touches } = event;\n\n touchStartPosition.current =\n touches.length === 1 ? { x: touches[0].clientX, y: touches[0].clientY } : null;\n\n onTouchStart?.(event);\n };\n\n const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {\n const startPosition = touchStartPosition.current;\n const touch = event.touches[0];\n\n if (\n startPosition &&\n touch &&\n Math.hypot(touch.clientX - startPosition.x, touch.clientY - startPosition.y) >\n TOUCH_MOVE_THRESHOLD\n ) {\n touchStartPosition.current = null;\n }\n\n onTouchMove?.(event);\n };\n\n const handleTouchCancel = (event: React.TouchEvent<HTMLDivElement>) => {\n touchStartPosition.current = null;\n\n onTouchCancel?.(event);\n };\n\n const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n const startPosition = touchStartPosition.current;\n const touch = event.changedTouches[0];\n touchStartPosition.current = null;\n\n if (startPosition && touch && !readOnly) {\n event.preventDefault();\n applyValue(getRatingFromCoordinates(touch.clientX));\n lastTouchTimestamp.current = Date.now();\n }\n\n onTouchEnd?.(event);\n };\n\n const handleItemBlur = () => isOutside && setHovered(-1);\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n if (!readOnly) {\n if (typeof event === 'number') {\n setHovered(event);\n } else {\n setHovered(parseFloat(event.target.value));\n }\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n if (readOnly || Date.now() - lastTouchTimestamp.current < EMULATED_CLICK_TIMEOUT) {\n return;\n }\n\n applyValue(typeof event === 'number' ? event : parseFloat(event.target.value));\n };\n\n const items = Array(_count)\n .fill(0)\n .map((_, index) => {\n const integerValue = index + 1;\n const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n return (\n <div\n key={integerValue}\n data-active={isGroupActive || undefined}\n {...getStyles('symbolGroup')}\n >\n {fractionItems.map((__, fractionIndex) => {\n const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);\n const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n return (\n <RatingItem\n key={`${integerValue}-${symbolValue}`}\n getSymbolLabel={getSymbolLabel}\n emptyIcon={emptySymbol}\n fullIcon={fullSymbol}\n full={\n highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n }\n active={symbolValue === finalValue}\n checked={symbolValue === stableValueRounded}\n readOnly={readOnly}\n fractionValue={fractionValue}\n value={symbolValue}\n name={_name}\n onChange={handleChange}\n onBlur={handleItemBlur}\n onInputChange={handleInputChange}\n id={`${_id}-${index}-${fractionIndex}`}\n />\n );\n })}\n </div>\n );\n });\n\n return (\n <RatingProvider value={{ getStyles }}>\n <Box\n ref={useMergedRef(rootRef, ref)}\n {...getStyles('root')}\n onMouseMove={handleMouseMove}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchCancel={handleTouchCancel}\n onTouchEnd={handleTouchEnd}\n variant={variant}\n size={size}\n id={_id}\n {...others}\n >\n {items}\n </Box>\n </RatingProvider>\n );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n export type Props = RatingProps;\n export type StylesNames = RatingStylesNames;\n export type Factory = RatingFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,SAAS,aAAa,OAAe,IAAY;CAC/C,MAAM,UAAU,KAAK,MAAM,QAAQ,EAAE,IAAI;CACzC,MAAM,YAAY,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,UAAU;CACnD,OAAO,OAAO,QAAQ,QAAQ,SAAS,CAAC;AAC1C;AAEA,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAqE/B,MAAM,eAAe;CACnB,MAAM;CACN,iBAAiB,UAAU,GAAG;CAC9B,OAAO;CACP,WAAW;CACX,OAAO;AACT;AAEA,MAAM,eAAeA,6BAAAA,oBAAmC,OAAO,EAAE,MAAM,aAAa,EAClF,MAAM;CACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,aAAa;CAC5C,kBAAkBC,wBAAAA,cAAc,OAAO,KAAK;AAC9C,EACF,EAAE;AAEF,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,IACA,OACA,cACA,UACA,WACA,OACA,cACA,UACA,YACA,aACA,SACA,cACA,cACA,aACA,eACA,YACA,MACA,SACA,gBACA,OACA,aACA,YACA,uBACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,SAAA,GAAQC,eAAAA,MAAAA,CAAM,IAAI;CACxB,MAAM,OAAA,GAAMA,eAAAA,MAAAA,CAAM,EAAE;CACpB,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAuB,IAAI;CAC3C,MAAM,sBAAA,GAAqBA,MAAAA,OAAAA,CAAwC,IAAI;CACvE,MAAM,sBAAA,GAAqBA,MAAAA,OAAAA,CAAO,CAAC;CAEnC,MAAM,CAAC,QAAQ,aAAA,GAAYC,eAAAA,gBAAAA,CAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,EAAE;CACzC,MAAM,CAAC,WAAW,eAAA,GAAcA,MAAAA,SAAAA,CAAS,IAAI;CAE7C,MAAM,aAAa,KAAK,MAAM,SAAS;CACvC,MAAM,SAAS,KAAK,MAAM,KAAK;CAE/B,MAAM,cAAc,IAAI;CACxB,MAAM,qBAAqB,aAAa,QAAQ,WAAW;CAC3D,MAAM,aAAa,YAAY,KAAK,UAAU;CAE9C,MAAM,4BAA4B,MAAc;EAC9C,IAAI,CAAC,QAAQ,SACX,OAAO;EAGT,MAAM,EAAE,MAAM,OAAO,UAAU,QAAQ,QAAQ,sBAAsB;EACrE,MAAM,cAAc,QAAQ;EAG5B,MAAM,cADgB,QAAQ,QAAQ,QAAQ,IAAI,IAAI,QACnB;EAEnC,QAAA,GAAOC,eAAAA,MAAAA,CAAM,aAAa,aAAa,cAAc,GAAG,WAAW,GAAG,aAAa,MAAM;CAC3F;CAEA,MAAM,cAAc,aAAqB;EAEvC,IAAI,cAAc,aAAa,oBAC7B,SAAS,CAAC;OAEV,SAAS,QAAQ;CAErB;CAEA,MAAM,oBAAoB,UAA4C;EACpE,eAAe,KAAK;EACpB,CAAC,YAAY,WAAW,KAAK;CAC/B;CAEA,MAAM,mBAAmB,UAA4C;EACnE,cAAc,KAAK;EAEnB,IAAI,UACF;EAGF,MAAM,UAAU,yBAAyB,MAAM,OAAO;EAEtD,WAAW,OAAO;EAClB,YAAY,WAAW,UAAU,OAAO;CAC1C;CAEA,MAAM,oBAAoB,UAA4C;EACpE,eAAe,KAAK;EAEpB,IAAI,UACF;EAGF,WAAW,EAAE;EACb,WAAW,IAAI;EACf,YAAY,MAAM,UAAU,EAAE;CAChC;CAEA,MAAM,oBAAoB,UAA4C;EACpE,MAAM,EAAE,YAAY;EAEpB,mBAAmB,UACjB,QAAQ,WAAW,IAAI;GAAE,GAAG,QAAQ,EAAE,CAAC;GAAS,GAAG,QAAQ,EAAE,CAAC;EAAQ,IAAI;EAE5E,eAAe,KAAK;CACtB;CAEA,MAAM,mBAAmB,UAA4C;EACnE,MAAM,gBAAgB,mBAAmB;EACzC,MAAM,QAAQ,MAAM,QAAQ;EAE5B,IACE,iBACA,SACA,KAAK,MAAM,MAAM,UAAU,cAAc,GAAG,MAAM,UAAU,cAAc,CAAC,IACzE,sBAEF,mBAAmB,UAAU;EAG/B,cAAc,KAAK;CACrB;CAEA,MAAM,qBAAqB,UAA4C;EACrE,mBAAmB,UAAU;EAE7B,gBAAgB,KAAK;CACvB;CAEA,MAAM,kBAAkB,UAA4C;EAClE,MAAM,gBAAgB,mBAAmB;EACzC,MAAM,QAAQ,MAAM,eAAe;EACnC,mBAAmB,UAAU;EAE7B,IAAI,iBAAiB,SAAS,CAAC,UAAU;GACvC,MAAM,eAAe;GACrB,WAAW,yBAAyB,MAAM,OAAO,CAAC;GAClD,mBAAmB,UAAU,KAAK,IAAI;EACxC;EAEA,aAAa,KAAK;CACpB;CAEA,MAAM,uBAAuB,aAAa,WAAW,EAAE;CAEvD,MAAM,qBAAqB,UAAwD;EACjF,IAAI,CAAC,UAAU;GACb,IAAI,OAAO,UAAU,UACnB,WAAW,KAAK;QAEhB,WAAW,WAAW,MAAM,OAAO,KAAK,CAAC;EAE7C;CACF;CAEA,MAAM,gBAAgB,UAAwD;EAC5E,IAAI,YAAY,KAAK,IAAI,IAAI,mBAAmB,UAAU,wBACxD;EAGF,WAAW,OAAO,UAAU,WAAW,QAAQ,WAAW,MAAM,OAAO,KAAK,CAAC;CAC/E;CAEA,MAAM,QAAQ,MAAM,MAAM,CAAC,CACxB,KAAK,CAAC,CAAC,CACP,KAAK,GAAG,UAAU;EACjB,MAAM,eAAe,QAAQ;EAC7B,MAAM,gBAAgB,MAAM,KAAK,IAAI,MAAM,UAAU,IAAI,aAAa,IAAI,UAAU,CAAC;EAGrF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAEE,eALkB,CAAC,YAAY,KAAK,KAAK,OAAO,MAAM,gBAKxB,KAAA;GAC9B,GAAI,UAAU,aAAa;GAE1B,UAAA,cAAc,KAAK,IAAI,kBAAkB;IACxC,MAAM,gBAAgB,eAAe,UAAU,IAAI,gBAAgB,gBAAgB;IACnF,MAAM,cAAc,aAAa,eAAe,IAAI,eAAe,WAAW;IAE9E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KAEkB;KAChB,WAAW;KACX,UAAU;KACV,MACE,wBAAwB,gBAAgB,aAAa,eAAe;KAEtE,QAAQ,gBAAgB;KACxB,SAAS,gBAAgB;KACf;KACK;KACf,OAAO;KACP,MAAM;KACN,UAAU;KACV,QAAQ;KACR,eAAe;KACf,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG;IACxB,GAjBM,GAAG,aAAa,GAAG,aAiBzB;GAEL,CAAC;EACE,GA9BE,YA8BF;CAET,CAAC;CAEH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;EAAgB,OAAO,EAAE,UAAU;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,MAAA,GAAKC,eAAAA,aAAAA,CAAa,SAAS,GAAG;GAC9B,GAAI,UAAU,MAAM;GACpB,aAAa;GACb,cAAc;GACd,cAAc;GACd,cAAc;GACd,aAAa;GACb,eAAe;GACf,YAAY;GACH;GACH;GACN,IAAI;GACJ,GAAI;GAEH,UAAA;EACE,CAAA;CACS,CAAA;AAEpB,CAAC;AAED,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
|
|
@@ -156,7 +156,7 @@ const Select = require_factory.genericFactory((_props) => {
|
|
|
156
156
|
},
|
|
157
157
|
onBlur: (event) => {
|
|
158
158
|
if (autoSelectOnBlur) combobox.clickSelectedOption();
|
|
159
|
-
|
|
159
|
+
combobox.closeDropdown();
|
|
160
160
|
const optionLockup = _value != null && (`${_value}` in optionsLockup ? optionsLockup[`${_value}`] : retainedSelectedOptions.current[`${_value}`]);
|
|
161
161
|
handleSearchChange(optionLockup ? optionLockup.label || "" : "");
|
|
162
162
|
onBlur?.(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","useMemo","getParsedComboboxData","useRef","getOptionsLockup","useId","useUncontrolled","usePrevious","useCombobox","useResolvedStylesApi","Combobox","InputBase","isExternalInputChange","getOptionByLabel","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport { getOptionByLabel } from '../Combobox/get-options-lockup/get-option-by-label';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Determines whether the select should be searchable @default false */\n searchable?: boolean;\n\n /** Displays check icon near the selected option label @default true */\n withCheckIcon?: boolean;\n\n /** Aligns unchecked labels with the checked one @default false */\n withAlignedLabels?: boolean;\n\n /** Position of the check icon relative to the option label @default 'left' */\n checkIconPosition?: 'left' | 'right';\n\n /** Message displayed when no options match the search query or when there is no data */\n nothingFoundMessage?: React.ReactNode;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Allows deselecting the selected option by clicking it @default true */\n allowDeselect?: boolean;\n\n /** Displays clear button in the right section when component has value @default false */\n clearable?: boolean;\n\n /** Determines how the clear button and rightSection are rendered @default 'both' */\n clearSectionMode?: ClearSectionMode;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Controls color of the default chevron, by default depends on the color scheme */\n chevronColor?: MantineColor;\n\n /** Automatically selects the highlighted option when input loses focus @default false */\n autoSelectOnBlur?: boolean;\n\n /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value ||\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label || ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n floatingHeight={floatingHeight}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly || !searchable}\n value={search}\n onChange={(event) => {\n if (isExternalInputChange(event)) {\n if (!readOnly) {\n const externalOption = getOptionByLabel(optionsLockup, event.currentTarget.value);\n\n if (externalOption && `${externalOption.value}` !== `${_value}`) {\n setValue(externalOption.value as any, externalOption);\n !controlled && handleSearchChange(externalOption.label);\n }\n }\n\n return;\n }\n\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly || disabled}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n export type Props<Value extends Primitive = string> = SelectProps<Value>;\n export type StylesNames = SelectStylesNames;\n export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","useMemo","getParsedComboboxData","useRef","getOptionsLockup","useId","useUncontrolled","usePrevious","useCombobox","useResolvedStylesApi","Combobox","InputBase","isExternalInputChange","getOptionByLabel","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport { getOptionByLabel } from '../Combobox/get-options-lockup/get-option-by-label';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Determines whether the select should be searchable @default false */\n searchable?: boolean;\n\n /** Displays check icon near the selected option label @default true */\n withCheckIcon?: boolean;\n\n /** Aligns unchecked labels with the checked one @default false */\n withAlignedLabels?: boolean;\n\n /** Position of the check icon relative to the option label @default 'left' */\n checkIconPosition?: 'left' | 'right';\n\n /** Message displayed when no options match the search query or when there is no data */\n nothingFoundMessage?: React.ReactNode;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Allows deselecting the selected option by clicking it @default true */\n allowDeselect?: boolean;\n\n /** Displays clear button in the right section when component has value @default false */\n clearable?: boolean;\n\n /** Determines how the clear button and rightSection are rendered @default 'both' */\n clearSectionMode?: ClearSectionMode;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Controls color of the default chevron, by default depends on the color scheme */\n chevronColor?: MantineColor;\n\n /** Automatically selects the highlighted option when input loses focus @default false */\n autoSelectOnBlur?: boolean;\n\n /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value ||\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label || ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n floatingHeight={floatingHeight}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly || !searchable}\n value={search}\n onChange={(event) => {\n if (isExternalInputChange(event)) {\n if (!readOnly) {\n const externalOption = getOptionByLabel(optionsLockup, event.currentTarget.value);\n\n if (externalOption && `${externalOption.value}` !== `${_value}`) {\n setValue(externalOption.value as any, externalOption);\n !controlled && handleSearchChange(externalOption.label);\n }\n }\n\n return;\n }\n\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly || disabled}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n export type Props<Value extends Primitive = string> = SelectProps<Value>;\n export type StylesNames = SelectStylesNames;\n export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
|
|
@@ -5,12 +5,13 @@ const require_Slider_context = require("../Slider.context.cjs");
|
|
|
5
5
|
let react = require("react");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
7
|
//#region packages/@mantine/core/src/components/Slider/Thumb/Thumb.tsx
|
|
8
|
-
function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", ref }) {
|
|
8
|
+
function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", className, style, ref, ...others }) {
|
|
9
9
|
const { getStyles } = require_Slider_context.useSliderContext();
|
|
10
10
|
const [focused, setFocused] = (0, react.useState)(false);
|
|
11
11
|
const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover && isHovered;
|
|
12
12
|
const valueText = typeof thumbValueText === "function" ? thumbValueText(value) : thumbValueText;
|
|
13
13
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
|
|
14
|
+
...others,
|
|
14
15
|
tabIndex: disabled ? -1 : 0,
|
|
15
16
|
role: "slider",
|
|
16
17
|
"aria-label": thumbLabel,
|
|
@@ -22,7 +23,11 @@ function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyD
|
|
|
22
23
|
"aria-orientation": orientation,
|
|
23
24
|
ref,
|
|
24
25
|
__vars: { "--slider-thumb-offset": `${position}%` },
|
|
25
|
-
...getStyles("thumb", {
|
|
26
|
+
...getStyles("thumb", {
|
|
27
|
+
focusable: true,
|
|
28
|
+
className,
|
|
29
|
+
style
|
|
30
|
+
}),
|
|
26
31
|
mod: {
|
|
27
32
|
dragging,
|
|
28
33
|
disabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumb.cjs","names":["useSliderContext","useState","Box","Transition"],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n max: number;\n min: number;\n value: number;\n position: number;\n dragging: boolean;\n label: React.ReactNode;\n thumbValueText?: string | ((value: number) => string);\n onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onMouseDown?: (event: any) => void;\n labelTransitionProps: TransitionOverride | undefined;\n labelAlwaysOn: boolean | undefined;\n thumbLabel: string | undefined;\n showLabelOnHover: boolean | undefined;\n isHovered?: boolean;\n children?: React.ReactNode;\n disabled: boolean | undefined;\n orientation?: 'horizontal' | 'vertical';\n className?: string | undefined;\n style?: React.CSSProperties;\n}\n\nexport function Thumb({\n max,\n min,\n value,\n position,\n label,\n dragging,\n onMouseDown,\n onKeyDownCapture,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n thumbValueText,\n onFocus,\n onBlur,\n showLabelOnHover,\n isHovered,\n children = null,\n disabled,\n orientation = 'horizontal',\n ref,\n}: ThumbProps) {\n const { getStyles } = useSliderContext();\n\n const [focused, setFocused] = useState(false);\n\n const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n return (\n <Box<'div'>\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label={thumbLabel}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n aria-orientation={orientation}\n ref={ref}\n __vars={{ '--slider-thumb-offset': `${position}%` }}\n {...getStyles('thumb', { focusable: true })}\n mod={{ dragging, disabled }}\n onFocus={(event) => {\n setFocused(true);\n typeof onFocus === 'function' && onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n typeof onBlur === 'function' && onBlur(event);\n }}\n onTouchStart={onMouseDown}\n onMouseDown={onMouseDown}\n onKeyDownCapture={onKeyDownCapture}\n onClick={(event) => event.stopPropagation()}\n >\n {children}\n <Transition\n mounted={label != null && !!isVisible}\n transition=\"fade\"\n duration={0}\n {...labelTransitionProps}\n >\n {(transitionStyles) => (\n <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n )}\n </Transition>\n </Box>\n );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,
|
|
1
|
+
{"version":3,"file":"Thumb.cjs","names":["useSliderContext","useState","Box","Transition"],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n max: number;\n min: number;\n value: number;\n position: number;\n dragging: boolean;\n label: React.ReactNode;\n thumbValueText?: string | ((value: number) => string);\n onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onMouseDown?: (event: any) => void;\n labelTransitionProps: TransitionOverride | undefined;\n labelAlwaysOn: boolean | undefined;\n thumbLabel: string | undefined;\n showLabelOnHover: boolean | undefined;\n isHovered?: boolean;\n children?: React.ReactNode;\n disabled: boolean | undefined;\n orientation?: 'horizontal' | 'vertical';\n className?: string | undefined;\n style?: React.CSSProperties;\n}\n\nexport function Thumb({\n max,\n min,\n value,\n position,\n label,\n dragging,\n onMouseDown,\n onKeyDownCapture,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n thumbValueText,\n onFocus,\n onBlur,\n showLabelOnHover,\n isHovered,\n children = null,\n disabled,\n orientation = 'horizontal',\n className,\n style,\n ref,\n ...others\n}: ThumbProps) {\n const { getStyles } = useSliderContext();\n\n const [focused, setFocused] = useState(false);\n\n const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n return (\n <Box<'div'>\n {...others}\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label={thumbLabel}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n aria-orientation={orientation}\n ref={ref}\n __vars={{ '--slider-thumb-offset': `${position}%` }}\n {...getStyles('thumb', { focusable: true, className, style })}\n mod={{ dragging, disabled }}\n onFocus={(event) => {\n setFocused(true);\n typeof onFocus === 'function' && onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n typeof onBlur === 'function' && onBlur(event);\n }}\n onTouchStart={onMouseDown}\n onMouseDown={onMouseDown}\n onKeyDownCapture={onKeyDownCapture}\n onClick={(event) => event.stopPropagation()}\n >\n {children}\n <Transition\n mounted={label != null && !!isVisible}\n transition=\"fade\"\n duration={0}\n {...labelTransitionProps}\n >\n {(transitionStyles) => (\n <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n )}\n </Transition>\n </Box>\n );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,WACA,OACA,KACA,GAAG,UACU;CACb,MAAM,EAAE,cAAcA,uBAAAA,iBAAiB;CAEvC,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS;GAAE,WAAW;GAAM;GAAW;EAAM,CAAC;EAC5D,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;EA1B5C,UAAA,CA4BG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;GAEF,WAAA,qBACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;IAAI,UAAA;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}
|
|
@@ -12,6 +12,7 @@ const require_Table_module = require("./Table.module.cjs");
|
|
|
12
12
|
const require_Table_components = require("./Table.components.cjs");
|
|
13
13
|
const require_TableDataRenderer = require("./TableDataRenderer.cjs");
|
|
14
14
|
const require_TableScrollContainer = require("./TableScrollContainer.cjs");
|
|
15
|
+
let react = require("react");
|
|
15
16
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
16
17
|
//#region packages/@mantine/core/src/components/Table/Table.tsx
|
|
17
18
|
const defaultProps = {
|
|
@@ -43,18 +44,30 @@ const Table = require_factory.factory((_props) => {
|
|
|
43
44
|
attributes,
|
|
44
45
|
rootSelector: "table",
|
|
45
46
|
vars,
|
|
46
|
-
varsResolver
|
|
47
|
+
varsResolver,
|
|
48
|
+
stable: true
|
|
47
49
|
});
|
|
50
|
+
const stripedValue = striped === true ? "odd" : striped || void 0;
|
|
51
|
+
const resolvedCaptionSide = captionSide || "bottom";
|
|
52
|
+
const contextValue = (0, react.useMemo)(() => ({
|
|
53
|
+
getStyles,
|
|
54
|
+
stickyHeader,
|
|
55
|
+
striped: stripedValue,
|
|
56
|
+
highlightOnHover,
|
|
57
|
+
withColumnBorders,
|
|
58
|
+
withRowBorders,
|
|
59
|
+
captionSide: resolvedCaptionSide
|
|
60
|
+
}), [
|
|
61
|
+
getStyles,
|
|
62
|
+
stickyHeader,
|
|
63
|
+
stripedValue,
|
|
64
|
+
highlightOnHover,
|
|
65
|
+
withColumnBorders,
|
|
66
|
+
withRowBorders,
|
|
67
|
+
resolvedCaptionSide
|
|
68
|
+
]);
|
|
48
69
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_context.TableProvider, {
|
|
49
|
-
value:
|
|
50
|
-
getStyles,
|
|
51
|
-
stickyHeader,
|
|
52
|
-
striped: striped === true ? "odd" : striped || void 0,
|
|
53
|
-
highlightOnHover,
|
|
54
|
-
withColumnBorders,
|
|
55
|
-
withRowBorders,
|
|
56
|
-
captionSide: captionSide || "bottom"
|
|
57
|
-
},
|
|
70
|
+
value: contextValue,
|
|
58
71
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
|
|
59
72
|
component: "table",
|
|
60
73
|
mod: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.cjs","names":["createVarsResolver","getSpacing","getThemeColor","rem","factory","useProps","useStyles","TableProvider","Box","TableDataRenderer","classes","TableTd","TableTh","TableTr","TableThead","TableTbody","TableTfoot","TableCaption","TableScrollContainer"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n TableCaption,\n TableTbody,\n TableTd,\n TableTfoot,\n TableTh,\n TableThead,\n TableTr,\n type TableCaptionProps,\n type TableTbodyProps,\n type TableTdProps,\n type TableThProps,\n type TableTrProps,\n type TableTheadProps,\n type TableTfootProps,\n} from './Table.components';\nimport { TableProvider, type TableContextValue } from './Table.context';\nimport { TableDataRenderer } from './TableDataRenderer';\nimport { TableScrollContainer, type TableScrollContainerProps } from './TableScrollContainer';\nimport classes from './Table.module.css';\nexport type TableVariant = 'default' | 'vertical';\n\nexport type TableStylesNames =\n | 'table'\n | 'thead'\n | 'tbody'\n | 'tfoot'\n | 'tr'\n | 'th'\n | 'td'\n | 'caption';\n\nexport type TableCssVariables = {\n table:\n | '--table-layout'\n | '--table-border-color'\n | '--table-caption-side'\n | '--table-horizontal-spacing'\n | '--table-vertical-spacing'\n | '--table-striped-color'\n | '--table-highlight-on-hover-color'\n | '--table-sticky-header-offset';\n};\n\nexport interface TableData {\n head?: React.ReactNode[];\n body?: React.ReactNode[][];\n foot?: React.ReactNode[];\n caption?: string;\n}\n\nexport interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {\n /** Value of `table-layout` style @default auto */\n layout?: React.CSSProperties['tableLayout'];\n\n /** Side of the `Table.Caption` @default bottom */\n captionSide?: 'top' | 'bottom';\n\n /** Color of table borders, key of `theme.colors` or any valid CSS color */\n borderColor?: MantineColor;\n\n /** If set, the table has the outer border @default false */\n withTableBorder?: boolean;\n\n /** If set, the table has borders between columns @default false */\n withColumnBorders?: boolean;\n\n /** If set, the table has borders between rows @default true */\n withRowBorders?: boolean;\n\n /** Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n horizontalSpacing?: MantineSpacing;\n\n /** Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n verticalSpacing?: MantineSpacing;\n\n /** If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used @default false */\n striped?: boolean | 'odd' | 'even';\n\n /** Background color of striped rows, key of `theme.colors` or any valid CSS color */\n stripedColor?: MantineColor;\n\n /** If set, table rows background changes to `highlightOnHoverColor` when hovered @default false */\n highlightOnHover?: boolean;\n\n /** Background color of table rows when hovered, key of `theme.colors` or any valid CSS color */\n highlightOnHoverColor?: MantineColor;\n\n /** Data used to generate table, ignored if `children` prop is set */\n data?: TableData;\n\n /** If set, `Table.Thead` is sticky @default false */\n stickyHeader?: boolean;\n\n /** Offset from top at which `Table.Thead` should become sticky @default 0 */\n stickyHeaderOffset?: number | string;\n\n /** If set, `font-variant-numeric: tabular-nums` style is applied @default false */\n tabularNums?: boolean;\n}\n\nexport type TableFactory = Factory<{\n props: TableProps;\n ref: HTMLTableElement;\n stylesNames: TableStylesNames;\n vars: TableCssVariables;\n variant: TableVariant;\n staticComponents: {\n Thead: typeof TableThead;\n Tbody: typeof TableTbody;\n Tfoot: typeof TableTfoot;\n Td: typeof TableTd;\n Th: typeof TableTh;\n Tr: typeof TableTr;\n Caption: typeof TableCaption;\n ScrollContainer: typeof TableScrollContainer;\n DataRenderer: typeof TableDataRenderer;\n };\n}>;\n\nconst defaultProps = {\n withRowBorders: true,\n verticalSpacing: 7,\n} satisfies Partial<TableProps>;\n\nconst varsResolver = createVarsResolver<TableFactory>(\n (\n theme,\n {\n layout,\n captionSide,\n horizontalSpacing,\n verticalSpacing,\n borderColor,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n stickyHeaderOffset,\n stickyHeader,\n }\n ) => ({\n table: {\n '--table-layout': layout,\n '--table-caption-side': captionSide,\n '--table-horizontal-spacing': getSpacing(horizontalSpacing),\n '--table-vertical-spacing': getSpacing(verticalSpacing),\n '--table-border-color': borderColor ? getThemeColor(borderColor, theme) : undefined,\n '--table-striped-color':\n striped && stripedColor ? getThemeColor(stripedColor, theme) : undefined,\n '--table-highlight-on-hover-color':\n highlightOnHover && highlightOnHoverColor\n ? getThemeColor(highlightOnHoverColor, theme)\n : undefined,\n '--table-sticky-header-offset': stickyHeader ? rem(stickyHeaderOffset) : undefined,\n },\n })\n);\n\nexport const Table = factory<TableFactory>((_props) => {\n const props = useProps('Table', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n horizontalSpacing,\n verticalSpacing,\n captionSide,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n withTableBorder,\n borderColor,\n layout,\n data,\n children,\n stickyHeader,\n stickyHeaderOffset,\n mod,\n tabularNums,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TableFactory>({\n name: 'Table',\n props,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'table',\n vars,\n varsResolver,\n });\n\n return (\n <TableProvider\n value={{\n getStyles,\n stickyHeader,\n striped: striped === true ? 'odd' : striped || undefined,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n captionSide: captionSide || 'bottom',\n }}\n >\n <Box\n component=\"table\"\n mod={[{ withTableBorder, tabularNums }, mod]}\n {...getStyles('table')}\n {...others}\n >\n {children || (!!data && <TableDataRenderer data={data} />)}\n </Box>\n </TableProvider>\n );\n});\n\nTable.classes = classes;\nTable.varsResolver = varsResolver;\nTable.displayName = '@mantine/core/Table';\nTable.Td = TableTd;\nTable.Th = TableTh;\nTable.Tr = TableTr;\nTable.Thead = TableThead;\nTable.Tbody = TableTbody;\nTable.Tfoot = TableTfoot;\nTable.Caption = TableCaption;\nTable.ScrollContainer = TableScrollContainer;\nTable.DataRenderer = TableDataRenderer;\n\nexport namespace Table {\n export type Props = TableProps;\n export type StylesNames = TableStylesNames;\n export type CssVariables = TableCssVariables;\n export type Factory = TableFactory;\n export type Data = TableData;\n export type ContextValue = TableContextValue;\n\n export namespace Caption {\n export type Props = TableCaptionProps;\n }\n\n export namespace Tbody {\n export type Props = TableTbodyProps;\n }\n\n export namespace Td {\n export type Props = TableTdProps;\n }\n\n export namespace Th {\n export type Props = TableThProps;\n }\n\n export namespace Tr {\n export type Props = TableTrProps;\n }\n\n export namespace Thead {\n export type Props = TableTheadProps;\n }\n\n export namespace Tfoot {\n export type Props = TableTfootProps;\n }\n\n export namespace ScrollContainer {\n export type Props = TableScrollContainerProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwIA,MAAM,eAAe;CACnB,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,QACA,aACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,oBACA,oBAEE,EACJ,OAAO;CACL,kBAAkB;CAClB,wBAAwB;CACxB,8BAA8BC,iBAAAA,WAAW,iBAAiB;CAC1D,4BAA4BA,iBAAAA,WAAW,eAAe;CACtD,wBAAwB,cAAcC,wBAAAA,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,yBACE,WAAW,eAAeA,wBAAAA,cAAc,cAAc,KAAK,IAAI,KAAA;CACjE,oCACE,oBAAoB,wBAChBA,wBAAAA,cAAc,uBAAuB,KAAK,IAC1C,KAAA;CACN,gCAAgC,eAAeC,YAAAA,IAAI,kBAAkB,IAAI,KAAA;AAC3E,EACF,EACF;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,mBACA,gBACA,iBACA,aACA,QACA,MACA,UACA,cACA,oBACA,KACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA;EACA;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;EACE,OAAO;GACL;GACA;GACA,SAAS,YAAY,OAAO,QAAQ,WAAW,KAAA;GAC/C;GACA;GACA;GACA,aAAa,eAAe;EAC9B;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,WAAU;GACV,KAAK,CAAC;IAAE;IAAiB;GAAY,GAAG,GAAG;GAC3C,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH,UAAA,YAAa,CAAC,CAAC,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD,EAAyB,KAAO,CAAA;EACrD,CAAA;CACQ,CAAA;AAEnB,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,UAAUC,yBAAAA;AAChB,MAAM,kBAAkBC,6BAAAA;AACxB,MAAM,eAAeT,0BAAAA"}
|
|
1
|
+
{"version":3,"file":"Table.cjs","names":["createVarsResolver","getSpacing","getThemeColor","rem","factory","useProps","useStyles","useMemo","TableProvider","Box","TableDataRenderer","classes","TableTd","TableTh","TableTr","TableThead","TableTbody","TableTfoot","TableCaption","TableScrollContainer"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n TableCaption,\n TableTbody,\n TableTd,\n TableTfoot,\n TableTh,\n TableThead,\n TableTr,\n type TableCaptionProps,\n type TableTbodyProps,\n type TableTdProps,\n type TableThProps,\n type TableTrProps,\n type TableTheadProps,\n type TableTfootProps,\n} from './Table.components';\nimport { TableProvider, type TableContextValue } from './Table.context';\nimport { TableDataRenderer } from './TableDataRenderer';\nimport { TableScrollContainer, type TableScrollContainerProps } from './TableScrollContainer';\nimport classes from './Table.module.css';\nexport type TableVariant = 'default' | 'vertical';\n\nexport type TableStylesNames =\n | 'table'\n | 'thead'\n | 'tbody'\n | 'tfoot'\n | 'tr'\n | 'th'\n | 'td'\n | 'caption';\n\nexport type TableCssVariables = {\n table:\n | '--table-layout'\n | '--table-border-color'\n | '--table-caption-side'\n | '--table-horizontal-spacing'\n | '--table-vertical-spacing'\n | '--table-striped-color'\n | '--table-highlight-on-hover-color'\n | '--table-sticky-header-offset';\n};\n\nexport interface TableData {\n head?: React.ReactNode[];\n body?: React.ReactNode[][];\n foot?: React.ReactNode[];\n caption?: string;\n}\n\nexport interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {\n /** Value of `table-layout` style @default auto */\n layout?: React.CSSProperties['tableLayout'];\n\n /** Side of the `Table.Caption` @default bottom */\n captionSide?: 'top' | 'bottom';\n\n /** Color of table borders, key of `theme.colors` or any valid CSS color */\n borderColor?: MantineColor;\n\n /** If set, the table has the outer border @default false */\n withTableBorder?: boolean;\n\n /** If set, the table has borders between columns @default false */\n withColumnBorders?: boolean;\n\n /** If set, the table has borders between rows @default true */\n withRowBorders?: boolean;\n\n /** Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n horizontalSpacing?: MantineSpacing;\n\n /** Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs */\n verticalSpacing?: MantineSpacing;\n\n /** If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used @default false */\n striped?: boolean | 'odd' | 'even';\n\n /** Background color of striped rows, key of `theme.colors` or any valid CSS color */\n stripedColor?: MantineColor;\n\n /** If set, table rows background changes to `highlightOnHoverColor` when hovered @default false */\n highlightOnHover?: boolean;\n\n /** Background color of table rows when hovered, key of `theme.colors` or any valid CSS color */\n highlightOnHoverColor?: MantineColor;\n\n /** Data used to generate table, ignored if `children` prop is set */\n data?: TableData;\n\n /** If set, `Table.Thead` is sticky @default false */\n stickyHeader?: boolean;\n\n /** Offset from top at which `Table.Thead` should become sticky @default 0 */\n stickyHeaderOffset?: number | string;\n\n /** If set, `font-variant-numeric: tabular-nums` style is applied @default false */\n tabularNums?: boolean;\n}\n\nexport type TableFactory = Factory<{\n props: TableProps;\n ref: HTMLTableElement;\n stylesNames: TableStylesNames;\n vars: TableCssVariables;\n variant: TableVariant;\n staticComponents: {\n Thead: typeof TableThead;\n Tbody: typeof TableTbody;\n Tfoot: typeof TableTfoot;\n Td: typeof TableTd;\n Th: typeof TableTh;\n Tr: typeof TableTr;\n Caption: typeof TableCaption;\n ScrollContainer: typeof TableScrollContainer;\n DataRenderer: typeof TableDataRenderer;\n };\n}>;\n\nconst defaultProps = {\n withRowBorders: true,\n verticalSpacing: 7,\n} satisfies Partial<TableProps>;\n\nconst varsResolver = createVarsResolver<TableFactory>(\n (\n theme,\n {\n layout,\n captionSide,\n horizontalSpacing,\n verticalSpacing,\n borderColor,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n stickyHeaderOffset,\n stickyHeader,\n }\n ) => ({\n table: {\n '--table-layout': layout,\n '--table-caption-side': captionSide,\n '--table-horizontal-spacing': getSpacing(horizontalSpacing),\n '--table-vertical-spacing': getSpacing(verticalSpacing),\n '--table-border-color': borderColor ? getThemeColor(borderColor, theme) : undefined,\n '--table-striped-color':\n striped && stripedColor ? getThemeColor(stripedColor, theme) : undefined,\n '--table-highlight-on-hover-color':\n highlightOnHover && highlightOnHoverColor\n ? getThemeColor(highlightOnHoverColor, theme)\n : undefined,\n '--table-sticky-header-offset': stickyHeader ? rem(stickyHeaderOffset) : undefined,\n },\n })\n);\n\nexport const Table = factory<TableFactory>((_props) => {\n const props = useProps('Table', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n horizontalSpacing,\n verticalSpacing,\n captionSide,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n withTableBorder,\n borderColor,\n layout,\n data,\n children,\n stickyHeader,\n stickyHeaderOffset,\n mod,\n tabularNums,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TableFactory>({\n name: 'Table',\n props,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'table',\n vars,\n varsResolver,\n stable: true,\n });\n\n const stripedValue = striped === true ? 'odd' : striped || undefined;\n const resolvedCaptionSide = captionSide || 'bottom';\n\n const contextValue = useMemo<TableContextValue>(\n () => ({\n getStyles,\n stickyHeader,\n striped: stripedValue,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n captionSide: resolvedCaptionSide,\n }),\n [\n getStyles,\n stickyHeader,\n stripedValue,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n resolvedCaptionSide,\n ]\n );\n\n return (\n <TableProvider value={contextValue}>\n <Box\n component=\"table\"\n mod={[{ withTableBorder, tabularNums }, mod]}\n {...getStyles('table')}\n {...others}\n >\n {children || (!!data && <TableDataRenderer data={data} />)}\n </Box>\n </TableProvider>\n );\n});\n\nTable.classes = classes;\nTable.varsResolver = varsResolver;\nTable.displayName = '@mantine/core/Table';\nTable.Td = TableTd;\nTable.Th = TableTh;\nTable.Tr = TableTr;\nTable.Thead = TableThead;\nTable.Tbody = TableTbody;\nTable.Tfoot = TableTfoot;\nTable.Caption = TableCaption;\nTable.ScrollContainer = TableScrollContainer;\nTable.DataRenderer = TableDataRenderer;\n\nexport namespace Table {\n export type Props = TableProps;\n export type StylesNames = TableStylesNames;\n export type CssVariables = TableCssVariables;\n export type Factory = TableFactory;\n export type Data = TableData;\n export type ContextValue = TableContextValue;\n\n export namespace Caption {\n export type Props = TableCaptionProps;\n }\n\n export namespace Tbody {\n export type Props = TableTbodyProps;\n }\n\n export namespace Td {\n export type Props = TableTdProps;\n }\n\n export namespace Th {\n export type Props = TableThProps;\n }\n\n export namespace Tr {\n export type Props = TableTrProps;\n }\n\n export namespace Thead {\n export type Props = TableTheadProps;\n }\n\n export namespace Tfoot {\n export type Props = TableTfootProps;\n }\n\n export namespace ScrollContainer {\n export type Props = TableScrollContainerProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyIA,MAAM,eAAe;CACnB,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,QACA,aACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,oBACA,oBAEE,EACJ,OAAO;CACL,kBAAkB;CAClB,wBAAwB;CACxB,8BAA8BC,iBAAAA,WAAW,iBAAiB;CAC1D,4BAA4BA,iBAAAA,WAAW,eAAe;CACtD,wBAAwB,cAAcC,wBAAAA,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,yBACE,WAAW,eAAeA,wBAAAA,cAAc,cAAc,KAAK,IAAI,KAAA;CACjE,oCACE,oBAAoB,wBAChBA,wBAAAA,cAAc,uBAAuB,KAAK,IAC1C,KAAA;CACN,gCAAgC,eAAeC,YAAAA,IAAI,kBAAkB,IAAI,KAAA;AAC3E,EACF,EACF;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,mBACA,gBACA,iBACA,aACA,QACA,MACA,UACA,cACA,oBACA,KACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA;EACA;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACA,QAAQ;CACV,CAAC;CAED,MAAM,eAAe,YAAY,OAAO,QAAQ,WAAW,KAAA;CAC3D,MAAM,sBAAsB,eAAe;CAE3C,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EACL;EACA;EACA,SAAS;EACT;EACA;EACA;EACA,aAAa;CACf,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;EAAe,OAAO;EACpB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,WAAU;GACV,KAAK,CAAC;IAAE;IAAiB;GAAY,GAAG,GAAG;GAC3C,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH,UAAA,YAAa,CAAC,CAAC,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD,EAAyB,KAAO,CAAA;EACrD,CAAA;CACQ,CAAA;AAEnB,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,UAAUC,yBAAAA;AAChB,MAAM,kBAAkBC,6BAAAA;AACxB,MAAM,eAAeT,0BAAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useRef","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","useMergedRef","getRefProp","cloneElement","cx","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Open delay in ms */\n openDelay?: number;\n\n /** Close delay in ms @default 0 */\n closeDelay?: number;\n\n /** Controlled opened state */\n opened?: boolean;\n\n /** Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n\n /** Space between target element and tooltip in px @default 5 */\n offset?: number | FloatingAxesOffsets;\n\n /** If set, the tooltip has an arrow @default false */\n withArrow?: boolean;\n\n /** Arrow size in px @default 4 */\n arrowSize?: number;\n\n /** Arrow offset in px @default 5 */\n arrowOffset?: number;\n\n /** Arrow `border-radius` in px @default 0 */\n arrowRadius?: number;\n\n /** Arrow position relative to the tooltip @default side */\n arrowPosition?: ArrowPosition;\n\n /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /** If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps @default false */\n interactive?: boolean;\n\n /** Must be set if the tooltip target is an inline element */\n inline?: boolean;\n\n /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n keepMounted?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Selector, ref of an element or element itself that should be used for positioning */\n target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n props: TooltipProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n staticComponents: {\n Floating: typeof TooltipFloating;\n Group: typeof TooltipGroup;\n };\n}>;\n\nconst defaultProps = {\n position: 'top',\n refProp: 'ref',\n withinPortal: true,\n arrowSize: 4,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n offset: 5,\n transitionProps: { duration: 100, transition: 'fade' },\n events: { hover: true, focus: false, touch: false },\n zIndex: getDefaultZIndex('popover'),\n middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n theme,\n color: color || theme.primaryColor,\n autoContrast,\n variant: variant || 'filled',\n });\n\n return {\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? colors.background : undefined,\n '--tooltip-color': color ? colors.color : undefined,\n },\n };\n }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n const props = useProps('Tooltip', defaultProps, _props);\n const {\n children,\n position,\n refProp,\n label,\n openDelay,\n closeDelay,\n onPositionChange,\n opened,\n defaultOpened,\n withinPortal,\n radius,\n color,\n classNames,\n styles,\n unstyled,\n style,\n className,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n offset,\n transitionProps,\n multiline,\n events,\n interactive,\n zIndex,\n disabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n inline,\n variant,\n keepMounted,\n vars,\n portalProps,\n mod,\n floatingStrategy,\n middlewares,\n autoContrast,\n attributes,\n target,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const tooltip = useTooltip({\n position: getFloatingPosition(dir, position),\n closeDelay,\n openDelay,\n onPositionChange,\n opened,\n defaultOpened,\n events,\n interactive,\n arrowRef,\n arrowOffset,\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n inline,\n strategy: floatingStrategy,\n middlewares,\n });\n\n useEffect(() => {\n const targetNode =\n target instanceof HTMLElement\n ? target\n : typeof target === 'string'\n ? document.querySelector(target)\n : target?.current || null;\n\n if (targetNode) {\n tooltip.reference(targetNode);\n }\n }, [target, tooltip]);\n\n const getStyles = useStyles<TooltipFactory>({\n name: 'Tooltip',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const child = getSingleElementChild(children);\n if (!target && !child) {\n throw new Error(\n '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const tooltipStyles = getStyles('tooltip');\n const interactiveMod = interactive && !disabled && !!tooltip.opened;\n const mergeStyles =\n arrowPosition === 'merge' && withArrow\n ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n : undefined;\n\n if (target) {\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize!}\n arrowOffset={arrowOffset!}\n arrowRadius={arrowRadius!}\n arrowPosition={arrowPosition!}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n </>\n );\n }\n\n // fallback to children-based approach\n const childProps = child!.props as any;\n const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize}\n arrowOffset={arrowOffset}\n arrowRadius={arrowRadius}\n arrowPosition={arrowPosition}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n\n {cloneElement(\n child!,\n tooltip.getReferenceProps({\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseMove: props.onMouseMove,\n onPointerDown: props.onPointerDown,\n onPointerEnter: props.onPointerEnter,\n ...childProps,\n className: cx(className, childProps.className),\n [refProp]: targetRef,\n })\n )}\n </>\n );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n export type Props = TooltipProps;\n export type Factory = TooltipFactory;\n export type CssVariables = TooltipCssVariables;\n export type StylesNames = TooltipStylesNames;\n\n export namespace Group {\n export type Props = TooltipGroupProps;\n export type ContextValue = TooltipGroupContextValue;\n }\n\n export namespace Floating {\n export type Props = TooltipFloatingProps;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useRef","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","useMergedRef","getRefProp","cloneElement","cx","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Open delay in ms */\n openDelay?: number;\n\n /** Close delay in ms @default 0 */\n closeDelay?: number;\n\n /** Controlled opened state */\n opened?: boolean;\n\n /** Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n\n /** Space between target element and tooltip in px @default 5 */\n offset?: number | FloatingAxesOffsets;\n\n /** If set, the tooltip has an arrow @default false */\n withArrow?: boolean;\n\n /** Arrow size in px @default 4 */\n arrowSize?: number;\n\n /** Arrow offset in px @default 5 */\n arrowOffset?: number;\n\n /** Arrow `border-radius` in px @default 0 */\n arrowRadius?: number;\n\n /** Arrow position relative to the tooltip @default side */\n arrowPosition?: ArrowPosition;\n\n /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /** If set, the tooltip stays open while the pointer is over it @default false */\n interactive?: boolean;\n\n /** Must be set if the tooltip target is an inline element */\n inline?: boolean;\n\n /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n keepMounted?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Selector, ref of an element or element itself that should be used for positioning */\n target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n props: TooltipProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n staticComponents: {\n Floating: typeof TooltipFloating;\n Group: typeof TooltipGroup;\n };\n}>;\n\nconst defaultProps = {\n position: 'top',\n refProp: 'ref',\n withinPortal: true,\n arrowSize: 4,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n offset: 5,\n transitionProps: { duration: 100, transition: 'fade' },\n events: { hover: true, focus: false, touch: false },\n zIndex: getDefaultZIndex('popover'),\n middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n theme,\n color: color || theme.primaryColor,\n autoContrast,\n variant: variant || 'filled',\n });\n\n return {\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? colors.background : undefined,\n '--tooltip-color': color ? colors.color : undefined,\n },\n };\n }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n const props = useProps('Tooltip', defaultProps, _props);\n const {\n children,\n position,\n refProp,\n label,\n openDelay,\n closeDelay,\n onPositionChange,\n opened,\n defaultOpened,\n withinPortal,\n radius,\n color,\n classNames,\n styles,\n unstyled,\n style,\n className,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n offset,\n transitionProps,\n multiline,\n events,\n interactive,\n zIndex,\n disabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n inline,\n variant,\n keepMounted,\n vars,\n portalProps,\n mod,\n floatingStrategy,\n middlewares,\n autoContrast,\n attributes,\n target,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const tooltip = useTooltip({\n position: getFloatingPosition(dir, position),\n closeDelay,\n openDelay,\n onPositionChange,\n opened,\n defaultOpened,\n events,\n interactive,\n arrowRef,\n arrowOffset,\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n inline,\n strategy: floatingStrategy,\n middlewares,\n });\n\n useEffect(() => {\n const targetNode =\n target instanceof HTMLElement\n ? target\n : typeof target === 'string'\n ? document.querySelector(target)\n : target?.current || null;\n\n if (targetNode) {\n tooltip.reference(targetNode);\n }\n }, [target, tooltip]);\n\n const getStyles = useStyles<TooltipFactory>({\n name: 'Tooltip',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const child = getSingleElementChild(children);\n if (!target && !child) {\n throw new Error(\n '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const tooltipStyles = getStyles('tooltip');\n const interactiveMod = interactive && !disabled && !!tooltip.opened;\n const mergeStyles =\n arrowPosition === 'merge' && withArrow\n ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n : undefined;\n\n if (target) {\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize!}\n arrowOffset={arrowOffset!}\n arrowRadius={arrowRadius!}\n arrowPosition={arrowPosition!}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n </>\n );\n }\n\n // fallback to children-based approach\n const childProps = child!.props as any;\n const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' || undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize}\n arrowOffset={arrowOffset}\n arrowRadius={arrowRadius}\n arrowPosition={arrowPosition}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n\n {cloneElement(\n child!,\n tooltip.getReferenceProps({\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseMove: props.onMouseMove,\n onPointerDown: props.onPointerDown,\n onPointerEnter: props.onPointerEnter,\n ...childProps,\n className: cx(className, childProps.className),\n [refProp]: targetRef,\n })\n )}\n </>\n );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n export type Props = TooltipProps;\n export type Factory = TooltipFactory;\n export type CssVariables = TooltipCssVariables;\n export type StylesNames = TooltipStylesNames;\n\n export namespace Group {\n export type Props = TooltipGroupProps;\n export type ContextValue = TooltipGroupContextValue;\n }\n\n export namespace Floating {\n export type Props = TooltipFloatingProps;\n }\n}\n"],"mappings":"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"}
|
package/cjs/core/Box/Box.cjs
CHANGED
|
@@ -25,7 +25,7 @@ function _Box({ component, style, __vars, className, variant, mod, size, hiddenF
|
|
|
25
25
|
const parsedStyleProps = require_parse_style_props.parseStyleProps({
|
|
26
26
|
styleProps,
|
|
27
27
|
theme,
|
|
28
|
-
data: require_style_props_data.
|
|
28
|
+
data: require_style_props_data.STYLE_PROPS_DATA
|
|
29
29
|
});
|
|
30
30
|
const deduplicateInlineStyles = require_Mantine_context.useMantineDeduplicateInlineStyles();
|
|
31
31
|
const responsiveClassName = deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles ? require_hash_styles.hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media) : randomClassName;
|
package/cjs/core/Box/Box.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.cjs","names":["useMantineTheme","extractStyleProps","useMantineSxTransform","useRandomClassName","parseStyleProps","
|
|
1
|
+
{"version":3,"file":"Box.cjs","names":["useMantineTheme","extractStyleProps","useMantineSxTransform","useRandomClassName","parseStyleProps","STYLE_PROPS_DATA","useMantineDeduplicateInlineStyles","hashStyleProps","getBoxStyle","cx","isNumberLike","getBoxMod","InlineStyles","polymorphic"],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n MantineBreakpoint,\n useMantineDeduplicateInlineStyles,\n useMantineSxTransform,\n useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n extractStyleProps,\n MantineStyleProps,\n parseStyleProps,\n STYLE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n /** Class added to the root element, if applicable */\n className?: string | undefined;\n\n /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n style?: MantineStyleProp;\n\n /** CSS variables defined on root component element */\n __vars?: CssVarsProp;\n\n /** `size` property passed down the HTML element */\n __size?: string;\n\n /** Breakpoint above which the component is hidden with `display: none` */\n hiddenFrom?: MantineBreakpoint;\n\n /** Breakpoint below which the component is hidden with `display: none` */\n visibleFrom?: MantineBreakpoint;\n\n /** Determines whether component should be hidden in light color scheme with `display: none` */\n lightHidden?: boolean;\n\n /** Determines whether component should be hidden in dark color scheme with `display: none` */\n darkHidden?: boolean;\n\n /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n mod?: BoxMod;\n}\n\nexport type ElementProps<\n ElementType extends React.ElementType,\n PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n /** Variant passed from parent component, sets `data-variant` */\n variant?: string;\n\n /** Size passed from parent component, sets `data-size` if value is not number like */\n size?: string | number;\n}\n\nfunction _Box({\n component,\n style,\n __vars,\n className,\n variant,\n mod,\n size,\n hiddenFrom,\n visibleFrom,\n lightHidden,\n darkHidden,\n renderRoot,\n __size,\n ref,\n ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n const theme = useMantineTheme();\n const Element = component || 'div';\n const { styleProps, rest } = extractStyleProps(others);\n const useSxTransform = useMantineSxTransform();\n const transformedSx = useSxTransform?.()?.(styleProps.sx);\n const randomClassName = useRandomClassName();\n const parsedStyleProps = parseStyleProps({\n styleProps,\n theme,\n data: STYLE_PROPS_DATA,\n });\n\n const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n const responsiveClassName =\n deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n : randomClassName;\n\n const props = {\n ref,\n style: getBoxStyle({\n theme,\n style,\n vars: __vars,\n styleProps: parsedStyleProps.inlineStyles,\n }),\n className: cx(className, transformedSx, {\n [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n 'mantine-light-hidden': lightHidden,\n 'mantine-dark-hidden': darkHidden,\n [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n }),\n 'data-variant': variant,\n 'data-size': isNumberLike(size) ? undefined : size || undefined,\n size: __size,\n ...getBoxMod(mod),\n ...rest,\n };\n\n return (\n <>\n {parsedStyleProps.hasResponsiveStyles && (\n <InlineStyles\n selector={`.${responsiveClassName}`}\n styles={parsedStyleProps.styles}\n media={parsedStyleProps.media}\n deduplicate={deduplicateInlineStyles}\n />\n )}\n\n {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n </>\n );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,MAAM;CAErD,MAAM,gBADiBC,wBAAAA,sBACY,CAAC,GAAG,CAAC,GAAG,WAAW,EAAE;CACxD,MAAM,kBAAkBC,6BAAAA,mBAAmB;CAC3C,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC;EACA;EACA,MAAMC,yBAAAA;CACR,CAAC;CAED,MAAM,0BAA0BC,wBAAAA,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxCC,oBAAAA,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAOC,sBAAAA,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,YAAA,GAAWC,KAAAA,QAAAA,CAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAaC,uBAAAA,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAGC,oBAAAA,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAMC,qCAAAA,YAAsC,IAAI"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
//#region packages/@mantine/core/src/core/Box/style-props/style-props-data.ts
|
|
3
|
-
const
|
|
3
|
+
const STYLE_PROPS_DATA = {
|
|
4
4
|
m: {
|
|
5
5
|
type: "spacing",
|
|
6
6
|
property: "margin"
|
|
@@ -219,6 +219,6 @@ const STYlE_PROPS_DATA = {
|
|
|
219
219
|
}
|
|
220
220
|
};
|
|
221
221
|
//#endregion
|
|
222
|
-
exports.
|
|
222
|
+
exports.STYLE_PROPS_DATA = STYLE_PROPS_DATA;
|
|
223
223
|
|
|
224
224
|
//# sourceMappingURL=style-props-data.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style-props-data.cjs","names":[],"sources":["../../../../src/core/Box/style-props/style-props-data.ts"],"sourcesContent":["import type { StylePropType } from './resolvers';\nimport type { MantineStyleProps } from './style-props.types';\n\nexport interface SystemPropData {\n type: StylePropType;\n property: string | string[];\n}\n\nexport const
|
|
1
|
+
{"version":3,"file":"style-props-data.cjs","names":[],"sources":["../../../../src/core/Box/style-props/style-props-data.ts"],"sourcesContent":["import type { StylePropType } from './resolvers';\nimport type { MantineStyleProps } from './style-props.types';\n\nexport interface SystemPropData {\n type: StylePropType;\n property: string | string[];\n}\n\nexport const STYLE_PROPS_DATA: Record<keyof MantineStyleProps, SystemPropData> = {\n m: { type: 'spacing', property: 'margin' },\n mt: { type: 'spacing', property: 'marginTop' },\n mb: { type: 'spacing', property: 'marginBottom' },\n ml: { type: 'spacing', property: 'marginLeft' },\n mr: { type: 'spacing', property: 'marginRight' },\n ms: { type: 'spacing', property: 'marginInlineStart' },\n me: { type: 'spacing', property: 'marginInlineEnd' },\n mis: { type: 'spacing', property: 'marginInlineStart' },\n mie: { type: 'spacing', property: 'marginInlineEnd' },\n mx: { type: 'spacing', property: 'marginInline' },\n my: { type: 'spacing', property: 'marginBlock' },\n\n p: { type: 'spacing', property: 'padding' },\n pt: { type: 'spacing', property: 'paddingTop' },\n pb: { type: 'spacing', property: 'paddingBottom' },\n pl: { type: 'spacing', property: 'paddingLeft' },\n pr: { type: 'spacing', property: 'paddingRight' },\n ps: { type: 'spacing', property: 'paddingInlineStart' },\n pe: { type: 'spacing', property: 'paddingInlineEnd' },\n pis: { type: 'spacing', property: 'paddingInlineStart' },\n pie: { type: 'spacing', property: 'paddingInlineEnd' },\n px: { type: 'spacing', property: 'paddingInline' },\n py: { type: 'spacing', property: 'paddingBlock' },\n\n bd: { type: 'border', property: 'border' },\n bdrs: { type: 'radius', property: 'borderRadius' },\n bg: { type: 'color', property: 'background' },\n c: { type: 'textColor', property: 'color' },\n opacity: { type: 'identity', property: 'opacity' },\n\n ff: { type: 'fontFamily', property: 'fontFamily' },\n fz: { type: 'fontSize', property: 'fontSize' },\n fw: { type: 'identity', property: 'fontWeight' },\n lts: { type: 'size', property: 'letterSpacing' },\n ta: { type: 'identity', property: 'textAlign' },\n lh: { type: 'lineHeight', property: 'lineHeight' },\n fs: { type: 'identity', property: 'fontStyle' },\n tt: { type: 'identity', property: 'textTransform' },\n td: { type: 'identity', property: 'textDecoration' },\n\n w: { type: 'spacing', property: 'width' },\n miw: { type: 'spacing', property: 'minWidth' },\n maw: { type: 'spacing', property: 'maxWidth' },\n h: { type: 'spacing', property: 'height' },\n mih: { type: 'spacing', property: 'minHeight' },\n mah: { type: 'spacing', property: 'maxHeight' },\n\n bgsz: { type: 'size', property: 'backgroundSize' },\n bgp: { type: 'identity', property: 'backgroundPosition' },\n bgr: { type: 'identity', property: 'backgroundRepeat' },\n bga: { type: 'identity', property: 'backgroundAttachment' },\n\n pos: { type: 'identity', property: 'position' },\n top: { type: 'size', property: 'top' },\n left: { type: 'size', property: 'left' },\n bottom: { type: 'size', property: 'bottom' },\n right: { type: 'size', property: 'right' },\n inset: { type: 'size', property: 'inset' },\n\n display: { type: 'identity', property: 'display' },\n flex: { type: 'identity', property: 'flex' },\n};\n"],"mappings":";;AAQA,MAAa,mBAAoE;CAC/E,GAAG;EAAE,MAAM;EAAW,UAAU;CAAS;CACzC,IAAI;EAAE,MAAM;EAAW,UAAU;CAAY;CAC7C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAa;CAC9C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAC/C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAoB;CACrD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAkB;CACnD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAoB;CACtD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAkB;CACpD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAE/C,GAAG;EAAE,MAAM;EAAW,UAAU;CAAU;CAC1C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAa;CAC9C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAgB;CACjD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAC/C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAqB;CACtD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAmB;CACpD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAqB;CACvD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAmB;CACrD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAgB;CACjD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAEhD,IAAI;EAAE,MAAM;EAAU,UAAU;CAAS;CACzC,MAAM;EAAE,MAAM;EAAU,UAAU;CAAe;CACjD,IAAI;EAAE,MAAM;EAAS,UAAU;CAAa;CAC5C,GAAG;EAAE,MAAM;EAAa,UAAU;CAAQ;CAC1C,SAAS;EAAE,MAAM;EAAY,UAAU;CAAU;CAEjD,IAAI;EAAE,MAAM;EAAc,UAAU;CAAa;CACjD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAW;CAC7C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAa;CAC/C,KAAK;EAAE,MAAM;EAAQ,UAAU;CAAgB;CAC/C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAY;CAC9C,IAAI;EAAE,MAAM;EAAc,UAAU;CAAa;CACjD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAY;CAC9C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAgB;CAClD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAiB;CAEnD,GAAG;EAAE,MAAM;EAAW,UAAU;CAAQ;CACxC,KAAK;EAAE,MAAM;EAAW,UAAU;CAAW;CAC7C,KAAK;EAAE,MAAM;EAAW,UAAU;CAAW;CAC7C,GAAG;EAAE,MAAM;EAAW,UAAU;CAAS;CACzC,KAAK;EAAE,MAAM;EAAW,UAAU;CAAY;CAC9C,KAAK;EAAE,MAAM;EAAW,UAAU;CAAY;CAE9C,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAiB;CACjD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAqB;CACxD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAmB;CACtD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAuB;CAE1D,KAAK;EAAE,MAAM;EAAY,UAAU;CAAW;CAC9C,KAAK;EAAE,MAAM;EAAQ,UAAU;CAAM;CACrC,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAO;CACvC,QAAQ;EAAE,MAAM;EAAQ,UAAU;CAAS;CAC3C,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAQ;CACzC,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAQ;CAEzC,SAAS;EAAE,MAAM;EAAY,UAAU;CAAU;CACjD,MAAM;EAAE,MAAM;EAAY,UAAU;CAAO;AAC7C"}
|