@mantine/core 9.6.0 → 9.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Accordion/Accordion.module.cjs.map +1 -1
- package/cjs/components/Drawer/Drawer.cjs +2 -1
- package/cjs/components/Drawer/Drawer.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerStack.cjs +3 -1
- package/cjs/components/Drawer/DrawerStack.cjs.map +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.cjs +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
- package/cjs/components/Modal/Modal.cjs +2 -1
- package/cjs/components/Modal/Modal.cjs.map +1 -1
- package/cjs/components/Modal/ModalStack.cjs +3 -1
- package/cjs/components/Modal/ModalStack.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBase.cjs +3 -2
- package/cjs/components/ModalBase/ModalBase.cjs.map +1 -1
- package/cjs/components/ModalBase/use-modal.cjs +7 -2
- package/cjs/components/ModalBase/use-modal.cjs.map +1 -1
- package/cjs/components/OverflowList/use-dimensions.cjs +9 -9
- package/cjs/components/OverflowList/use-dimensions.cjs.map +1 -1
- package/cjs/components/Popover/use-popover.cjs +7 -1
- package/cjs/components/Popover/use-popover.cjs.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.cjs +12 -1
- package/cjs/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
- package/cjs/components/Textarea/Autosize.cjs +8 -2
- package/cjs/components/Textarea/Autosize.cjs.map +1 -1
- package/esm/components/Accordion/Accordion.module.mjs.map +1 -1
- package/esm/components/Drawer/Drawer.mjs +2 -1
- package/esm/components/Drawer/Drawer.mjs.map +1 -1
- package/esm/components/Drawer/DrawerStack.mjs +3 -1
- package/esm/components/Drawer/DrawerStack.mjs.map +1 -1
- package/esm/components/Menu/MenuSub/MenuSub.mjs +1 -1
- package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
- package/esm/components/Modal/Modal.mjs +2 -1
- package/esm/components/Modal/Modal.mjs.map +1 -1
- package/esm/components/Modal/ModalStack.mjs +3 -1
- package/esm/components/Modal/ModalStack.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBase.mjs +3 -2
- package/esm/components/ModalBase/ModalBase.mjs.map +1 -1
- package/esm/components/ModalBase/use-modal.mjs +7 -2
- package/esm/components/ModalBase/use-modal.mjs.map +1 -1
- package/esm/components/OverflowList/use-dimensions.mjs +9 -9
- package/esm/components/OverflowList/use-dimensions.mjs.map +1 -1
- package/esm/components/Popover/use-popover.mjs +7 -1
- package/esm/components/Popover/use-popover.mjs.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.mjs +12 -1
- package/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/esm/components/Textarea/Autosize.mjs +9 -3
- package/esm/components/Textarea/Autosize.mjs.map +1 -1
- package/lib/components/Drawer/DrawerStack.d.ts +1 -0
- package/lib/components/Menu/MenuSub/MenuSub.d.ts +3 -1
- package/lib/components/Modal/ModalStack.d.ts +1 -0
- package/lib/components/ModalBase/ModalBase.d.ts +2 -1
- package/lib/components/ModalBase/use-modal.d.ts +2 -1
- package/package.json +2 -2
- package/styles/Accordion.css +4 -2
- package/styles/Accordion.layer.css +4 -2
- package/styles.css +4 -2
- package/styles.layer.css +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.module.cjs","names":[],"sources":["../../../src/components/Accordion/Accordion.module.css"],"sourcesContent":[".root {\n --accordion-radius: var(--mantine-radius-default);\n}\n\n.panel {\n overflow-wrap: break-word;\n}\n\n.content {\n padding: var(--mantine-spacing-md);\n padding-top: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.itemTitle {\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.control {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n padding-inline: var(--mantine-spacing-md);\n opacity: 1;\n cursor: pointer;\n background-color: transparent;\n color: var(--mantine-color-bright);\n\n &:where([data-chevron-position='left']) {\n flex-direction: row;\n padding-inline-start: 0;\n }\n\n &:where(:disabled, [data-disabled]) {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.control--default,\n.control--contained {\n &:where(:not(:disabled, [data-disabled])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n}\n\n.label {\n color: inherit;\n font-weight: var(--mantine-font-weight-regular);\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n padding-top: var(--mantine-spacing-sm);\n padding-bottom: var(--mantine-spacing-sm);\n}\n\n.chevron {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: transform var(--accordion-transition-duration, 200ms) ease;\n width: var(--accordion-chevron-size, rem(15px));\n min-width: var(--accordion-chevron-size, rem(15px));\n transform: rotate(0deg);\n\n &:where([data-rotate]) {\n transform: rotate(180deg);\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n margin-inline-start: var(--mantine-spacing-md);\n }\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: var(--mantine-spacing-sm);\n\n &:where([data-chevron-position='left']) {\n margin-inline-end: 0;\n margin-inline-start: var(--mantine-spacing-lg);\n }\n}\n\n.item {\n @mixin where-light {\n --item-border-color: var(--mantine-color-gray-3);\n --item-filled-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --item-border-color: var(--mantine-color-dark-4);\n --item-filled-color: var(--mantine-color-dark-6);\n }\n}\n\n.item--default {\n border-bottom: 1px solid var(--item-border-color);\n}\n\n.item--contained {\n border: 1px solid var(--item-border-color);\n transition: background-color 150ms ease;\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n\n &:first-of-type {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control] {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n }\n }\n\n &:last-of-type {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control] {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n }\n }\n\n & + & {\n border-top: 0;\n }\n}\n\n.item--filled {\n border-radius: var(--accordion-radius);\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n}\n\n.item--separated {\n background-color: var(--item-filled-color);\n border-radius: var(--accordion-radius);\n border: 1px solid transparent;\n transition: background-color 150ms ease;\n\n &[data-active] {\n border-color: var(--item-border-color);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n & + & {\n margin-top: var(--mantine-spacing-md);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Accordion.module.cjs","names":[],"sources":["../../../src/components/Accordion/Accordion.module.css"],"sourcesContent":[".root {\n --accordion-radius: var(--mantine-radius-default);\n}\n\n.panel {\n overflow-wrap: break-word;\n}\n\n.content {\n padding: var(--mantine-spacing-md);\n padding-top: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.itemTitle {\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.control {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n padding-inline: var(--mantine-spacing-md);\n opacity: 1;\n cursor: pointer;\n background-color: transparent;\n color: var(--mantine-color-bright);\n\n &:where([data-chevron-position='left']) {\n flex-direction: row;\n padding-inline-start: 0;\n }\n\n &:where(:disabled, [data-disabled]) {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.control--default,\n.control--contained {\n &:where(:not(:disabled, [data-disabled])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n}\n\n.label {\n color: inherit;\n font-weight: var(--mantine-font-weight-regular);\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n padding-top: var(--mantine-spacing-sm);\n padding-bottom: var(--mantine-spacing-sm);\n}\n\n.chevron {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: transform var(--accordion-transition-duration, 200ms) ease;\n width: var(--accordion-chevron-size, rem(15px));\n min-width: var(--accordion-chevron-size, rem(15px));\n transform: rotate(0deg);\n\n &:where([data-rotate]) {\n transform: rotate(180deg);\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n margin-inline-start: var(--mantine-spacing-md);\n }\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: var(--mantine-spacing-sm);\n\n &:where([data-chevron-position='left']) {\n margin-inline-end: 0;\n margin-inline-start: var(--mantine-spacing-lg);\n }\n}\n\n.item {\n @mixin where-light {\n --item-border-color: var(--mantine-color-gray-3);\n --item-filled-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --item-border-color: var(--mantine-color-dark-4);\n --item-filled-color: var(--mantine-color-dark-6);\n }\n}\n\n.item--default {\n border-bottom: 1px solid var(--item-border-color);\n}\n\n.item--contained {\n border: 1px solid var(--item-border-color);\n transition: background-color 150ms ease;\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n\n &:first-of-type {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control],\n & > .itemTitle > [data-accordion-control] {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n }\n }\n\n &:last-of-type {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control],\n & > .itemTitle > [data-accordion-control] {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n }\n }\n\n & + & {\n border-top: 0;\n }\n}\n\n.item--filled {\n border-radius: var(--accordion-radius);\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n}\n\n.item--separated {\n background-color: var(--item-filled-color);\n border-radius: var(--accordion-radius);\n border: 1px solid transparent;\n transition: background-color 150ms ease;\n\n &[data-active] {\n border-color: var(--item-border-color);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n & + & {\n margin-top: var(--mantine-spacing-md);\n }\n}\n"],"mappings":""}
|
|
@@ -33,7 +33,8 @@ const Drawer = require_factory.factory((_props) => {
|
|
|
33
33
|
const stackProps = ctx && stackId ? {
|
|
34
34
|
closeOnEscape: ctx.currentId === stackId,
|
|
35
35
|
trapFocus: ctx.currentId === stackId,
|
|
36
|
-
zIndex: ctx.getZIndex(stackId)
|
|
36
|
+
zIndex: ctx.getZIndex(stackId),
|
|
37
|
+
__handledEscapeEvents: ctx.handledEscapeEvents
|
|
37
38
|
} : {};
|
|
38
39
|
const overlayVisible = withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;
|
|
39
40
|
(0, react.useEffect)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.cjs","names":["getDefaultZIndex","factory","useProps","use","DrawerStackContext","DrawerRoot","DrawerOverlay","DrawerContent","DrawerHeader","DrawerTitle","DrawerCloseButton","DrawerBody","classes","DrawerStack"],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { DrawerBody } from './DrawerBody';\nimport { DrawerCloseButton } from './DrawerCloseButton';\nimport { DrawerContent } from './DrawerContent';\nimport { DrawerHeader } from './DrawerHeader';\nimport { DrawerOverlay } from './DrawerOverlay';\nimport {\n DrawerRoot,\n DrawerRootCssVariables,\n DrawerRootProps,\n DrawerRootStylesNames,\n} from './DrawerRoot';\nimport { DrawerStack, DrawerStackContext } from './DrawerStack';\nimport { DrawerTitle } from './DrawerTitle';\nimport classes from './Drawer.module.css';\n\nexport type DrawerStylesNames = DrawerRootStylesNames;\nexport type DrawerCssVariables = DrawerRootCssVariables;\n\nexport interface DrawerProps extends DrawerRootProps {\n /** Drawer title */\n title?: React.ReactNode;\n\n /** If set, the overlay is displayed @default true */\n withOverlay?: boolean;\n\n /** Props passed down to the `Overlay` component, can be used to configure opacity, `background-color`, styles and other properties */\n overlayProps?: ModalBaseOverlayProps;\n\n /** Drawer content */\n children?: React.ReactNode;\n\n /** If set, the close button is displayed @default true */\n withCloseButton?: boolean;\n\n /** Props passed down to the close button */\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /** Id of the drawer in the `Drawer.Stack` */\n stackId?: string;\n}\n\nexport type DrawerFactory = Factory<{\n props: DrawerProps;\n ref: HTMLDivElement;\n stylesNames: DrawerStylesNames;\n vars: DrawerCssVariables;\n staticComponents: {\n Root: typeof DrawerRoot;\n Overlay: typeof DrawerOverlay;\n Content: typeof DrawerContent;\n Body: typeof DrawerBody;\n Header: typeof DrawerHeader;\n Title: typeof DrawerTitle;\n CloseButton: typeof DrawerCloseButton;\n Stack: typeof DrawerStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<DrawerProps>;\n\nexport const Drawer = factory<DrawerFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Drawer', defaultProps, _props);\n\n const ctx = use(DrawerStackContext);\n const hasHeader = !!title || withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex || getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <DrawerRoot\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <DrawerOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <DrawerContent __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}>\n {hasHeader && (\n <DrawerHeader>\n {title && <DrawerTitle>{title}</DrawerTitle>}\n {withCloseButton && <DrawerCloseButton {...closeButtonProps} />}\n </DrawerHeader>\n )}\n\n <DrawerBody>{children}</DrawerBody>\n </DrawerContent>\n </DrawerRoot>\n );\n});\n\nDrawer.classes = classes;\nDrawer.displayName = '@mantine/core/Drawer';\nDrawer.Root = DrawerRoot;\nDrawer.Overlay = DrawerOverlay;\nDrawer.Content = DrawerContent;\nDrawer.Body = DrawerBody;\nDrawer.Header = DrawerHeader;\nDrawer.Title = DrawerTitle;\nDrawer.CloseButton = DrawerCloseButton;\nDrawer.Stack = DrawerStack;\n"],"mappings":";;;;;;;;;;;;;;;;AA6DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,SACA,QACA,GAAG,WACDC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CAE3C,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,oBAAAA,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;
|
|
1
|
+
{"version":3,"file":"Drawer.cjs","names":["getDefaultZIndex","factory","useProps","use","DrawerStackContext","DrawerRoot","DrawerOverlay","DrawerContent","DrawerHeader","DrawerTitle","DrawerCloseButton","DrawerBody","classes","DrawerStack"],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { DrawerBody } from './DrawerBody';\nimport { DrawerCloseButton } from './DrawerCloseButton';\nimport { DrawerContent } from './DrawerContent';\nimport { DrawerHeader } from './DrawerHeader';\nimport { DrawerOverlay } from './DrawerOverlay';\nimport {\n DrawerRoot,\n DrawerRootCssVariables,\n DrawerRootProps,\n DrawerRootStylesNames,\n} from './DrawerRoot';\nimport { DrawerStack, DrawerStackContext } from './DrawerStack';\nimport { DrawerTitle } from './DrawerTitle';\nimport classes from './Drawer.module.css';\n\nexport type DrawerStylesNames = DrawerRootStylesNames;\nexport type DrawerCssVariables = DrawerRootCssVariables;\n\nexport interface DrawerProps extends DrawerRootProps {\n /** Drawer title */\n title?: React.ReactNode;\n\n /** If set, the overlay is displayed @default true */\n withOverlay?: boolean;\n\n /** Props passed down to the `Overlay` component, can be used to configure opacity, `background-color`, styles and other properties */\n overlayProps?: ModalBaseOverlayProps;\n\n /** Drawer content */\n children?: React.ReactNode;\n\n /** If set, the close button is displayed @default true */\n withCloseButton?: boolean;\n\n /** Props passed down to the close button */\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /** Id of the drawer in the `Drawer.Stack` */\n stackId?: string;\n}\n\nexport type DrawerFactory = Factory<{\n props: DrawerProps;\n ref: HTMLDivElement;\n stylesNames: DrawerStylesNames;\n vars: DrawerCssVariables;\n staticComponents: {\n Root: typeof DrawerRoot;\n Overlay: typeof DrawerOverlay;\n Content: typeof DrawerContent;\n Body: typeof DrawerBody;\n Header: typeof DrawerHeader;\n Title: typeof DrawerTitle;\n CloseButton: typeof DrawerCloseButton;\n Stack: typeof DrawerStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<DrawerProps>;\n\nexport const Drawer = factory<DrawerFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Drawer', defaultProps, _props);\n\n const ctx = use(DrawerStackContext);\n const hasHeader = !!title || withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n __handledEscapeEvents: ctx.handledEscapeEvents,\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex || getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <DrawerRoot\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <DrawerOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <DrawerContent __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}>\n {hasHeader && (\n <DrawerHeader>\n {title && <DrawerTitle>{title}</DrawerTitle>}\n {withCloseButton && <DrawerCloseButton {...closeButtonProps} />}\n </DrawerHeader>\n )}\n\n <DrawerBody>{children}</DrawerBody>\n </DrawerContent>\n </DrawerRoot>\n );\n});\n\nDrawer.classes = classes;\nDrawer.displayName = '@mantine/core/Drawer';\nDrawer.Root = DrawerRoot;\nDrawer.Overlay = DrawerOverlay;\nDrawer.Content = DrawerContent;\nDrawer.Body = DrawerBody;\nDrawer.Header = DrawerHeader;\nDrawer.Title = DrawerTitle;\nDrawer.CloseButton = DrawerCloseButton;\nDrawer.Stack = DrawerStack;\n"],"mappings":";;;;;;;;;;;;;;;;AA6DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,SACA,QACA,GAAG,WACDC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CAE3C,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,oBAAAA,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;EAC7B,uBAAuB,IAAI;CAC7B,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAUJ,4BAAAA,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACK,mBAAAA,YAAD;EACU;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;EAJN,UAAA,CAMG,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAA,CAACC,sBAAAA,eAAD;GAAe,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;GAAhF,UAAA,CACG,aACC,iBAAA,GAAA,kBAAA,KAAA,CAACC,qBAAAA,cAAD,EAAA,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD,EAAA,UAAc,MAAmB,CAAA,GAC1C,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGhB,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD,EAAa,SAAqB,CAAA,CACrB;EACL,CAAA,CAAA;;AAEhB,CAAC;AAED,OAAO,UAAUC,sBAAAA;AACjB,OAAO,cAAc;AACrB,OAAO,OAAOP,mBAAAA;AACd,OAAO,UAAUC,sBAAAA;AACjB,OAAO,UAAUC,sBAAAA;AACjB,OAAO,OAAOI,mBAAAA;AACd,OAAO,SAASH,qBAAAA;AAChB,OAAO,QAAQC,oBAAAA;AACf,OAAO,cAAcC,0BAAAA;AACrB,OAAO,QAAQG,oBAAAA"}
|
|
@@ -7,6 +7,7 @@ const DrawerStackContext = (0, react.createContext)(null);
|
|
|
7
7
|
function DrawerStack({ children }) {
|
|
8
8
|
const [stack, setStack] = (0, react.useState)([]);
|
|
9
9
|
const [maxZIndex, setMaxZIndex] = (0, react.useState)(require_get_default_z_index.getDefaultZIndex("modal"));
|
|
10
|
+
const [handledEscapeEvents] = (0, react.useState)(() => /* @__PURE__ */ new WeakSet());
|
|
10
11
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerStackContext, {
|
|
11
12
|
value: {
|
|
12
13
|
stack,
|
|
@@ -17,7 +18,8 @@ function DrawerStack({ children }) {
|
|
|
17
18
|
removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),
|
|
18
19
|
getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,
|
|
19
20
|
currentId: stack[stack.length - 1],
|
|
20
|
-
maxZIndex
|
|
21
|
+
maxZIndex,
|
|
22
|
+
handledEscapeEvents
|
|
21
23
|
},
|
|
22
24
|
children
|
|
23
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerStack.cjs","names":["createContext","useState","getDefaultZIndex"],"sources":["../../../src/components/Drawer/DrawerStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface DrawerStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number | string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string | number;\n}\n\nexport const DrawerStackContext = createContext<DrawerStackContext | null>(null);\n\nexport interface DrawerStackProps {\n children: React.ReactNode;\n}\n\nexport function DrawerStack({ children }: DrawerStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n return (\n <DrawerStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n }}\n >\n {children}\n </DrawerStackContext>\n );\n}\n\nDrawerStack.displayName = '@mantine/core/DrawerStack';\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"DrawerStack.cjs","names":["createContext","useState","getDefaultZIndex"],"sources":["../../../src/components/Drawer/DrawerStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface DrawerStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number | string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string | number;\n handledEscapeEvents: WeakSet<KeyboardEvent>;\n}\n\nexport const DrawerStackContext = createContext<DrawerStackContext | null>(null);\n\nexport interface DrawerStackProps {\n children: React.ReactNode;\n}\n\nexport function DrawerStack({ children }: DrawerStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n const [handledEscapeEvents] = useState(() => new WeakSet<KeyboardEvent>());\n\n return (\n <DrawerStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n handledEscapeEvents,\n }}\n >\n {children}\n </DrawerStackContext>\n );\n}\n\nDrawerStack.displayName = '@mantine/core/DrawerStack';\n"],"mappings":";;;;;AAaA,MAAa,sBAAA,GAAqBA,MAAAA,cAAAA,CAAyC,IAAI;AAM/E,SAAgB,YAAY,EAAE,YAA8B;CAC1D,MAAM,CAAC,OAAO,aAAA,GAAYC,MAAAA,SAAAA,CAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAA0BC,4BAAAA,iBAAiB,OAAO,CAAC;CACrF,MAAM,CAAC,wBAAA,GAAuBD,MAAAA,SAAAA,uBAAe,IAAI,QAAuB,CAAC;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;GACA;EACF;EAEC;CACiB,CAAA;AAExB;AAEA,YAAY,cAAc"}
|
|
@@ -93,11 +93,11 @@ function MenuSub(_props) {
|
|
|
93
93
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
|
|
94
94
|
opened,
|
|
95
95
|
onChange: (nextOpened) => nextOpened ? handleOpen() : handleClose(),
|
|
96
|
-
withinPortal: false,
|
|
97
96
|
withArrow: false,
|
|
98
97
|
id,
|
|
99
98
|
position,
|
|
100
99
|
...others,
|
|
100
|
+
withinPortal: false,
|
|
101
101
|
children
|
|
102
102
|
})
|
|
103
103
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSub.cjs","names":["useProps","useId","useUncontrolled","use","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","useRef","useCallback","useFloating","useInteractions","useHover","safePolygon","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"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
|
|
1
|
+
{"version":3,"file":"MenuSub.cjs","names":["useProps","useId","useUncontrolled","use","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","useRef","useCallback","useFloating","useInteractions","useHover","safePolygon","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"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\n/** `Menu.Sub` dropdown is always rendered inside the parent dropdown: hover tracking and outside\n * clicks detection rely on it being a DOM descendant of the menu it belongs to. */\nexport interface MenuSubProps extends Omit<__PopoverProps, 'withinPortal' | 'portalProps'> {\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 withArrow={false}\n id={id}\n position={position}\n {...others}\n withinPortal={false}\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":"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"}
|
|
@@ -37,7 +37,8 @@ const Modal = require_factory.factory((_props) => {
|
|
|
37
37
|
const stackProps = ctx && stackId ? {
|
|
38
38
|
closeOnEscape: ctx.currentId === stackId,
|
|
39
39
|
trapFocus: ctx.currentId === stackId,
|
|
40
|
-
zIndex: ctx.getZIndex(stackId)
|
|
40
|
+
zIndex: ctx.getZIndex(stackId),
|
|
41
|
+
__handledEscapeEvents: ctx.handledEscapeEvents
|
|
41
42
|
} : {};
|
|
42
43
|
const overlayVisible = withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;
|
|
43
44
|
(0, react.useEffect)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.cjs","names":["getDefaultZIndex","factory","useProps","use","ModalStackContext","ModalRoot","ModalOverlay","ModalContent","ModalHeader","ModalTitle","ModalCloseButton","ModalBody","classes","ModalStack"],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { ModalBody, type ModalBodyProps } from './ModalBody';\nimport { ModalCloseButton, type ModalCloseButtonProps } from './ModalCloseButton';\nimport { ModalContent, type ModalContentProps } from './ModalContent';\nimport { ModalHeader, type ModalHeaderProps } from './ModalHeader';\nimport { ModalOverlay, type ModalOverlayProps } from './ModalOverlay';\nimport {\n ModalRoot,\n ModalRootCssVariables,\n ModalRootProps,\n ModalRootStylesNames,\n} from './ModalRoot';\nimport { ModalStack, ModalStackContext, type ModalStackProps } from './ModalStack';\nimport { ModalTitle, type ModalTitleProps } from './ModalTitle';\nimport classes from './Modal.module.css';\nexport type ModalStylesNames = ModalRootStylesNames;\nexport type ModalCssVariables = ModalRootCssVariables;\n\nexport interface ModalProps extends ModalRootProps {\n __staticSelector?: string;\n\n /** Modal title */\n title?: React.ReactNode;\n\n /** If set, the overlay is rendered @default true */\n withOverlay?: boolean;\n\n /** Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties */\n overlayProps?: ModalBaseOverlayProps;\n\n /** Modal content */\n children?: React.ReactNode;\n\n /** If set, the close button is rendered @default true */\n withCloseButton?: boolean;\n\n /** Props passed down to the close button */\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /** Id of the modal in the `Modal.Stack` */\n stackId?: string;\n}\n\nexport type ModalFactory = Factory<{\n props: ModalProps;\n ref: HTMLDivElement;\n stylesNames: ModalStylesNames;\n vars: ModalCssVariables;\n staticComponents: {\n Root: typeof ModalRoot;\n Overlay: typeof ModalOverlay;\n Content: typeof ModalContent;\n Body: typeof ModalBody;\n Header: typeof ModalHeader;\n Title: typeof ModalTitle;\n CloseButton: typeof ModalCloseButton;\n Stack: typeof ModalStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n transitionProps: { duration: 200, transition: 'fade-down' },\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<ModalProps>;\n\nexport const Modal = factory<ModalFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n radius,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Modal', defaultProps, _props);\n const ctx = use(ModalStackContext);\n const hasHeader = !!title || withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex || getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <ModalRoot\n radius={radius}\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <ModalOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <ModalContent\n radius={radius}\n __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}\n >\n {hasHeader && (\n <ModalHeader>\n {title && <ModalTitle>{title}</ModalTitle>}\n {withCloseButton && <ModalCloseButton {...closeButtonProps} />}\n </ModalHeader>\n )}\n\n <ModalBody>{children}</ModalBody>\n </ModalContent>\n </ModalRoot>\n );\n});\n\nModal.classes = classes;\nModal.displayName = '@mantine/core/Modal';\nModal.Root = ModalRoot;\nModal.Overlay = ModalOverlay;\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Header = ModalHeader;\nModal.Title = ModalTitle;\nModal.CloseButton = ModalCloseButton;\nModal.Stack = ModalStack;\n\nexport namespace Modal {\n export type Props = ModalProps;\n export type StylesNames = ModalStylesNames;\n export type CssVariables = ModalCssVariables;\n export type Factory = ModalFactory;\n\n export namespace Root {\n export type Props = ModalRootProps;\n }\n\n export namespace Body {\n export type Props = ModalBodyProps;\n }\n\n export namespace CloseButton {\n export type Props = ModalCloseButtonProps;\n }\n\n export namespace Content {\n export type Props = ModalContentProps;\n }\n\n export namespace Header {\n export type Props = ModalHeaderProps;\n }\n\n export namespace Overlay {\n export type Props = ModalOverlayProps;\n }\n\n export namespace Title {\n export type Props = ModalTitleProps;\n }\n\n export namespace Stack {\n export type Props = ModalStackProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA8DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,QACA,SACA,QACA,GAAG,WACDC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CAC1C,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,mBAAAA,iBAAiB;CACjC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;
|
|
1
|
+
{"version":3,"file":"Modal.cjs","names":["getDefaultZIndex","factory","useProps","use","ModalStackContext","ModalRoot","ModalOverlay","ModalContent","ModalHeader","ModalTitle","ModalCloseButton","ModalBody","classes","ModalStack"],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { ModalBody, type ModalBodyProps } from './ModalBody';\nimport { ModalCloseButton, type ModalCloseButtonProps } from './ModalCloseButton';\nimport { ModalContent, type ModalContentProps } from './ModalContent';\nimport { ModalHeader, type ModalHeaderProps } from './ModalHeader';\nimport { ModalOverlay, type ModalOverlayProps } from './ModalOverlay';\nimport {\n ModalRoot,\n ModalRootCssVariables,\n ModalRootProps,\n ModalRootStylesNames,\n} from './ModalRoot';\nimport { ModalStack, ModalStackContext, type ModalStackProps } from './ModalStack';\nimport { ModalTitle, type ModalTitleProps } from './ModalTitle';\nimport classes from './Modal.module.css';\nexport type ModalStylesNames = ModalRootStylesNames;\nexport type ModalCssVariables = ModalRootCssVariables;\n\nexport interface ModalProps extends ModalRootProps {\n __staticSelector?: string;\n\n /** Modal title */\n title?: React.ReactNode;\n\n /** If set, the overlay is rendered @default true */\n withOverlay?: boolean;\n\n /** Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties */\n overlayProps?: ModalBaseOverlayProps;\n\n /** Modal content */\n children?: React.ReactNode;\n\n /** If set, the close button is rendered @default true */\n withCloseButton?: boolean;\n\n /** Props passed down to the close button */\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /** Id of the modal in the `Modal.Stack` */\n stackId?: string;\n}\n\nexport type ModalFactory = Factory<{\n props: ModalProps;\n ref: HTMLDivElement;\n stylesNames: ModalStylesNames;\n vars: ModalCssVariables;\n staticComponents: {\n Root: typeof ModalRoot;\n Overlay: typeof ModalOverlay;\n Content: typeof ModalContent;\n Body: typeof ModalBody;\n Header: typeof ModalHeader;\n Title: typeof ModalTitle;\n CloseButton: typeof ModalCloseButton;\n Stack: typeof ModalStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n transitionProps: { duration: 200, transition: 'fade-down' },\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<ModalProps>;\n\nexport const Modal = factory<ModalFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n radius,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Modal', defaultProps, _props);\n const ctx = use(ModalStackContext);\n const hasHeader = !!title || withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n __handledEscapeEvents: ctx.handledEscapeEvents,\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex || getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <ModalRoot\n radius={radius}\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <ModalOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <ModalContent\n radius={radius}\n __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}\n >\n {hasHeader && (\n <ModalHeader>\n {title && <ModalTitle>{title}</ModalTitle>}\n {withCloseButton && <ModalCloseButton {...closeButtonProps} />}\n </ModalHeader>\n )}\n\n <ModalBody>{children}</ModalBody>\n </ModalContent>\n </ModalRoot>\n );\n});\n\nModal.classes = classes;\nModal.displayName = '@mantine/core/Modal';\nModal.Root = ModalRoot;\nModal.Overlay = ModalOverlay;\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Header = ModalHeader;\nModal.Title = ModalTitle;\nModal.CloseButton = ModalCloseButton;\nModal.Stack = ModalStack;\n\nexport namespace Modal {\n export type Props = ModalProps;\n export type StylesNames = ModalStylesNames;\n export type CssVariables = ModalCssVariables;\n export type Factory = ModalFactory;\n\n export namespace Root {\n export type Props = ModalRootProps;\n }\n\n export namespace Body {\n export type Props = ModalBodyProps;\n }\n\n export namespace CloseButton {\n export type Props = ModalCloseButtonProps;\n }\n\n export namespace Content {\n export type Props = ModalContentProps;\n }\n\n export namespace Header {\n export type Props = ModalHeaderProps;\n }\n\n export namespace Overlay {\n export type Props = ModalOverlayProps;\n }\n\n export namespace Title {\n export type Props = ModalTitleProps;\n }\n\n export namespace Stack {\n export type Props = ModalStackProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA8DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,QACA,SACA,QACA,GAAG,WACDC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CAC1C,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,mBAAAA,iBAAiB;CACjC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;EAC7B,uBAAuB,IAAI;CAC7B,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAUJ,4BAAAA,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACK,kBAAAA,WAAD;EACU;EACA;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;EALN,UAAA,CAOG,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAA,CAACC,qBAAAA,cAAD;GACU;GACR,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;GAFnE,UAAA,CAIG,aACC,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,aAAD,EAAA,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD,EAAA,UAAa,MAAkB,CAAA,GACxC,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,EAAkB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGf,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD,EAAY,SAAoB,CAAA,CACpB;EACL,CAAA,CAAA;;AAEf,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,cAAc;AACpB,MAAM,OAAOP,kBAAAA;AACb,MAAM,UAAUC,qBAAAA;AAChB,MAAM,UAAUC,qBAAAA;AAChB,MAAM,OAAOI,kBAAAA;AACb,MAAM,SAASH,oBAAAA;AACf,MAAM,QAAQC,mBAAAA;AACd,MAAM,cAAcC,yBAAAA;AACpB,MAAM,QAAQG,mBAAAA"}
|
|
@@ -7,6 +7,7 @@ const ModalStackContext = (0, react.createContext)(null);
|
|
|
7
7
|
function ModalStack({ children }) {
|
|
8
8
|
const [stack, setStack] = (0, react.useState)([]);
|
|
9
9
|
const [maxZIndex, setMaxZIndex] = (0, react.useState)(require_get_default_z_index.getDefaultZIndex("modal"));
|
|
10
|
+
const [handledEscapeEvents] = (0, react.useState)(() => /* @__PURE__ */ new WeakSet());
|
|
10
11
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalStackContext, {
|
|
11
12
|
value: {
|
|
12
13
|
stack,
|
|
@@ -17,7 +18,8 @@ function ModalStack({ children }) {
|
|
|
17
18
|
removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),
|
|
18
19
|
getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,
|
|
19
20
|
currentId: stack[stack.length - 1],
|
|
20
|
-
maxZIndex
|
|
21
|
+
maxZIndex,
|
|
22
|
+
handledEscapeEvents
|
|
21
23
|
},
|
|
22
24
|
children
|
|
23
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalStack.cjs","names":["createContext","useState","getDefaultZIndex"],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number | string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string | number;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext | null>(null);\n\nexport interface ModalStackProps {\n children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n return (\n <ModalStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n }}\n >\n {children}\n </ModalStackContext>\n );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"ModalStack.cjs","names":["createContext","useState","getDefaultZIndex"],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number | string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string | number;\n handledEscapeEvents: WeakSet<KeyboardEvent>;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext | null>(null);\n\nexport interface ModalStackProps {\n children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n const [handledEscapeEvents] = useState(() => new WeakSet<KeyboardEvent>());\n\n return (\n <ModalStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n handledEscapeEvents,\n }}\n >\n {children}\n </ModalStackContext>\n );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;AAaA,MAAa,qBAAA,GAAoBA,MAAAA,cAAAA,CAAwC,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,aAAA,GAAYC,MAAAA,SAAAA,CAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAA0BC,4BAAAA,iBAAiB,OAAO,CAAC;CACrF,MAAM,CAAC,wBAAA,GAAuBD,MAAAA,SAAAA,uBAAe,IAAI,QAAuB,CAAC;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;GACA;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}
|
|
@@ -8,7 +8,7 @@ const require_use_modal = require("./use-modal.cjs");
|
|
|
8
8
|
let react_remove_scroll = require("react-remove-scroll");
|
|
9
9
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
10
|
//#region packages/@mantine/core/src/components/ModalBase/ModalBase.tsx
|
|
11
|
-
function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose, id, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, trapFocus, closeOnEscape, returnFocus, closeOnClickOutside, withinPortal, portalProps, lockScroll, children, zIndex, shadow, padding, __vars, unstyled, removeScrollProps, ...others }) {
|
|
11
|
+
function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose, id, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, trapFocus, closeOnEscape, returnFocus, closeOnClickOutside, withinPortal, portalProps, lockScroll, children, zIndex, shadow, padding, __vars, unstyled, removeScrollProps, __handledEscapeEvents, ...others }) {
|
|
12
12
|
const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } = require_use_modal.useModal({
|
|
13
13
|
id,
|
|
14
14
|
transitionProps,
|
|
@@ -16,7 +16,8 @@ function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose,
|
|
|
16
16
|
trapFocus,
|
|
17
17
|
closeOnEscape,
|
|
18
18
|
onClose,
|
|
19
|
-
returnFocus
|
|
19
|
+
returnFocus,
|
|
20
|
+
handledEscapeEvents: __handledEscapeEvents
|
|
20
21
|
});
|
|
21
22
|
const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps || {};
|
|
22
23
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalBase.cjs","names":["useModal","OptionalPortal","ModalBaseProvider","RemoveScroll","Box","getDefaultZIndex","getShadow","getSpacing"],"sources":["../../../src/components/ModalBase/ModalBase.tsx"],"sourcesContent":["import { RemoveScroll } from 'react-remove-scroll';\nimport {\n Box,\n BoxProps,\n ElementProps,\n getDefaultZIndex,\n getShadow,\n getSpacing,\n MantineShadow,\n MantineSize,\n MantineSpacing,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport { useModal } from './use-modal';\n\ntype RemoveScrollProps = Omit<React.ComponentProps<typeof RemoveScroll>, 'children'>;\n\nexport interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {\n unstyled?: boolean;\n\n /** If set modal/drawer is not unmounted from the DOM when hidden. `display: none` styles are applied instead. @default false */\n keepMounted?: boolean;\n\n /** Controls how the modal/drawer is hidden when `keepMounted` is set:\n * `'activity'` - hidden with React 19 `Activity` component,\n * `'display-none'` - hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Controls opened state */\n opened: boolean;\n\n /** Called when modal/drawer is closed */\n onClose: () => void;\n\n /** Id used to connect modal/drawer with body and title */\n id?: string;\n\n /** If set, scroll is locked when `opened={true}` @default true */\n lockScroll?: boolean;\n\n /** If set, focus is trapped within the modal/drawer @default true */\n trapFocus?: boolean;\n\n /** If set, the component is rendered inside `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props passed down to the Portal component when `withinPortal` is set */\n portalProps?: BasePortalProps;\n\n /** Modal/drawer content */\n children?: React.ReactNode;\n\n /** If set, the modal/drawer is closed when user clicks on the overlay @default true */\n closeOnClickOutside?: boolean;\n\n /** Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'fade-down' }` by default */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** If set, `onClose` is called when user presses the escape key @default true */\n closeOnEscape?: boolean;\n\n /** If set, focus is returned to the last active element when `onClose` is called @default true */\n returnFocus?: boolean;\n\n /** `z-index` CSS property of the root element @default 200 */\n zIndex?: string | number;\n\n /** Key of `theme.shadows` or any valid CSS box-shadow value @default 'xl' */\n shadow?: MantineShadow;\n\n /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default 'md' */\n padding?: MantineSpacing;\n\n /** Controls width of the content area @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Props passed down to react-remove-scroll, can be used to customize scroll lock behavior */\n removeScrollProps?: RemoveScrollProps;\n}\n\nexport function ModalBase({\n keepMounted,\n keepMountedMode = 'activity',\n opened,\n onClose,\n id,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n trapFocus,\n closeOnEscape,\n returnFocus,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n lockScroll,\n children,\n zIndex,\n shadow,\n padding,\n __vars,\n unstyled,\n removeScrollProps,\n ...others\n}: ModalBaseProps) {\n const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } =\n useModal({
|
|
1
|
+
{"version":3,"file":"ModalBase.cjs","names":["useModal","OptionalPortal","ModalBaseProvider","RemoveScroll","Box","getDefaultZIndex","getShadow","getSpacing"],"sources":["../../../src/components/ModalBase/ModalBase.tsx"],"sourcesContent":["import { RemoveScroll } from 'react-remove-scroll';\nimport {\n Box,\n BoxProps,\n ElementProps,\n getDefaultZIndex,\n getShadow,\n getSpacing,\n MantineShadow,\n MantineSize,\n MantineSpacing,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport { useModal } from './use-modal';\n\ntype RemoveScrollProps = Omit<React.ComponentProps<typeof RemoveScroll>, 'children'>;\n\nexport interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {\n unstyled?: boolean;\n __handledEscapeEvents?: WeakSet<KeyboardEvent>;\n\n /** If set modal/drawer is not unmounted from the DOM when hidden. `display: none` styles are applied instead. @default false */\n keepMounted?: boolean;\n\n /** Controls how the modal/drawer is hidden when `keepMounted` is set:\n * `'activity'` - hidden with React 19 `Activity` component,\n * `'display-none'` - hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Controls opened state */\n opened: boolean;\n\n /** Called when modal/drawer is closed */\n onClose: () => void;\n\n /** Id used to connect modal/drawer with body and title */\n id?: string;\n\n /** If set, scroll is locked when `opened={true}` @default true */\n lockScroll?: boolean;\n\n /** If set, focus is trapped within the modal/drawer @default true */\n trapFocus?: boolean;\n\n /** If set, the component is rendered inside `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props passed down to the Portal component when `withinPortal` is set */\n portalProps?: BasePortalProps;\n\n /** Modal/drawer content */\n children?: React.ReactNode;\n\n /** If set, the modal/drawer is closed when user clicks on the overlay @default true */\n closeOnClickOutside?: boolean;\n\n /** Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'fade-down' }` by default */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** If set, `onClose` is called when user presses the escape key @default true */\n closeOnEscape?: boolean;\n\n /** If set, focus is returned to the last active element when `onClose` is called @default true */\n returnFocus?: boolean;\n\n /** `z-index` CSS property of the root element @default 200 */\n zIndex?: string | number;\n\n /** Key of `theme.shadows` or any valid CSS box-shadow value @default 'xl' */\n shadow?: MantineShadow;\n\n /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default 'md' */\n padding?: MantineSpacing;\n\n /** Controls width of the content area @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Props passed down to react-remove-scroll, can be used to customize scroll lock behavior */\n removeScrollProps?: RemoveScrollProps;\n}\n\nexport function ModalBase({\n keepMounted,\n keepMountedMode = 'activity',\n opened,\n onClose,\n id,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n trapFocus,\n closeOnEscape,\n returnFocus,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n lockScroll,\n children,\n zIndex,\n shadow,\n padding,\n __vars,\n unstyled,\n removeScrollProps,\n __handledEscapeEvents,\n ...others\n}: ModalBaseProps) {\n const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } =\n useModal({\n id,\n transitionProps,\n opened,\n trapFocus,\n closeOnEscape,\n onClose,\n returnFocus,\n handledEscapeEvents: __handledEscapeEvents,\n });\n\n const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps || {};\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <ModalBaseProvider\n value={{\n opened,\n onClose,\n closeOnClickOutside,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n transitionProps: { ...transitionProps, keepMounted, keepMountedMode },\n getTitleId: () => `${_id}-title`,\n getBodyId: () => `${_id}-body`,\n titleMounted,\n bodyMounted,\n setTitleMounted,\n setBodyMounted,\n trapFocus,\n closeOnEscape,\n zIndex,\n unstyled,\n }}\n >\n <RemoveScroll\n enabled={shouldLockScroll && lockScroll}\n key={removeScrollKey}\n {...otherRemoveScrollProps}\n >\n <Box\n {...others}\n id={_id}\n __vars={{\n ...__vars,\n '--mb-z-index': (zIndex || getDefaultZIndex('modal')).toString(),\n '--mb-shadow': getShadow(shadow),\n '--mb-padding': getSpacing(padding),\n }}\n >\n {children}\n </Box>\n </RemoveScroll>\n </ModalBaseProvider>\n </OptionalPortal>\n );\n}\n\nModalBase.displayName = '@mantine/core/ModalBase';\n"],"mappings":";;;;;;;;;;AA2FA,SAAgB,UAAU,EACxB,aACA,kBAAkB,YAClB,QACA,SACA,IACA,iBACA,qBACA,sBACA,WACA,eACA,aACA,qBACA,cACA,aACA,YACA,UACA,QACA,QACA,SACA,QACA,UACA,mBACA,uBACA,GAAG,UACc;CACjB,MAAM,EAAE,KAAK,cAAc,aAAa,kBAAkB,iBAAiB,mBACzEA,kBAAAA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBAAqB;CACvB,CAAC;CAEH,MAAM,EAAE,KAAK,iBAAiB,GAAG,2BAA2B,qBAAqB,CAAC;CAElF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;EAAgB,GAAI;EAA2B;EAC7C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;GACE,OAAO;IACL;IACA;IACA;IACA;IACA;IACA,iBAAiB;KAAE,GAAG;KAAiB;KAAa;IAAgB;IACpE,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG,IAAI;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,cAAD;IACE,SAAS,oBAAoB;IAE7B,GAAI;IAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;KACE,GAAI;KACJ,IAAI;KACJ,QAAQ;MACN,GAAG;MACH,iBAAiB,UAAUC,4BAAAA,iBAAiB,OAAO,EAAA,CAAG,SAAS;MAC/D,eAAeC,iBAAAA,UAAU,MAAM;MAC/B,gBAAgBC,iBAAAA,WAAW,OAAO;KACpC;KAEC;IACE,CAAA;GACO,GAfP,eAeO;EACG,CAAA;CACL,CAAA;AAEpB;AAEA,UAAU,cAAc"}
|
|
@@ -3,7 +3,7 @@ const require_use_lock_scroll = require("./use-lock-scroll.cjs");
|
|
|
3
3
|
let react = require("react");
|
|
4
4
|
let _mantine_hooks = require("@mantine/hooks");
|
|
5
5
|
//#region packages/@mantine/core/src/components/ModalBase/use-modal.ts
|
|
6
|
-
function useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus }) {
|
|
6
|
+
function useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus, handledEscapeEvents }) {
|
|
7
7
|
const _id = (0, _mantine_hooks.useId)(id);
|
|
8
8
|
const [titleMounted, setTitleMounted] = (0, react.useState)(false);
|
|
9
9
|
const [bodyMounted, setBodyMounted] = (0, react.useState)(false);
|
|
@@ -13,7 +13,12 @@ function useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClo
|
|
|
13
13
|
transitionDuration
|
|
14
14
|
});
|
|
15
15
|
(0, _mantine_hooks.useWindowEvent)("keydown", (event) => {
|
|
16
|
-
if (event.key === "Escape" && closeOnEscape && !event.isComposing && opened
|
|
16
|
+
if (event.key === "Escape" && closeOnEscape && !event.isComposing && opened && !handledEscapeEvents?.has(event)) {
|
|
17
|
+
if (event.target?.getAttribute("data-mantine-stop-propagation") !== "true") {
|
|
18
|
+
handledEscapeEvents?.add(event);
|
|
19
|
+
onClose();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
17
22
|
}, { capture: true });
|
|
18
23
|
(0, _mantine_hooks.useFocusReturn)({
|
|
19
24
|
opened,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-modal.cjs","names":["useId","useState","useLockScroll"],"sources":["../../../src/components/ModalBase/use-modal.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useFocusReturn, useId, useWindowEvent } from '@mantine/hooks';\nimport { TransitionOverride } from '../Transition';\nimport { useLockScroll } from './use-lock-scroll';\n\ninterface UseModalInput {\n opened: boolean;\n onClose: () => void;\n id: string | undefined;\n transitionProps: TransitionOverride | undefined;\n trapFocus: boolean | undefined;\n closeOnEscape: boolean | undefined;\n returnFocus: boolean | undefined;\n}\n\nexport function useModal({\n id,\n transitionProps,\n opened,\n trapFocus,\n closeOnEscape,\n onClose,\n returnFocus,\n}: UseModalInput) {\n const _id = useId(id);\n const [titleMounted, setTitleMounted] = useState(false);\n const [bodyMounted, setBodyMounted] = useState(false);\n\n const transitionDuration =\n typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n useWindowEvent(\n 'keydown',\n (event) => {\n if (event.key === 'Escape'
|
|
1
|
+
{"version":3,"file":"use-modal.cjs","names":["useId","useState","useLockScroll"],"sources":["../../../src/components/ModalBase/use-modal.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useFocusReturn, useId, useWindowEvent } from '@mantine/hooks';\nimport { TransitionOverride } from '../Transition';\nimport { useLockScroll } from './use-lock-scroll';\n\ninterface UseModalInput {\n opened: boolean;\n onClose: () => void;\n id: string | undefined;\n transitionProps: TransitionOverride | undefined;\n trapFocus: boolean | undefined;\n closeOnEscape: boolean | undefined;\n returnFocus: boolean | undefined;\n handledEscapeEvents?: WeakSet<KeyboardEvent>;\n}\n\nexport function useModal({\n id,\n transitionProps,\n opened,\n trapFocus,\n closeOnEscape,\n onClose,\n returnFocus,\n handledEscapeEvents,\n}: UseModalInput) {\n const _id = useId(id);\n const [titleMounted, setTitleMounted] = useState(false);\n const [bodyMounted, setBodyMounted] = useState(false);\n\n const transitionDuration =\n typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n useWindowEvent(\n 'keydown',\n (event) => {\n if (\n event.key === 'Escape' &&\n closeOnEscape &&\n !event.isComposing &&\n opened &&\n !handledEscapeEvents?.has(event)\n ) {\n const shouldTrigger =\n (event.target as HTMLElement)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n if (shouldTrigger) {\n handledEscapeEvents?.add(event);\n onClose();\n }\n }\n },\n { capture: true }\n );\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });\n\n return {\n _id,\n titleMounted,\n bodyMounted,\n shouldLockScroll,\n setTitleMounted,\n setBodyMounted,\n };\n}\n"],"mappings":";;;;;AAgBA,SAAgB,SAAS,EACvB,IACA,iBACA,QACA,WACA,eACA,SACA,aACA,uBACgB;CAChB,MAAM,OAAA,GAAMA,eAAAA,MAAAA,CAAM,EAAE;CACpB,MAAM,CAAC,cAAc,oBAAA,GAAmBC,MAAAA,SAAAA,CAAS,KAAK;CACtD,MAAM,CAAC,aAAa,mBAAA,GAAkBA,MAAAA,SAAAA,CAAS,KAAK;CAEpD,MAAM,qBACJ,OAAO,iBAAiB,aAAa,WAAW,iBAAiB,WAAW;CAE9E,MAAM,mBAAmBC,wBAAAA,cAAc;EAAE;EAAQ;CAAmB,CAAC;CAErE,CAAA,GAAA,eAAA,eAAA,CACE,YACC,UAAU;EACT,IACE,MAAM,QAAQ,YACd,iBACA,CAAC,MAAM,eACP,UACA,CAAC,qBAAqB,IAAI,KAAK,GAG5B;OAAA,MAAM,QAAwB,aAAa,+BAA+B,MAAM,QAChE;IACjB,qBAAqB,IAAI,KAAK;IAC9B,QAAQ;GACV;;CAEJ,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,CAAA,GAAA,eAAA,eAAA,CAAe;EAAE;EAAQ,mBAAmB,aAAa;CAAY,CAAC;CAEtE,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
let react = require("react");
|
|
3
|
-
let react_dom = require("react-dom");
|
|
4
3
|
//#region packages/@mantine/core/src/components/OverflowList/use-dimensions.tsx
|
|
5
4
|
function useDimensions(elementRef) {
|
|
6
5
|
const resizeObserverRef = (0, react.useRef)(null);
|
|
7
6
|
const [dimensions, setDimensions] = (0, react.useState)(null);
|
|
8
7
|
(0, react.useEffect)(() => {
|
|
9
8
|
if (!elementRef.current) return;
|
|
9
|
+
let frame = 0;
|
|
10
10
|
resizeObserverRef.current = new ResizeObserver((entries) => {
|
|
11
11
|
if (entries[0]) {
|
|
12
12
|
const entry = entries[0];
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
contentHeight: entry.contentRect.height
|
|
19
|
-
});
|
|
13
|
+
const nextDimensions = {
|
|
14
|
+
width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,
|
|
15
|
+
height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,
|
|
16
|
+
contentWidth: entry.contentRect.width,
|
|
17
|
+
contentHeight: entry.contentRect.height
|
|
20
18
|
};
|
|
21
|
-
(
|
|
19
|
+
cancelAnimationFrame(frame);
|
|
20
|
+
frame = requestAnimationFrame(() => setDimensions(nextDimensions));
|
|
22
21
|
}
|
|
23
22
|
});
|
|
24
23
|
resizeObserverRef.current.observe(elementRef.current);
|
|
25
24
|
return () => {
|
|
25
|
+
cancelAnimationFrame(frame);
|
|
26
26
|
if (resizeObserverRef.current) {
|
|
27
27
|
resizeObserverRef.current.disconnect();
|
|
28
28
|
resizeObserverRef.current = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-dimensions.cjs","names":["useRef","useState"],"sources":["../../../src/components/OverflowList/use-dimensions.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\
|
|
1
|
+
{"version":3,"file":"use-dimensions.cjs","names":["useRef","useState"],"sources":["../../../src/components/OverflowList/use-dimensions.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\ninterface ResizeObserverDimensions {\n width: number;\n height: number;\n contentWidth: number;\n contentHeight: number;\n}\nexport function useDimensions<T extends HTMLElement | null>(\n elementRef: React.RefObject<T>\n): ResizeObserverDimensions | null {\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n const [dimensions, setDimensions] = useState<ResizeObserverDimensions | null>(null);\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n // The observer watches the same element that the measuring cycle resizes.\n // Updating dimensions synchronously inside the callback resizes an element\n // whose notification is being delivered, which browsers report as\n // \"ResizeObserver loop completed with undelivered notifications\"\n // (a window `error` event). Defer the update to the next frame instead.\n let frame = 0;\n\n resizeObserverRef.current = new ResizeObserver((entries) => {\n if (entries[0]) {\n const entry = entries[0];\n const nextDimensions = {\n width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,\n height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,\n contentWidth: entry.contentRect.width,\n contentHeight: entry.contentRect.height,\n };\n\n cancelAnimationFrame(frame);\n frame = requestAnimationFrame(() => setDimensions(nextDimensions));\n }\n });\n\n resizeObserverRef.current.observe(elementRef.current);\n\n return () => {\n cancelAnimationFrame(frame);\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n };\n }, [elementRef.current]);\n\n return dimensions;\n}\n"],"mappings":";;;AAQA,SAAgB,cACd,YACiC;CACjC,MAAM,qBAAA,GAAoBA,MAAAA,OAAAA,CAA8B,IAAI;CAC5D,MAAM,CAAC,YAAY,kBAAA,GAAiBC,MAAAA,SAAAA,CAA0C,IAAI;CAElF,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,WAAW,SACd;EAQF,IAAI,QAAQ;EAEZ,kBAAkB,UAAU,IAAI,gBAAgB,YAAY;GAC1D,IAAI,QAAQ,IAAI;IACd,MAAM,QAAQ,QAAQ;IACtB,MAAM,iBAAiB;KACrB,OAAO,MAAM,cAAc,EAAE,EAAE,cAAc,MAAM,OAAO;KAC1D,QAAQ,MAAM,cAAc,EAAE,EAAE,aAAa,MAAM,OAAO;KAC1D,cAAc,MAAM,YAAY;KAChC,eAAe,MAAM,YAAY;IACnC;IAEA,qBAAqB,KAAK;IAC1B,QAAQ,4BAA4B,cAAc,cAAc,CAAC;GACnE;EACF,CAAC;EAED,kBAAkB,QAAQ,QAAQ,WAAW,OAAO;EAEpD,aAAa;GACX,qBAAqB,KAAK;GAC1B,IAAI,kBAAkB,SAAS;IAC7B,kBAAkB,QAAQ,WAAW;IACrC,kBAAkB,UAAU;GAC9B;EACF;CACF,GAAG,CAAC,WAAW,OAAO,CAAC;CAEvB,OAAO;AACT"}
|
|
@@ -70,6 +70,7 @@ function usePopover(options) {
|
|
|
70
70
|
onChange: options.onChange
|
|
71
71
|
});
|
|
72
72
|
const previouslyOpened = (0, react.useRef)(_opened);
|
|
73
|
+
const measuredAfterShowRef = (0, react.useRef)(false);
|
|
73
74
|
const [lockedPlacement, setLockedPlacement] = (0, react.useState)(null);
|
|
74
75
|
const lockEnabled = options.preventPositionChangeWhenVisible !== false;
|
|
75
76
|
const wasOpenedRef = (0, react.useRef)(_opened);
|
|
@@ -77,6 +78,12 @@ function usePopover(options) {
|
|
|
77
78
|
wasOpenedRef.current = _opened;
|
|
78
79
|
if (_opened && lockedPlacement !== null) setLockedPlacement(null);
|
|
79
80
|
}
|
|
81
|
+
const previousPositionRef = (0, react.useRef)(options.position);
|
|
82
|
+
if (options.position !== previousPositionRef.current) {
|
|
83
|
+
previousPositionRef.current = options.position;
|
|
84
|
+
measuredAfterShowRef.current = false;
|
|
85
|
+
if (lockedPlacement !== null) setLockedPlacement(null);
|
|
86
|
+
}
|
|
80
87
|
const resetLockedPlacement = (0, react.useCallback)(() => setLockedPlacement(null), []);
|
|
81
88
|
const onClose = () => {
|
|
82
89
|
if (_opened && !options.disabled) setOpened(false);
|
|
@@ -103,7 +110,6 @@ function usePopover(options) {
|
|
|
103
110
|
floating.elements.reference,
|
|
104
111
|
floating.elements.floating
|
|
105
112
|
]);
|
|
106
|
-
const measuredAfterShowRef = (0, react.useRef)(false);
|
|
107
113
|
(0, _mantine_hooks.useIsomorphicEffect)(() => {
|
|
108
114
|
if (!_opened) {
|
|
109
115
|
measuredAfterShowRef.current = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.cjs","names":["offset","hide","flip","shift","limitShift","inline","arrow","size","useUncontrolled","useRef","useState","useCallback","useFloating","autoUpdate"],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean | undefined;\n defaultOpened: boolean | undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean | undefined;\n preventPositionChangeWhenVisible: boolean | undefined;\n keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') || state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size || options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n const measuredAfterShowRef = useRef(false);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled || lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement | null;\n if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-popover.cjs","names":["offset","hide","flip","shift","limitShift","inline","arrow","size","useUncontrolled","useRef","useState","useCallback","useFloating","autoUpdate"],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean | undefined;\n defaultOpened: boolean | undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean | undefined;\n preventPositionChangeWhenVisible: boolean | undefined;\n keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') || state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size || options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const measuredAfterShowRef = useRef(false);\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const previousPositionRef = useRef(options.position);\n if (options.position !== previousPositionRef.current) {\n previousPositionRef.current = options.position;\n measuredAfterShowRef.current = false;\n if (lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled || lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement | null;\n if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}
|
|
@@ -51,8 +51,9 @@ const SegmentedControl = require_factory.genericFactory((_props) => {
|
|
|
51
51
|
const [parent, setParent] = (0, react.useState)(null);
|
|
52
52
|
const [refs, setRefs] = (0, react.useState)({});
|
|
53
53
|
const setElementRef = (element, val) => {
|
|
54
|
+
if (element === null || refs[val] === element) return;
|
|
54
55
|
refs[val] = element;
|
|
55
|
-
setRefs(refs);
|
|
56
|
+
setRefs({ ...refs });
|
|
56
57
|
};
|
|
57
58
|
const [_value, handleValueChange] = (0, _mantine_hooks.useUncontrolled)({
|
|
58
59
|
value,
|
|
@@ -61,6 +62,7 @@ const SegmentedControl = require_factory.genericFactory((_props) => {
|
|
|
61
62
|
onChange
|
|
62
63
|
});
|
|
63
64
|
const uuid = (0, _mantine_hooks.useId)(name);
|
|
65
|
+
const dataValues = _data.map((item) => `${item.value}`);
|
|
64
66
|
const controls = _data.map((item) => /* @__PURE__ */ (0, react.createElement)(require_Box.Box, {
|
|
65
67
|
...getStyles("control"),
|
|
66
68
|
mod: {
|
|
@@ -103,6 +105,15 @@ const SegmentedControl = require_factory.genericFactory((_props) => {
|
|
|
103
105
|
(0, _mantine_hooks.useShallowEffect)(() => {
|
|
104
106
|
setKey((0, _mantine_hooks.randomId)());
|
|
105
107
|
}, [data.length]);
|
|
108
|
+
(0, _mantine_hooks.useShallowEffect)(() => {
|
|
109
|
+
setRefs((current) => {
|
|
110
|
+
const next = {};
|
|
111
|
+
dataValues.forEach((value) => {
|
|
112
|
+
if (value in current) next[value] = current[value];
|
|
113
|
+
});
|
|
114
|
+
return Object.keys(next).length === Object.keys(current).length ? current : next;
|
|
115
|
+
});
|
|
116
|
+
}, [dataValues]);
|
|
106
117
|
if (data.length === 0) return null;
|
|
107
118
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
|
|
108
119
|
...getStyles("root"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.cjs","names":["createVarsResolver","getRadius","getThemeColor","getSize","getFontSize","genericFactory","useProps","useStyles","useMantineTheme","isPrimitive","useMounted","useState","randomId","useUncontrolled","useId","Box","getContrastColor","useMergedRef","FloatingIndicator","classes"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n randomId,\n useId,\n useMergedRef,\n useMounted,\n useShallowEffect,\n useUncontrolled,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getThemeColor,\n isPrimitive,\n MantineColor,\n MantineRadius,\n MantineSize,\n Primitive,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport classes from './SegmentedControl.module.css';\n\nexport type SegmentedControlStylesNames =\n | 'root'\n | 'input'\n | 'label'\n | 'control'\n | 'indicator'\n | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n root:\n | '--sc-radius'\n | '--sc-color'\n | '--sc-font-size'\n | '--sc-padding'\n | '--sc-shadow'\n | '--sc-transition-duration'\n | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem<Value = string> {\n value: Value;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends Primitive = string>\n extends\n BoxProps,\n StylesApiProps<SegmentedControlFactory>,\n ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n /** Data based on which controls are rendered */\n data: (Value | SegmentedControlItem<Value>)[];\n\n /** Controlled component value */\n value?: Value;\n\n /** Uncontrolled component default value */\n defaultValue?: Value;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Determines whether the component is disabled */\n disabled?: boolean;\n\n /** Name attribute for the radio group. A random name is auto-generated if not provided */\n name?: string;\n\n /** Determines whether the component should take 100% width of its parent @default false */\n fullWidth?: boolean;\n\n /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */\n color?: MantineColor;\n\n /** Controls `font-size`, `padding` and `height` properties @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */\n transitionDuration?: number;\n\n /** Indicator `transition-timing-function` property @default ease */\n transitionTimingFunction?: string;\n\n /** Component orientation @default 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n\n /** If set to `false`, prevents changing the value */\n readOnly?: boolean;\n\n /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */\n autoContrast?: boolean;\n\n /** Determines whether there should be borders between items @default true */\n withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n props: SegmentedControlProps;\n ref: HTMLDivElement;\n stylesNames: SegmentedControlStylesNames;\n vars: SegmentedControlCssVariables;\n signature: <Value extends Primitive = string>(\n props: SegmentedControlProps<Value>\n ) => React.JSX.Element | null;\n}>;\n\nconst defaultProps = {\n withItemsBorders: true,\n} satisfies Partial<SegmentedControlProps>;\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n root: {\n '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n '--sc-color': color ? getThemeColor(color, theme) : undefined,\n '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n '--sc-transition-duration':\n transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n '--sc-transition-timing-function': transitionTimingFunction,\n '--sc-padding': getSize(size, 'sc-padding'),\n '--sc-font-size': getFontSize(size),\n },\n })\n);\n\nexport const SegmentedControl = genericFactory<SegmentedControlFactory>((_props) => {\n const props = useProps('SegmentedControl', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n value,\n defaultValue,\n onChange,\n size,\n name,\n disabled,\n readOnly,\n fullWidth,\n orientation,\n radius,\n color,\n transitionDuration,\n transitionTimingFunction,\n variant,\n autoContrast,\n withItemsBorders,\n mod,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<SegmentedControlFactory>({\n name: 'SegmentedControl',\n props: props as any,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const theme = useMantineTheme();\n\n const _data = data.map((item) => (isPrimitive(item) ? { label: `${item}`, value: item } : item));\n\n const initialized = useMounted();\n const [key, setKey] = useState(randomId());\n const [parent, setParent] = useState<HTMLElement | null>(null);\n const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n const setElementRef = (element: HTMLElement | null, val: string) => {\n refs[val] = element;\n setRefs(refs);\n };\n\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data)\n ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n : null,\n onChange,\n });\n\n const uuid = useId(name);\n\n const controls = _data.map((item) => (\n <Box\n {...getStyles('control')}\n mod={{ active: _value === item.value, orientation }}\n key={`${item.value}`}\n >\n <input\n {...getStyles('input')}\n disabled={disabled || item.disabled}\n type=\"radio\"\n name={uuid}\n value={`${item.value}`}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => !readOnly && handleValueChange(item.value)}\n data-focus-ring={theme.focusRing}\n key={`${item.value}-input`}\n />\n\n <Box\n component=\"label\"\n {...getStyles('label')}\n mod={{\n active: _value === item.value && !(disabled || item.disabled),\n disabled: disabled || item.disabled,\n 'read-only': readOnly,\n }}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => setElementRef(node, `${item.value}`)}\n __vars={{\n '--sc-label-color':\n color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n }}\n key={`${item.value}-label`}\n >\n <span {...getStyles('innerLabel')}>{item.label}</span>\n </Box>\n </Box>\n ));\n\n const mergedRef = useMergedRef(ref, setParent);\n\n useShallowEffect(() => {\n setKey(randomId());\n }, [data.length]);\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('root')}\n variant={variant}\n size={size}\n ref={mergedRef}\n mod={[\n {\n 'full-width': fullWidth,\n orientation,\n initialized,\n 'with-items-borders': withItemsBorders,\n },\n mod,\n ]}\n {...others}\n role=\"radiogroup\"\n data-disabled={disabled}\n >\n {typeof _value !== 'undefined' && (\n <FloatingIndicator\n target={refs[`${_value}`]}\n parent={parent}\n component=\"span\"\n transitionDuration=\"var(--sc-transition-duration)\"\n key={key}\n {...getStyles('indicator')}\n />\n )}\n\n {controls}\n </Box>\n );\n});\n\nSegmentedControl.classes = classes;\nSegmentedControl.varsResolver = varsResolver;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n\nexport namespace SegmentedControl {\n export type CssVariables = SegmentedControlCssVariables;\n export type Factory = SegmentedControlFactory;\n export type Item<Value extends Primitive = string> = SegmentedControlItem<Value>;\n export type Props<Value extends Primitive = string> = SegmentedControlProps<Value>;\n export type StylesNames = SegmentedControlStylesNames;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControl.cjs","names":["createVarsResolver","getRadius","getThemeColor","getSize","getFontSize","genericFactory","useProps","useStyles","useMantineTheme","isPrimitive","useMounted","useState","randomId","useUncontrolled","useId","Box","getContrastColor","useMergedRef","FloatingIndicator","classes"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n randomId,\n useId,\n useMergedRef,\n useMounted,\n useShallowEffect,\n useUncontrolled,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getThemeColor,\n isPrimitive,\n MantineColor,\n MantineRadius,\n MantineSize,\n Primitive,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport classes from './SegmentedControl.module.css';\n\nexport type SegmentedControlStylesNames =\n | 'root'\n | 'input'\n | 'label'\n | 'control'\n | 'indicator'\n | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n root:\n | '--sc-radius'\n | '--sc-color'\n | '--sc-font-size'\n | '--sc-padding'\n | '--sc-shadow'\n | '--sc-transition-duration'\n | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem<Value = string> {\n value: Value;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends Primitive = string>\n extends\n BoxProps,\n StylesApiProps<SegmentedControlFactory>,\n ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n /** Data based on which controls are rendered */\n data: (Value | SegmentedControlItem<Value>)[];\n\n /** Controlled component value */\n value?: Value;\n\n /** Uncontrolled component default value */\n defaultValue?: Value;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Determines whether the component is disabled */\n disabled?: boolean;\n\n /** Name attribute for the radio group. A random name is auto-generated if not provided */\n name?: string;\n\n /** Determines whether the component should take 100% width of its parent @default false */\n fullWidth?: boolean;\n\n /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */\n color?: MantineColor;\n\n /** Controls `font-size`, `padding` and `height` properties @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */\n transitionDuration?: number;\n\n /** Indicator `transition-timing-function` property @default ease */\n transitionTimingFunction?: string;\n\n /** Component orientation @default 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n\n /** If set to `false`, prevents changing the value */\n readOnly?: boolean;\n\n /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */\n autoContrast?: boolean;\n\n /** Determines whether there should be borders between items @default true */\n withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n props: SegmentedControlProps;\n ref: HTMLDivElement;\n stylesNames: SegmentedControlStylesNames;\n vars: SegmentedControlCssVariables;\n signature: <Value extends Primitive = string>(\n props: SegmentedControlProps<Value>\n ) => React.JSX.Element | null;\n}>;\n\nconst defaultProps = {\n withItemsBorders: true,\n} satisfies Partial<SegmentedControlProps>;\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n root: {\n '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n '--sc-color': color ? getThemeColor(color, theme) : undefined,\n '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n '--sc-transition-duration':\n transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n '--sc-transition-timing-function': transitionTimingFunction,\n '--sc-padding': getSize(size, 'sc-padding'),\n '--sc-font-size': getFontSize(size),\n },\n })\n);\n\nexport const SegmentedControl = genericFactory<SegmentedControlFactory>((_props) => {\n const props = useProps('SegmentedControl', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n value,\n defaultValue,\n onChange,\n size,\n name,\n disabled,\n readOnly,\n fullWidth,\n orientation,\n radius,\n color,\n transitionDuration,\n transitionTimingFunction,\n variant,\n autoContrast,\n withItemsBorders,\n mod,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<SegmentedControlFactory>({\n name: 'SegmentedControl',\n props: props as any,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const theme = useMantineTheme();\n\n const _data = data.map((item) => (isPrimitive(item) ? { label: `${item}`, value: item } : item));\n\n const initialized = useMounted();\n const [key, setKey] = useState(randomId());\n const [parent, setParent] = useState<HTMLElement | null>(null);\n const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n const setElementRef = (element: HTMLElement | null, val: string) => {\n if (element === null || refs[val] === element) {\n return;\n }\n\n refs[val] = element;\n setRefs({ ...refs });\n };\n\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data)\n ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n : null,\n onChange,\n });\n\n const uuid = useId(name);\n\n const dataValues = _data.map((item) => `${item.value}`);\n\n const controls = _data.map((item) => (\n <Box\n {...getStyles('control')}\n mod={{ active: _value === item.value, orientation }}\n key={`${item.value}`}\n >\n <input\n {...getStyles('input')}\n disabled={disabled || item.disabled}\n type=\"radio\"\n name={uuid}\n value={`${item.value}`}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => !readOnly && handleValueChange(item.value)}\n data-focus-ring={theme.focusRing}\n key={`${item.value}-input`}\n />\n\n <Box\n component=\"label\"\n {...getStyles('label')}\n mod={{\n active: _value === item.value && !(disabled || item.disabled),\n disabled: disabled || item.disabled,\n 'read-only': readOnly,\n }}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => setElementRef(node, `${item.value}`)}\n __vars={{\n '--sc-label-color':\n color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n }}\n key={`${item.value}-label`}\n >\n <span {...getStyles('innerLabel')}>{item.label}</span>\n </Box>\n </Box>\n ));\n\n const mergedRef = useMergedRef(ref, setParent);\n\n useShallowEffect(() => {\n setKey(randomId());\n }, [data.length]);\n\n useShallowEffect(() => {\n setRefs((current) => {\n const next: Record<string, HTMLElement | null> = {};\n dataValues.forEach((value) => {\n if (value in current) {\n next[value] = current[value];\n }\n });\n\n return Object.keys(next).length === Object.keys(current).length ? current : next;\n });\n }, [dataValues]);\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('root')}\n variant={variant}\n size={size}\n ref={mergedRef}\n mod={[\n {\n 'full-width': fullWidth,\n orientation,\n initialized,\n 'with-items-borders': withItemsBorders,\n },\n mod,\n ]}\n {...others}\n role=\"radiogroup\"\n data-disabled={disabled}\n >\n {typeof _value !== 'undefined' && (\n <FloatingIndicator\n target={refs[`${_value}`]}\n parent={parent}\n component=\"span\"\n transitionDuration=\"var(--sc-transition-duration)\"\n key={key}\n {...getStyles('indicator')}\n />\n )}\n\n {controls}\n </Box>\n );\n});\n\nSegmentedControl.classes = classes;\nSegmentedControl.varsResolver = varsResolver;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n\nexport namespace SegmentedControl {\n export type CssVariables = SegmentedControlCssVariables;\n export type Factory = SegmentedControlFactory;\n export type Item<Value extends Primitive = string> = SegmentedControlItem<Value>;\n export type Props<Value extends Primitive = string> = SegmentedControlProps<Value>;\n export type StylesNames = SegmentedControlStylesNames;\n}\n"],"mappings":"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"}
|