@mantine/core 9.3.0 → 9.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Blockquote/Blockquote.module.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs +2 -1
- package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/cjs/components/Collapse/Collapse.cjs +2 -1
- package/cjs/components/Collapse/Collapse.cjs.map +1 -1
- package/cjs/components/Combobox/Combobox.cjs +1 -0
- package/cjs/components/Combobox/Combobox.cjs.map +1 -1
- package/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCard.cjs +1 -0
- package/cjs/components/HoverCard/HoverCard.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCard.context.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs +10 -2
- package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs.map +1 -1
- package/cjs/components/HoverCard/use-hover-card.cjs +24 -0
- package/cjs/components/HoverCard/use-hover-card.cjs.map +1 -1
- package/cjs/components/Input/Input.module.cjs.map +1 -1
- package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs +4 -3
- package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs.map +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.cjs +16 -13
- package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
- package/cjs/components/Pagination/Pagination.icons.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs +3 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/Popover/Popover.cjs +2 -1
- package/cjs/components/Popover/Popover.cjs.map +1 -1
- package/cjs/components/Popover/Popover.context.cjs.map +1 -1
- package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs +4 -3
- package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs.map +1 -1
- package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs +1 -0
- package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map +1 -1
- package/cjs/components/Popover/use-popover.cjs +23 -11
- package/cjs/components/Popover/use-popover.cjs.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.module.cjs.map +1 -1
- package/cjs/components/Slider/Thumb/Thumb.cjs.map +1 -1
- package/cjs/components/Splitter/Splitter.cjs +5 -3
- package/cjs/components/Splitter/Splitter.cjs.map +1 -1
- package/cjs/components/Text/Text.module.cjs.map +1 -1
- package/cjs/components/Textarea/Autosize.cjs +14 -0
- package/cjs/components/Textarea/Autosize.cjs.map +1 -1
- package/cjs/components/Transition/Transition.cjs +17 -10
- package/cjs/components/Transition/Transition.cjs.map +1 -1
- package/cjs/components/Tree/TreeNode.cjs +8 -1
- package/cjs/components/Tree/TreeNode.cjs.map +1 -1
- package/cjs/core/Box/Box.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/use-styles.cjs.map +1 -1
- package/cjs/utils/Floating/use-context-menu-handlers.cjs +85 -0
- package/cjs/utils/Floating/use-context-menu-handlers.cjs.map +1 -0
- package/esm/components/Blockquote/Blockquote.module.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.mjs +2 -1
- package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/esm/components/Collapse/Collapse.mjs +2 -1
- package/esm/components/Collapse/Collapse.mjs.map +1 -1
- package/esm/components/Combobox/Combobox.mjs +1 -0
- package/esm/components/Combobox/Combobox.mjs.map +1 -1
- package/esm/components/Dialog/Dialog.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCard.context.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCard.mjs +1 -0
- package/esm/components/HoverCard/HoverCard.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs +10 -2
- package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map +1 -1
- package/esm/components/HoverCard/use-hover-card.mjs +24 -0
- package/esm/components/HoverCard/use-hover-card.mjs.map +1 -1
- package/esm/components/Input/Input.module.mjs.map +1 -1
- package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs +4 -3
- package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs.map +1 -1
- package/esm/components/Menu/MenuSub/MenuSub.mjs +18 -15
- package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
- package/esm/components/Pagination/Pagination.icons.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs +3 -1
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/Popover/Popover.context.mjs.map +1 -1
- package/esm/components/Popover/Popover.mjs +2 -1
- package/esm/components/Popover/Popover.mjs.map +1 -1
- package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs +4 -3
- package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs.map +1 -1
- package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs +1 -0
- package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map +1 -1
- package/esm/components/Popover/use-popover.mjs +23 -11
- package/esm/components/Popover/use-popover.mjs.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.module.mjs.map +1 -1
- package/esm/components/Slider/Thumb/Thumb.mjs.map +1 -1
- package/esm/components/Splitter/Splitter.mjs +5 -3
- package/esm/components/Splitter/Splitter.mjs.map +1 -1
- package/esm/components/Text/Text.module.mjs.map +1 -1
- package/esm/components/Textarea/Autosize.mjs +14 -0
- package/esm/components/Textarea/Autosize.mjs.map +1 -1
- package/esm/components/Transition/Transition.mjs +17 -10
- package/esm/components/Transition/Transition.mjs.map +1 -1
- package/esm/components/Tree/TreeNode.mjs +8 -1
- package/esm/components/Tree/TreeNode.mjs.map +1 -1
- package/esm/core/Box/Box.mjs.map +1 -1
- package/esm/core/styles-api/use-styles/use-styles.mjs.map +1 -1
- package/esm/utils/Floating/use-context-menu-handlers.mjs +85 -0
- package/esm/utils/Floating/use-context-menu-handlers.mjs.map +1 -0
- package/lib/components/Collapse/Collapse.d.ts +1 -1
- package/lib/components/Dialog/Dialog.d.ts +1 -1
- package/lib/components/HoverCard/HoverCard.context.d.ts +1 -0
- package/lib/components/HoverCard/use-hover-card.d.ts +1 -0
- package/lib/components/Input/use-input-props.d.ts +3 -3
- package/lib/components/MaskInput/use-mask-input-props.d.ts +2 -2
- package/lib/components/Menu/MenuContextMenu/MenuContextMenu.d.ts +2 -0
- package/lib/components/Menu/MenuSub/MenuSub.d.ts +2 -0
- package/lib/components/Pagination/Pagination.icons.d.ts +1 -1
- package/lib/components/Popover/Popover.context.d.ts +1 -0
- package/lib/components/Popover/Popover.d.ts +7 -0
- package/lib/components/Popover/PopoverContextMenu/PopoverContextMenu.d.ts +2 -0
- package/lib/components/Slider/Thumb/Thumb.d.ts +1 -1
- package/lib/components/Splitter/Splitter.d.ts +2 -0
- package/lib/components/Transition/Transition.d.ts +8 -1
- package/lib/core/Box/Box.d.ts +1 -1
- package/lib/core/styles-api/styles-api.types.d.ts +2 -2
- package/lib/core/styles-api/use-styles/use-styles.d.ts +1 -1
- package/lib/utils/Floating/{create-context-menu-handlers.d.ts → use-context-menu-handlers.d.ts} +9 -2
- package/package.json +2 -2
- package/styles/Blockquote.css +1 -1
- package/styles/Blockquote.layer.css +1 -1
- package/styles/Input.css +1 -1
- package/styles/Input.layer.css +1 -1
- package/styles/SegmentedControl.css +4 -1
- package/styles/SegmentedControl.layer.css +4 -1
- package/styles/Text.css +1 -1
- package/styles/Text.layer.css +1 -1
- package/styles.css +7 -4
- package/styles.layer.css +7 -4
- package/cjs/utils/Floating/create-context-menu-handlers.cjs +0 -38
- package/cjs/utils/Floating/create-context-menu-handlers.cjs.map +0 -1
- package/esm/utils/Floating/create-context-menu-handlers.mjs +0 -38
- package/esm/utils/Floating/create-context-menu-handlers.mjs.map +0 -1
|
@@ -26,6 +26,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
26
26
|
//#region packages/@mantine/core/src/components/Combobox/Combobox.tsx
|
|
27
27
|
const defaultProps = {
|
|
28
28
|
keepMounted: true,
|
|
29
|
+
keepMountedMode: "display-none",
|
|
29
30
|
withinPortal: true,
|
|
30
31
|
resetSelectionOnOptionHover: false,
|
|
31
32
|
width: "target",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n createVarsResolver,\n ExtendComponent,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n MantineThemeComponent,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n ComboboxClearButton,\n ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n ComboboxDropdownTarget,\n ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n ComboboxEventsTarget,\n ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n ComboboxHiddenInput,\n ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n | 'options'\n | 'dropdown'\n | 'option'\n | 'search'\n | 'empty'\n | 'footer'\n | 'header'\n | 'group'\n | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n options: '--combobox-option-fz' | '--combobox-option-padding';\n dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n __staticSelector?: string;\n\n /** Combobox content */\n children?: React.ReactNode;\n\n /** Combobox store, can be used to control combobox state */\n store?: ComboboxStore;\n\n /** Called when item is selected with the `Enter` key or by clicking it */\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n /** Controls items `font-size` and `padding` @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Controls `padding` of the dropdown @default 4 */\n dropdownPadding?: React.CSSProperties['padding'];\n\n /** Determines whether selection should be reset when option is hovered @default false */\n resetSelectionOnOptionHover?: boolean;\n\n /** Determines whether the `Combobox` value can be changed */\n readOnly?: boolean;\n\n /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n props: ComboboxProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxStylesNames;\n vars: ComboboxCSSVariables;\n staticComponents: {\n Target: typeof ComboboxTarget;\n Dropdown: typeof ComboboxDropdown;\n Options: typeof ComboboxOptions;\n Option: typeof ComboboxOption;\n Search: typeof ComboboxSearch;\n Empty: typeof ComboboxEmpty;\n Chevron: typeof ComboboxChevron;\n Footer: typeof ComboboxFooter;\n Header: typeof ComboboxHeader;\n EventsTarget: typeof ComboboxEventsTarget;\n DropdownTarget: typeof ComboboxDropdownTarget;\n Group: typeof ComboboxGroup;\n ClearButton: typeof ComboboxClearButton;\n HiddenInput: typeof ComboboxHiddenInput;\n };\n}>;\n\nconst defaultProps = {\n keepMounted: true,\n withinPortal: true,\n resetSelectionOnOptionHover: false,\n width: 'target',\n transitionProps: { transition: 'fade', duration: 0 },\n size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n options: {\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n\n dropdown: {\n '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n const props = useProps('Combobox', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n children,\n store: controlledStore,\n vars,\n onOptionSubmit,\n onClose,\n size,\n dropdownPadding,\n resetSelectionOnOptionHover,\n __staticSelector,\n readOnly,\n attributes,\n floatingHeight,\n middlewares,\n ...others\n } = props;\n\n const resolvedMiddlewares: PopoverMiddlewares | undefined =\n floatingHeight === 'viewport'\n ? {\n ...middlewares,\n flip: false,\n size: {\n ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n padding:\n typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n ? middlewares.size.padding\n : 10,\n apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n elements.floating.style.setProperty(\n '--combobox-floating-max-height',\n `${availableHeight}px`\n );\n const userSize = middlewares?.size;\n if (typeof userSize === 'object' && userSize.apply) {\n userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n } else if (userSize) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n },\n },\n }\n : middlewares;\n\n const uncontrolledStore = useCombobox();\n const store = controlledStore || uncontrolledStore;\n\n const getStyles = useStyles<ComboboxFactory>({\n name: __staticSelector || 'Combobox',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const onDropdownClose = () => {\n onClose?.();\n store.closeDropdown();\n };\n\n return (\n <ComboboxProvider\n value={{\n getStyles,\n store,\n onOptionSubmit,\n size,\n resetSelectionOnOptionHover,\n readOnly,\n floatingHeight,\n }}\n >\n <Popover\n opened={store.dropdownOpened}\n {...others}\n middlewares={resolvedMiddlewares}\n onChange={(_opened) => !_opened && onDropdownClose()}\n withRoles={false}\n unstyled={unstyled}\n >\n {children}\n </Popover>\n </ComboboxProvider>\n );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n export type Props = ComboboxProps;\n export type StylesNames = ComboboxStylesNames;\n export type Factory = ComboboxFactory;\n\n export namespace Dropdown {\n export type Props = ComboboxDropdownProps;\n }\n\n export namespace Options {\n export type Props = ComboboxOptionsProps;\n }\n\n export namespace Option {\n export type Props = ComboboxOptionProps;\n }\n\n export namespace Target {\n export type Props = ComboboxTargetProps;\n }\n\n export namespace Chevron {\n export type Props = ComboboxChevronProps;\n }\n\n export namespace Empty {\n export type Props = ComboboxEmptyProps;\n }\n\n export namespace Search {\n export type Props = ComboboxSearchProps;\n }\n\n export namespace Footer {\n export type Props = ComboboxFooterProps;\n }\n\n export namespace Header {\n export type Props = ComboboxHeaderProps;\n }\n\n export namespace DropdownTarget {\n export type Props = ComboboxDropdownTargetProps;\n }\n\n export namespace EventsTarget {\n export type Props = ComboboxEventsTargetProps;\n }\n\n export namespace Group {\n export type Props = ComboboxGroupProps;\n }\n\n export namespace ClearButton {\n export type Props = ComboboxClearButtonProps;\n }\n\n export namespace HiddenInput {\n export type Props = ComboboxHiddenInputProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}
|
|
1
|
+
{"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n createVarsResolver,\n ExtendComponent,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n MantineThemeComponent,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n ComboboxClearButton,\n ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n ComboboxDropdownTarget,\n ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n ComboboxEventsTarget,\n ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n ComboboxHiddenInput,\n ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n | 'options'\n | 'dropdown'\n | 'option'\n | 'search'\n | 'empty'\n | 'footer'\n | 'header'\n | 'group'\n | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n options: '--combobox-option-fz' | '--combobox-option-padding';\n dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n __staticSelector?: string;\n\n /** Combobox content */\n children?: React.ReactNode;\n\n /** Combobox store, can be used to control combobox state */\n store?: ComboboxStore;\n\n /** Called when item is selected with the `Enter` key or by clicking it */\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n /** Controls items `font-size` and `padding` @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Controls `padding` of the dropdown @default 4 */\n dropdownPadding?: React.CSSProperties['padding'];\n\n /** Determines whether selection should be reset when option is hovered @default false */\n resetSelectionOnOptionHover?: boolean;\n\n /** Determines whether the `Combobox` value can be changed */\n readOnly?: boolean;\n\n /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n props: ComboboxProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxStylesNames;\n vars: ComboboxCSSVariables;\n staticComponents: {\n Target: typeof ComboboxTarget;\n Dropdown: typeof ComboboxDropdown;\n Options: typeof ComboboxOptions;\n Option: typeof ComboboxOption;\n Search: typeof ComboboxSearch;\n Empty: typeof ComboboxEmpty;\n Chevron: typeof ComboboxChevron;\n Footer: typeof ComboboxFooter;\n Header: typeof ComboboxHeader;\n EventsTarget: typeof ComboboxEventsTarget;\n DropdownTarget: typeof ComboboxDropdownTarget;\n Group: typeof ComboboxGroup;\n ClearButton: typeof ComboboxClearButton;\n HiddenInput: typeof ComboboxHiddenInput;\n };\n}>;\n\nconst defaultProps = {\n keepMounted: true,\n keepMountedMode: 'display-none',\n withinPortal: true,\n resetSelectionOnOptionHover: false,\n width: 'target',\n transitionProps: { transition: 'fade', duration: 0 },\n size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n options: {\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n\n dropdown: {\n '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n const props = useProps('Combobox', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n children,\n store: controlledStore,\n vars,\n onOptionSubmit,\n onClose,\n size,\n dropdownPadding,\n resetSelectionOnOptionHover,\n __staticSelector,\n readOnly,\n attributes,\n floatingHeight,\n middlewares,\n ...others\n } = props;\n\n const resolvedMiddlewares: PopoverMiddlewares | undefined =\n floatingHeight === 'viewport'\n ? {\n ...middlewares,\n flip: false,\n size: {\n ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n padding:\n typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n ? middlewares.size.padding\n : 10,\n apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n elements.floating.style.setProperty(\n '--combobox-floating-max-height',\n `${availableHeight}px`\n );\n const userSize = middlewares?.size;\n if (typeof userSize === 'object' && userSize.apply) {\n userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n } else if (userSize) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n },\n },\n }\n : middlewares;\n\n const uncontrolledStore = useCombobox();\n const store = controlledStore || uncontrolledStore;\n\n const getStyles = useStyles<ComboboxFactory>({\n name: __staticSelector || 'Combobox',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const onDropdownClose = () => {\n onClose?.();\n store.closeDropdown();\n };\n\n return (\n <ComboboxProvider\n value={{\n getStyles,\n store,\n onOptionSubmit,\n size,\n resetSelectionOnOptionHover,\n readOnly,\n floatingHeight,\n }}\n >\n <Popover\n opened={store.dropdownOpened}\n {...others}\n middlewares={resolvedMiddlewares}\n onChange={(_opened) => !_opened && onDropdownClose()}\n withRoles={false}\n unstyled={unstyled}\n >\n {children}\n </Popover>\n </ComboboxProvider>\n );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n export type Props = ComboboxProps;\n export type StylesNames = ComboboxStylesNames;\n export type Factory = ComboboxFactory;\n\n export namespace Dropdown {\n export type Props = ComboboxDropdownProps;\n }\n\n export namespace Options {\n export type Props = ComboboxOptionsProps;\n }\n\n export namespace Option {\n export type Props = ComboboxOptionProps;\n }\n\n export namespace Target {\n export type Props = ComboboxTargetProps;\n }\n\n export namespace Chevron {\n export type Props = ComboboxChevronProps;\n }\n\n export namespace Empty {\n export type Props = ComboboxEmptyProps;\n }\n\n export namespace Search {\n export type Props = ComboboxSearchProps;\n }\n\n export namespace Footer {\n export type Props = ComboboxFooterProps;\n }\n\n export namespace Header {\n export type Props = ComboboxHeaderProps;\n }\n\n export namespace DropdownTarget {\n export type Props = ComboboxDropdownTargetProps;\n }\n\n export namespace EventsTarget {\n export type Props = ComboboxEventsTargetProps;\n }\n\n export namespace Group {\n export type Props = ComboboxGroupProps;\n }\n\n export namespace ClearButton {\n export type Props = ComboboxClearButtonProps;\n }\n\n export namespace HiddenInput {\n export type Props = ComboboxHiddenInputProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' | 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */\n keepMounted?: boolean;\n\n /** If set, displays the close button @default
|
|
1
|
+
{"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' | 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */\n keepMounted?: boolean;\n\n /** If set, displays the close button @default false */\n withCloseButton?: boolean;\n\n /** Called on close button click */\n onClose?: () => void;\n\n /** Dialog content */\n children?: React.ReactNode;\n\n /** Opened state */\n opened: boolean;\n\n /** Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } */\n transitionProps?: TransitionOverride;\n\n /** Controls `width` of the dialog @default 'md' */\n size?: MantineSize | (string & {}) | number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n p: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\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 <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n export type Props = DialogProps;\n export type StylesNames = DialogStylesNames;\n export type CssVariables = DialogCssVariables;\n export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;YAEV,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;cACvD,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;cAHN,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.context.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface HoverCardContextValue {\n openDropdown: () => void;\n closeDropdown: () => void;\n getReferenceProps?: () => any;\n getFloatingProps?: () => any;\n reference?: (node: HTMLElement | null) => void;\n floating?: (node: HTMLElement | null) => void;\n}\n\nexport const [HoverCardContext, useHoverCardContext] = createSafeContext<HoverCardContextValue>(\n 'HoverCard component was not found in the tree'\n);\n"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"HoverCard.context.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface HoverCardContextValue {\n openDropdown: () => void;\n closeDropdown: () => void;\n assignTarget: (node: HTMLElement | null) => void;\n getReferenceProps?: () => any;\n getFloatingProps?: () => any;\n reference?: (node: HTMLElement | null) => void;\n floating?: (node: HTMLElement | null) => void;\n}\n\nexport const [HoverCardContext, useHoverCardContext] = createSafeContext<HoverCardContextValue>(\n 'HoverCard component was not found in the tree'\n);\n"],"mappings":";;;AAYA,MAAa,CAAC,kBAAkB,uBAAuB,kBACrD,+CACF"}
|
|
@@ -26,6 +26,7 @@ function HoverCard(props) {
|
|
|
26
26
|
value: {
|
|
27
27
|
openDropdown: hoverCard.openDropdown,
|
|
28
28
|
closeDropdown: hoverCard.closeDropdown,
|
|
29
|
+
assignTarget: hoverCard.assignTarget,
|
|
29
30
|
getReferenceProps: hoverCard.getReferenceProps,
|
|
30
31
|
getFloatingProps: hoverCard.getFloatingProps,
|
|
31
32
|
reference: hoverCard.reference,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n HoverCardGroup,\n HoverCardGroupContextValue,\n HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n /** Initial opened state */\n initiallyOpened?: boolean;\n\n /** Called when the dropdown is opened */\n onOpen?: () => void;\n\n /** Called when the dropdown is closed */\n onClose?: () => void;\n\n /**\n * Delay in ms before the dropdown opens after mouse enters the target.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 0\n */\n openDelay?: number;\n\n /**\n * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 150\n */\n closeDelay?: number;\n}\n\nexport type HoverCardFactory = Factory<{\n props: HoverCardProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n openDelay: 0,\n closeDelay: 150,\n initiallyOpened: false,\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(\n 'HoverCard',\n defaultProps,\n props\n );\n\n const hoverCard = useHoverCard({\n openDelay,\n closeDelay,\n defaultOpened: initiallyOpened,\n onOpen,\n onClose,\n });\n\n return (\n <HoverCardContext\n value={{\n openDropdown: hoverCard.openDropdown,\n closeDropdown: hoverCard.closeDropdown,\n getReferenceProps: hoverCard.getReferenceProps,\n getFloatingProps: hoverCard.getFloatingProps,\n reference: hoverCard.reference,\n floating: hoverCard.floating,\n }}\n >\n <Popover {...others} opened={hoverCard.opened} __staticSelector=\"HoverCard\">\n {children}\n </Popover>\n </HoverCardContext>\n );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n export type Props = HoverCardProps;\n export type DropdownProps = HoverCardDropdownProps;\n export type TargetProps = HoverCardTargetProps;\n export type GroupProps = HoverCardGroupProps;\n export type ContextValue = HoverCardContextValue;\n\n export namespace Group {\n export type Props = HoverCardGroupProps;\n export type ContextValue = HoverCardGroupContextValue;\n }\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;AACnB;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,WAAW,YAAY,iBAAiB,GAAG,WAAW,SACvF,aACA,cACA,KACF;CAEA,MAAM,YAAY,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;EACtB;YAEA,oBAAC,SAAD;GAAS,GAAI;GAAQ,QAAQ,UAAU;GAAQ,kBAAiB;GAC7D;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AACnB,UAAU,WAAW;AACrB,UAAU,QAAQ;AAClB,UAAU,UAAU,UAA6C"}
|
|
1
|
+
{"version":3,"file":"HoverCard.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n HoverCardGroup,\n HoverCardGroupContextValue,\n HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n /** Initial opened state */\n initiallyOpened?: boolean;\n\n /** Called when the dropdown is opened */\n onOpen?: () => void;\n\n /** Called when the dropdown is closed */\n onClose?: () => void;\n\n /**\n * Delay in ms before the dropdown opens after mouse enters the target.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 0\n */\n openDelay?: number;\n\n /**\n * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 150\n */\n closeDelay?: number;\n}\n\nexport type HoverCardFactory = Factory<{\n props: HoverCardProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n openDelay: 0,\n closeDelay: 150,\n initiallyOpened: false,\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(\n 'HoverCard',\n defaultProps,\n props\n );\n\n const hoverCard = useHoverCard({\n openDelay,\n closeDelay,\n defaultOpened: initiallyOpened,\n onOpen,\n onClose,\n });\n\n return (\n <HoverCardContext\n value={{\n openDropdown: hoverCard.openDropdown,\n closeDropdown: hoverCard.closeDropdown,\n assignTarget: hoverCard.assignTarget,\n getReferenceProps: hoverCard.getReferenceProps,\n getFloatingProps: hoverCard.getFloatingProps,\n reference: hoverCard.reference,\n floating: hoverCard.floating,\n }}\n >\n <Popover {...others} opened={hoverCard.opened} __staticSelector=\"HoverCard\">\n {children}\n </Popover>\n </HoverCardContext>\n );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n export type Props = HoverCardProps;\n export type DropdownProps = HoverCardDropdownProps;\n export type TargetProps = HoverCardTargetProps;\n export type GroupProps = HoverCardGroupProps;\n export type ContextValue = HoverCardContextValue;\n\n export namespace Group {\n export type Props = HoverCardGroupProps;\n export type ContextValue = HoverCardGroupContextValue;\n }\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;AACnB;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,WAAW,YAAY,iBAAiB,GAAG,WAAW,SACvF,aACA,cACA,KACF;CAEA,MAAM,YAAY,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;EACtB;YAEA,oBAAC,SAAD;GAAS,GAAI;GAAQ,QAAQ,UAAU;GAAQ,kBAAiB;GAC7D;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AACnB,UAAU,WAAW;AACrB,UAAU,QAAQ;AAClB,UAAU,UAAU,UAA6C"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
|
|
3
|
+
import { getRefProp } from "../../../core/utils/get-ref-prop/get-ref-prop.mjs";
|
|
3
4
|
import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
|
|
4
5
|
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
|
|
5
6
|
import { Popover } from "../../Popover/Popover.mjs";
|
|
6
7
|
import { useHoverCardContext } from "../HoverCard.context.mjs";
|
|
7
8
|
import { HoverCardGroupContext } from "../HoverCardGroup/HoverCardGroup.mjs";
|
|
8
9
|
import { cloneElement, use } from "react";
|
|
10
|
+
import { useMergedRef } from "@mantine/hooks";
|
|
9
11
|
import { jsx } from "react/jsx-runtime";
|
|
10
12
|
//#region packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx
|
|
11
13
|
const defaultProps = { refProp: "ref" };
|
|
@@ -14,7 +16,9 @@ function HoverCardTarget(props) {
|
|
|
14
16
|
const child = getSingleElementChild(children);
|
|
15
17
|
if (!child) throw new Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
|
|
16
18
|
const ctx = useHoverCardContext();
|
|
17
|
-
|
|
19
|
+
const groupContext = use(HoverCardGroupContext);
|
|
20
|
+
const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);
|
|
21
|
+
if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {
|
|
18
22
|
const referenceProps = ctx.getReferenceProps();
|
|
19
23
|
return /* @__PURE__ */ jsx(Popover.Target, {
|
|
20
24
|
refProp,
|
|
@@ -32,10 +36,14 @@ function HoverCardTarget(props) {
|
|
|
32
36
|
onMouseEnter: createEventHandler(child.props.onMouseEnter, ctx.openDropdown),
|
|
33
37
|
onMouseLeave: createEventHandler(child.props.onMouseLeave, ctx.closeDropdown)
|
|
34
38
|
};
|
|
39
|
+
const clonedProps = {
|
|
40
|
+
...eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners,
|
|
41
|
+
ref: targetRef
|
|
42
|
+
};
|
|
35
43
|
return /* @__PURE__ */ jsx(Popover.Target, {
|
|
36
44
|
refProp,
|
|
37
45
|
...others,
|
|
38
|
-
children: cloneElement(child,
|
|
46
|
+
children: cloneElement(child, clonedProps)
|
|
39
47
|
});
|
|
40
48
|
}
|
|
41
49
|
HoverCardTarget.displayName = "@mantine/core/HoverCardTarget";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCardTarget.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement, use } from 'react';\nimport { createEventHandler, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n /**\n * Name of the prop to wrap event listeners in.\n * Use when the target component expects event listeners in a nested object.\n * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n * @default undefined (event listeners passed directly to component)\n */\n eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n 'HoverCardTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'HoverCard.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 = useHoverCardContext();\n const groupContext = use(HoverCardGroupContext);\n\n if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {\n const referenceProps = ctx.getReferenceProps();\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(\n child,\n eventPropsWrapperName\n ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }\n : { ...referenceProps, ref: ctx.reference }\n )}\n </Popover.Target>\n );\n }\n\n const onMouseEnter = createEventHandler((child.props as any).onMouseEnter, ctx.openDropdown);\n const onMouseLeave = createEventHandler((child.props as any).onMouseLeave, ctx.closeDropdown);\n\n const eventListeners = { onMouseEnter, onMouseLeave };\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(
|
|
1
|
+
{"version":3,"file":"HoverCardTarget.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement, use } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n /**\n * Name of the prop to wrap event listeners in.\n * Use when the target component expects event listeners in a nested object.\n * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n * @default undefined (event listeners passed directly to component)\n */\n eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n 'HoverCardTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'HoverCard.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 = useHoverCardContext();\n const groupContext = use(HoverCardGroupContext);\n const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);\n\n if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {\n const referenceProps = ctx.getReferenceProps();\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(\n child,\n eventPropsWrapperName\n ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }\n : { ...referenceProps, ref: ctx.reference }\n )}\n </Popover.Target>\n );\n }\n\n const onMouseEnter = createEventHandler((child.props as any).onMouseEnter, ctx.openDropdown);\n const onMouseLeave = createEventHandler((child.props as any).onMouseLeave, ctx.closeDropdown);\n\n const eventListeners = { onMouseEnter, onMouseLeave };\n\n const clonedProps: any = {\n ...(eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners),\n ref: targetRef,\n };\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(child, clonedProps)}\n </Popover.Target>\n );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAW,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAM,oBAAoB;CAChC,MAAM,eAAe,IAAI,qBAAqB;CAC9C,MAAM,YAAY,aAAa,WAAW,KAAK,GAAG,IAAI,YAAY;CAElE,IAAI,aAAa,eAAe,IAAI,qBAAqB,IAAI,WAAW;EACtE,MAAM,iBAAiB,IAAI,kBAAkB;EAE7C,OACE,oBAAC,QAAQ,QAAT;GAAyB;GAAS,GAAI;aACnC,aACC,OACA,wBACI,GAAG,wBAAwB;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,EAAE,IACrE;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,CAC9C;EACc,CAAA;CAEpB;CAKA,MAAM,iBAAiB;EAAE,cAHJ,mBAAoB,MAAM,MAAc,cAAc,IAAI,YAG3C;EAAG,cAFlB,mBAAoB,MAAM,MAAc,cAAc,IAAI,aAE7B;CAAE;CAEpD,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,KAAK;CACP;CAEA,OACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,GAAI;YACnC,aAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
|
|
@@ -11,6 +11,10 @@ function useHoverCard(settings) {
|
|
|
11
11
|
const uid = useId$1();
|
|
12
12
|
const openTimeout = useRef(-1);
|
|
13
13
|
const closeTimeout = useRef(-1);
|
|
14
|
+
const targetRef = useRef(null);
|
|
15
|
+
const assignTarget = useCallback((node) => {
|
|
16
|
+
targetRef.current = node;
|
|
17
|
+
}, []);
|
|
14
18
|
const clearTimeouts = useCallback(() => {
|
|
15
19
|
window.clearTimeout(openTimeout.current);
|
|
16
20
|
window.clearTimeout(closeTimeout.current);
|
|
@@ -64,11 +68,31 @@ function useHoverCard(settings) {
|
|
|
64
68
|
settings.closeDelay,
|
|
65
69
|
onChange
|
|
66
70
|
]);
|
|
71
|
+
const onChangeRef = useRef(onChange);
|
|
72
|
+
onChangeRef.current = onChange;
|
|
67
73
|
useEffect(() => () => clearTimeouts(), [clearTimeouts]);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
if (!opened || withinGroup || typeof IntersectionObserver === "undefined") return;
|
|
76
|
+
const node = targetRef.current;
|
|
77
|
+
if (!node) return;
|
|
78
|
+
const observer = new IntersectionObserver(() => {
|
|
79
|
+
if (!node.isConnected || node.getClientRects().length === 0) {
|
|
80
|
+
clearTimeouts();
|
|
81
|
+
onChangeRef.current(false);
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
observer.observe(node);
|
|
85
|
+
return () => observer.disconnect();
|
|
86
|
+
}, [
|
|
87
|
+
opened,
|
|
88
|
+
withinGroup,
|
|
89
|
+
clearTimeouts
|
|
90
|
+
]);
|
|
68
91
|
return {
|
|
69
92
|
opened,
|
|
70
93
|
reference: refs.setReference,
|
|
71
94
|
floating: refs.setFloating,
|
|
95
|
+
assignTarget,
|
|
72
96
|
getReferenceProps,
|
|
73
97
|
getFloatingProps,
|
|
74
98
|
openDropdown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hover-card.mjs","names":["useId"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n useDelayGroup,\n useDismiss,\n useFloating,\n useHover,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n openDelay?: number;\n closeDelay?: number;\n opened?: boolean;\n defaultOpened?: boolean;\n onOpen?: () => void;\n onClose?: () => void;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = use(HoverCardGroupContext).withinGroup;\n const uid = useId();\n\n const openTimeout = useRef(-1);\n const closeTimeout = useRef(-1);\n\n const clearTimeouts = useCallback(() => {\n window.clearTimeout(openTimeout.current);\n window.clearTimeout(closeTimeout.current);\n }, []);\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n settings.onOpen?.();\n } else {\n settings.onClose?.();\n }\n },\n [uid, settings.onOpen, settings.onClose]\n );\n\n const { context, refs } = useFloating({\n open: opened,\n onOpenChange: onChange,\n });\n\n const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: true,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n }),\n useRole(context, { role: 'dialog' }),\n useDismiss(context, { enabled: withinGroup }),\n ]);\n\n const openDropdown = useCallback(() => {\n if (withinGroup) {\n return; // Group mode handles this automatically\n }\n\n clearTimeouts();\n if (settings.openDelay === 0 || settings.openDelay === undefined) {\n onChange(true);\n } else {\n openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n }\n }, [withinGroup, clearTimeouts, settings.openDelay, onChange]);\n\n const closeDropdown = useCallback(() => {\n if (withinGroup) {\n return; // Group mode handles this automatically\n }\n\n clearTimeouts();\n if (settings.closeDelay === 0 || settings.closeDelay === undefined) {\n onChange(false);\n } else {\n closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n }\n }, [withinGroup, clearTimeouts, settings.closeDelay, onChange]);\n\n useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n return {\n opened,\n reference: refs.setReference,\n floating: refs.setFloating,\n getReferenceProps,\n getFloatingProps,\n openDropdown,\n closeDropdown,\n };\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,aAAa,UAAwB;CACnD,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,qBAAqB,EAAE;CAC/C,MAAM,MAAMA,QAAM;CAElB,MAAM,cAAc,OAAO,EAAE;CAC7B,MAAM,eAAe,OAAO,EAAE;
|
|
1
|
+
{"version":3,"file":"use-hover-card.mjs","names":["useId"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n useDelayGroup,\n useDismiss,\n useFloating,\n useHover,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n openDelay?: number;\n closeDelay?: number;\n opened?: boolean;\n defaultOpened?: boolean;\n onOpen?: () => void;\n onClose?: () => void;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = use(HoverCardGroupContext).withinGroup;\n const uid = useId();\n\n const openTimeout = useRef(-1);\n const closeTimeout = useRef(-1);\n const targetRef = useRef<HTMLElement | null>(null);\n\n const assignTarget = useCallback((node: HTMLElement | null) => {\n targetRef.current = node;\n }, []);\n\n const clearTimeouts = useCallback(() => {\n window.clearTimeout(openTimeout.current);\n window.clearTimeout(closeTimeout.current);\n }, []);\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n settings.onOpen?.();\n } else {\n settings.onClose?.();\n }\n },\n [uid, settings.onOpen, settings.onClose]\n );\n\n const { context, refs } = useFloating({\n open: opened,\n onOpenChange: onChange,\n });\n\n const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: true,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n }),\n useRole(context, { role: 'dialog' }),\n useDismiss(context, { enabled: withinGroup }),\n ]);\n\n const openDropdown = useCallback(() => {\n if (withinGroup) {\n return; // Group mode handles this automatically\n }\n\n clearTimeouts();\n if (settings.openDelay === 0 || settings.openDelay === undefined) {\n onChange(true);\n } else {\n openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n }\n }, [withinGroup, clearTimeouts, settings.openDelay, onChange]);\n\n const closeDropdown = useCallback(() => {\n if (withinGroup) {\n return; // Group mode handles this automatically\n }\n\n clearTimeouts();\n if (settings.closeDelay === 0 || settings.closeDelay === undefined) {\n onChange(false);\n } else {\n closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n }\n }, [withinGroup, clearTimeouts, settings.closeDelay, onChange]);\n\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n\n useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n useEffect(() => {\n if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n return undefined;\n }\n\n const node = targetRef.current;\n if (!node) {\n return undefined;\n }\n\n const observer = new IntersectionObserver(() => {\n if (!node.isConnected || node.getClientRects().length === 0) {\n clearTimeouts();\n onChangeRef.current(false);\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [opened, withinGroup, clearTimeouts]);\n\n return {\n opened,\n reference: refs.setReference,\n floating: refs.setFloating,\n assignTarget,\n getReferenceProps,\n getFloatingProps,\n openDropdown,\n closeDropdown,\n };\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,aAAa,UAAwB;CACnD,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,qBAAqB,EAAE;CAC/C,MAAM,MAAMA,QAAM;CAElB,MAAM,cAAc,OAAO,EAAE;CAC7B,MAAM,eAAe,OAAO,EAAE;CAC9B,MAAM,YAAY,OAA2B,IAAI;CAEjD,MAAM,eAAe,aAAa,SAA6B;EAC7D,UAAU,UAAU;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,kBAAkB;EACtC,OAAO,aAAa,YAAY,OAAO;EACvC,OAAO,aAAa,aAAa,OAAO;CAC1C,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SAAS;GACX,aAAa,GAAG;GAChB,SAAS,SAAS;EACpB,OACE,SAAS,UAAU;CAEvB,GACA;EAAC;EAAK,SAAS;EAAQ,SAAS;CAAO,CACzC;CAEA,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,MAAM;EACN,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAE9E,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS;GACT,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;EAC3F,CAAC;EACD,QAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;EACnC,WAAW,SAAS,EAAE,SAAS,YAAY,CAAC;CAC9C,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,aACF;EAGF,cAAc;EACd,IAAI,SAAS,cAAc,KAAK,SAAS,cAAc,KAAA,GACrD,SAAS,IAAI;OAEb,YAAY,UAAU,OAAO,iBAAiB,SAAS,IAAI,GAAG,SAAS,SAAS;CAEpF,GAAG;EAAC;EAAa;EAAe,SAAS;EAAW;CAAQ,CAAC;CAE7D,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,aACF;EAGF,cAAc;EACd,IAAI,SAAS,eAAe,KAAK,SAAS,eAAe,KAAA,GACvD,SAAS,KAAK;OAEd,aAAa,UAAU,OAAO,iBAAiB,SAAS,KAAK,GAAG,SAAS,UAAU;CAEvF,GAAG;EAAC;EAAa;EAAe,SAAS;EAAY;CAAQ,CAAC;CAE9D,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,sBAAsB,cAAc,GAAG,CAAC,aAAa,CAAC;CAEtD,gBAAgB;EACd,IAAI,CAAC,UAAU,eAAe,OAAO,yBAAyB,aAC5D;EAGF,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MACH;EAGF,MAAM,WAAW,IAAI,2BAA2B;GAC9C,IAAI,CAAC,KAAK,eAAe,KAAK,eAAe,EAAE,WAAW,GAAG;IAC3D,cAAc;IACd,YAAY,QAAQ,KAAK;GAC3B;EACF,CAAC;EAED,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,OAAO;EACL;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;CACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n margin-top: var(--input-margin-top, 0rem);\n margin-bottom: var(--input-margin-bottom, 0rem);\n\n --input-height-xs: 30px;\n --input-height-sm: 36px;\n --input-height-md: 42px;\n --input-height-lg: 50px;\n --input-height-xl: 60px;\n\n --input-padding-y-xs: 5px;\n --input-padding-y-sm: 6px;\n --input-padding-y-md: 8px;\n --input-padding-y-lg: 10px;\n --input-padding-y-xl: 13px;\n\n --input-height: var(--input-height-sm);\n --input-radius: var(--mantine-radius-default);\n\n --input-cursor: text;\n --input-line-height: calc(var(--input-height) - rem(2px));\n --input-padding: calc(var(--input-height) / 3);\n --input-padding-inline-start: var(--input-padding);\n --input-padding-inline-end: var(--input-padding);\n --input-placeholder-color: var(--mantine-color-placeholder);\n --input-color: var(--mantine-color-text);\n --input-disabled-bg: var(--mantine-color-disabled);\n --input-disabled-color: var(--mantine-color-disabled-color);\n\n --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n --input-right-section-size: var(\n --input-right-section-width,\n calc(var(--input-height) - rem(2px))\n );\n\n --input-size: var(--input-height);\n\n --section-y: 1px;\n --left-section-start: 1px;\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n --right-section-end: 1px;\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n &[data-variant='unstyled'] {\n --input-padding: 0;\n --input-padding-y: 0;\n --input-padding-inline-start: 0;\n --input-padding-inline-end: 0;\n }\n\n &[data-pointer] {\n --input-cursor: pointer;\n }\n\n &[data-with-bottom-section] {\n --input-bottom-section-height: 28px;\n }\n\n &[data-multiline] {\n --input-padding-y-xs: 4.5px;\n --input-padding-y-sm: 5.5px;\n --input-padding-y-md: 7px;\n --input-padding-y-lg: 9.5px;\n --input-padding-y-xl: 13px;\n\n --input-size: auto;\n --input-line-height: var(--mantine-line-height);\n }\n\n &[data-with-left-section] {\n --input-padding-inline-start: var(--input-left-section-size);\n }\n\n &[data-with-right-section] {\n --input-padding-inline-end: var(--input-right-section-size);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --input-padding-inline-end: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --input-padding-inline-end: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --input-padding-inline-end: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --input-padding-inline-end: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --input-padding-inline-end: 89px;\n }\n }\n }\n\n @mixin light {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-gray-4);\n --input-bg: var(--mantine-color-white);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-gray-1);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n @mixin dark {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-dark-4);\n --input-bg: var(--mantine-color-dark-6);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-dark-5);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n [data-mantine-color-scheme] &[data-error] {\n &:not([data-variant='unstyled']) {\n --input-bd: var(--mantine-color-error);\n }\n\n --input-color: var(--mantine-color-error);\n --input-placeholder-color: var(--mantine-color-error);\n --input-section-color: var(--mantine-color-error);\n }\n\n @mixin where-rtl {\n --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n }\n\n &[dir='ltr'] {\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n }\n}\n\n.input {\n -webkit-tap-highlight-color: transparent;\n appearance: none;\n resize: var(--input-resize, none);\n display: block;\n width: 100%;\n transition: border-color 100ms ease;\n\n text-align: start;\n color: var(--input-color);\n border: rem(1px) solid var(--input-bd);\n background-color: var(--input-bg);\n font-family: var(--input-font-family, var(--mantine-font-family));\n height: var(--input-size);\n min-height: var(--input-height);\n line-height: var(--input-line-height);\n font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n border-radius: var(--input-radius);\n padding-inline-start: var(--input-padding-inline-start);\n padding-inline-end: var(--input-padding-inline-end);\n padding-top: var(--input-padding-y, 0rem);\n padding-bottom: var(--input-padding-y, 0rem);\n cursor: var(--input-cursor);\n overflow: var(--input-overflow);\n\n /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n &[data-no-overflow] {\n --input-overflow: hidden;\n }\n\n /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n &[data-monospace] {\n --input-font-family: var(--mantine-font-family-monospace);\n --_input-fz: calc(var(--input-fz) - rem(2px));\n }\n\n &:focus,\n &:focus-within {\n outline: none;\n --input-bd: var(--input-bd-focus);\n\n [data-error] & {\n --input-bd: var(--mantine-color-error);\n }\n }\n\n &::placeholder {\n color: var(--input-placeholder-color);\n opacity: 1;\n }\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button,\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n &:disabled,\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n &:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n &[readonly] {\n caret-color: transparent;\n }\n\n [data-with-bottom-section] & {\n padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));\n }\n}\n\n.bottomSection {\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: var(--input-bottom-section-height);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding-inline: var(--input-padding);\n border-radius: 0 0 var(--input-radius) var(--input-radius);\n pointer-events: all;\n color: var(--mantine-color-dimmed);\n font-size: var(--input-fz, var(--mantine-font-size-sm));\n}\n\n.section {\n pointer-events: var(--section-pointer-events);\n position: absolute;\n z-index: 1;\n inset-inline-start: var(--section-start);\n inset-inline-end: var(--section-end);\n bottom: var(--section-y);\n top: var(--section-y);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--section-size);\n border-radius: var(--section-border-radius);\n color: var(--input-section-color, var(--mantine-color-dimmed));\n\n &[data-position='right'] {\n --section-pointer-events: var(--input-right-section-pointer-events);\n --section-end: var(--right-section-end);\n --section-size: var(--input-right-section-size);\n --section-border-radius: var(--right-section-border-radius);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --section-size: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --section-size: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --section-size: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --section-size: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --section-size: 89px;\n }\n }\n }\n\n &[data-position='left'] {\n --section-pointer-events: var(--input-left-section-pointer-events);\n --section-start: var(--left-section-start);\n --section-size: var(--input-left-section-size);\n --section-border-radius: var(--left-section-border-radius);\n }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n [data-error] & {\n --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n line-height: var(--mantine-line-height);\n}\n\n.label {\n display: inline-block;\n font-weight: var(--mantine-font-weight-medium);\n overflow-wrap: break-word;\n cursor: default;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n word-wrap: break-word;\n line-height: 1.2;\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.error {\n color: var(--mantine-color-error);\n font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n color: var(--mantine-color-dimmed);\n font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n margin-top: var(--input-margin-top, 0rem);\n margin-bottom: var(--input-margin-bottom, 0rem);\n\n --input-height-xs: 30px;\n --input-height-sm: 36px;\n --input-height-md: 42px;\n --input-height-lg: 50px;\n --input-height-xl: 60px;\n\n --input-padding-y-xs: 5px;\n --input-padding-y-sm: 6px;\n --input-padding-y-md: 8px;\n --input-padding-y-lg: 10px;\n --input-padding-y-xl: 13px;\n\n --input-height: var(--input-height-sm);\n --input-radius: var(--mantine-radius-default);\n\n --input-cursor: text;\n --input-line-height: calc(var(--input-height) - rem(2px));\n --input-padding: calc(var(--input-height) / 3);\n --input-padding-inline-start: var(--input-padding);\n --input-padding-inline-end: var(--input-padding);\n --input-placeholder-color: var(--mantine-color-placeholder);\n --input-color: var(--mantine-color-text);\n --input-disabled-bg: var(--mantine-color-disabled);\n --input-disabled-color: var(--mantine-color-disabled-color);\n\n --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n --input-right-section-size: var(\n --input-right-section-width,\n calc(var(--input-height) - rem(2px))\n );\n\n --input-size: var(--input-height);\n\n --section-y: 1px;\n --left-section-start: 1px;\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n --right-section-end: 1px;\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n &[data-variant='unstyled'] {\n --input-padding: 0;\n --input-padding-y: 0;\n --input-padding-inline-start: 0;\n --input-padding-inline-end: 0;\n }\n\n &[data-pointer] {\n --input-cursor: pointer;\n }\n\n &[data-with-bottom-section] {\n --input-bottom-section-height: 28px;\n }\n\n &[data-multiline] {\n --input-padding-y-xs: 4.5px;\n --input-padding-y-sm: 5.5px;\n --input-padding-y-md: 7px;\n --input-padding-y-lg: 9.5px;\n --input-padding-y-xl: 13px;\n\n --input-size: auto;\n --input-line-height: var(--mantine-line-height);\n }\n\n &[data-with-left-section] {\n --input-padding-inline-start: var(--input-left-section-size);\n }\n\n &[data-with-right-section] {\n --input-padding-inline-end: var(--input-right-section-size);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --input-padding-inline-end: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --input-padding-inline-end: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --input-padding-inline-end: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --input-padding-inline-end: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --input-padding-inline-end: 89px;\n }\n }\n }\n\n @mixin light {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-gray-4);\n --input-bg: var(--mantine-color-white);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-gray-1);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n @mixin dark {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-dark-4);\n --input-bg: var(--mantine-color-dark-6);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-dark-5);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n [data-mantine-color-scheme] &[data-error] {\n &:not([data-variant='unstyled']) {\n --input-bd: var(--mantine-color-error);\n }\n\n --input-color: var(--mantine-color-error);\n --input-placeholder-color: var(--mantine-color-error);\n --input-section-color: var(--mantine-color-error);\n }\n\n @mixin where-rtl {\n --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n }\n\n &[dir='ltr'] {\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n }\n}\n\n.input {\n -webkit-tap-highlight-color: transparent;\n appearance: none;\n resize: var(--input-resize, none);\n display: block;\n width: 100%;\n transition: border-color 100ms ease;\n\n text-align: var(--input-text-align, start);\n color: var(--input-color);\n border: rem(1px) solid var(--input-bd);\n background-color: var(--input-bg);\n font-family: var(--input-font-family, var(--mantine-font-family));\n height: var(--input-size);\n min-height: var(--input-height);\n line-height: var(--input-line-height);\n font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n border-radius: var(--input-radius);\n padding-inline-start: var(--input-padding-inline-start);\n padding-inline-end: var(--input-padding-inline-end);\n padding-top: var(--input-padding-y, 0rem);\n padding-bottom: var(--input-padding-y, 0rem);\n cursor: var(--input-cursor);\n overflow: var(--input-overflow);\n\n /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n &[data-no-overflow] {\n --input-overflow: hidden;\n }\n\n /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n &[data-monospace] {\n --input-font-family: var(--mantine-font-family-monospace);\n --_input-fz: calc(var(--input-fz) - rem(2px));\n }\n\n &:focus,\n &:focus-within {\n outline: none;\n --input-bd: var(--input-bd-focus);\n\n [data-error] & {\n --input-bd: var(--mantine-color-error);\n }\n }\n\n &::placeholder {\n color: var(--input-placeholder-color);\n opacity: 1;\n }\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button,\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n &:disabled,\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n &:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n &[readonly] {\n caret-color: transparent;\n }\n\n [data-with-bottom-section] & {\n padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));\n }\n}\n\n.bottomSection {\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: var(--input-bottom-section-height);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding-inline: var(--input-padding);\n border-radius: 0 0 var(--input-radius) var(--input-radius);\n pointer-events: all;\n color: var(--mantine-color-dimmed);\n font-size: var(--input-fz, var(--mantine-font-size-sm));\n}\n\n.section {\n pointer-events: var(--section-pointer-events);\n position: absolute;\n z-index: 1;\n inset-inline-start: var(--section-start);\n inset-inline-end: var(--section-end);\n bottom: var(--section-y);\n top: var(--section-y);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--section-size);\n border-radius: var(--section-border-radius);\n color: var(--input-section-color, var(--mantine-color-dimmed));\n\n &[data-position='right'] {\n --section-pointer-events: var(--input-right-section-pointer-events);\n --section-end: var(--right-section-end);\n --section-size: var(--input-right-section-size);\n --section-border-radius: var(--right-section-border-radius);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --section-size: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --section-size: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --section-size: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --section-size: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --section-size: 89px;\n }\n }\n }\n\n &[data-position='left'] {\n --section-pointer-events: var(--input-left-section-pointer-events);\n --section-start: var(--left-section-start);\n --section-size: var(--input-left-section-size);\n --section-border-radius: var(--left-section-border-radius);\n }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n [data-error] & {\n --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n line-height: var(--mantine-line-height);\n}\n\n.label {\n display: inline-block;\n font-weight: var(--mantine-font-weight-medium);\n overflow-wrap: break-word;\n cursor: default;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n word-wrap: break-word;\n line-height: 1.2;\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.error {\n color: var(--mantine-color-error);\n font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n color: var(--mantine-color-dimmed);\n font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}
|
|
@@ -2,20 +2,21 @@
|
|
|
2
2
|
import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
|
|
3
3
|
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
|
|
4
4
|
import { usePopoverContext } from "../../Popover/Popover.context.mjs";
|
|
5
|
-
import {
|
|
5
|
+
import { useContextMenuHandlers } from "../../../utils/Floating/use-context-menu-handlers.mjs";
|
|
6
6
|
import { useMenuContext } from "../Menu.context.mjs";
|
|
7
7
|
import { cloneElement } from "react";
|
|
8
8
|
//#region packages/@mantine/core/src/components/Menu/MenuContextMenu/MenuContextMenu.tsx
|
|
9
9
|
function MenuContextMenu(props) {
|
|
10
|
-
const { children, disabled } = useProps("MenuContextMenu", null, props);
|
|
10
|
+
const { children, disabled, longPressDelay } = useProps("MenuContextMenu", null, props);
|
|
11
11
|
const child = getSingleElementChild(children);
|
|
12
12
|
if (!child) throw new Error("Menu.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
|
|
13
13
|
const ctx = useMenuContext();
|
|
14
14
|
const popoverCtx = usePopoverContext();
|
|
15
|
-
return cloneElement(child,
|
|
15
|
+
return cloneElement(child, useContextMenuHandlers({
|
|
16
16
|
childProps: child.props,
|
|
17
17
|
disabled: disabled || popoverCtx.disabled,
|
|
18
18
|
opened: ctx.opened,
|
|
19
|
+
longPressDelay,
|
|
19
20
|
setReference: popoverCtx.reference,
|
|
20
21
|
open: () => ctx.openDropdown()
|
|
21
22
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContextMenu.mjs","names":[],"sources":["../../../../src/components/Menu/MenuContextMenu/MenuContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport {
|
|
1
|
+
{"version":3,"file":"MenuContextMenu.mjs","names":[],"sources":["../../../../src/components/Menu/MenuContextMenu/MenuContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport { useContextMenuHandlers } from '../../../utils/Floating/use-context-menu-handlers';\nimport { usePopoverContext } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\n\nexport interface MenuContextMenuProps {\n /** Element that opens the menu when right-clicked. Menu dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n children: React.ReactNode;\n\n /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n disabled?: boolean;\n\n /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */\n longPressDelay?: number;\n}\n\nexport function MenuContextMenu(props: MenuContextMenuProps) {\n const { children, disabled, longPressDelay } = useProps('MenuContextMenu', null, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Menu.ContextMenu 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 = useMenuContext();\n const popoverCtx = usePopoverContext();\n\n const handlers = useContextMenuHandlers({\n childProps: child.props as any,\n disabled: disabled || popoverCtx.disabled,\n opened: ctx.opened,\n longPressDelay,\n setReference: popoverCtx.reference as unknown as (node: object) => void,\n open: () => ctx.openDropdown(),\n });\n\n return cloneElement(child, handlers as any);\n}\n\nMenuContextMenu.displayName = '@mantine/core/MenuContextMenu';\n"],"mappings":";;;;;;;;AAiBA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,UAAU,mBAAmB,SAAS,mBAAmB,MAAM,KAAK;CAEtF,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAM,eAAe;CAC3B,MAAM,aAAa,kBAAkB;CAWrC,OAAO,aAAa,OATH,uBAAuB;EACtC,YAAY,MAAM;EAClB,UAAU,YAAY,WAAW;EACjC,QAAQ,IAAI;EACZ;EACA,cAAc,WAAW;EACzB,YAAY,IAAI,aAAa;CAC/B,CAEkC,CAAQ;AAC5C;AAEA,gBAAgB,cAAc"}
|
|
@@ -8,8 +8,8 @@ import { SubMenuContext } from "./MenuSub.context.mjs";
|
|
|
8
8
|
import { MenuSubDropdown } from "../MenuSubDropdown/MenuSubDropdown.mjs";
|
|
9
9
|
import { MenuSubItem } from "../MenuSubItem/MenuSubItem.mjs";
|
|
10
10
|
import { MenuSubTarget } from "../MenuSubTarget/MenuSubTarget.mjs";
|
|
11
|
-
import { use, useCallback, useRef } from "react";
|
|
12
|
-
import {
|
|
11
|
+
import { use, useCallback, useEffect, useRef } from "react";
|
|
12
|
+
import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
|
|
13
13
|
import { jsx } from "react/jsx-runtime";
|
|
14
14
|
import { safePolygon, useFloating, useHover, useInteractions } from "@floating-ui/react";
|
|
15
15
|
//#region packages/@mantine/core/src/components/Menu/MenuSub/MenuSub.tsx
|
|
@@ -22,15 +22,18 @@ const defaultProps = {
|
|
|
22
22
|
middlewares: { shift: { crossAxis: true } }
|
|
23
23
|
};
|
|
24
24
|
function MenuSub(_props) {
|
|
25
|
-
const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps("MenuSub", defaultProps, _props);
|
|
25
|
+
const { children, closeDelay, openDelay, position, safeAreaPolygon, opened: openedProp, onChange, ...others } = useProps("MenuSub", defaultProps, _props);
|
|
26
26
|
const id = useId$1();
|
|
27
|
-
const [opened,
|
|
27
|
+
const [opened, setOpened] = useUncontrolled({
|
|
28
|
+
value: openedProp,
|
|
29
|
+
finalValue: false,
|
|
30
|
+
onChange
|
|
31
|
+
});
|
|
28
32
|
const parentSubCtx = use(SubMenuContext);
|
|
29
33
|
const menuCtx = useMenuContext();
|
|
30
34
|
const { dir } = useDirection();
|
|
31
35
|
const resolvedPosition = getFloatingPosition(dir, position);
|
|
32
36
|
const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;
|
|
33
|
-
const unregisterRef = useRef(null);
|
|
34
37
|
const activeChildCloseRef = useRef(null);
|
|
35
38
|
const registerOpenSub = useCallback((closeFn) => {
|
|
36
39
|
const prev = activeChildCloseRef.current;
|
|
@@ -40,19 +43,18 @@ function MenuSub(_props) {
|
|
|
40
43
|
if (activeChildCloseRef.current === closeFn) activeChildCloseRef.current = null;
|
|
41
44
|
};
|
|
42
45
|
}, []);
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
const setOpenedRef = useRef(setOpened);
|
|
47
|
+
setOpenedRef.current = setOpened;
|
|
48
|
+
const handleOpen = useCallback(() => setOpenedRef.current(true), []);
|
|
49
|
+
const handleClose = useCallback(() => setOpenedRef.current(false), []);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (!opened) return;
|
|
52
|
+
return levelRegister(handleClose);
|
|
46
53
|
}, [
|
|
47
|
-
|
|
54
|
+
opened,
|
|
48
55
|
levelRegister,
|
|
49
|
-
|
|
56
|
+
handleClose
|
|
50
57
|
]);
|
|
51
|
-
const handleClose = useCallback(() => {
|
|
52
|
-
unregisterRef.current?.();
|
|
53
|
-
unregisterRef.current = null;
|
|
54
|
-
close();
|
|
55
|
-
}, [close]);
|
|
56
58
|
const { context, refs } = useFloating({
|
|
57
59
|
placement: resolvedPosition,
|
|
58
60
|
open: opened,
|
|
@@ -90,6 +92,7 @@ function MenuSub(_props) {
|
|
|
90
92
|
},
|
|
91
93
|
children: /* @__PURE__ */ jsx(Popover, {
|
|
92
94
|
opened,
|
|
95
|
+
onChange: (nextOpened) => nextOpened ? handleOpen() : handleClose(),
|
|
93
96
|
withinPortal: false,
|
|
94
97
|
withArrow: false,
|
|
95
98
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSub.mjs","names":["useId"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport {\n safePolygon,\n useFloating,\n useHover,\n useInteractions,\n type SafePolygonOptions,\n} from '@floating-ui/react';\nimport {
|
|
1
|
+
{"version":3,"file":"MenuSub.mjs","names":["useId"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useEffect, useRef } from 'react';\nimport {\n safePolygon,\n useFloating,\n useHover,\n useInteractions,\n type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n FloatingAxesOffsets,\n FloatingPosition,\n getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n children: React.ReactNode;\n\n /** Controlled opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Open delay in ms, applicable when hover trigger is used */\n openDelay?: number;\n\n /** Close delay in ms, applicable when hover trigger is used */\n closeDelay?: number;\n\n /** Dropdown position relative to the target element @default 'right-start' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 0 */\n offset?: number | FloatingAxesOffsets;\n\n /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n transitionProps?: TransitionOverride;\n\n /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n offset: 0,\n position: 'right-start',\n safeAreaPolygon: true,\n transitionProps: { duration: 0 },\n openDelay: 0,\n middlewares: {\n shift: {\n // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n crossAxis: true,\n },\n },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n const {\n children,\n closeDelay,\n openDelay,\n position,\n safeAreaPolygon,\n opened: openedProp,\n onChange,\n ...others\n } = useProps('MenuSub', defaultProps, _props);\n const id = useId();\n const [opened, setOpened] = useUncontrolled({\n value: openedProp,\n finalValue: false,\n onChange,\n });\n const parentSubCtx = use(SubMenuContext);\n const menuCtx = useMenuContext();\n const { dir } = useDirection();\n const resolvedPosition = getFloatingPosition(dir, position);\n\n const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n\n const activeChildCloseRef = useRef<(() => void) | null>(null);\n const registerOpenSub = useCallback((closeFn: () => void) => {\n const prev = activeChildCloseRef.current;\n if (prev && prev !== closeFn) {\n prev();\n }\n activeChildCloseRef.current = closeFn;\n return () => {\n if (activeChildCloseRef.current === closeFn) {\n activeChildCloseRef.current = null;\n }\n };\n }, []);\n\n const setOpenedRef = useRef(setOpened);\n setOpenedRef.current = setOpened;\n\n const handleOpen = useCallback(() => setOpenedRef.current(true), []);\n const handleClose = useCallback(() => setOpenedRef.current(false), []);\n\n useEffect(() => {\n if (!opened) {\n return undefined;\n }\n\n return levelRegister(handleClose);\n }, [opened, levelRegister, handleClose]);\n\n const { context, refs } = useFloating({\n placement: resolvedPosition,\n open: opened,\n onOpenChange: (nextOpen) => {\n if (nextOpen) {\n handleOpen();\n } else {\n handleClose();\n }\n },\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n handleClose: safeAreaPolygon\n ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n : undefined,\n delay: { open: openDelay, close: closeDelay },\n }),\n ]);\n\n const focusFirstItem = () =>\n window.setTimeout(() => {\n document\n .getElementById(`${id}-dropdown`)\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n ?.focus();\n }, 16);\n\n const focusParentItem = () =>\n window.setTimeout(() => {\n document.getElementById(`${id}-target`)?.focus();\n }, 16);\n\n return (\n <SubMenuContext\n value={{\n opened,\n close: handleClose,\n open: handleOpen,\n focusFirstItem,\n focusParentItem,\n parentContext: parentSubCtx,\n setReference: refs.setReference,\n setFloating: refs.setFloating,\n getReferenceProps,\n getFloatingProps,\n registerOpenSub,\n }}\n >\n <Popover\n opened={opened}\n onChange={(nextOpened) => (nextOpened ? handleOpen() : handleClose())}\n withinPortal={false}\n withArrow={false}\n id={id}\n position={position}\n {...others}\n >\n {children}\n </Popover>\n </SubMenuContext>\n );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;AAuDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EACJ,UACA,YACA,WACA,UACA,iBACA,QAAQ,YACR,UACA,GAAG,WACD,SAAS,WAAW,cAAc,MAAM;CAC5C,MAAM,KAAKA,QAAM;CACjB,MAAM,CAAC,QAAQ,aAAa,gBAAgB;EAC1C,OAAO;EACP,YAAY;EACZ;CACF,CAAC;CACD,MAAM,eAAe,IAAI,cAAc;CACvC,MAAM,UAAU,eAAe;CAC/B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,mBAAmB,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAE/D,MAAM,sBAAsB,OAA4B,IAAI;CAC5D,MAAM,kBAAkB,aAAa,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,OAAO,SAAS;CACrC,aAAa,UAAU;CAEvB,MAAM,aAAa,kBAAkB,aAAa,QAAQ,IAAI,GAAG,CAAC,CAAC;CACnE,MAAM,cAAc,kBAAkB,aAAa,QAAQ,KAAK,GAAG,CAAC,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,OAAO,cAAc,WAAW;CAClC,GAAG;EAAC;EAAQ;EAAe;CAAW,CAAC;CAEvC,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAC9D,SAAS,SAAS;EAChB,aAAa,kBACT,YAAY,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACU;GACR,WAAW,eAAgB,aAAa,WAAW,IAAI,YAAY;GACnE,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.icons.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.icons.tsx"],"sourcesContent":["interface _PaginationIconProps {\n path: string;\n stroke?: any;\n style?: React.CSSProperties;\n className?: string;\n children?: React.ReactNode;\n}\n\nexport type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;\nexport type PaginationIcon = React.FC<PaginationIconProps>;\n\nfunction PaginationIcon({ style, children, path, ...others }: _PaginationIconProps) {\n return (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n width: 'calc(var(--pagination-control-size) / 1.8)',\n height: 'calc(var(--pagination-control-size) / 1.8)',\n ...style,\n }}\n {...others}\n >\n <path d={path} fill=\"currentColor\" />\n </svg>\n );\n}\n\nexport const PaginationNextIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n />\n);\n\nexport const PaginationPreviousIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n />\n);\n\nexport const PaginationFirstIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n />\n);\n\nexport const PaginationLastIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n />\n);\n\nexport const PaginationDotsIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n />\n);\n"],"mappings":";;;AAWA,SAAS,eAAe,EAAE,OAAO,UAAU,MAAM,GAAG,UAAgC;CAClF,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,OAAM;EACN,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,GAAI;YAEJ,oBAAC,QAAD;GAAM,GAAG;GAAM,MAAK;EAAgB,CAAA;CACjC,CAAA;AAET;AAEA,MAAa,sBAAsB,UACjC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,0BAA0B,UACrC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,uBAAuB,UAClC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA"}
|
|
1
|
+
{"version":3,"file":"Pagination.icons.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.icons.tsx"],"sourcesContent":["interface _PaginationIconProps {\n path: string;\n stroke?: any;\n style?: React.CSSProperties;\n className?: string | undefined;\n children?: React.ReactNode;\n}\n\nexport type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;\nexport type PaginationIcon = React.FC<PaginationIconProps>;\n\nfunction PaginationIcon({ style, children, path, ...others }: _PaginationIconProps) {\n return (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n width: 'calc(var(--pagination-control-size) / 1.8)',\n height: 'calc(var(--pagination-control-size) / 1.8)',\n ...style,\n }}\n {...others}\n >\n <path d={path} fill=\"currentColor\" />\n </svg>\n );\n}\n\nexport const PaginationNextIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n />\n);\n\nexport const PaginationPreviousIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n />\n);\n\nexport const PaginationFirstIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n />\n);\n\nexport const PaginationLastIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n />\n);\n\nexport const PaginationDotsIcon = (props: PaginationIconProps) => (\n <PaginationIcon\n {...props}\n path=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n />\n);\n"],"mappings":";;;AAWA,SAAS,eAAe,EAAE,OAAO,UAAU,MAAM,GAAG,UAAgC;CAClF,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,OAAM;EACN,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,GAAI;YAEJ,oBAAC,QAAD;GAAM,GAAG;GAAM,MAAK;EAAgB,CAAA;CACjC,CAAA;AAET;AAEA,MAAa,sBAAsB,UACjC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,0BAA0B,UACrC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,uBAAuB,UAClC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA;AAGH,MAAa,sBAAsB,UACjC,oBAAC,gBAAD;CACE,GAAI;CACJ,MAAK;AACN,CAAA"}
|
|
@@ -29,7 +29,7 @@ const PasswordInput = factory((_props) => {
|
|
|
29
29
|
"InputWrapper",
|
|
30
30
|
"PasswordInput"
|
|
31
31
|
], defaultProps, _props);
|
|
32
|
-
const { classNames, className, style, styles, unstyled, vars, required, error, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, mod, attributes, ...others } = props;
|
|
32
|
+
const { classNames, className, style, styles, unstyled, vars, required, error, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, mod, attributes, dir, ...others } = props;
|
|
33
33
|
const uuid = useId(id);
|
|
34
34
|
const [_visible, setVisibility] = useUncontrolled({
|
|
35
35
|
value: visible,
|
|
@@ -126,6 +126,7 @@ const PasswordInput = factory((_props) => {
|
|
|
126
126
|
...wrapperProps,
|
|
127
127
|
children: /* @__PURE__ */ jsx(Input, {
|
|
128
128
|
component: "div",
|
|
129
|
+
dir,
|
|
129
130
|
error,
|
|
130
131
|
leftSection,
|
|
131
132
|
size,
|
|
@@ -157,6 +158,7 @@ const PasswordInput = factory((_props) => {
|
|
|
157
158
|
...getStyles("innerInput"),
|
|
158
159
|
disabled,
|
|
159
160
|
id: uuid,
|
|
161
|
+
dir,
|
|
160
162
|
...rest,
|
|
161
163
|
"aria-describedby": describedBy,
|
|
162
164
|
autoComplete: rest.autoComplete || "off",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n | 'root'\n | 'visibilityToggle'\n | 'innerInput'\n | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<PasswordInputFactory>,\n ElementProps<'input', 'size'> {\n /** A component to replace the visibility toggle icon */\n visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n /** Props passed down to the visibility toggle button */\n visibilityToggleButtonProps?: Record<string, any>;\n\n /** If set, the input value is visible */\n visible?: boolean;\n\n /** If set, the input value is visible by default */\n defaultVisible?: boolean;\n\n /** Called when visibility changes */\n onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n props: PasswordInputProps;\n ref: HTMLInputElement;\n stylesNames: PasswordInputStylesNames;\n vars: PasswordInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n visibilityToggleIcon: PasswordToggleIcon,\n size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n root: {\n '--psi-icon-size': getSize(size, 'psi-icon-size'),\n '--psi-button-size': getSize(size, 'psi-button-size'),\n },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n required,\n error,\n leftSection,\n disabled,\n id,\n variant,\n inputContainer,\n description,\n label,\n size,\n errorProps,\n descriptionProps,\n labelProps,\n withAsterisk,\n inputWrapperOrder,\n wrapperProps,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionWidth,\n visible,\n defaultVisible,\n onVisibilityChange,\n visibilityToggleIcon: VisibilityToggleIcon,\n visibilityToggleButtonProps,\n rightSectionProps,\n leftSectionProps,\n leftSectionPointerEvents,\n withErrorStyles,\n mod,\n attributes,\n ...others\n } = props;\n\n const uuid = useId(id);\n\n const [_visible, setVisibility] = useUncontrolled({\n value: visible,\n defaultValue: defaultVisible,\n finalValue: false,\n onChange: onVisibilityChange,\n });\n\n const toggleVisibility = () => setVisibility(!_visible);\n\n const getStyles = useStyles<PasswordInputFactory>({\n name: 'PasswordInput',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const errorId = errorProps?.id || `${uuid}-error`;\n const descriptionId = descriptionProps?.id || `${uuid}-description`;\n const hasError = !!error && typeof error !== 'boolean';\n const hasDescription = !!description;\n const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const visibilityToggleButton = (\n <ActionIcon<'button'>\n {...getStyles('visibilityToggle')}\n disabled={disabled}\n radius={radius}\n aria-pressed={_visible}\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n {...visibilityToggleButtonProps}\n variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n color=\"gray\"\n unstyled={unstyled}\n onTouchEnd={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onTouchEnd?.(event);\n toggleVisibility();\n }}\n onMouseDown={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onMouseDown?.(event);\n toggleVisibility();\n }}\n onKeyDown={(event) => {\n visibilityToggleButtonProps?.onKeyDown?.(event);\n if (event.key === ' ') {\n event.preventDefault();\n toggleVisibility();\n }\n }}\n >\n <VisibilityToggleIcon reveal={_visible} />\n </ActionIcon>\n );\n\n return (\n <Input.Wrapper\n required={required}\n id={uuid}\n label={label}\n error={error}\n description={description}\n size={size}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n unstyled={unstyled}\n withAsterisk={withAsterisk}\n inputWrapperOrder={inputWrapperOrder}\n inputContainer={inputContainer}\n variant={variant}\n labelProps={{ ...labelProps, htmlFor: uuid }}\n descriptionProps={{ ...descriptionProps, id: descriptionId }}\n errorProps={{ ...errorProps, id: errorId }}\n mod={mod}\n attributes={attributes}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <Input\n component=\"div\"\n error={error}\n leftSection={leftSection}\n size={size}\n classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n styles={resolvedStyles}\n radius={radius}\n disabled={disabled}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n rightSectionWidth={rightSectionWidth}\n rightSection={rightSection ?? visibilityToggleButton}\n variant={variant}\n unstyled={unstyled}\n leftSectionWidth={leftSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n rightSectionProps={rightSectionProps}\n leftSectionProps={leftSectionProps}\n leftSectionPointerEvents={leftSectionPointerEvents}\n withAria={false}\n withErrorStyles={withErrorStyles}\n attributes={attributes}\n >\n <input\n required={required}\n data-invalid={!!error || undefined}\n data-with-left-section={!!leftSection || undefined}\n {...getStyles('innerInput')}\n disabled={disabled}\n id={uuid}\n {...rest}\n aria-describedby={describedBy}\n autoComplete={rest.autoComplete || 'off'}\n type={_visible ? 'text' : 'password'}\n />\n </Input>\n </Input.Wrapper>\n );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n export type Props = PasswordInputProps;\n export type StylesNames = PasswordInputStylesNames;\n export type CssVariables = PasswordInputCssVariables;\n export type Factory = PasswordInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,sBAAsB;CACtB,MAAM;AACR;AAEA,MAAM,eAAe,oBAA0C,GAAG,EAAE,YAAY,EAC9E,MAAM;CACJ,mBAAmB,QAAQ,MAAM,eAAe;CAChD,qBAAqB,QAAQ,MAAM,iBAAiB;AACtD,EACF,EAAE;AAEF,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAe,GAAG,cAAc,MAAM;CACvF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,OACA,aACA,UACA,IACA,SACA,gBACA,aACA,OACA,MACA,YACA,kBACA,YACA,cACA,mBACA,cACA,QACA,cACA,mBACA,2BACA,kBACA,SACA,gBACA,oBACA,sBAAsB,sBACtB,6BACA,mBACA,kBACA,0BACA,iBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAO,MAAM,EAAE;CAErB,MAAM,CAAC,UAAU,iBAAiB,gBAAgB;EAChD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,yBAAyB,cAAc,CAAC,QAAQ;CAEtD,MAAM,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAA2C;EACxF;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,UAAU,YAAY,MAAM,GAAG,KAAK;CAC1C,MAAM,gBAAgB,kBAAkB,MAAM,GAAG,KAAK;CAGtD,MAAM,eAAe,GAFJ,CAAC,CAAC,SAAS,OAAO,UAAU,YAEV,UAAU,GAAG,GAAG,CAD3B,CAAC,cAC2C,gBAAgB;CACpF,MAAM,cAAc,aAAa,KAAK,EAAE,SAAS,IAAI,aAAa,KAAK,IAAI,KAAA;CAE3E,MAAM,yBACJ,oBAAC,YAAD;EACE,GAAI,UAAU,kBAAkB;EACtB;EACF;EACR,gBAAc;EACd,UAAU;EACV,cAAW;EACX,GAAI;EACJ,SAAS,6BAA6B,WAAW;EACjD,OAAM;EACI;EACV,aAAa,UAAU;GACrB,MAAM,eAAe;GACrB,6BAA6B,aAAa,KAAK;GAC/C,iBAAiB;EACnB;EACA,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,6BAA6B,cAAc,KAAK;GAChD,iBAAiB;EACnB;EACA,YAAY,UAAU;GACpB,6BAA6B,YAAY,KAAK;GAC9C,IAAI,MAAM,QAAQ,KAAK;IACrB,MAAM,eAAe;IACrB,iBAAiB;GACnB;EACF;YAEA,oBAAC,sBAAD,EAAsB,QAAQ,SAAW,CAAA;CAC/B,CAAA;CAGd,OACE,oBAAC,MAAM,SAAP;EACY;EACV,IAAI;EACG;EACA;EACM;EACP;EACN,YAAY;EACZ,QAAQ;EACR,kBAAiB;EACjB,kBAAkB;EACR;EACI;EACK;EACH;EACP;EACT,YAAY;GAAE,GAAG;GAAY,SAAS;EAAK;EAC3C,kBAAkB;GAAE,GAAG;GAAkB,IAAI;EAAc;EAC3D,YAAY;GAAE,GAAG;GAAY,IAAI;EAAQ;EACpC;EACO;EACZ,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACH;GACM;GACP;GACN,YAAY;IAAE,GAAG;IAAoB,OAAO,GAAGA,6BAAQ,OAAO,oBAAoB,KAAK;GAAE;GACzF,QAAQ;GACA;GACE;GACV,kBAAiB;GACjB,kBAAkB;GACC;GACnB,cAAc,gBAAgB;GACrB;GACC;GACQ;GAClB,2BAA2B,6BAA6B;GACrC;GACD;GACQ;GAC1B,UAAU;GACO;GACL;aAEZ,oBAAC,SAAD;IACY;IACV,gBAAc,CAAC,CAAC,SAAS,KAAA;IACzB,0BAAwB,CAAC,CAAC,eAAe,KAAA;IACzC,GAAI,UAAU,YAAY;IAChB;IACV,IAAI;IACJ,GAAI;IACJ,oBAAkB;IAClB,cAAc,KAAK,gBAAgB;IACnC,MAAM,WAAW,SAAS;GAC3B,CAAA;EACI,CAAA;CACM,CAAA;AAEnB,CAAC;AAED,cAAc,UAAU;CAAE,GAAG,UAAU;CAAS,GAAGA;AAAQ;AAC3D,cAAc,eAAe;AAC7B,cAAc,cAAc"}
|
|
1
|
+
{"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n | 'root'\n | 'visibilityToggle'\n | 'innerInput'\n | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n extends\n BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n StylesApiProps<PasswordInputFactory>,\n ElementProps<'input', 'size'> {\n /** A component to replace the visibility toggle icon */\n visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n /** Props passed down to the visibility toggle button */\n visibilityToggleButtonProps?: Record<string, any>;\n\n /** If set, the input value is visible */\n visible?: boolean;\n\n /** If set, the input value is visible by default */\n defaultVisible?: boolean;\n\n /** Called when visibility changes */\n onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n props: PasswordInputProps;\n ref: HTMLInputElement;\n stylesNames: PasswordInputStylesNames;\n vars: PasswordInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n visibilityToggleIcon: PasswordToggleIcon,\n size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n root: {\n '--psi-icon-size': getSize(size, 'psi-icon-size'),\n '--psi-button-size': getSize(size, 'psi-button-size'),\n },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n required,\n error,\n leftSection,\n disabled,\n id,\n variant,\n inputContainer,\n description,\n label,\n size,\n errorProps,\n descriptionProps,\n labelProps,\n withAsterisk,\n inputWrapperOrder,\n wrapperProps,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionWidth,\n visible,\n defaultVisible,\n onVisibilityChange,\n visibilityToggleIcon: VisibilityToggleIcon,\n visibilityToggleButtonProps,\n rightSectionProps,\n leftSectionProps,\n leftSectionPointerEvents,\n withErrorStyles,\n mod,\n attributes,\n dir,\n ...others\n } = props;\n\n const uuid = useId(id);\n\n const [_visible, setVisibility] = useUncontrolled({\n value: visible,\n defaultValue: defaultVisible,\n finalValue: false,\n onChange: onVisibilityChange,\n });\n\n const toggleVisibility = () => setVisibility(!_visible);\n\n const getStyles = useStyles<PasswordInputFactory>({\n name: 'PasswordInput',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const errorId = errorProps?.id || `${uuid}-error`;\n const descriptionId = descriptionProps?.id || `${uuid}-description`;\n const hasError = !!error && typeof error !== 'boolean';\n const hasDescription = !!description;\n const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const visibilityToggleButton = (\n <ActionIcon<'button'>\n {...getStyles('visibilityToggle')}\n disabled={disabled}\n radius={radius}\n aria-pressed={_visible}\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n {...visibilityToggleButtonProps}\n variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n color=\"gray\"\n unstyled={unstyled}\n onTouchEnd={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onTouchEnd?.(event);\n toggleVisibility();\n }}\n onMouseDown={(event) => {\n event.preventDefault();\n visibilityToggleButtonProps?.onMouseDown?.(event);\n toggleVisibility();\n }}\n onKeyDown={(event) => {\n visibilityToggleButtonProps?.onKeyDown?.(event);\n if (event.key === ' ') {\n event.preventDefault();\n toggleVisibility();\n }\n }}\n >\n <VisibilityToggleIcon reveal={_visible} />\n </ActionIcon>\n );\n\n return (\n <Input.Wrapper\n required={required}\n id={uuid}\n label={label}\n error={error}\n description={description}\n size={size}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n unstyled={unstyled}\n withAsterisk={withAsterisk}\n inputWrapperOrder={inputWrapperOrder}\n inputContainer={inputContainer}\n variant={variant}\n labelProps={{ ...labelProps, htmlFor: uuid }}\n descriptionProps={{ ...descriptionProps, id: descriptionId }}\n errorProps={{ ...errorProps, id: errorId }}\n mod={mod}\n attributes={attributes}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <Input\n component=\"div\"\n dir={dir}\n error={error}\n leftSection={leftSection}\n size={size}\n classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n styles={resolvedStyles}\n radius={radius}\n disabled={disabled}\n __staticSelector=\"PasswordInput\"\n __stylesApiProps={props}\n rightSectionWidth={rightSectionWidth}\n rightSection={rightSection ?? visibilityToggleButton}\n variant={variant}\n unstyled={unstyled}\n leftSectionWidth={leftSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n rightSectionProps={rightSectionProps}\n leftSectionProps={leftSectionProps}\n leftSectionPointerEvents={leftSectionPointerEvents}\n withAria={false}\n withErrorStyles={withErrorStyles}\n attributes={attributes}\n >\n <input\n required={required}\n data-invalid={!!error || undefined}\n data-with-left-section={!!leftSection || undefined}\n {...getStyles('innerInput')}\n disabled={disabled}\n id={uuid}\n dir={dir}\n {...rest}\n aria-describedby={describedBy}\n autoComplete={rest.autoComplete || 'off'}\n type={_visible ? 'text' : 'password'}\n />\n </Input>\n </Input.Wrapper>\n );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n export type Props = PasswordInputProps;\n export type StylesNames = PasswordInputStylesNames;\n export type CssVariables = PasswordInputCssVariables;\n export type Factory = PasswordInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,sBAAsB;CACtB,MAAM;AACR;AAEA,MAAM,eAAe,oBAA0C,GAAG,EAAE,YAAY,EAC9E,MAAM;CACJ,mBAAmB,QAAQ,MAAM,eAAe;CAChD,qBAAqB,QAAQ,MAAM,iBAAiB;AACtD,EACF,EAAE;AAEF,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAe,GAAG,cAAc,MAAM;CACvF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,OACA,aACA,UACA,IACA,SACA,gBACA,aACA,OACA,MACA,YACA,kBACA,YACA,cACA,mBACA,cACA,QACA,cACA,mBACA,2BACA,kBACA,SACA,gBACA,oBACA,sBAAsB,sBACtB,6BACA,mBACA,kBACA,0BACA,iBACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,OAAO,MAAM,EAAE;CAErB,MAAM,CAAC,UAAU,iBAAiB,gBAAgB;EAChD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,yBAAyB,cAAc,CAAC,QAAQ;CAEtD,MAAM,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAA2C;EACxF;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,UAAU,YAAY,MAAM,GAAG,KAAK;CAC1C,MAAM,gBAAgB,kBAAkB,MAAM,GAAG,KAAK;CAGtD,MAAM,eAAe,GAFJ,CAAC,CAAC,SAAS,OAAO,UAAU,YAEV,UAAU,GAAG,GAAG,CAD3B,CAAC,cAC2C,gBAAgB;CACpF,MAAM,cAAc,aAAa,KAAK,EAAE,SAAS,IAAI,aAAa,KAAK,IAAI,KAAA;CAE3E,MAAM,yBACJ,oBAAC,YAAD;EACE,GAAI,UAAU,kBAAkB;EACtB;EACF;EACR,gBAAc;EACd,UAAU;EACV,cAAW;EACX,GAAI;EACJ,SAAS,6BAA6B,WAAW;EACjD,OAAM;EACI;EACV,aAAa,UAAU;GACrB,MAAM,eAAe;GACrB,6BAA6B,aAAa,KAAK;GAC/C,iBAAiB;EACnB;EACA,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,6BAA6B,cAAc,KAAK;GAChD,iBAAiB;EACnB;EACA,YAAY,UAAU;GACpB,6BAA6B,YAAY,KAAK;GAC9C,IAAI,MAAM,QAAQ,KAAK;IACrB,MAAM,eAAe;IACrB,iBAAiB;GACnB;EACF;YAEA,oBAAC,sBAAD,EAAsB,QAAQ,SAAW,CAAA;CAC/B,CAAA;CAGd,OACE,oBAAC,MAAM,SAAP;EACY;EACV,IAAI;EACG;EACA;EACM;EACP;EACN,YAAY;EACZ,QAAQ;EACR,kBAAiB;EACjB,kBAAkB;EACR;EACI;EACK;EACH;EACP;EACT,YAAY;GAAE,GAAG;GAAY,SAAS;EAAK;EAC3C,kBAAkB;GAAE,GAAG;GAAkB,IAAI;EAAc;EAC3D,YAAY;GAAE,GAAG;GAAY,IAAI;EAAQ;EACpC;EACO;EACZ,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACL;GACE;GACM;GACP;GACN,YAAY;IAAE,GAAG;IAAoB,OAAO,GAAGA,6BAAQ,OAAO,oBAAoB,KAAK;GAAE;GACzF,QAAQ;GACA;GACE;GACV,kBAAiB;GACjB,kBAAkB;GACC;GACnB,cAAc,gBAAgB;GACrB;GACC;GACQ;GAClB,2BAA2B,6BAA6B;GACrC;GACD;GACQ;GAC1B,UAAU;GACO;GACL;aAEZ,oBAAC,SAAD;IACY;IACV,gBAAc,CAAC,CAAC,SAAS,KAAA;IACzB,0BAAwB,CAAC,CAAC,eAAe,KAAA;IACzC,GAAI,UAAU,YAAY;IAChB;IACV,IAAI;IACC;IACL,GAAI;IACJ,oBAAkB;IAClB,cAAc,KAAK,gBAAgB;IACnC,MAAM,WAAW,SAAS;GAC3B,CAAA;EACI,CAAA;CACM,CAAA;AAEnB,CAAC;AAED,cAAc,UAAU;CAAE,GAAG,UAAU;CAAS,GAAGA;AAAQ;AAC3D,cAAc,eAAe;AAC7B,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.context.mjs","names":[],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n ClassNames,\n createSafeContext,\n GetStylesApi,\n MantineRadius,\n MantineShadow,\n Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n x: number;\n y: number;\n arrowX: number | undefined;\n arrowY: number | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: HTMLElement) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean | undefined;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean | undefined;\n placement: FloatingPosition;\n withinPortal: boolean | undefined;\n portalProps?: BasePortalProps;\n closeOnEscape: boolean | undefined;\n zIndex: string | number | undefined;\n radius?: MantineRadius | undefined;\n shadow?: MantineShadow | undefined;\n onClose?: () => void;\n onDismiss?: () => void;\n getDropdownId: () => string;\n getTargetId: () => string;\n controlled: boolean;\n onToggle: () => void;\n withRoles: boolean | undefined;\n targetProps: Record<string, any>;\n disabled: boolean | undefined;\n returnFocus: boolean | undefined;\n classNames: ClassNames<PopoverFactory> | undefined;\n styles: Styles<PopoverFactory> | undefined;\n unstyled: boolean | undefined;\n __staticSelector: string;\n variant: string | undefined;\n keepMounted: boolean | undefined;\n getStyles: GetStylesApi<PopoverFactory>;\n resolvedStyles: Record<string, any> | undefined;\n floatingStrategy: FloatingStrategy | undefined;\n referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n 'Popover component was not found in the tree'\n);\n"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"Popover.context.mjs","names":[],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n ClassNames,\n createSafeContext,\n GetStylesApi,\n MantineRadius,\n MantineShadow,\n Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n x: number;\n y: number;\n arrowX: number | undefined;\n arrowY: number | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: HTMLElement) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean | undefined;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean | undefined;\n placement: FloatingPosition;\n withinPortal: boolean | undefined;\n portalProps?: BasePortalProps;\n closeOnEscape: boolean | undefined;\n zIndex: string | number | undefined;\n radius?: MantineRadius | undefined;\n shadow?: MantineShadow | undefined;\n onClose?: () => void;\n onDismiss?: () => void;\n getDropdownId: () => string;\n getTargetId: () => string;\n controlled: boolean;\n onToggle: () => void;\n withRoles: boolean | undefined;\n targetProps: Record<string, any>;\n disabled: boolean | undefined;\n returnFocus: boolean | undefined;\n classNames: ClassNames<PopoverFactory> | undefined;\n styles: Styles<PopoverFactory> | undefined;\n unstyled: boolean | undefined;\n __staticSelector: string;\n variant: string | undefined;\n keepMounted: boolean | undefined;\n keepMountedMode: 'activity' | 'display-none' | undefined;\n getStyles: GetStylesApi<PopoverFactory>;\n resolvedStyles: Record<string, any> | undefined;\n floatingStrategy: FloatingStrategy | undefined;\n referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n 'Popover component was not found in the tree'\n);\n"],"mappings":";;;AA6DA,MAAa,CAAC,wBAAwB,qBAAqB,kBACzD,6CACF"}
|