@mantine/core 9.0.2 → 9.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Blockquote/Blockquote.cjs +5 -6
- package/cjs/components/Blockquote/Blockquote.cjs.map +1 -1
- package/cjs/components/Card/Card.cjs +1 -1
- package/cjs/components/Card/Card.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxClearButton/ComboboxClearButton.cjs +1 -1
- package/cjs/components/Combobox/ComboboxClearButton/ComboboxClearButton.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs +1 -0
- package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs +2 -1
- package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs +1 -0
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs +18 -12
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
- package/cjs/components/Flex/Flex.cjs +7 -2
- package/cjs/components/Flex/Flex.cjs.map +1 -1
- package/cjs/components/FloatingIndicator/FloatingIndicator.cjs +1 -2
- package/cjs/components/FloatingIndicator/FloatingIndicator.cjs.map +1 -1
- package/cjs/components/Highlight/highlighter/highlighter.cjs +3 -3
- package/cjs/components/Highlight/highlighter/highlighter.cjs.map +1 -1
- package/cjs/components/MaskInput/MaskInput.cjs +24 -0
- package/cjs/components/MaskInput/MaskInput.cjs.map +1 -0
- package/cjs/components/MaskInput/use-mask-input-props.cjs +29 -0
- package/cjs/components/MaskInput/use-mask-input-props.cjs.map +1 -0
- package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/Popover/Popover.context.cjs.map +1 -1
- package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs +1 -1
- package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map +1 -1
- package/cjs/components/Radio/Radio.module.cjs.map +1 -1
- package/cjs/components/Rating/Rating.cjs +1 -2
- package/cjs/components/Rating/Rating.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollArea.cjs +24 -10
- package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs +2 -0
- package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs.map +1 -1
- package/cjs/components/Slider/Marks/Marks.cjs +3 -2
- package/cjs/components/Slider/Marks/Marks.cjs.map +1 -1
- package/cjs/components/Slider/Marks/is-mark-filled.cjs +2 -1
- package/cjs/components/Slider/Marks/is-mark-filled.cjs.map +1 -1
- package/cjs/components/Slider/Slider/Slider.cjs +12 -3
- package/cjs/components/Slider/Slider/Slider.cjs.map +1 -1
- package/cjs/components/Slider/Track/Track.cjs +3 -2
- package/cjs/components/Slider/Track/Track.cjs.map +1 -1
- package/cjs/components/Tabs/Tabs.cjs +3 -1
- package/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/cjs/components/Tabs/Tabs.context.cjs.map +1 -1
- package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs +2 -1
- package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs.map +1 -1
- package/cjs/components/Tree/FlatTreeNode.cjs +103 -0
- package/cjs/components/Tree/FlatTreeNode.cjs.map +1 -0
- package/cjs/components/Tree/Tree.cjs +12 -2
- package/cjs/components/Tree/Tree.cjs.map +1 -1
- package/cjs/components/Tree/Tree.module.cjs.map +1 -1
- package/cjs/components/Tree/TreeNode.cjs +70 -27
- package/cjs/components/Tree/TreeNode.cjs.map +1 -1
- package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs +23 -0
- package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs.map +1 -0
- package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs +28 -0
- package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs.map +1 -0
- package/cjs/components/Tree/get-children-nodes-values/get-children-nodes-values.cjs +1 -0
- package/cjs/components/Tree/merge-async-children/merge-async-children.cjs +32 -0
- package/cjs/components/Tree/merge-async-children/merge-async-children.cjs.map +1 -0
- package/cjs/components/Tree/move-tree-node/move-tree-node.cjs +78 -0
- package/cjs/components/Tree/move-tree-node/move-tree-node.cjs.map +1 -0
- package/cjs/components/Tree/use-tree-node-drag-drop.cjs +127 -0
- package/cjs/components/Tree/use-tree-node-drag-drop.cjs.map +1 -0
- package/cjs/components/Tree/use-tree.cjs +176 -26
- package/cjs/components/Tree/use-tree.cjs.map +1 -1
- package/cjs/core/Box/Box.cjs +6 -2
- package/cjs/core/Box/Box.cjs.map +1 -1
- package/cjs/core/InlineStyles/InlineStyles.cjs +14 -2
- package/cjs/core/InlineStyles/InlineStyles.cjs.map +1 -1
- package/cjs/core/InlineStyles/hash-styles.cjs +15 -0
- package/cjs/core/InlineStyles/hash-styles.cjs.map +1 -0
- package/cjs/core/MantineProvider/Mantine.context.cjs +4 -0
- package/cjs/core/MantineProvider/Mantine.context.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineProvider.cjs +3 -2
- package/cjs/core/MantineProvider/MantineProvider.cjs.map +1 -1
- package/cjs/core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs +2 -2
- package/cjs/core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs.map +1 -1
- package/cjs/index.cjs +16 -0
- package/esm/components/Blockquote/Blockquote.mjs +5 -6
- package/esm/components/Blockquote/Blockquote.mjs.map +1 -1
- package/esm/components/Card/Card.mjs +1 -1
- package/esm/components/Card/Card.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxClearButton/ComboboxClearButton.mjs +1 -1
- package/esm/components/Combobox/ComboboxClearButton/ComboboxClearButton.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs +1 -0
- package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxSearch/ComboboxSearch.mjs +2 -1
- package/esm/components/Combobox/ComboboxSearch/ComboboxSearch.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs +1 -0
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs +18 -12
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
- package/esm/components/Flex/Flex.mjs +7 -2
- package/esm/components/Flex/Flex.mjs.map +1 -1
- package/esm/components/FloatingIndicator/FloatingIndicator.mjs +1 -2
- package/esm/components/FloatingIndicator/FloatingIndicator.mjs.map +1 -1
- package/esm/components/Highlight/highlighter/highlighter.mjs +3 -3
- package/esm/components/Highlight/highlighter/highlighter.mjs.map +1 -1
- package/esm/components/MaskInput/MaskInput.mjs +23 -0
- package/esm/components/MaskInput/MaskInput.mjs.map +1 -0
- package/esm/components/MaskInput/use-mask-input-props.mjs +28 -0
- package/esm/components/MaskInput/use-mask-input-props.mjs.map +1 -0
- package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/Popover/Popover.context.mjs.map +1 -1
- package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs +1 -1
- package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map +1 -1
- package/esm/components/Radio/Radio.module.mjs.map +1 -1
- package/esm/components/Rating/Rating.mjs +1 -2
- package/esm/components/Rating/Rating.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollArea.mjs +25 -11
- package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/SemiCircleProgress/SemiCircleProgress.mjs +2 -0
- package/esm/components/SemiCircleProgress/SemiCircleProgress.mjs.map +1 -1
- package/esm/components/Slider/Marks/Marks.mjs +3 -2
- package/esm/components/Slider/Marks/Marks.mjs.map +1 -1
- package/esm/components/Slider/Marks/is-mark-filled.mjs +2 -1
- package/esm/components/Slider/Marks/is-mark-filled.mjs.map +1 -1
- package/esm/components/Slider/Slider/Slider.mjs +12 -3
- package/esm/components/Slider/Slider/Slider.mjs.map +1 -1
- package/esm/components/Slider/Track/Track.mjs +3 -2
- package/esm/components/Slider/Track/Track.mjs.map +1 -1
- package/esm/components/Tabs/Tabs.context.mjs.map +1 -1
- package/esm/components/Tabs/Tabs.mjs +3 -1
- package/esm/components/Tabs/Tabs.mjs.map +1 -1
- package/esm/components/Tabs/TabsPanel/TabsPanel.mjs +2 -1
- package/esm/components/Tabs/TabsPanel/TabsPanel.mjs.map +1 -1
- package/esm/components/Tree/FlatTreeNode.mjs +102 -0
- package/esm/components/Tree/FlatTreeNode.mjs.map +1 -0
- package/esm/components/Tree/Tree.mjs +13 -3
- package/esm/components/Tree/Tree.mjs.map +1 -1
- package/esm/components/Tree/Tree.module.mjs.map +1 -1
- package/esm/components/Tree/TreeNode.mjs +70 -27
- package/esm/components/Tree/TreeNode.mjs.map +1 -1
- package/esm/components/Tree/filter-tree-data/filter-tree-data.mjs +22 -0
- package/esm/components/Tree/filter-tree-data/filter-tree-data.mjs.map +1 -0
- package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs +28 -0
- package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs.map +1 -0
- package/esm/components/Tree/get-children-nodes-values/get-children-nodes-values.mjs +1 -1
- package/esm/components/Tree/merge-async-children/merge-async-children.mjs +32 -0
- package/esm/components/Tree/merge-async-children/merge-async-children.mjs.map +1 -0
- package/esm/components/Tree/move-tree-node/move-tree-node.mjs +78 -0
- package/esm/components/Tree/move-tree-node/move-tree-node.mjs.map +1 -0
- package/esm/components/Tree/use-tree-node-drag-drop.mjs +126 -0
- package/esm/components/Tree/use-tree-node-drag-drop.mjs.map +1 -0
- package/esm/components/Tree/use-tree.mjs +177 -27
- package/esm/components/Tree/use-tree.mjs.map +1 -1
- package/esm/core/Box/Box.mjs +7 -3
- package/esm/core/Box/Box.mjs.map +1 -1
- package/esm/core/InlineStyles/InlineStyles.mjs +14 -2
- package/esm/core/InlineStyles/InlineStyles.mjs.map +1 -1
- package/esm/core/InlineStyles/hash-styles.mjs +15 -0
- package/esm/core/InlineStyles/hash-styles.mjs.map +1 -0
- package/esm/core/MantineProvider/Mantine.context.mjs +4 -1
- package/esm/core/MantineProvider/Mantine.context.mjs.map +1 -1
- package/esm/core/MantineProvider/MantineProvider.mjs +3 -2
- package/esm/core/MantineProvider/MantineProvider.mjs.map +1 -1
- package/esm/core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs +2 -2
- package/esm/core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs.map +1 -1
- package/esm/index.mjs +9 -2
- package/lib/components/Combobox/ComboboxClearButton/ComboboxClearButton.d.ts +1 -1
- package/lib/components/Combobox/use-combobox-target-props/use-combobox-target-props.d.ts +3 -1
- package/lib/components/MaskInput/MaskInput.d.ts +68 -0
- package/lib/components/MaskInput/index.d.ts +7 -0
- package/lib/components/MaskInput/use-mask-input-props.d.ts +428 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/Popover/Popover.context.d.ts +1 -1
- package/lib/components/Select/Select.d.ts +1 -1
- package/lib/components/Slider/Marks/Marks.d.ts +2 -1
- package/lib/components/Slider/Marks/is-mark-filled.d.ts +2 -1
- package/lib/components/Slider/Slider/Slider.d.ts +2 -0
- package/lib/components/Slider/Track/Track.d.ts +2 -1
- package/lib/components/Tabs/Tabs.context.d.ts +1 -0
- package/lib/components/Tabs/Tabs.d.ts +2 -0
- package/lib/components/Tree/FlatTreeNode.d.ts +31 -0
- package/lib/components/Tree/Tree.d.ts +31 -1
- package/lib/components/Tree/TreeNode.d.ts +9 -2
- package/lib/components/Tree/filter-tree-data/filter-tree-data.d.ts +4 -0
- package/lib/components/Tree/flatten-tree-data/flatten-tree-data.d.ts +15 -0
- package/lib/components/Tree/index.d.ts +10 -0
- package/lib/components/Tree/merge-async-children/merge-async-children.d.ts +2 -0
- package/lib/components/Tree/move-tree-node/move-tree-node.d.ts +11 -0
- package/lib/components/Tree/use-tree-node-drag-drop.d.ts +30 -0
- package/lib/components/Tree/use-tree.d.ts +19 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/core/InlineStyles/InlineStyles.d.ts +2 -1
- package/lib/core/InlineStyles/hash-styles.d.ts +2 -0
- package/lib/core/InlineStyles/index.d.ts +1 -0
- package/lib/core/MantineProvider/Mantine.context.d.ts +2 -0
- package/lib/core/MantineProvider/MantineProvider.d.ts +3 -1
- package/lib/core/MantineProvider/index.d.ts +1 -1
- package/lib/core/styles-api/use-resolved-styles-api/use-resolved-styles-api.d.ts +2 -2
- package/package.json +5 -5
- package/styles/Radio.css +3 -2
- package/styles/Radio.layer.css +3 -2
- package/styles/Tree.css +66 -0
- package/styles/Tree.layer.css +66 -0
- package/styles.css +69 -2
- package/styles.layer.css +69 -2
|
@@ -20,13 +20,12 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { c
|
|
|
20
20
|
theme,
|
|
21
21
|
colorScheme: "dark"
|
|
22
22
|
});
|
|
23
|
-
const lightParsed = require_parse_theme_color.parseThemeColor({
|
|
24
|
-
color: color || theme.primaryColor,
|
|
25
|
-
theme,
|
|
26
|
-
colorScheme: "light"
|
|
27
|
-
});
|
|
28
23
|
return { root: {
|
|
29
|
-
"--bq-bg-light": require_rgba.rgba(
|
|
24
|
+
"--bq-bg-light": require_rgba.rgba(require_parse_theme_color.parseThemeColor({
|
|
25
|
+
color: color || theme.primaryColor,
|
|
26
|
+
theme,
|
|
27
|
+
colorScheme: "light"
|
|
28
|
+
}).value, .07),
|
|
30
29
|
"--bq-bg-dark": require_rgba.rgba(darkParsed.value, .06),
|
|
31
30
|
"--bq-bd": require_get_theme_color.getThemeColor(color, theme),
|
|
32
31
|
"--bq-icon-size": require_rem.rem(iconSize),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Blockquote.cjs","names":["createVarsResolver","parseThemeColor","rgba","getThemeColor","rem","getRadius","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n parseThemeColor,\n rem,\n rgba,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\n};\n\nexport interface BlockquoteProps\n extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n /** Blockquote icon, displayed at the top left side */\n icon?: React.ReactNode;\n\n /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n iconSize?: number | string;\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Reference to a cited quote */\n cite?: React.ReactNode;\n}\n\nexport type BlockquoteFactory = Factory<{\n props: BlockquoteProps;\n ref: HTMLQuoteElement;\n stylesNames: BlockquoteStylesNames;\n vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>((theme, { color, iconSize, radius }) => {\n const darkParsed = parseThemeColor({\n color: color || theme.primaryColor,\n theme,\n colorScheme: 'dark',\n });\n\n const lightParsed = parseThemeColor({\n color: color || theme.primaryColor,\n theme,\n colorScheme: 'light',\n });\n\n return {\n root: {\n '--bq-bg-light': rgba(lightParsed.value, 0.07),\n '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n '--bq-bd': getThemeColor(color, theme),\n '--bq-icon-size': rem(iconSize),\n '--bq-radius': getRadius(radius),\n },\n };\n});\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n const props = useProps('Blockquote', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n icon,\n iconSize,\n cite,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<BlockquoteFactory>({\n name: 'Blockquote',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n {icon && <span {...getStyles('icon')}>{icon}</span>}\n {children}\n {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n </Box>\n );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n export type Props = BlockquoteProps;\n export type StylesNames = BlockquoteStylesNames;\n export type CssVariables = BlockquoteCssVariables;\n export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAaC,0BAAAA,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;
|
|
1
|
+
{"version":3,"file":"Blockquote.cjs","names":["createVarsResolver","parseThemeColor","rgba","getThemeColor","rem","getRadius","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n parseThemeColor,\n rem,\n rgba,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\n};\n\nexport interface BlockquoteProps\n extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n /** Blockquote icon, displayed at the top left side */\n icon?: React.ReactNode;\n\n /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n iconSize?: number | string;\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Reference to a cited quote */\n cite?: React.ReactNode;\n}\n\nexport type BlockquoteFactory = Factory<{\n props: BlockquoteProps;\n ref: HTMLQuoteElement;\n stylesNames: BlockquoteStylesNames;\n vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>((theme, { color, iconSize, radius }) => {\n const darkParsed = parseThemeColor({\n color: color || theme.primaryColor,\n theme,\n colorScheme: 'dark',\n });\n\n const lightParsed = parseThemeColor({\n color: color || theme.primaryColor,\n theme,\n colorScheme: 'light',\n });\n\n return {\n root: {\n '--bq-bg-light': rgba(lightParsed.value, 0.07),\n '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n '--bq-bd': getThemeColor(color, theme),\n '--bq-icon-size': rem(iconSize),\n '--bq-radius': getRadius(radius),\n },\n };\n});\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n const props = useProps('Blockquote', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n icon,\n iconSize,\n cite,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<BlockquoteFactory>({\n name: 'Blockquote',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n {icon && <span {...getStyles('icon')}>{icon}</span>}\n {children}\n {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n </Box>\n );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n export type Props = BlockquoteProps;\n export type StylesNames = BlockquoteStylesNames;\n export type CssVariables = BlockquoteCssVariables;\n export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAaC,0BAAAA,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAQF,QAAO,EACL,MAAM;EACJ,iBAAiBC,aAAAA,KARDD,0BAAAA,gBAAgB;GAClC,OAAO,SAAS,MAAM;GACtB;GACA,aAAa;GACd,CAAC,CAIoC,OAAO,IAAK;EAC9C,gBAAgBC,aAAAA,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAWC,wBAAAA,cAAc,OAAO,MAAM;EACtC,kBAAkBC,YAAAA,IAAI,SAAS;EAC/B,eAAeC,iBAAAA,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUC,0BAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
|
|
@@ -32,7 +32,7 @@ const Card = require_polymorphic_factory.polymorphicFactory((_props) => {
|
|
|
32
32
|
});
|
|
33
33
|
const _children = react.Children.toArray(children);
|
|
34
34
|
const content = _children.map((child, index) => {
|
|
35
|
-
if (typeof child === "object" && child && "type" in child && child.type === require_CardSection.CardSection) return (0, react.cloneElement)(child, {
|
|
35
|
+
if (typeof child === "object" && child && "type" in child && (child.type === require_CardSection.CardSection || child.type?.displayName === "@mantine/core/CardSection")) return (0, react.cloneElement)(child, {
|
|
36
36
|
"data-orientation": orientation,
|
|
37
37
|
"data-first-section": index === 0 || void 0,
|
|
38
38
|
"data-last-section": index === _children.length - 1 || void 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","Children","CardSection","CardProvider","Paper","classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n getSpacing,\n MantineRadius,\n MantineShadow,\n MantineSpacing,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n shadow?: MantineShadow;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Adds border to the card */\n withBorder?: boolean;\n\n /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n padding?: MantineSpacing;\n\n /** Card content */\n children?: React.ReactNode;\n\n /** Card orientation @default 'vertical' */\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n props: CardProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: CardStylesNames;\n vars: CardCssVariables;\n staticComponents: {\n Section: typeof CardSection;\n };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n root: {\n '--card-padding': getSpacing(padding),\n },\n}));\n\nconst defaultProps = {\n orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n const props = useProps('Card', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n padding,\n attributes,\n orientation,\n ...others\n } = props;\n\n const getStyles = useStyles<CardFactory>({\n name: 'Card',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _children = Children.toArray(children);\n const content = _children.map((child, index) => {\n if (typeof child === 'object'
|
|
1
|
+
{"version":3,"file":"Card.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","Children","CardSection","CardProvider","Paper","classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n getSpacing,\n MantineRadius,\n MantineShadow,\n MantineSpacing,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n shadow?: MantineShadow;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Adds border to the card */\n withBorder?: boolean;\n\n /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n padding?: MantineSpacing;\n\n /** Card content */\n children?: React.ReactNode;\n\n /** Card orientation @default 'vertical' */\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n props: CardProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: CardStylesNames;\n vars: CardCssVariables;\n staticComponents: {\n Section: typeof CardSection;\n };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n root: {\n '--card-padding': getSpacing(padding),\n },\n}));\n\nconst defaultProps = {\n orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n const props = useProps('Card', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n padding,\n attributes,\n orientation,\n ...others\n } = props;\n\n const getStyles = useStyles<CardFactory>({\n name: 'Card',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _children = Children.toArray(children);\n const content = _children.map((child, index) => {\n if (\n typeof child === 'object' &&\n child &&\n 'type' in child &&\n (child.type === CardSection ||\n (child.type as any)?.displayName === '@mantine/core/CardSection')\n ) {\n return cloneElement(child, {\n 'data-orientation': orientation,\n 'data-first-section': index === 0 || undefined,\n 'data-last-section': index === _children.length - 1 || undefined,\n } as any);\n }\n\n return child;\n });\n\n return (\n <CardProvider value={{ getStyles }}>\n <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n {content}\n </Paper>\n </CardProvider>\n );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n export type Props = CardProps;\n export type StylesNames = CardStylesNames;\n export type CssVariables = CardCssVariables;\n export type Factory = CardFactory;\n export type SectionProps = CardSectionProps;\n\n export namespace Section {\n export type Props = CardSectionProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAYC,MAAAA,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MACE,OAAO,UAAU,YACjB,SACA,UAAU,UACT,MAAM,SAASC,oBAAAA,eACb,MAAM,MAAc,gBAAgB,6BAEvC,SAAA,GAAA,MAAA,cAAoB,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAUH,oBAAAA"}
|
|
@@ -3,7 +3,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
|
|
|
3
3
|
const require_Input = require("../../Input/Input.cjs");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
//#region packages/@mantine/core/src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx
|
|
6
|
-
function ComboboxClearButton({
|
|
6
|
+
function ComboboxClearButton({ onMouseDown, onClick, onClear, ...others }) {
|
|
7
7
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input.ClearButton, {
|
|
8
8
|
tabIndex: -1,
|
|
9
9
|
"aria-hidden": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxClearButton.cjs","names":["Input"],"sources":["../../../../src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx"],"sourcesContent":["import { ElementProps } from '../../../core';\nimport { Input, InputClearButtonProps } from '../../Input';\n\nexport interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {\n onClear: () => void;\n}\n\nexport function ComboboxClearButton({\n
|
|
1
|
+
{"version":3,"file":"ComboboxClearButton.cjs","names":["Input"],"sources":["../../../../src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx"],"sourcesContent":["import { ElementProps } from '../../../core';\nimport { Input, InputClearButtonProps } from '../../Input';\n\nexport interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {\n onClear: () => void;\n}\n\nexport function ComboboxClearButton({\n onMouseDown,\n onClick,\n onClear,\n ...others\n}: ComboboxClearButtonProps) {\n return (\n <Input.ClearButton\n tabIndex={-1}\n aria-hidden\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n onMouseDown?.(event);\n }}\n onClick={(event) => {\n onClear();\n onClick?.(event);\n }}\n />\n );\n}\n\nComboboxClearButton.displayName = '@mantine/core/ComboboxClearButton';\n"],"mappings":";;;;;AAOA,SAAgB,oBAAoB,EAClC,aACA,SACA,SACA,GAAG,UACwB;AAC3B,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,MAAM,aAAP;EACE,UAAU;EACV,eAAA;EACA,GAAI;EACJ,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,iBAAc,MAAM;;EAEtB,UAAU,UAAU;AAClB,YAAS;AACT,aAAU,MAAM;;EAElB,CAAA;;AAIN,oBAAoB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop is used to access element ref */\n refProp?: string;\n\n /** If set, the component responds to the keyboard events @default true */\n withKeyboardNavigation?: boolean;\n\n /** If set, the target has `aria-` attributes @default true */\n withAriaAttributes?: boolean;\n\n /** If set, the target has `aria-expanded` attribute @default false */\n withExpandedAttribute?: boolean;\n\n /** Determines which events should be handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * */\n targetType?: 'button' | 'input';\n\n /** Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n props: ComboboxEventsTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.EventsTarget 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 ctx = useComboboxContext();\n const targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n autoComplete,\n });\n\n return cloneElement(child, {\n ...targetProps,\n ...others,\n [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;
|
|
1
|
+
{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop is used to access element ref */\n refProp?: string;\n\n /** If set, the component responds to the keyboard events @default true */\n withKeyboardNavigation?: boolean;\n\n /** If set, the target has `aria-` attributes @default true */\n withAriaAttributes?: boolean;\n\n /** If set, the target has `aria-expanded` attribute @default false */\n withExpandedAttribute?: boolean;\n\n /** Determines which events should be handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * */\n targetType?: 'button' | 'input';\n\n /** Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n props: ComboboxEventsTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.EventsTarget 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 ctx = useComboboxContext();\n const targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n onClick: (child.props as any).onClick,\n autoComplete,\n });\n\n return cloneElement(child, {\n ...targetProps,\n ...others,\n [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;AAWhC,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAXkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;GACD,CAAC;EAIA,GAAG;GACF,WAAA,GAAA,eAAA,cAAuB,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,MAAM,CAAC;EACrE,CAAC;EACF;AAEF,qBAAqB,cAAc"}
|
|
@@ -14,7 +14,7 @@ const defaultProps = {
|
|
|
14
14
|
withKeyboardNavigation: true
|
|
15
15
|
};
|
|
16
16
|
const ComboboxSearch = require_factory.factory((_props) => {
|
|
17
|
-
const { classNames, styles, unstyled, vars, withAriaAttributes, onKeyDown, withKeyboardNavigation, size, ref, ...others } = require_use_props.useProps("ComboboxSearch", defaultProps, _props);
|
|
17
|
+
const { classNames, styles, unstyled, vars, withAriaAttributes, onKeyDown, onClick, withKeyboardNavigation, size, ref, ...others } = require_use_props.useProps("ComboboxSearch", defaultProps, _props);
|
|
18
18
|
const ctx = require_Combobox_context.useComboboxContext();
|
|
19
19
|
const _styles = ctx.getStyles("search");
|
|
20
20
|
const targetProps = require_use_combobox_target_props.useComboboxTargetProps({
|
|
@@ -23,6 +23,7 @@ const ComboboxSearch = require_factory.factory((_props) => {
|
|
|
23
23
|
withKeyboardNavigation,
|
|
24
24
|
withExpandedAttribute: false,
|
|
25
25
|
onKeyDown,
|
|
26
|
+
onClick,
|
|
26
27
|
autoComplete: "off"
|
|
27
28
|
});
|
|
28
29
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxSearch.cjs","names":["factory","useProps","useComboboxContext","useComboboxTargetProps","Input","classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n /** if set, the search input has `aria-` attribute @default true */\n withAriaAttributes?: boolean;\n\n /** if set, the search input handles keyboard navigation @default true */\n withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n props: ComboboxSearchProps;\n ref: HTMLInputElement;\n stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n withAriaAttributes: true,\n withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n const props = useProps('ComboboxSearch', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n withAriaAttributes,\n onKeyDown,\n withKeyboardNavigation,\n size,\n ref,\n ...others\n } = props;\n\n const ctx = useComboboxContext();\n const _styles = ctx.getStyles('search');\n\n const targetProps = useComboboxTargetProps({\n targetType: 'input',\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute: false,\n onKeyDown,\n autoComplete: 'off',\n });\n\n return (\n <Input\n ref={useMergedRef(ref, ctx.store.searchRef)}\n classNames={[{ input: _styles.className }, classNames] as any}\n styles={[{ input: _styles.style }, styles] as any}\n size={size || ctx.size}\n {...targetProps}\n {...others}\n __staticSelector=\"Combobox\"\n />\n );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;CACzB;AAED,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,wBACA,MACA,KACA,GAAG,
|
|
1
|
+
{"version":3,"file":"ComboboxSearch.cjs","names":["factory","useProps","useComboboxContext","useComboboxTargetProps","Input","classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n /** if set, the search input has `aria-` attribute @default true */\n withAriaAttributes?: boolean;\n\n /** if set, the search input handles keyboard navigation @default true */\n withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n props: ComboboxSearchProps;\n ref: HTMLInputElement;\n stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n withAriaAttributes: true,\n withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n const props = useProps('ComboboxSearch', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n withAriaAttributes,\n onKeyDown,\n onClick,\n withKeyboardNavigation,\n size,\n ref,\n ...others\n } = props;\n\n const ctx = useComboboxContext();\n const _styles = ctx.getStyles('search');\n\n const targetProps = useComboboxTargetProps({\n targetType: 'input',\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute: false,\n onKeyDown,\n onClick,\n autoComplete: 'off',\n });\n\n return (\n <Input\n ref={useMergedRef(ref, ctx.store.searchRef)}\n classNames={[{ input: _styles.className }, classNames] as any}\n styles={[{ input: _styles.style }, styles] as any}\n size={size || ctx.size}\n {...targetProps}\n {...others}\n __staticSelector=\"Combobox\"\n />\n );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;CACzB;AAED,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,SACA,wBACA,MACA,KACA,GAAG,WAZSC,kBAAAA,SAAS,kBAAkB,cAAc,OAAO;CAe9D,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,UAAU,IAAI,UAAU,SAAS;CAEvC,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA;EACA,cAAc;EACf,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EACE,MAAA,GAAA,eAAA,cAAkB,KAAK,IAAI,MAAM,UAAU;EAC3C,YAAY,CAAC,EAAE,OAAO,QAAQ,WAAW,EAAE,WAAW;EACtD,QAAQ,CAAC,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO;EAC1C,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;EACjB,CAAA;EAEJ;AAEF,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","Popover"],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that is used to access element ref */\n refProp?: string;\n\n /** If set, the component responds to keyboard events @default true */\n withKeyboardNavigation?: boolean;\n\n /** If set, the target has `aria-` attributes @default true */\n withAriaAttributes?: boolean;\n\n /** If set, the target has `aria-expanded` attribute @default false */\n withExpandedAttribute?: boolean;\n\n /** Determines which events is handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * */\n targetType?: 'button' | 'input';\n\n /** Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n props: ComboboxTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.Target 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 ctx = useComboboxContext();\n\n const targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n autoComplete,\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n });\n\n return (\n <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n {clonedElement}\n </Popover.Target>\n );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;
|
|
1
|
+
{"version":3,"file":"ComboboxTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","Popover"],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that is used to access element ref */\n refProp?: string;\n\n /** If set, the component responds to keyboard events @default true */\n withKeyboardNavigation?: boolean;\n\n /** If set, the target has `aria-` attributes @default true */\n withAriaAttributes?: boolean;\n\n /** If set, the target has `aria-expanded` attribute @default false */\n withExpandedAttribute?: boolean;\n\n /** Determines which events is handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * */\n targetType?: 'button' | 'input';\n\n /** Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n props: ComboboxTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.Target 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 ctx = useComboboxContext();\n\n const targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n onClick: (child.props as any).onClick,\n autoComplete,\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n });\n\n return (\n <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n {clonedElement}\n </Popover.Target>\n );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;CAYhC,MAAM,iBAAA,GAAA,MAAA,cAA6B,OAAO;EACxC,GAXkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,MAAA,GAAA,eAAA,cAAkB,KAAK,IAAI,MAAM,UAAU;YAC1E;EACc,CAAA;EAEnB;AAEF,eAAe,cAAc"}
|
|
@@ -3,7 +3,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
|
|
|
3
3
|
const require_Combobox_context = require("../Combobox.context.cjs");
|
|
4
4
|
let react = require("react");
|
|
5
5
|
//#region packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts
|
|
6
|
-
function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
|
|
6
|
+
function useComboboxTargetProps({ onKeyDown, onClick, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
|
|
7
7
|
const ctx = require_Combobox_context.useComboboxContext();
|
|
8
8
|
const [selectedOptionId, setSelectedOptionId] = (0, react.useState)(null);
|
|
9
9
|
const handleKeyDown = (event) => {
|
|
@@ -47,18 +47,24 @@ function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAtt
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
|
+
const ariaAttributes = withAriaAttributes ? {
|
|
51
|
+
...withExpandedAttribute ? { role: "combobox" } : {},
|
|
52
|
+
"aria-haspopup": "listbox",
|
|
53
|
+
"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
|
|
54
|
+
"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
|
|
55
|
+
"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
|
|
56
|
+
autoComplete,
|
|
57
|
+
"data-expanded": ctx.store.dropdownOpened || void 0,
|
|
58
|
+
"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
|
|
59
|
+
} : {};
|
|
60
|
+
const handleClick = (event) => {
|
|
61
|
+
if (targetType === "button") event.currentTarget.focus();
|
|
62
|
+
onClick?.(event);
|
|
63
|
+
};
|
|
50
64
|
return {
|
|
51
|
-
...
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
|
|
55
|
-
"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
|
|
56
|
-
"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
|
|
57
|
-
autoComplete,
|
|
58
|
-
"data-expanded": ctx.store.dropdownOpened || void 0,
|
|
59
|
-
"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
|
|
60
|
-
} : {},
|
|
61
|
-
onKeyDown: handleKeyDown
|
|
65
|
+
...ariaAttributes,
|
|
66
|
+
onKeyDown: handleKeyDown,
|
|
67
|
+
onClick: handleClick
|
|
62
68
|
};
|
|
63
69
|
}
|
|
64
70
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n targetType: 'input' | 'button' | undefined;\n withAriaAttributes: boolean | undefined;\n withKeyboardNavigation: boolean | undefined;\n withExpandedAttribute: boolean | undefined;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n onKeyDown,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n}: UseComboboxTargetPropsInput) {\n const ctx = useComboboxContext();\n const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (ctx.readOnly) {\n return;\n }\n\n if (withKeyboardNavigation) {\n // Ignore during composition in IME\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.nativeEvent.code === 'ArrowDown') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectNextOption());\n }\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectPreviousOption());\n }\n }\n\n if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n // This is a workaround for handling differences in behavior of isComposing property in Safari\n // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n // oxlint-disable-next-line typescript/no-deprecated\n if (event.nativeEvent.keyCode === 229) {\n return;\n }\n\n const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n event.preventDefault();\n ctx.store.clickSelectedOption();\n } else if (targetType === 'button') {\n event.preventDefault();\n ctx.store.openDropdown('keyboard');\n }\n }\n\n if (event.key === 'Escape') {\n ctx.store.closeDropdown('keyboard');\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (targetType === 'button') {\n event.preventDefault();\n ctx.store.toggleDropdown('keyboard');\n }\n }\n }\n };\n\n const ariaAttributes = withAriaAttributes\n ? {\n ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n 'aria-haspopup': 'listbox' as const,\n 'aria-expanded': withExpandedAttribute\n ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n : undefined,\n 'aria-controls':\n ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n 'aria-activedescendant': ctx.store.dropdownOpened\n ? selectedOptionId || undefined\n : undefined,\n autoComplete,\n 'data-expanded': ctx.store.dropdownOpened || undefined,\n 'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n }\n : {};\n\n return {\n ...ariaAttributes,\n onKeyDown: handleKeyDown,\n };\n}\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n targetType: 'input' | 'button' | undefined;\n withAriaAttributes: boolean | undefined;\n withKeyboardNavigation: boolean | undefined;\n withExpandedAttribute: boolean | undefined;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n onClick: React.MouseEventHandler<HTMLInputElement> | undefined;\n autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n onKeyDown,\n onClick,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n}: UseComboboxTargetPropsInput) {\n const ctx = useComboboxContext();\n const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (ctx.readOnly) {\n return;\n }\n\n if (withKeyboardNavigation) {\n // Ignore during composition in IME\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.nativeEvent.code === 'ArrowDown') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectNextOption());\n }\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectPreviousOption());\n }\n }\n\n if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n // This is a workaround for handling differences in behavior of isComposing property in Safari\n // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n // oxlint-disable-next-line typescript/no-deprecated\n if (event.nativeEvent.keyCode === 229) {\n return;\n }\n\n const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n event.preventDefault();\n ctx.store.clickSelectedOption();\n } else if (targetType === 'button') {\n event.preventDefault();\n ctx.store.openDropdown('keyboard');\n }\n }\n\n if (event.key === 'Escape') {\n ctx.store.closeDropdown('keyboard');\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (targetType === 'button') {\n event.preventDefault();\n ctx.store.toggleDropdown('keyboard');\n }\n }\n }\n };\n\n const ariaAttributes = withAriaAttributes\n ? {\n ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n 'aria-haspopup': 'listbox' as const,\n 'aria-expanded': withExpandedAttribute\n ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n : undefined,\n 'aria-controls':\n ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n 'aria-activedescendant': ctx.store.dropdownOpened\n ? selectedOptionId || undefined\n : undefined,\n autoComplete,\n 'data-expanded': ctx.store.dropdownOpened || undefined,\n 'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n }\n : {};\n\n const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n // Safari does not give keyboard focus to non-text-input elements (including\n // readOnly inputs rendered as buttons) on click, which prevents onKeyDown\n // from firing. Explicitly focus the target when targetType is 'button'.\n if (targetType === 'button') {\n event.currentTarget.focus();\n }\n\n onClick?.(event);\n };\n\n return {\n ...ariaAttributes,\n onKeyDown: handleKeyDown,\n onClick: handleClick,\n };\n}\n"],"mappings":";;;;;AAaA,SAAgB,uBAAuB,EACrC,WACA,SACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAA+C,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;CAM5C,MAAM,iBAAiB,qBACnB;EACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;EAC9D,iBAAiB;EACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;EACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;EACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;EACJ;EACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;EAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;EAC9D,GACD,EAAE;CAEN,MAAM,eAAe,UAA8C;AAIjE,MAAI,eAAe,SACjB,OAAM,cAAc,OAAO;AAG7B,YAAU,MAAM;;AAGlB,QAAO;EACL,GAAG;EACH,WAAW;EACX,SAAS;EACV"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
3
|
const require_filter_props = require("../../core/utils/filter-props/filter-props.cjs");
|
|
4
|
+
const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
|
|
4
5
|
const require_MantineThemeProvider = require("../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
|
|
5
6
|
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
|
|
6
7
|
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
|
|
7
8
|
const require_InlineStyles = require("../../core/InlineStyles/InlineStyles.cjs");
|
|
9
|
+
const require_hash_styles = require("../../core/InlineStyles/hash-styles.cjs");
|
|
8
10
|
const require_parse_style_props = require("../../core/Box/style-props/parse-style-props/parse-style-props.cjs");
|
|
9
11
|
const require_use_random_classname = require("../../core/Box/use-random-classname/use-random-classname.cjs");
|
|
10
12
|
const require_polymorphic_factory = require("../../core/factory/polymorphic-factory.cjs");
|
|
@@ -29,7 +31,7 @@ const Flex = require_polymorphic_factory.polymorphicFactory((_props) => {
|
|
|
29
31
|
vars
|
|
30
32
|
});
|
|
31
33
|
const theme = require_MantineThemeProvider.useMantineTheme();
|
|
32
|
-
const
|
|
34
|
+
const randomClassName = require_use_random_classname.useRandomClassName();
|
|
33
35
|
const parsedStyleProps = require_parse_style_props.parseStyleProps({
|
|
34
36
|
styleProps: {
|
|
35
37
|
gap,
|
|
@@ -43,10 +45,13 @@ const Flex = require_polymorphic_factory.polymorphicFactory((_props) => {
|
|
|
43
45
|
theme,
|
|
44
46
|
data: require_flex_props.FLEX_STYLE_PROPS_DATA
|
|
45
47
|
});
|
|
48
|
+
const deduplicateInlineStyles = require_Mantine_context.useMantineDeduplicateInlineStyles();
|
|
49
|
+
const responsiveClassName = deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles ? require_hash_styles.hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media) : randomClassName;
|
|
46
50
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
|
|
47
51
|
selector: `.${responsiveClassName}`,
|
|
48
52
|
styles: parsedStyleProps.styles,
|
|
49
|
-
media: parsedStyleProps.media
|
|
53
|
+
media: parsedStyleProps.media,
|
|
54
|
+
deduplicate: deduplicateInlineStyles
|
|
50
55
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
|
|
51
56
|
...getStyles("root", {
|
|
52
57
|
className: responsiveClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.cjs","names":["polymorphicFactory","useProps","useStyles","useMantineTheme","useRandomClassName","parseStyleProps","FLEX_STYLE_PROPS_DATA","InlineStyles","Box","filterProps","classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n filterProps,\n InlineStyles,\n MantineSpacing,\n parseStyleProps,\n polymorphicFactory,\n PolymorphicFactory,\n StyleProp,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n /** `gap` CSS property */\n gap?: StyleProp<MantineSpacing>;\n\n /** `row-gap` CSS property */\n rowGap?: StyleProp<MantineSpacing>;\n\n /** `column-gap` CSS property */\n columnGap?: StyleProp<MantineSpacing>;\n\n /** `align-items` CSS property */\n align?: StyleProp<React.CSSProperties['alignItems']>;\n\n /** `justify-content` CSS property */\n justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n /** `flex-wrap` CSS property */\n wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n /** `flex-direction` CSS property */\n direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n props: FlexProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n const props = useProps('Flex', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n gap,\n rowGap,\n columnGap,\n align,\n justify,\n wrap,\n direction,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FlexFactory>({\n name: 'Flex',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const theme = useMantineTheme();\n const
|
|
1
|
+
{"version":3,"file":"Flex.cjs","names":["polymorphicFactory","useProps","useStyles","useMantineTheme","useRandomClassName","parseStyleProps","FLEX_STYLE_PROPS_DATA","useMantineDeduplicateInlineStyles","hashStyleProps","InlineStyles","Box","filterProps","classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n filterProps,\n hashStyleProps,\n InlineStyles,\n MantineSpacing,\n parseStyleProps,\n polymorphicFactory,\n PolymorphicFactory,\n StyleProp,\n StylesApiProps,\n useMantineDeduplicateInlineStyles,\n useMantineTheme,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n /** `gap` CSS property */\n gap?: StyleProp<MantineSpacing>;\n\n /** `row-gap` CSS property */\n rowGap?: StyleProp<MantineSpacing>;\n\n /** `column-gap` CSS property */\n columnGap?: StyleProp<MantineSpacing>;\n\n /** `align-items` CSS property */\n align?: StyleProp<React.CSSProperties['alignItems']>;\n\n /** `justify-content` CSS property */\n justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n /** `flex-wrap` CSS property */\n wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n /** `flex-direction` CSS property */\n direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n props: FlexProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n const props = useProps('Flex', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n gap,\n rowGap,\n columnGap,\n align,\n justify,\n wrap,\n direction,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FlexFactory>({\n name: 'Flex',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const theme = useMantineTheme();\n const randomClassName = useRandomClassName();\n const parsedStyleProps = parseStyleProps({\n styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n theme,\n data: FLEX_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 return (\n <>\n {parsedStyleProps.hasResponsiveStyles && (\n <InlineStyles\n selector={`.${responsiveClassName}`}\n styles={parsedStyleProps.styles}\n media={parsedStyleProps.media}\n deduplicate={deduplicateInlineStyles}\n />\n )}\n <Box\n {...getStyles('root', {\n className: responsiveClassName,\n style: filterProps(parsedStyleProps.inlineStyles),\n })}\n {...others}\n />\n </>\n );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n\nexport namespace Flex {\n export type Props = FlexProps;\n export type StylesNames = FlexStylesNames;\n export type Factory = FlexFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsDA,MAAa,OAAOA,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,kBAAkBC,6BAAAA,oBAAoB;CAC5C,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAMC,mBAAAA;EACP,CAAC;CAEF,MAAM,0BAA0BC,wBAAAA,mCAAmC;CACnE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxCC,oBAAAA,eAAe,iBAAiB,QAAQ,iBAAiB,MAAM,GAC/D;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;EACb,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAOC,qBAAAA,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,cAAc"}
|
|
@@ -12,8 +12,7 @@ let _mantine_hooks = require("@mantine/hooks");
|
|
|
12
12
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
13
|
//#region packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx
|
|
14
14
|
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { transitionDuration }, { shouldReduceMotion }) => {
|
|
15
|
-
|
|
16
|
-
return { root: { "--transition-duration": duration } };
|
|
15
|
+
return { root: { "--transition-duration": (theme.respectReducedMotion ? shouldReduceMotion : false) ? "0ms" : typeof transitionDuration === "number" ? `${transitionDuration}ms` : transitionDuration || "150ms" } };
|
|
17
16
|
});
|
|
18
17
|
const FloatingIndicator = require_factory.factory((_props) => {
|
|
19
18
|
const props = require_use_props.useProps("FloatingIndicator", null, _props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n /** Target element over which the indicator is displayed.\n * The indicator will be positioned to match the target's size and position.\n * */\n target: HTMLElement | null | undefined;\n\n /** Parent container element that must have `position: relative`.\n * The indicator's position is calculated relative to this element.\n * */\n parent: HTMLElement | null | undefined;\n\n /** Transition duration in ms @default 150 */\n transitionDuration?: number | string;\n\n /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n * the indicator from appearing at the wrong position during the parent's animation.\n * @default false\n * */\n displayAfterTransitionEnd?: boolean;\n\n /** Called when the indicator starts transitioning to a new position */\n onTransitionStart?: () => void;\n\n /** Called when the indicator finishes transitioning to a new position */\n onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n props: FloatingIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: FloatingIndicatorStylesNames;\n vars: FloatingIndicatorCssVariables;\n ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n (theme, { transitionDuration }, { shouldReduceMotion }) => {\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion\n ? '0ms'\n : typeof transitionDuration === 'number'\n ? `${transitionDuration}ms`\n : transitionDuration || '150ms';\n\n return {\n root: {\n '--transition-duration': duration,\n },\n };\n }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n const props = useProps('FloatingIndicator', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n target,\n parent,\n transitionDuration,\n mod,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n attributes,\n ref,\n ...others\n } = props;\n\n const shouldReduceMotion = useReducedMotion();\n\n const getStyles = useStyles<FloatingIndicatorFactory>({\n name: 'FloatingIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n stylesCtx: { shouldReduceMotion },\n });\n\n const innerRef = useRef<HTMLDivElement>(null);\n const { initialized, hidden } = useFloatingIndicator({\n target,\n parent,\n ref: innerRef,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n });\n\n const mergedRef = useMergedRef(ref, innerRef);\n\n if (!target || !parent) {\n return null;\n }\n\n return (\n <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n export type Props = FloatingIndicatorProps;\n export type StylesNames = FloatingIndicatorStylesNames;\n export type CssVariables = FloatingIndicatorCssVariables;\n export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;
|
|
1
|
+
{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n /** Target element over which the indicator is displayed.\n * The indicator will be positioned to match the target's size and position.\n * */\n target: HTMLElement | null | undefined;\n\n /** Parent container element that must have `position: relative`.\n * The indicator's position is calculated relative to this element.\n * */\n parent: HTMLElement | null | undefined;\n\n /** Transition duration in ms @default 150 */\n transitionDuration?: number | string;\n\n /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n * the indicator from appearing at the wrong position during the parent's animation.\n * @default false\n * */\n displayAfterTransitionEnd?: boolean;\n\n /** Called when the indicator starts transitioning to a new position */\n onTransitionStart?: () => void;\n\n /** Called when the indicator finishes transitioning to a new position */\n onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n props: FloatingIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: FloatingIndicatorStylesNames;\n vars: FloatingIndicatorCssVariables;\n ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n (theme, { transitionDuration }, { shouldReduceMotion }) => {\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion\n ? '0ms'\n : typeof transitionDuration === 'number'\n ? `${transitionDuration}ms`\n : transitionDuration || '150ms';\n\n return {\n root: {\n '--transition-duration': duration,\n },\n };\n }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n const props = useProps('FloatingIndicator', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n target,\n parent,\n transitionDuration,\n mod,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n attributes,\n ref,\n ...others\n } = props;\n\n const shouldReduceMotion = useReducedMotion();\n\n const getStyles = useStyles<FloatingIndicatorFactory>({\n name: 'FloatingIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n stylesCtx: { shouldReduceMotion },\n });\n\n const innerRef = useRef<HTMLDivElement>(null);\n const { initialized, hidden } = useFloatingIndicator({\n target,\n parent,\n ref: innerRef,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n });\n\n const mergedRef = useMergedRef(ref, innerRef);\n\n if (!target || !parent) {\n return null;\n }\n\n return (\n <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n export type Props = FloatingIndicatorProps;\n export type StylesNames = FloatingIndicatorStylesNames;\n export type CssVariables = FloatingIndicatorCssVariables;\n export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;AAQzD,QAAO,EACL,MAAM,EACJ,0BATiB,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB,SAKzB,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,MAAM,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAIJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,qBAAA,GAAA,eAAA,mBAd8B,EAcV;EAClC,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,QAAkC,KAAK;CAC7C,MAAM,EAAE,aAAa,WAAWC,+BAAAA,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,SAAS;AAE7C,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;GAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAEjG;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
//#region packages/@mantine/core/src/components/Highlight/highlighter/highlighter.ts
|
|
3
3
|
function escapeRegex(value) {
|
|
4
|
-
return value.replace(/[
|
|
4
|
+
return value.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
|
|
5
5
|
}
|
|
6
6
|
function highlighter(value, _highlight, options = {}) {
|
|
7
7
|
if (_highlight == null) return [{
|
|
@@ -14,8 +14,8 @@ function highlighter(value, _highlight, options = {}) {
|
|
|
14
14
|
highlighted: false
|
|
15
15
|
}];
|
|
16
16
|
const matcher = typeof highlight === "string" ? highlight.trim() : highlight.filter((part) => part.trim().length !== 0).map((part) => part.trim()).sort((a, b) => b.length - a.length).join("|");
|
|
17
|
-
const pattern = options.wholeWord ?
|
|
18
|
-
const re = new RegExp(pattern, "gi");
|
|
17
|
+
const pattern = options.wholeWord ? `(?<![\\p{L}\\p{N}_])(${matcher})(?![\\p{L}\\p{N}_])` : `(${matcher})`;
|
|
18
|
+
const re = new RegExp(pattern, options.wholeWord ? "giu" : "gi");
|
|
19
19
|
return value.split(re).map((part, index) => ({
|
|
20
20
|
chunk: part,
|
|
21
21
|
highlighted: index % 2 === 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlighter.cjs","names":[],"sources":["../../../../src/components/Highlight/highlighter/highlighter.ts"],"sourcesContent":["function escapeRegex(value: string) {\n return value.replace(/[
|
|
1
|
+
{"version":3,"file":"highlighter.cjs","names":[],"sources":["../../../../src/components/Highlight/highlighter/highlighter.ts"],"sourcesContent":["function escapeRegex(value: string) {\n return value.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}\n\nexport interface HighlightChunk {\n chunk: string;\n highlighted: boolean;\n color?: string;\n}\n\nexport interface HighlighterOptions {\n wholeWord?: boolean;\n}\n\nexport function highlighter(\n value: string,\n _highlight: string | string[],\n options: HighlighterOptions = {}\n): HighlightChunk[] {\n if (_highlight == null) {\n return [{ chunk: value, highlighted: false }];\n }\n\n const highlight = Array.isArray(_highlight)\n ? _highlight.map(escapeRegex)\n : escapeRegex(_highlight);\n\n const shouldHighlight = Array.isArray(highlight)\n ? highlight.filter((part) => part.trim().length > 0).length > 0\n : highlight.trim() !== '';\n\n if (!shouldHighlight) {\n return [{ chunk: value, highlighted: false }];\n }\n\n const matcher =\n typeof highlight === 'string'\n ? highlight.trim()\n : highlight\n .filter((part) => part.trim().length !== 0)\n .map((part) => part.trim())\n .sort((a, b) => b.length - a.length)\n .join('|');\n\n const pattern = options.wholeWord\n ? `(?<![\\\\p{L}\\\\p{N}_])(${matcher})(?![\\\\p{L}\\\\p{N}_])`\n : `(${matcher})`;\n const re = new RegExp(pattern, options.wholeWord ? 'giu' : 'gi');\n const chunks = value\n .split(re)\n .map((part, index) => ({ chunk: part, highlighted: index % 2 === 1 }))\n .filter(({ chunk }) => chunk);\n\n return chunks;\n}\n"],"mappings":";;AAAA,SAAS,YAAY,OAAe;AAClC,QAAO,MAAM,QAAQ,uBAAuB,OAAO;;AAarD,SAAgB,YACd,OACA,YACA,UAA8B,EAAE,EACd;AAClB,KAAI,cAAc,KAChB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,YAAY,MAAM,QAAQ,WAAW,GACvC,WAAW,IAAI,YAAY,GAC3B,YAAY,WAAW;AAM3B,KAAI,EAJoB,MAAM,QAAQ,UAAU,GAC5C,UAAU,QAAQ,SAAS,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC,SAAS,IAC5D,UAAU,MAAM,KAAK,IAGvB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,UACJ,OAAO,cAAc,WACjB,UAAU,MAAM,GAChB,UACG,QAAQ,SAAS,KAAK,MAAM,CAAC,WAAW,EAAE,CAC1C,KAAK,SAAS,KAAK,MAAM,CAAC,CAC1B,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CACnC,KAAK,IAAI;CAElB,MAAM,UAAU,QAAQ,YACpB,wBAAwB,QAAQ,wBAChC,IAAI,QAAQ;CAChB,MAAM,KAAK,IAAI,OAAO,SAAS,QAAQ,YAAY,QAAQ,KAAK;AAMhE,QALe,MACZ,MAAM,GAAG,CACT,KAAK,MAAM,WAAW;EAAE,OAAO;EAAM,aAAa,QAAQ,MAAM;EAAG,EAAE,CACrE,QAAQ,EAAE,YAAY,MAAM"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
|
|
4
|
+
const require_factory = require("../../core/factory/factory.cjs");
|
|
5
|
+
const require_InputBase = require("../InputBase/InputBase.cjs");
|
|
6
|
+
const require_use_mask_input_props = require("./use-mask-input-props.cjs");
|
|
7
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
|
+
//#region packages/@mantine/core/src/components/MaskInput/MaskInput.tsx
|
|
9
|
+
const defaultProps = {};
|
|
10
|
+
const MaskInput = require_factory.factory((props) => {
|
|
11
|
+
const { maskRef, elementProps } = require_use_mask_input_props.useMaskInputProps(require_use_props.useProps("MaskInput", defaultProps, props));
|
|
12
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
|
|
13
|
+
component: "input",
|
|
14
|
+
ref: maskRef,
|
|
15
|
+
...elementProps,
|
|
16
|
+
__staticSelector: "MaskInput"
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
MaskInput.classes = require_InputBase.InputBase.classes;
|
|
20
|
+
MaskInput.displayName = "@mantine/core/MaskInput";
|
|
21
|
+
//#endregion
|
|
22
|
+
exports.MaskInput = MaskInput;
|
|
23
|
+
|
|
24
|
+
//# sourceMappingURL=MaskInput.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskInput.cjs","names":["factory","useMaskInputProps","useProps","InputBase"],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<MaskInputFactory>,\n ElementProps<'input', 'size'> {\n /** Mask pattern string or array of string literals and RegExp objects */\n mask: string | Array<string | RegExp>;\n\n /** Override or extend the default token map */\n tokens?: Record<string, RegExp>;\n\n /** Called before masking on each keystroke, can return overrides for mask options */\n modify?: (\n value: string\n ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n /** When true, raw and display values are decoupled */\n separate?: boolean;\n\n /** Character displayed in unfilled slots, `\"_\"` by default */\n slotChar?: string | null;\n\n /** Show mask pattern even when field is empty and unfocused */\n alwaysShowMask?: boolean;\n\n /** Show mask placeholder on focus, `true` by default */\n showMaskOnFocus?: boolean;\n\n /** Transform each character before validation and insertion */\n transform?: (char: string) => string;\n\n /** Clear value on blur when mask is incomplete, `false` by default */\n autoClear?: boolean;\n\n /** Called on every change with raw and masked values */\n onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n /** Called when all required mask slots are filled */\n onComplete?: (maskedValue: string, rawValue: string) => void;\n\n /** Escape hatch for advanced cursor/value manipulation */\n beforeMaskedStateChange?: (states: {\n previousState: { value: string; selection: { start: number; end: number } | null };\n currentState: { value: string; selection: { start: number; end: number } | null };\n nextState: { value: string; selection: { start: number; end: number } | null };\n }) => { value: string; selection: { start: number; end: number } | null };\n}\n\nexport type MaskInputFactory = Factory<{\n props: MaskInputProps;\n variant: InputVariant;\n ref: HTMLInputElement;\n stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n const _props = useProps('MaskInput', defaultProps, props);\n const { maskRef, elementProps } = useMaskInputProps(_props);\n\n return (\n <InputBase\n component=\"input\"\n ref={maskRef}\n {...(elementProps as any)}\n __staticSelector=\"MaskInput\"\n />\n );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;;AA6DA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiBC,6BAAAA,kBADnBC,kBAAAA,SAAS,aAAa,cAAc,MAAM,CACE;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAUA,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let _mantine_hooks = require("@mantine/hooks");
|
|
4
|
+
//#region packages/@mantine/core/src/components/MaskInput/use-mask-input-props.ts
|
|
5
|
+
function useMaskInputProps(props) {
|
|
6
|
+
const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, ref, ...elementProps } = props;
|
|
7
|
+
const { ref: maskCallbackRef } = (0, _mantine_hooks.useMask)({
|
|
8
|
+
mask,
|
|
9
|
+
tokens,
|
|
10
|
+
modify,
|
|
11
|
+
separate,
|
|
12
|
+
slotChar,
|
|
13
|
+
alwaysShowMask,
|
|
14
|
+
showMaskOnFocus,
|
|
15
|
+
transform,
|
|
16
|
+
autoClear,
|
|
17
|
+
onChangeRaw,
|
|
18
|
+
onComplete,
|
|
19
|
+
beforeMaskedStateChange
|
|
20
|
+
});
|
|
21
|
+
return {
|
|
22
|
+
maskRef: (0, _mantine_hooks.useMergedRef)(ref, maskCallbackRef),
|
|
23
|
+
elementProps
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
exports.useMaskInputProps = useMaskInputProps;
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=use-mask-input-props.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-mask-input-props.cjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n const {\n mask,\n tokens,\n modify,\n separate,\n slotChar,\n alwaysShowMask,\n showMaskOnFocus,\n transform,\n autoClear,\n onChangeRaw,\n onComplete,\n beforeMaskedStateChange,\n ref,\n ...elementProps\n } = props;\n\n const { ref: maskCallbackRef } = useMask({\n mask,\n tokens,\n modify,\n separate,\n slotChar,\n alwaysShowMask,\n showMaskOnFocus,\n transform,\n autoClear,\n onChangeRaw,\n onComplete,\n beforeMaskedStateChange,\n });\n\n const maskRef = useMergedRef(ref, maskCallbackRef);\n\n return { maskRef, elementProps };\n}\n"],"mappings":";;;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,qBAAA,GAAA,eAAA,SAA4B;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QAAO;EAAE,UAAA,GAAA,eAAA,cAFoB,KAAK,gBAAgB;EAEhC;EAAc"}
|