@spark-ui/components 17.15.9 → 17.16.0
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/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +1 -1
- package/dist/button/Button.appearance-styles.d.ts +8 -0
- package/dist/button/Button.d.ts +16 -2
- package/dist/button/Button.styles.d.ts +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/button-D0s-21qo.js +2 -0
- package/dist/button-D0s-21qo.js.map +1 -0
- package/dist/{button-DbwdRRfP.mjs → button-DwLTXeJX.mjs} +144 -44
- package/dist/button-DwLTXeJX.mjs.map +1 -0
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.mjs +1 -1
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.mjs +2 -2
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +1 -1
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +1 -1
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.mjs +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.mjs +2 -2
- package/dist/icon-button/IconButton.d.ts +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/{icon-button-DwFo4BqM.mjs → icon-button-C1ThqdK1.mjs} +13 -12
- package/dist/icon-button-C1ThqdK1.mjs.map +1 -0
- package/dist/icon-button-DRFf308H.js +2 -0
- package/dist/icon-button-DRFf308H.js.map +1 -0
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.mjs +2 -2
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.mjs +1 -1
- package/dist/{popover-CCJsQHFh.mjs → popover-CGhSHQzb.mjs} +2 -2
- package/dist/{popover-CCJsQHFh.mjs.map → popover-CGhSHQzb.mjs.map} +1 -1
- package/dist/{popover-DLE5r0tL.js → popover-DVz0JvON.js} +2 -2
- package/dist/{popover-DLE5r0tL.js.map → popover-DVz0JvON.js.map} +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +2 -2
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +14 -14
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.mjs +3 -3
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.mjs +2 -2
- package/package.json +5 -5
- package/dist/button-DbwdRRfP.mjs.map +0 -1
- package/dist/button-jPMfDNvm.js +0 -2
- package/dist/button-jPMfDNvm.js.map +0 -1
- package/dist/icon-button-DWaNkUqV.js +0 -2
- package/dist/icon-button-DWaNkUqV.js.map +0 -1
- package/dist/icon-button-DwFo4BqM.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-CCJsQHFh.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover-CGhSHQzb.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./icon-DY4l9nsc.js"),t=require("./icon-button-
|
|
2
|
-
//# sourceMappingURL=popover-
|
|
1
|
+
const e=require("./icon-DY4l9nsc.js"),t=require("./icon-button-DRFf308H.js");let n=require("class-variance-authority"),r=require("react"),i=require("radix-ui"),a=require("react/jsx-runtime"),o=require("@spark-ui/icons/Close");var s=(0,r.createContext)(null),c=`:popover`,l=({children:e,intent:t})=>{let[n,i]=(0,r.useState)(null);return(0,a.jsx)(s,{value:{headerId:n,setHeaderId:i,intent:t},children:e})},u=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`usePopover must be used within a Popover provider`);return e},d=({children:e,intent:t=`surface`,modal:n=!1,...r})=>(0,a.jsx)(l,{intent:t,children:(0,a.jsx)(i.Popover.Root,{"data-spark-component":`popover`,modal:n,...r,children:e})});d.displayName=`Popover`;var f=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Anchor,{"data-spark-component":`popover-anchor`,ref:n,asChild:e,...r,children:t});f.displayName=`Popover.Anchor`;var p=({asChild:e=!1,width:t=16,height:r=8,className:o,ref:s,...c})=>{let{intent:l}=u(),d=(0,n.cva)(`visible`,{variants:{intent:{surface:`fill-surface`,main:`fill-main-container`,support:`fill-support-container`,accent:`fill-accent-container`,success:`fill-success-container`,alert:`fill-alert-container`,danger:`fill-error-container`,info:`fill-info-container`,neutral:`fill-neutral-container`}},defaultVariants:{intent:`surface`}});return(0,a.jsx)(i.Popover.Arrow,{"data-spark-component":`popover-arrow`,ref:s,className:d({intent:l,className:o}),asChild:e,width:t,height:r,...c})};p.displayName=`Popover.Arrow`;var m=({"aria-label":r,className:s,ref:c,...l})=>(0,a.jsx)(i.Popover.Close,{"data-spark-component":`popover-close-button`,ref:c,className:(0,n.cx)(`right-lg top-md absolute`,s),asChild:!0,...l,children:(0,a.jsx)(t.t,{size:`sm`,intent:`neutral`,design:`ghost`,"aria-label":r,children:(0,a.jsx)(e.t,{children:(0,a.jsx)(o.Close,{})})})});m.displayName=`Popover.CloseButton`;var h=(0,n.cva)([`rounded-md`,`shadow-sm`,`focus-visible:outline-hidden focus-visible:u-outline`,`max-h-(--radix-popper-available-height) overflow-y-auto`],{variants:{intent:{surface:`bg-surface text-on-surface`,main:`bg-main-container text-on-main-container`,support:`bg-support-container text-on-support-container`,accent:`bg-accent-container text-on-accent-container`,success:`bg-success-container text-on-success-container`,alert:`bg-alert-container text-on-alert-container`,danger:`bg-error-container text-on-error-container`,info:`bg-info-container text-on-info-container`,neutral:`bg-neutral-container text-on-neutral-container`},matchTriggerWidth:{true:`w-(--radix-popper-anchor-width)`},enforceBoundaries:{true:[`max-w-(--radix-popper-available-width)`]},inset:{true:`overflow-hidden`,false:`p-lg`},elevation:{dropdown:`z-dropdown`,popover:`z-popover`}},compoundVariants:[{inset:!1,class:`has-data-[spark-component=popover-close-button]:pr-3xl`},{enforceBoundaries:!1,matchTriggerWidth:!1,class:`max-w-[min(var(--spacing-sz-384),100vw)]`}],defaultVariants:{matchTriggerWidth:!1,enforceBoundaries:!1,inset:!1,intent:`surface`,elevation:`popover`}}),g=({className:e,children:t,matchTriggerWidth:n=!1,align:r=`center`,arrowPadding:o=16,asChild:s=!1,avoidCollisions:c=!0,"aria-labelledby":l,collisionBoundary:d,collisionPadding:f=0,hideWhenDetached:p=!1,side:m=`bottom`,sideOffset:g=8,sticky:_=`partial`,inset:v=!1,elevation:y=`popover`,ref:b,...x})=>{let{headerId:S,intent:C}=u();return(0,a.jsx)(i.Popover.Content,{"aria-labelledby":S||l,className:h({enforceBoundaries:!!d,matchTriggerWidth:n,inset:v,elevation:y,intent:C,className:e}),"data-spark-component":`popover-content`,ref:b,align:r,arrowPadding:o,asChild:s,avoidCollisions:c,collisionBoundary:d,collisionPadding:f,hideWhenDetached:p,side:m,sideOffset:g,sticky:_,...x,children:t})};g.displayName=`Popover.Content`;var _=({children:e,className:t,ref:i,...o})=>{let s=`${c}-header-${(0,r.useId)()}`,{setHeaderId:l}=u();return(0,r.useLayoutEffect)(()=>(l(s),()=>l(null)),[s,l]),(0,a.jsx)(`header`,{id:s,ref:i,className:(0,n.cx)(`mb-md text-headline-2`,t),...o,children:e})};_.displayName=`Popover.Header`;var v=({children:e,...t})=>(0,a.jsx)(i.Popover.Portal,{...t,children:e});v.displayName=`Popover.Portal`;var y=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Trigger,{"data-spark-component":`popover-trigger`,ref:n,asChild:e,...r,children:t});y.displayName=`Popover.Trigger`;var b=Object.assign(d,{Anchor:f,Arrow:p,CloseButton:m,Content:g,Header:_,Portal:v,Trigger:y});b.displayName=`Popover`,f.displayName=`Popover.Anchor`,p.displayName=`Popover.Arrow`,m.displayName=`Popover.CloseButton`,g.displayName=`Popover.Content`,_.displayName=`Popover.Header`,v.displayName=`Popover.Portal`,y.displayName=`Popover.Trigger`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});
|
|
2
|
+
//# sourceMappingURL=popover-DVz0JvON.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-DLE5r0tL.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover-DVz0JvON.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../icon-DY4l9nsc.js"),n=require("../button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../icon-DY4l9nsc.js"),n=require("../button-D0s-21qo.js"),r=require("../icon-button-DRFf308H.js");let i=require("class-variance-authority"),a=require("react"),o=require("react/jsx-runtime"),s=require("@spark-ui/hooks/use-scroll-overflow"),c=require("@spark-ui/icons/ArrowVerticalRight"),l=require("@spark-ui/icons/ArrowVerticalLeft"),u=require("react-snap-carousel");var d=(0,a.createContext)(null),f=({snapType:e=`none`,snapStop:t=`normal`,scrollBehavior:n=`smooth`,loop:r=!1,gap:c=16,withFade:l=!1,scrollPadding:f=0,children:p,className:m,...h})=>{let g=(0,a.useRef)(null),_=(0,a.useRef)(null),v=(0,u.useSnapCarousel)(),{overflow:y,refresh:b}=(0,s.useScrollOverflow)(g,{precisionTreshold:1}),{activePageIndex:x,pages:S,refresh:C}=v,w=S[x],T=w?[w[0]+1,w[w.length-1]+1]:[0,0],E=(0,a.useCallback)(()=>{C&&g.current&&setTimeout(()=>{C()},0)},[C]);(0,a.useEffect)(()=>{E()},[p,E]),(0,a.useLayoutEffect)(()=>{g.current&&requestAnimationFrame(()=>{b()})},[p,b]);let D=()=>{_.current?.focus()},O={...v,snapType:e,snapStop:t,skipKeyboardNavigation:D,scrollBehavior:n,visibleItemsRange:T,loop:r,gap:c,withFade:l,scrollPadding:f,scrollAreaRef:g,overflow:y};return(0,o.jsxs)(d,{value:O,children:[(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list`,className:(0,i.cx)(`gap-lg group/scrolling-list relative flex flex-col default:w-full`,m),...h,children:p}),(0,o.jsx)(`span`,{ref:_,className:`size-0 overflow-hidden`,tabIndex:-1})]})};f.displayName=`ScrollingList`;var p=({children:e,visibility:t=`always`,className:n,...r})=>(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-controls`,className:(0,i.cx)(`default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden`,n),style:{"--scrolling-list-controls-opacity":t===`hover`?`0`:`1`},"data-orientation":`horizontal`,...r,children:e});p.displayName=`ScrollingList.Controls`;function m(e,t){let[n,r]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let n=e=>{r(!0);let n=e.target,i=t.current;if(n&&i){let e=n.getBoundingClientRect(),t=i.getBoundingClientRect();e.left>=t.left&&e.right<=t.right&&e.top>=t.top&&e.bottom<=t.bottom||n.scrollIntoView({behavior:`smooth`,inline:`center`,block:`nearest`})}},i=t=>{e.current&&!e.current.contains(t.relatedTarget)&&r(!1)},a=e.current;return a&&(a.addEventListener(`focusin`,n),a.addEventListener(`focusout`,i)),()=>{a&&(a.removeEventListener(`focusin`,n),a.removeEventListener(`focusout`,i))}},[e,t]),n}var h=({asChild:t=!1,children:n,index:r=0,className:s=``,...c})=>{let l=(0,a.useContext)(d),u=(0,a.useRef)(null),f=l.snapPointIndexes.has(r);return m(u,l.scrollAreaRef),(0,o.jsx)(t?e.Slot:`div`,{"data-spark-component":`scrolling-list-item`,role:`listitem`,ref:u,className:(0,i.cx)(`default:w-auto default:shrink-0`,{"snap-start":f,"snap-normal":f&&l.snapStop===`normal`,"snap-always":f&&l.snapStop===`always`},s),...c,children:n})};h.displayName=`ScrollingList.Item`;function g(...e){return t=>{e.forEach(e=>{typeof e==`function`?e(t):e&&typeof e==`object`&&`current`in e&&(e.current=t)})}}var _=({children:e,ref:t,className:n=``,...r})=>{let s=(0,a.useContext)(d),c={mandatory:`x mandatory`,proximity:`x proximity`,none:`none`},l=e=>{!s.loop&&!s.hasPrevPage||(e.preventDefault(),s.goTo(s.hasPrevPage?s.activePageIndex-1:s.pages.length-1,{behavior:s.scrollBehavior}))},u=e=>{!s.loop&&!s.hasNextPage||(e.preventDefault(),s.goTo(s.hasNextPage?s.activePageIndex+1:0,{behavior:s.scrollBehavior}))},f=e=>{e.key===`ArrowLeft`&&l(e),e.key===`ArrowRight`&&u(e)},p={scrollSnapType:c[s.snapType],scrollPaddingInline:`var(--scrolling-list-px)`,"--scrolling-list-px":`${s.scrollPadding}px`,"--scrolling-list-gap":`${s.gap}px`,...s.withFade&&{maskImage:`linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`calc(100% + ${s.overflow.left?`0px`:`44px`} + ${s.overflow.right?`0px`:`44px`}) 100%`,maskPosition:`${s.overflow.left?`0px`:`-44px`} 0`}};return(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-items`,id:`scrolling-list-items`,role:`list`,className:(0,i.cx)(`relative transition-all duration-300`,`u-no-scrollbar overflow-x-auto scroll-smooth`,`w-full gap-(--scrolling-list-gap) default:flex default:flex-row`,`focus-visible:u-outline`,n),ref:g(s.scrollAreaRef,s.scrollRef,t),style:p,onKeyDown:f,...r,children:a.Children.map(e,(e,t)=>(0,a.isValidElement)(e)?(0,a.cloneElement)(e,{index:t}):e)})};_.displayName=`ScrollingList.Items`;var v=({"aria-label":e,onClick:n,...s})=>{let l=(0,a.useContext)(d),u=e=>{l.hasNextPage?l.next({behavior:l.scrollBehavior}):l.goTo(0,{behavior:l.scrollBehavior}),n?.(e)},f=!(l.overflow.left||l.overflow.right)||!l.loop&&!l.overflow.right;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-next-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:u,disabled:f,"aria-label":e,"aria-controls":`scrolling-list-items`,...s,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalRight,{})})})};v.displayName=`ScrollingList.NextButton`;var y=({"aria-label":e,onClick:n,...s})=>{let c=(0,a.useContext)(d),u=e=>{c.activePageIndex===0&&(c.scrollAreaRef.current?.scrollLeft||0)>0?c.goTo(0,{behavior:c.scrollBehavior}):c.hasPrevPage?c.prev({behavior:c.scrollBehavior}):c.goTo(c.pages.length-1,{behavior:c.scrollBehavior}),n?.(e)},f=!(c.overflow.left||c.overflow.right)||!c.loop&&!c.overflow.left;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-prev-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:u,disabled:f,"aria-label":e,"aria-controls":`scrolling-list-items`,...s,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(l.ArrowVerticalLeft,{})})})};y.displayName=`ScrollingList.PrevButton`;var b=({children:e,...t})=>{let r=(0,a.useContext)(d);return(0,o.jsx)(n.t,{type:`button`,design:`tinted`,intent:`surface`,tabIndex:0,className:(0,i.cx)(`z-raised absolute top-1/2 left-0 -translate-y-1/2`,`not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0`),onClick:r.skipKeyboardNavigation,...t,children:e})};b.displayName=`ScrollingList.SkipButton`;var x=Object.assign(f,{Controls:p,NextButton:v,PrevButton:y,Item:h,Items:_,SkipButton:b});x.displayName=`ScrollingList`,exports.ScrollingList=x;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Slot as e } from "../slot/index.mjs";
|
|
2
2
|
import { t } from "../icon-Bs-39J-H.mjs";
|
|
3
|
-
import { t as n } from "../button-
|
|
4
|
-
import { t as r } from "../icon-button-
|
|
3
|
+
import { t as n } from "../button-DwLTXeJX.mjs";
|
|
4
|
+
import { t as r } from "../icon-button-C1ThqdK1.mjs";
|
|
5
5
|
import { cx as i } from "class-variance-authority";
|
|
6
6
|
import { Children as a, cloneElement as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
|
|
7
7
|
import { jsx as h, jsxs as g } from "react/jsx-runtime";
|
package/dist/stepper/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js"),t=require("../icon-button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js"),t=require("../icon-button-DRFf308H.js"),n=require("../input-BoxJZira.js");let r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("@spark-ui/hooks/use-merge-refs"),s=require("@spark-ui/components/form-field"),c=require("@spark-ui/icons/Minus"),l=require("@base-ui/react/number-field"),u=require("@spark-ui/icons/Plus");var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(h.value??h.defaultValue??null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/stepper/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "../icon-Bs-39J-H.mjs";
|
|
2
|
-
import { t } from "../icon-button-
|
|
2
|
+
import { t } from "../icon-button-C1ThqdK1.mjs";
|
|
3
3
|
import { n, r } from "../input-Du9YSgAt.mjs";
|
|
4
4
|
import { cx as i } from "class-variance-authority";
|
|
5
5
|
import { createContext as a, useContext as o, useRef as s } from "react";
|
package/dist/table/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.js"),t=require("../icon-DY4l9nsc.js"),n=require("../button-jPMfDNvm.js"),r=require("../checkbox-Cbewcw6G.js");let i=require("class-variance-authority"),a=require("react");a=e.t(a);let o=require("react/jsx-runtime"),s=require("@react-aria/utils"),c=require("@react-stately/table"),l=require("react-aria"),u=require("@react-aria/table"),d=require("@spark-ui/icons/ArrowDown"),f=require("@spark-ui/icons/ArrowUp"),p=require("@spark-ui/icons/Sort");var m=(0,a.createContext)({isResizable:!1,tableWidth:0});function h(){return(0,a.useContext)(m)}var g=(0,a.createContext)({selectedCount:0,onClearSelection:()=>{}});function _(){return(0,a.useContext)(g)}function v({children:e,className:t,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onClearSelection:c,onSelectAll:l,allowsResizing:u=!0,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,...x}){let S=0;n===`all`?S=a??0:n instanceof Set?S=n.size:n&&(S=new Set(n).size);let C=c??(()=>r?.(new Set));return(0,o.jsx)(g,{value:{...x,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onSelectAll:l,selectedCount:S,onClearSelection:C,allowsResizing:u,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,className:t},children:(0,o.jsx)(`div`,{className:(0,i.cx)(`gap-md flex flex-col`,t),children:e})})}v.displayName=`Table`;function y({className:e,children:t,...n}){let r=(0,a.useRef)(null),[c,l]=(0,a.useState)(0);return(0,a.useLayoutEffect)(()=>{let e=r.current;e&&l(e.clientWidth)},[]),(0,s.useResizeObserver)({ref:r,onResize:()=>{let e=r.current;e&&l(e.clientWidth)}}),(0,o.jsx)(m,{value:{isResizable:!0,tableWidth:c},children:(0,o.jsx)(`div`,{ref:r,"data-spark-component":`resizable-table-container`,className:(0,i.cx)(`relative w-full overflow-auto`,e),...n,children:t})})}y.displayName=`ResizableTableContainer`;var b=`[data-spark-component="table-cell"]`;function x(e){return!e||!(e instanceof Element)?!1:!!e.closest(`[role="combobox"],select,[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`)}function S(e){if(!e||!(e instanceof Element))return!1;let t=e.closest(`[role="combobox"],[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`);return t?t.getAttribute(`aria-expanded`)===`true`:!1}var C=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function w(e){return!e||!(e instanceof Element)?null:e.closest(b)}function T(e){return e.getAttribute(`data-table-cell-kind`)===`selection`}function E(e){return Array.from(e.querySelectorAll(C)).filter(t=>!(t===e||t.hasAttribute(`disabled`)||t.getAttribute(`aria-disabled`)===`true`||t.getAttribute(`hidden`)!==null))}function D(e,t){for(let n of E(e)){let e=`data-prev-tabindex`;if(!t)n.hasAttribute(e)||n.setAttribute(e,n.getAttribute(`tabindex`)??``),n.setAttribute(`tabindex`,`-1`);else{let t=n.getAttribute(e);if(t===null)continue;n.removeAttribute(e),t===``?n.removeAttribute(`tabindex`):n.setAttribute(`tabindex`,t)}}}function O(e){let t=Array.from(e.querySelectorAll(b));for(let e of t)D(e,!1)}function ee({ref:e,gridProps:t,onKeyDownCapture:n,onFocusCapture:r}){let[i,o]=(0,a.useState)(`grid`),s=(0,a.useRef)(`grid`),c=(0,a.useRef)(null),u=(0,a.useRef)(!1),d=(0,a.useMemo)(()=>{let{onKeyDown:a,...d}=t,f=e=>{c.current=e,s.current=`interaction`,o(`interaction`),D(e,!0)};return(0,l.mergeProps)(d,{onKeyDown:e=>{if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let e=c.current,t=document.activeElement;if(e&&t instanceof Node&&e.contains(t))return}s.current===`interaction`&&(e.key===`ArrowUp`||e.key===`ArrowDown`)&&x(e.target)&&w(e.target)===c.current||a?.(e)},onKeyDownCapture:e=>{if(n?.(e),s.current===`interaction`&&e.key===`Tab`){let t=w(e.target);t&&t===c.current&&e.stopPropagation();return}if(x(e.target)&&s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current)return}if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current){e.stopPropagation();return}}if(s.current===`grid`&&e.key===`ArrowRight`){let t=w(e.target);if(t){let n=t.closest(`tr`);if(n){let r=Array.from(n.querySelectorAll(b));if(r.length>0&&r[r.length-1]===t){e.preventDefault(),e.stopPropagation(),n.focus();return}}}}if(s.current===`grid`&&e.key===`Enter`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`grid`&&e.key===`F2`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`interaction`&&e.key===`Escape`){if(S(e.target))return;let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}if(s.current===`interaction`&&e.key===`F2`){let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}},onBlurCapture:t=>{if(s.current!==`interaction`)return;let n=e.current;if(!n)return;let r=t.relatedTarget;r instanceof Node&&n.contains(r)||(c.current=null,s.current=`grid`,o(`grid`))},onFocusCapture:t=>{r?.(t);let n=u.current;u.current=!1;let i=e.current,a=w(t.target);if(s.current===`interaction`&&c.current&&i){let e=!!(a&&a!==c.current),n=!a&&t.target instanceof Element&&i.contains(t.target)&&!c.current.contains(t.target);(e||n)&&(s.current=`grid`,o(`grid`),n&&(c.current=null))}if(!a)return;c.current=a;let l=t.target instanceof Element?t.target:null,d=a.matches(b),p=s.current===`grid`,m=!!(l&&l!==a&&a.contains(l)),h=E(a).length>0;p&&d&&m&&h&&!n&&queueMicrotask(()=>a.focus()),n&&p&&m&&d&&h&&!T(a)&&f(a)},onPointerDownCapture:e=>{let t=w(e.target);t?.matches(b)&&e.target instanceof Element&&e.target!==t&&t.contains(e.target)&&(u.current=!0)},"data-table-keyboard-mode":i})},[t,i,e,r,n]);return(0,a.useEffect)(()=>{s.current=i;let t=e.current;if(t){if(i===`grid`){O(t),c.current?.focus?.();return}O(t),c.current&&D(c.current,!0)}},[i,e]),{gridProps:d,keyboardMode:i}}var k=(0,i.cva)([`h-sz-64 min-w-sz-64`,`relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container`,`pl-lg pr-lg py-sm text-left outline-none box-border`,`cursor-default`,`data-focus-visible:u-outline data-focus-visible:-outline-offset-2`],{variants:{checkbox:{true:[`w-sz-64 min-w-sz-64 max-w-sz-64`,`px-0 align-middle`]},resizable:{true:[`pr-xl`]}},defaultVariants:{checkbox:!1,resizable:!1}}),te=(0,i.cva)([`flex flex-1 justify-between items-center gap-md`,`font-inherit text-left text-inherit`,`whitespace-nowrap text-ellipsis`,`border-transparent`,`data-focus-visible:u-outline data-focus-visible:outline-offset-2`],{variants:{},defaultVariants:{}});(0,i.cva)([`empty:italic empty:text-center empty:text-body-2 empty:py-lg`],{variants:{},defaultVariants:{}});var ne=(0,i.cva)([`p-lg outline-none box-border default:overflow-hidden`,`border-b-sm border-outline [tr:last-child>&]:border-b-0`,`[-webkit-tap-highlight-color:transparent]`,`data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`],{variants:{checkbox:{true:[`w-sz-64 py-sm px-0 align-middle`]}},defaultVariants:{checkbox:!1}}),re=(0,i.cva)([`pointer-events-none`,`[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle`],{variants:{},defaultVariants:{}}),ie=`button, [role="button"], [role="switch"], [role="checkbox"], [role="option"], input:not([type="hidden"]), select, textarea, [href], [data-spark-component="dropdown-trigger"], [data-spark-component="icon-button"], [data-spark-component="switch"], [data-spark-component="switch-input"], [data-spark-component="combobox-input"]`,ae=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function oe(e){if(!e||!(e instanceof Element))return!1;let t=e;return t.matches(ie)||t.closest(ie)!==null}function se(e){return e?e instanceof Element?e:e instanceof Text?e.parentElement:null:null}function ce(e){for(let t of e.querySelectorAll(ae))if(t!==e&&!t.hasAttribute(`disabled`)&&t.getAttribute(`aria-disabled`)!==`true`&&t.getAttribute(`hidden`)===null)return!0;return!1}function le(e){let t=se(e);if(!t)return!1;if(oe(t))return!0;let n=t.closest(`[data-spark-component="table-cell"]`);return!n||n.getAttribute(`data-table-cell-kind`)===`selection`?!1:ce(n)}var A=(0,a.createContext)(`grid`);function j({checkboxProps:e,className:t,suppressFocusWalker:n}){let{isSelected:i,isIndeterminate:a,isDisabled:s,onChange:c,...l}=e,u=a===!0?`indeterminate`:!!i;return(0,o.jsx)(`span`,{...n?{"data-react-aria-prevent-focus":!0}:void 0,onClick:e=>e.stopPropagation(),onPointerDown:e=>e.stopPropagation(),className:t??`flex h-full min-h-full items-center justify-center`,children:(0,o.jsx)(r.n,{checked:u,disabled:s,onCheckedChange:c,...l})})}j.displayName=`Table.SelectionCheckbox`;function M({cell:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{gridCellProps:i}=(0,l.useTableCell)({node:e},t,r),{isFocusVisible:s,focusProps:c}=(0,l.useFocusRing)(),d=(0,a.useContext)(A),f=(0,a.useCallback)(e=>{d===`interaction`&&(e.key!==` `&&e.key!==`Enter`||e.stopPropagation())},[d]),{onKeyDownCapture:p,...m}=i,h=(0,a.useCallback)(e=>{[`ArrowLeft`,`ArrowRight`,`ArrowUp`,`ArrowDown`].includes(e.key)||p?.(e)},[p]),g=(0,u.useTableSelectionCheckbox)({key:e.parentKey??e.key},t),_=t.collection.columns[e.index??0]?.key??null,v=_?n?.columnWidths?.get?.(_):void 0;return e.props?.isSelectionCell?(0,o.jsx)(`td`,{...(0,l.mergeProps)(m,{onKeyDownCapture:h},c,{onKeyDown:f}),ref:r,"data-spark-component":`table-cell`,"data-table-cell-kind":`selection`,className:ne({checkbox:!0}),"data-focus-visible":s||void 0,children:(0,o.jsx)(j,{suppressFocusWalker:d===`grid`,checkboxProps:g.checkboxProps})}):(0,o.jsx)(`td`,{...(0,l.mergeProps)(m,{onKeyDownCapture:h},c,{onKeyDown:f}),ref:r,"data-spark-component":`table-cell`,className:ne(),"data-focus-visible":s||void 0,style:v?{width:v}:void 0,children:e.rendered})}M.displayName=`Table.BodyCellRenderer`;function N(e){if(e)return t=>{le((0,s.getEventTarget)(t.nativeEvent))||e(t)}}function P({item:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{rowProps:s,isSelected:c}=(0,l.useTableRow)({node:e},t,r),{isFocusVisible:u,focusProps:d}=(0,l.useFocusRing)(),{onClick:f,onPointerDown:p,onMouseDown:m,onPointerUp:h,onPointerCancel:g,..._}=s,v=(0,i.cx)(`outline-none box-border data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`,_.className,c&&`bg-support-container text-on-support-container`);return(0,o.jsx)(`tr`,{...(0,l.mergeProps)(_,d),onPointerDown:N(p),onMouseDown:N(m),onPointerUp:N(h),onPointerCancel:N(g),onClick:N(f),ref:r,"data-spark-component":`table-row`,"data-selected":c||void 0,"data-focus-visible":u||void 0,className:v,tabIndex:-1,children:[...e.childNodes].map(e=>(0,o.jsx)(M,{cell:e,state:t,resizeState:n},e.key))})}P.displayName=`Table.BodyRowRenderer`;function F({column:e,ariaLabel:t,resizeState:n,resizeCallbacks:r}){let s=(0,a.useRef)(null),{resizerProps:c,inputProps:l,isResizing:d}=(0,u.useTableColumnResize)({column:e,"aria-label":t??`Resize column`,onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd},n,s);return(0,o.jsx)(`div`,{role:`presentation`,className:(0,i.cx)(`cursor-col-resize absolute inset-y-lg right-0 flex w-lg items-center justify-center`,`after:block after:h-full after:w-[2px] after:bg-outline after:transition-all after:duration-75`,`has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2`,d&&`after:bg-outline-high after:scale-120`),"data-resizable-direction":`both`,...c,children:(0,o.jsx)(`input`,{ref:s,disabled:!d,...l})})}F.displayName=`Table.ColumnResizer`;function I({state:e}){let{checkboxProps:t}=(0,u.useTableSelectAllCheckbox)(e),{collection:n,selectionManager:r}=e,i=r.selectedKeys,a=n,s=a.body,c=s==null?new Set(n.getKeys()):new Set([...a.getChildren(s.key)].map(e=>e.key)),l=i===`all`?c:i,d=[...c].filter(e=>l.has(e)).length,f=c.size,p=f>0&&d===f,m=d>0&&d<f,{isSelected:h,isIndeterminate:g,onChange:_,...v}=t,y=e=>{(e.key===` `||e.key===`Enter`)&&e.stopPropagation(),e.key===`Enter`&&(e.preventDefault(),t.isDisabled||_?.(!p))};return(0,o.jsx)(j,{checkboxProps:{...v,isSelected:p,isIndeterminate:m,onChange:_,onKeyDown:y}})}I.displayName=`Table.HeaderSelectionCheckbox`;var L=(0,i.cx)(`sticky top-0 z-sticky`);function R({column:e,state:n,resizeState:r,stickyHeader:s,resizeCallbacks:c,isLastColumnInRow:u=!1}){let m=(0,a.useRef)(null),{resizeColumnAriaLabel:h}=_(),{columnHeaderProps:g}=(0,l.useTableColumnHeader)({node:e},n,m),{isFocusVisible:v,focusProps:y}=(0,l.useFocusRing)(),b=e.props?.allowsResizing!==!1&&!u,x=r?.columnWidths?.get?.(e.key),S=!!(r&&b);if(e.props?.isSelectionCell)return(0,o.jsx)(`th`,{...g,ref:m,role:`columnheader`,className:(0,i.cx)(k({checkbox:!0}),s&&L),"data-spark-component":`table-column`,"data-table-selection-columnheader":!0,"data-focus-visible":v||void 0,children:(0,o.jsx)(I,{state:n})});let C=!!e.props?.allowsSorting,w=n.sortDescriptor?.column===e.key,T=n.sortDescriptor?.direction??`ascending`,E=w?T===`descending`?(0,o.jsx)(d.ArrowDown,{}):(0,o.jsx)(f.ArrowUp,{}):(0,o.jsx)(p.Sort,{}),D=t=>{C&&(t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),t.stopPropagation(),n.sort?.(e.key)))};return(0,o.jsxs)(`th`,{...(0,l.mergeProps)(g,y),ref:m,role:`columnheader`,className:(0,i.cx)(k({resizable:S}),s&&L),style:x?{width:x}:void 0,"data-spark-component":`table-column`,"data-focus-visible":v||void 0,onKeyDown:D,children:[(0,o.jsxs)(`div`,{className:te(),children:[(0,o.jsx)(`button`,{type:`button`,className:(0,i.cx)(`gap-md flex min-w-0 flex-1 items-center text-left`,`focus-visible:u-outline outline-none`,`bg-transparent p-0 border-0`),onKeyDown:D,children:(0,o.jsx)(`span`,{className:`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap`,children:e.rendered})}),C?(0,o.jsx)(`span`,{"aria-hidden":`true`,className:(0,i.cx)(`shrink-0 opacity-dim-2 group-hover/column:opacity-100`,w&&`opacity-100`),children:(0,o.jsx)(t.t,{size:`sm`,children:E})}):null]}),r&&b?(0,o.jsx)(F,{column:e,ariaLabel:typeof h==`function`?h(e):h,resizeState:r,resizeCallbacks:c}):null]})}R.displayName=`Table.ColumnHeader`;function z({item:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i}){let s=(0,a.useRef)(null),{rowProps:c}=(0,l.useTableHeaderRow)({node:e},t,s),u=[...e.childNodes];return(0,o.jsx)(`tr`,{...c,ref:s,children:u.map((e,a)=>(0,o.jsx)(R,{column:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i,isLastColumnInRow:a===u.length-1},e.key))})}z.displayName=`Table.HeaderRowRenderer`;function B({className:e,children:t,stickyHeader:n,...r}){let u=!!n,d=(0,a.useRef)(null),f=h(),p=r.selectionMode===`multiple`,m=(0,c.useTableState)({...r,showSelectionCheckboxes:r.selectionMode===`multiple`,children:t}),g=(0,c.useTableColumnResizeState)({tableWidth:f.tableWidth},m),_=f.isResizable&&r.allowsResizing!==!1?g:null,{gridProps:v}=(0,l.useTable)({...r},m,d),y=m.collection.headerRows,b=[...m.collection.body.childNodes],x=m.collection.body.props?.renderEmptyState,S=m.collection.columns.length||1,C=b.length>0||!!x,{rowGroupProps:w}=(0,l.useTableRowGroup)(),{rowGroupProps:T}=(0,l.useTableRowGroup)(),{gridProps:E,keyboardMode:D}=ee({ref:d,gridProps:v,onKeyDownCapture:r.onKeyDownCapture,onFocusCapture:r.onFocusCapture});return(0,o.jsx)(A,{value:D,children:(0,o.jsxs)(`table`,{...(0,l.mergeProps)(E,(0,s.filterDOMProps)(r,{global:!0})),ref:d,"data-spark-component":`table`,className:(0,i.cx)(`default:w-full`,p?`table-fixed`:void 0,`border-separate border-spacing-y-0`,`bg-surface`,`outline-none`,`text-body-1`,`forced-color-adjust-none`,`data-focus-visible:u-outline-inset`,`has-[>[data-empty]]:h-full`,e),children:[(0,o.jsx)(`thead`,{...w,"data-spark-component":`table-header`,children:y.map(e=>(0,o.jsx)(z,{item:e,state:m,resizeState:_,stickyHeader:u,resizeCallbacks:{onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd}},e.key))}),(0,o.jsxs)(`tbody`,{...T,"data-spark-component":`table-body`,children:[C?(0,o.jsx)(`tr`,{"aria-hidden":`true`,className:re(),role:`presentation`,"data-spark-component":`table-body-spacer`,children:(0,o.jsx)(`td`,{colSpan:S,role:`presentation`})}):null,b.length===0&&x?(0,o.jsx)(`tr`,{"data-empty":!0,children:(0,o.jsx)(`td`,{colSpan:S,children:x({isEmpty:!0})})}):null,b.map(e=>(0,o.jsx)(P,{item:e,state:m,resizeState:_},e.key))]})]})})}B.displayName=`Table.Grid.Inner`;function ue(e){return typeof e==`number`?`${e}px`:e}function V({"aria-label":e,"aria-labelledby":t,className:n,children:r}){let{allowsResizing:i=!0,maxHeight:a,stickyHeader:s,onResizeStart:c,onResize:l,onResizeEnd:u,onKeyDownCapture:d,sortDescriptor:f,onSortChange:p,className:m,...h}=_(),g=a==null?void 0:{maxHeight:ue(a)},v=n??m,b={...h,...e!=null&&{"aria-label":e},...t!=null&&{"aria-labelledby":t},sortDescriptor:f,onSortChange:p,onKeyDownCapture:d,className:v,stickyHeader:s},x=B;return i?(0,o.jsx)(y,{className:v,style:g,onResizeStart:c,onResize:l,onResizeEnd:u,children:(0,o.jsx)(x,{...b,children:r})}):(0,o.jsx)(`div`,{className:`relative w-full overflow-auto`,style:g,children:(0,o.jsx)(x,{...b,children:r})})}V.displayName=`Table.Grid`;function H(e){return(0,o.jsx)(c.TableBody,{...e})}H.displayName=`Table.Body`,H.getCollectionNode=c.TableBody.getCollectionNode;var U=(0,a.createContext)(null);function W(){let e=(0,a.useContext)(U);if(!e)throw Error(`Table.BulkBar subcomponents must be used within Table.BulkBar`);return e}function G({children:e,className:t,rootProps:n,...r}){let{selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u}=_();return(0,o.jsx)(U,{value:{selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u},children:(0,o.jsx)(`div`,{role:`toolbar`,"aria-label":r[`aria-label`]??`Table bulk actions`,"data-spark-component":`table-bulk-bar`,className:(0,i.cx)(`gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between`,`rounded-lg`,`bg-support-container text-on-support-container p-lg`,t),...n,children:e})})}function K({children:e}){return W(),(0,o.jsx)(`span`,{className:`text-body-1-highlight`,children:e})}function q({className:e,children:t,...r}){let{selectedCount:a,onClearSelection:s,hasMultiplePages:c}=W();return c?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:a===0,onClick:s,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}function de({className:e,children:t,...r}){let{selectedCount:a,totalCount:s,onSelectAll:c,hasMultiplePages:l}=W();return l?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:s==null||c==null||a>=s,onClick:c,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}G.displayName=`Table.BulkBar`;var J=G;J.displayName=`Table.BulkBar`,K.displayName=`Table.BulkBarSelectedCount`,q.displayName=`Table.BulkBarClearButton`,de.displayName=`Table.BulkBarSelectAllButton`;function Y(e){return(0,o.jsx)(c.Cell,{...e})}Y.displayName=`Table.Cell`,Y.getCollectionNode=c.Cell.getCollectionNode;function X({label:e,allowsResizing:t=!0,...n}){return null}X.displayName=`Table.Column`,X.getCollectionNode=function*(e,t){let n=e.title??e.label??e.children??null,r=e.textValue||(typeof n==`string`?n:``)||e[`aria-label`],i=yield{type:`column`,key:e.id??null,hasChildNodes:!!e.childColumns||!!e.title&&a.default.Children.count(e.children)>0,rendered:n,textValue:r,props:{...e,title:e.title??e.label,allowsResizing:e.allowsResizing},*childNodes(){if(e.childColumns)for(let t of e.childColumns)yield{type:`column`,value:t};else if(e.title){let t=[];a.default.Children.forEach(e.children,e=>{t.push({type:`column`,element:e})}),yield*t}},shouldInvalidate(e){return o(e),!1}},o=e=>{for(let t of i)t.hasChildNodes||e.columns.push(t)};o(t)};function Z(e){return(0,o.jsx)(c.TableHeader,{...e})}Z.displayName=`Table.Header`,Z.getCollectionNode=c.TableHeader.getCollectionNode;function Q(e){return null}Q.displayName=`Table.Row`,Q.getCollectionNode=function*(e,t){let{children:n,textValue:r,UNSTABLE_childItems:i}=e;yield{type:`item`,key:e.id??null,props:e,textValue:r,"aria-label":e[`aria-label`],hasChildNodes:!0,*childNodes(){if(t.showDragButtons&&(yield{type:`cell`,key:`header-drag`,props:{isDragButtonCell:!0}}),t.showSelectionCheckboxes&&t.selectionMode!==`none`&&(yield{type:`cell`,key:`header`,props:{isSelectionCell:!0}}),typeof n==`function`){for(let e of t.columns)yield{type:`cell`,element:n(e.key),key:e.key};if(i)for(let e of i)yield{type:`item`,value:e}}else{let e=[],r=[],i=0;if(a.default.Children.forEach(n,n=>{if(n)if(n.type===Q){if(e.length<t.columns.length)throw Error(`All of a Row's child Cells must be positioned before any child Rows.`);r.push({type:`item`,element:n})}else e.push({type:`cell`,element:n}),i+=n.props?.colSpan??1}),i!==t.columns.length)throw Error(`Cell count must match column count. Found ${i} cells and ${t.columns.length} columns.`);yield*e,yield*r}},shouldInvalidate(e){return e.columns.length!==t.columns.length||e.columns.some((e,n)=>e.key!==t.columns[n].key)||e.showSelectionCheckboxes!==t.showSelectionCheckboxes||e.showDragButtons!==t.showDragButtons||e.selectionMode!==t.selectionMode}}};function fe(e,t,n,r){let i=e[n],a=t[n];if(i===a)return 0;let o;return o=typeof i==`number`&&typeof a==`number`?i<a?-1:1:String(i).localeCompare(String(a)),r===`descending`?-o:o}function pe(e,t={}){let{initialSort:n,compare:r}=t,[i,o]=(0,a.useState)(()=>n?{column:n.column,direction:n.direction}:{column:`id`,direction:`ascending`});return{sortDescriptor:i,onSortChange:o,setSortDescriptor:o,sortedItems:(0,a.useMemo)(()=>{let t=i.column;if(!t)return[...e];let n=r??fe,a=i.direction??`ascending`;return[...e].sort((e,r)=>n(e,r,t,a))},[e,i.column,i.direction,r])}}function me(e,t){let{pageSize:n,initialPage:r=1,getId:i}=t,[o,s]=(0,a.useState)(r),[c,l]=(0,a.useState)(()=>new Set),u=e.length,d=Math.max(1,Math.ceil(u/n));(0,a.useEffect)(()=>{s(e=>e<1?1:e>d?d:e)},[d]);let f=o;f<1?f=1:f>d&&(f=d);let p=(0,a.useMemo)(()=>{let t=(f-1)*n,r=t+n;return e.slice(t,r)},[e,f,n]),m=(0,a.useMemo)(()=>{let t=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(e.map(e=>t(e)))},[i,e]),h=(0,a.useMemo)(()=>{let e=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(p.map(t=>e(t)))},[i,p]);return{page:f,setPage:s,pageItems:p,totalItems:u,totalPages:d,allKeys:m,selectedKeys:c,onSelectionChange:e=>{let t=e===`all`?new Set(h):new Set(e);l(e=>{let n=new Set(t);for(let t of e)h.has(t)||n.add(t);return n})},onPageChange:e=>{s(e.page)},clearSelection:()=>{l(()=>new Set)}}}var $=Object.assign(v,{Grid:V,Header:Z,Column:X,Body:H,Row:Q,Cell:Y,BulkBar:J,BulkBarSelectedCount:K,BulkBarClearButton:q,BulkBarSelectAllButton:de});$.displayName=`Table`,Z.displayName=`Table.Header`,X.displayName=`Table.Column`,H.displayName=`Table.Body`,Q.displayName=`Table.Row`,Y.displayName=`Table.Cell`,exports.Table=$,exports.TableCompound=$,exports.useTablePagination=me,exports.useTableSort=pe;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.js"),t=require("../icon-DY4l9nsc.js"),n=require("../button-D0s-21qo.js"),r=require("../checkbox-Cbewcw6G.js");let i=require("class-variance-authority"),a=require("react");a=e.t(a);let o=require("react/jsx-runtime"),s=require("@react-aria/utils"),c=require("@react-stately/table"),l=require("react-aria"),u=require("@react-aria/table"),d=require("@spark-ui/icons/ArrowDown"),f=require("@spark-ui/icons/ArrowUp"),p=require("@spark-ui/icons/Sort");var m=(0,a.createContext)({isResizable:!1,tableWidth:0});function h(){return(0,a.useContext)(m)}var g=(0,a.createContext)({selectedCount:0,onClearSelection:()=>{}});function _(){return(0,a.useContext)(g)}function v({children:e,className:t,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onClearSelection:c,onSelectAll:l,allowsResizing:u=!0,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,...x}){let S=0;n===`all`?S=a??0:n instanceof Set?S=n.size:n&&(S=new Set(n).size);let C=c??(()=>r?.(new Set));return(0,o.jsx)(g,{value:{...x,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onSelectAll:l,selectedCount:S,onClearSelection:C,allowsResizing:u,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,className:t},children:(0,o.jsx)(`div`,{className:(0,i.cx)(`gap-md flex flex-col`,t),children:e})})}v.displayName=`Table`;function y({className:e,children:t,...n}){let r=(0,a.useRef)(null),[c,l]=(0,a.useState)(0);return(0,a.useLayoutEffect)(()=>{let e=r.current;e&&l(e.clientWidth)},[]),(0,s.useResizeObserver)({ref:r,onResize:()=>{let e=r.current;e&&l(e.clientWidth)}}),(0,o.jsx)(m,{value:{isResizable:!0,tableWidth:c},children:(0,o.jsx)(`div`,{ref:r,"data-spark-component":`resizable-table-container`,className:(0,i.cx)(`relative w-full overflow-auto`,e),...n,children:t})})}y.displayName=`ResizableTableContainer`;var b=`[data-spark-component="table-cell"]`;function x(e){return!e||!(e instanceof Element)?!1:!!e.closest(`[role="combobox"],select,[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`)}function S(e){if(!e||!(e instanceof Element))return!1;let t=e.closest(`[role="combobox"],[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`);return t?t.getAttribute(`aria-expanded`)===`true`:!1}var C=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function w(e){return!e||!(e instanceof Element)?null:e.closest(b)}function T(e){return e.getAttribute(`data-table-cell-kind`)===`selection`}function E(e){return Array.from(e.querySelectorAll(C)).filter(t=>!(t===e||t.hasAttribute(`disabled`)||t.getAttribute(`aria-disabled`)===`true`||t.getAttribute(`hidden`)!==null))}function D(e,t){for(let n of E(e)){let e=`data-prev-tabindex`;if(!t)n.hasAttribute(e)||n.setAttribute(e,n.getAttribute(`tabindex`)??``),n.setAttribute(`tabindex`,`-1`);else{let t=n.getAttribute(e);if(t===null)continue;n.removeAttribute(e),t===``?n.removeAttribute(`tabindex`):n.setAttribute(`tabindex`,t)}}}function O(e){let t=Array.from(e.querySelectorAll(b));for(let e of t)D(e,!1)}function ee({ref:e,gridProps:t,onKeyDownCapture:n,onFocusCapture:r}){let[i,o]=(0,a.useState)(`grid`),s=(0,a.useRef)(`grid`),c=(0,a.useRef)(null),u=(0,a.useRef)(!1),d=(0,a.useMemo)(()=>{let{onKeyDown:a,...d}=t,f=e=>{c.current=e,s.current=`interaction`,o(`interaction`),D(e,!0)};return(0,l.mergeProps)(d,{onKeyDown:e=>{if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let e=c.current,t=document.activeElement;if(e&&t instanceof Node&&e.contains(t))return}s.current===`interaction`&&(e.key===`ArrowUp`||e.key===`ArrowDown`)&&x(e.target)&&w(e.target)===c.current||a?.(e)},onKeyDownCapture:e=>{if(n?.(e),s.current===`interaction`&&e.key===`Tab`){let t=w(e.target);t&&t===c.current&&e.stopPropagation();return}if(x(e.target)&&s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current)return}if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current){e.stopPropagation();return}}if(s.current===`grid`&&e.key===`ArrowRight`){let t=w(e.target);if(t){let n=t.closest(`tr`);if(n){let r=Array.from(n.querySelectorAll(b));if(r.length>0&&r[r.length-1]===t){e.preventDefault(),e.stopPropagation(),n.focus();return}}}}if(s.current===`grid`&&e.key===`Enter`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`grid`&&e.key===`F2`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`interaction`&&e.key===`Escape`){if(S(e.target))return;let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}if(s.current===`interaction`&&e.key===`F2`){let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}},onBlurCapture:t=>{if(s.current!==`interaction`)return;let n=e.current;if(!n)return;let r=t.relatedTarget;r instanceof Node&&n.contains(r)||(c.current=null,s.current=`grid`,o(`grid`))},onFocusCapture:t=>{r?.(t);let n=u.current;u.current=!1;let i=e.current,a=w(t.target);if(s.current===`interaction`&&c.current&&i){let e=!!(a&&a!==c.current),n=!a&&t.target instanceof Element&&i.contains(t.target)&&!c.current.contains(t.target);(e||n)&&(s.current=`grid`,o(`grid`),n&&(c.current=null))}if(!a)return;c.current=a;let l=t.target instanceof Element?t.target:null,d=a.matches(b),p=s.current===`grid`,m=!!(l&&l!==a&&a.contains(l)),h=E(a).length>0;p&&d&&m&&h&&!n&&queueMicrotask(()=>a.focus()),n&&p&&m&&d&&h&&!T(a)&&f(a)},onPointerDownCapture:e=>{let t=w(e.target);t?.matches(b)&&e.target instanceof Element&&e.target!==t&&t.contains(e.target)&&(u.current=!0)},"data-table-keyboard-mode":i})},[t,i,e,r,n]);return(0,a.useEffect)(()=>{s.current=i;let t=e.current;if(t){if(i===`grid`){O(t),c.current?.focus?.();return}O(t),c.current&&D(c.current,!0)}},[i,e]),{gridProps:d,keyboardMode:i}}var k=(0,i.cva)([`h-sz-64 min-w-sz-64`,`relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container`,`pl-lg pr-lg py-sm text-left outline-none box-border`,`cursor-default`,`data-focus-visible:u-outline data-focus-visible:-outline-offset-2`],{variants:{checkbox:{true:[`w-sz-64 min-w-sz-64 max-w-sz-64`,`px-0 align-middle`]},resizable:{true:[`pr-xl`]}},defaultVariants:{checkbox:!1,resizable:!1}}),te=(0,i.cva)([`flex flex-1 justify-between items-center gap-md`,`font-inherit text-left text-inherit`,`whitespace-nowrap text-ellipsis`,`border-transparent`,`data-focus-visible:u-outline data-focus-visible:outline-offset-2`],{variants:{},defaultVariants:{}});(0,i.cva)([`empty:italic empty:text-center empty:text-body-2 empty:py-lg`],{variants:{},defaultVariants:{}});var ne=(0,i.cva)([`p-lg outline-none box-border default:overflow-hidden`,`border-b-sm border-outline [tr:last-child>&]:border-b-0`,`[-webkit-tap-highlight-color:transparent]`,`data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`],{variants:{checkbox:{true:[`w-sz-64 py-sm px-0 align-middle`]}},defaultVariants:{checkbox:!1}}),re=(0,i.cva)([`pointer-events-none`,`[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle`],{variants:{},defaultVariants:{}}),ie=`button, [role="button"], [role="switch"], [role="checkbox"], [role="option"], input:not([type="hidden"]), select, textarea, [href], [data-spark-component="dropdown-trigger"], [data-spark-component="icon-button"], [data-spark-component="switch"], [data-spark-component="switch-input"], [data-spark-component="combobox-input"]`,ae=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function oe(e){if(!e||!(e instanceof Element))return!1;let t=e;return t.matches(ie)||t.closest(ie)!==null}function se(e){return e?e instanceof Element?e:e instanceof Text?e.parentElement:null:null}function ce(e){for(let t of e.querySelectorAll(ae))if(t!==e&&!t.hasAttribute(`disabled`)&&t.getAttribute(`aria-disabled`)!==`true`&&t.getAttribute(`hidden`)===null)return!0;return!1}function le(e){let t=se(e);if(!t)return!1;if(oe(t))return!0;let n=t.closest(`[data-spark-component="table-cell"]`);return!n||n.getAttribute(`data-table-cell-kind`)===`selection`?!1:ce(n)}var A=(0,a.createContext)(`grid`);function j({checkboxProps:e,className:t,suppressFocusWalker:n}){let{isSelected:i,isIndeterminate:a,isDisabled:s,onChange:c,...l}=e,u=a===!0?`indeterminate`:!!i;return(0,o.jsx)(`span`,{...n?{"data-react-aria-prevent-focus":!0}:void 0,onClick:e=>e.stopPropagation(),onPointerDown:e=>e.stopPropagation(),className:t??`flex h-full min-h-full items-center justify-center`,children:(0,o.jsx)(r.n,{checked:u,disabled:s,onCheckedChange:c,...l})})}j.displayName=`Table.SelectionCheckbox`;function M({cell:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{gridCellProps:s}=(0,l.useTableCell)({node:e},t,r),{isFocusVisible:c,focusProps:d}=(0,l.useFocusRing)({within:!0}),f=(0,a.useContext)(A),p=(0,a.useCallback)(e=>{f===`interaction`&&(e.key!==` `&&e.key!==`Enter`||e.stopPropagation())},[f]),{onKeyDownCapture:m,...h}=s,g=(0,a.useCallback)(e=>{[`ArrowLeft`,`ArrowRight`,`ArrowUp`,`ArrowDown`].includes(e.key)||m?.(e)},[m]),_=(0,u.useTableSelectionCheckbox)({key:e.parentKey??e.key},t),v=t.collection.columns[e.index??0]?.key??null,y=v?n?.columnWidths?.get?.(v):void 0,b=e.props?.className;return e.props?.isSelectionCell?(0,o.jsx)(`td`,{...(0,l.mergeProps)(h,{onKeyDownCapture:g},d,{onKeyDown:p}),ref:r,"data-spark-component":`table-cell`,"data-table-cell-kind":`selection`,className:ne({checkbox:!0}),"data-focus-visible":c||void 0,children:(0,o.jsx)(j,{suppressFocusWalker:f===`grid`,checkboxProps:_.checkboxProps})}):(0,o.jsx)(`td`,{...(0,l.mergeProps)(h,{onKeyDownCapture:g},d,{onKeyDown:p}),ref:r,"data-spark-component":`table-cell`,className:(0,i.cx)(ne(),b),"data-focus-visible":c||void 0,style:y?{width:y}:void 0,children:e.rendered})}M.displayName=`Table.BodyCellRenderer`;function N(e){if(e)return t=>{le((0,s.getEventTarget)(t.nativeEvent))||e(t)}}function P({item:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{rowProps:s,isSelected:c}=(0,l.useTableRow)({node:e},t,r),{isFocusVisible:u,focusProps:d}=(0,l.useFocusRing)(),{onClick:f,onPointerDown:p,onMouseDown:m,onPointerUp:h,onPointerCancel:g,..._}=s,v=(0,i.cx)(`outline-none box-border data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`,_.className,c&&`bg-support-container text-on-support-container`);return(0,o.jsx)(`tr`,{...(0,l.mergeProps)(_,d),onPointerDown:N(p),onMouseDown:N(m),onPointerUp:N(h),onPointerCancel:N(g),onClick:N(f),ref:r,"data-spark-component":`table-row`,"data-selected":c||void 0,"data-focus-visible":u||void 0,className:v,tabIndex:-1,children:[...e.childNodes].map(e=>(0,o.jsx)(M,{cell:e,state:t,resizeState:n},e.key))})}P.displayName=`Table.BodyRowRenderer`;function F({column:e,ariaLabel:t,resizeState:n,resizeCallbacks:r}){let s=(0,a.useRef)(null),{resizerProps:c,inputProps:l,isResizing:d}=(0,u.useTableColumnResize)({column:e,"aria-label":t??`Resize column`,onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd},n,s);return(0,o.jsx)(`div`,{role:`presentation`,className:(0,i.cx)(`cursor-col-resize absolute inset-y-lg right-0 flex w-lg items-center justify-center`,`after:block after:h-full after:w-[2px] after:bg-outline after:transition-all after:duration-75`,`has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2`,d&&`after:bg-outline-high after:scale-120`),"data-resizable-direction":`both`,...c,children:(0,o.jsx)(`input`,{ref:s,disabled:!d,...l})})}F.displayName=`Table.ColumnResizer`;function I({state:e}){let{checkboxProps:t}=(0,u.useTableSelectAllCheckbox)(e),{collection:n,selectionManager:r}=e,i=r.selectedKeys,a=n,s=a.body,c=s==null?new Set(n.getKeys()):new Set([...a.getChildren(s.key)].map(e=>e.key)),l=i===`all`?c:i,d=[...c].filter(e=>l.has(e)).length,f=c.size,p=f>0&&d===f,m=d>0&&d<f,{isSelected:h,isIndeterminate:g,onChange:_,...v}=t,y=e=>{(e.key===` `||e.key===`Enter`)&&e.stopPropagation(),e.key===`Enter`&&(e.preventDefault(),t.isDisabled||_?.(!p))};return(0,o.jsx)(j,{checkboxProps:{...v,isSelected:p,isIndeterminate:m,onChange:_,onKeyDown:y}})}I.displayName=`Table.HeaderSelectionCheckbox`;var L=(0,i.cx)(`sticky top-0 z-sticky`);function R({column:e,state:n,resizeState:r,stickyHeader:s,resizeCallbacks:c,isLastColumnInRow:u=!1}){let m=(0,a.useRef)(null),{resizeColumnAriaLabel:h}=_(),{columnHeaderProps:g}=(0,l.useTableColumnHeader)({node:e},n,m),{isFocusVisible:v,focusProps:y}=(0,l.useFocusRing)(),b=e.props?.allowsResizing!==!1&&!u,x=r?.columnWidths?.get?.(e.key),S=!!(r&&b);if(e.props?.isSelectionCell)return(0,o.jsx)(`th`,{...g,ref:m,role:`columnheader`,className:(0,i.cx)(k({checkbox:!0}),s&&L),"data-spark-component":`table-column`,"data-table-selection-columnheader":!0,"data-focus-visible":v||void 0,children:(0,o.jsx)(I,{state:n})});let C=!!e.props?.allowsSorting,w=n.sortDescriptor?.column===e.key,T=n.sortDescriptor?.direction??`ascending`,E=w?T===`descending`?(0,o.jsx)(d.ArrowDown,{}):(0,o.jsx)(f.ArrowUp,{}):(0,o.jsx)(p.Sort,{}),D=t=>{C&&(t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),t.stopPropagation(),n.sort?.(e.key)))};return(0,o.jsxs)(`th`,{...(0,l.mergeProps)(g,y),ref:m,role:`columnheader`,className:(0,i.cx)(k({resizable:S}),s&&L),style:x?{width:x}:void 0,"data-spark-component":`table-column`,"data-focus-visible":v||void 0,onKeyDown:D,children:[(0,o.jsxs)(`div`,{className:te(),children:[(0,o.jsx)(`button`,{type:`button`,className:(0,i.cx)(`gap-md flex min-w-0 flex-1 items-center text-left`,`focus-visible:u-outline outline-none`,`bg-transparent p-0 border-0`),onKeyDown:D,children:(0,o.jsx)(`span`,{className:`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap`,children:e.rendered})}),C?(0,o.jsx)(`span`,{"aria-hidden":`true`,className:(0,i.cx)(`shrink-0 opacity-dim-2 group-hover/column:opacity-100`,w&&`opacity-100`),children:(0,o.jsx)(t.t,{size:`sm`,children:E})}):null]}),r&&b?(0,o.jsx)(F,{column:e,ariaLabel:typeof h==`function`?h(e):h,resizeState:r,resizeCallbacks:c}):null]})}R.displayName=`Table.ColumnHeader`;function z({item:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i}){let s=(0,a.useRef)(null),{rowProps:c}=(0,l.useTableHeaderRow)({node:e},t,s),u=[...e.childNodes];return(0,o.jsx)(`tr`,{...c,ref:s,children:u.map((e,a)=>(0,o.jsx)(R,{column:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i,isLastColumnInRow:a===u.length-1},e.key))})}z.displayName=`Table.HeaderRowRenderer`;function B({className:e,children:t,stickyHeader:n,...r}){let u=!!n,d=(0,a.useRef)(null),f=h(),p=r.selectionMode===`multiple`,m=(0,c.useTableState)({...r,showSelectionCheckboxes:r.selectionMode===`multiple`,children:t}),g=(0,c.useTableColumnResizeState)({tableWidth:f.tableWidth},m),_=f.isResizable&&r.allowsResizing!==!1?g:null,{gridProps:v}=(0,l.useTable)({...r},m,d),y=m.collection.headerRows,b=[...m.collection.body.childNodes],x=m.collection.body.props?.renderEmptyState,S=m.collection.columns.length||1,C=b.length>0||!!x,{rowGroupProps:w}=(0,l.useTableRowGroup)(),{rowGroupProps:T}=(0,l.useTableRowGroup)(),{gridProps:E,keyboardMode:D}=ee({ref:d,gridProps:v,onKeyDownCapture:r.onKeyDownCapture,onFocusCapture:r.onFocusCapture});return(0,o.jsx)(A,{value:D,children:(0,o.jsxs)(`table`,{...(0,l.mergeProps)(E,(0,s.filterDOMProps)(r,{global:!0})),ref:d,"data-spark-component":`table`,className:(0,i.cx)(`default:w-full`,p?`table-fixed`:void 0,`border-separate border-spacing-y-0`,`bg-surface`,`outline-none`,`text-body-1`,`forced-color-adjust-none`,`data-focus-visible:u-outline-inset`,`has-[>[data-empty]]:h-full`,e),children:[(0,o.jsx)(`thead`,{...w,"data-spark-component":`table-header`,children:y.map(e=>(0,o.jsx)(z,{item:e,state:m,resizeState:_,stickyHeader:u,resizeCallbacks:{onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd}},e.key))}),(0,o.jsxs)(`tbody`,{...T,"data-spark-component":`table-body`,children:[C?(0,o.jsx)(`tr`,{"aria-hidden":`true`,className:re(),role:`presentation`,"data-spark-component":`table-body-spacer`,children:(0,o.jsx)(`td`,{colSpan:S,role:`presentation`})}):null,b.length===0&&x?(0,o.jsx)(`tr`,{"data-empty":!0,children:(0,o.jsx)(`td`,{colSpan:S,children:x({isEmpty:!0})})}):null,b.map(e=>(0,o.jsx)(P,{item:e,state:m,resizeState:_},e.key))]})]})})}B.displayName=`Table.Grid.Inner`;function ue(e){return typeof e==`number`?`${e}px`:e}function V({"aria-label":e,"aria-labelledby":t,className:n,children:r}){let{allowsResizing:i=!0,maxHeight:a,stickyHeader:s,onResizeStart:c,onResize:l,onResizeEnd:u,onKeyDownCapture:d,sortDescriptor:f,onSortChange:p,className:m,...h}=_(),g=a==null?void 0:{maxHeight:ue(a)},v=n??m,b={...h,...e!=null&&{"aria-label":e},...t!=null&&{"aria-labelledby":t},sortDescriptor:f,onSortChange:p,onKeyDownCapture:d,className:v,stickyHeader:s},x=B;return i?(0,o.jsx)(y,{className:v,style:g,onResizeStart:c,onResize:l,onResizeEnd:u,children:(0,o.jsx)(x,{...b,children:r})}):(0,o.jsx)(`div`,{className:`relative w-full overflow-auto`,style:g,children:(0,o.jsx)(x,{...b,children:r})})}V.displayName=`Table.Grid`;function H(e){return(0,o.jsx)(c.TableBody,{...e})}H.displayName=`Table.Body`,H.getCollectionNode=c.TableBody.getCollectionNode;var U=(0,a.createContext)(null);function W(){let e=(0,a.useContext)(U);if(!e)throw Error(`Table.BulkBar subcomponents must be used within Table.BulkBar`);return e}function G({children:e,className:t,rootProps:n,...r}){let{selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u}=_();return(0,o.jsx)(U,{value:{selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u},children:(0,o.jsx)(`div`,{role:`toolbar`,"aria-label":r[`aria-label`]??`Table bulk actions`,"data-spark-component":`table-bulk-bar`,className:(0,i.cx)(`gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between`,`rounded-lg`,`bg-support-container text-on-support-container p-lg`,t),...n,children:e})})}function K({children:e}){return W(),(0,o.jsx)(`span`,{className:`text-body-1-highlight`,children:e})}function q({className:e,children:t,...r}){let{selectedCount:a,onClearSelection:s,hasMultiplePages:c}=W();return c?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:a===0,onClick:s,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}function de({className:e,children:t,...r}){let{selectedCount:a,totalCount:s,onSelectAll:c,hasMultiplePages:l}=W();return l?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:s==null||c==null||a>=s,onClick:c,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}G.displayName=`Table.BulkBar`;var J=G;J.displayName=`Table.BulkBar`,K.displayName=`Table.BulkBarSelectedCount`,q.displayName=`Table.BulkBarClearButton`,de.displayName=`Table.BulkBarSelectAllButton`;function Y(e){return(0,o.jsx)(c.Cell,{...e})}Y.displayName=`Table.Cell`,Y.getCollectionNode=c.Cell.getCollectionNode;function X({label:e,allowsResizing:t=!0,...n}){return null}X.displayName=`Table.Column`,X.getCollectionNode=function*(e,t){let n=e.title??e.label??e.children??null,r=e.textValue||(typeof n==`string`?n:``)||e[`aria-label`],i=yield{type:`column`,key:e.id??null,hasChildNodes:!!e.childColumns||!!e.title&&a.default.Children.count(e.children)>0,rendered:n,textValue:r,props:{...e,title:e.title??e.label,allowsResizing:e.allowsResizing},*childNodes(){if(e.childColumns)for(let t of e.childColumns)yield{type:`column`,value:t};else if(e.title){let t=[];a.default.Children.forEach(e.children,e=>{t.push({type:`column`,element:e})}),yield*t}},shouldInvalidate(e){return o(e),!1}},o=e=>{for(let t of i)t.hasChildNodes||e.columns.push(t)};o(t)};function Z(e){return(0,o.jsx)(c.TableHeader,{...e})}Z.displayName=`Table.Header`,Z.getCollectionNode=c.TableHeader.getCollectionNode;function Q(e){return null}Q.displayName=`Table.Row`,Q.getCollectionNode=function*(e,t){let{children:n,textValue:r,UNSTABLE_childItems:i}=e;yield{type:`item`,key:e.id??null,props:e,textValue:r,"aria-label":e[`aria-label`],hasChildNodes:!0,*childNodes(){if(t.showDragButtons&&(yield{type:`cell`,key:`header-drag`,props:{isDragButtonCell:!0}}),t.showSelectionCheckboxes&&t.selectionMode!==`none`&&(yield{type:`cell`,key:`header`,props:{isSelectionCell:!0}}),typeof n==`function`){for(let e of t.columns)yield{type:`cell`,element:n(e.key),key:e.key};if(i)for(let e of i)yield{type:`item`,value:e}}else{let e=[],r=[],i=0;if(a.default.Children.forEach(n,n=>{if(n)if(n.type===Q){if(e.length<t.columns.length)throw Error(`All of a Row's child Cells must be positioned before any child Rows.`);r.push({type:`item`,element:n})}else e.push({type:`cell`,element:n}),i+=n.props?.colSpan??1}),i!==t.columns.length)throw Error(`Cell count must match column count. Found ${i} cells and ${t.columns.length} columns.`);yield*e,yield*r}},shouldInvalidate(e){return e.columns.length!==t.columns.length||e.columns.some((e,n)=>e.key!==t.columns[n].key)||e.showSelectionCheckboxes!==t.showSelectionCheckboxes||e.showDragButtons!==t.showDragButtons||e.selectionMode!==t.selectionMode}}};function fe(e,t,n,r){let i=e[n],a=t[n];if(i===a)return 0;let o;return o=typeof i==`number`&&typeof a==`number`?i<a?-1:1:String(i).localeCompare(String(a)),r===`descending`?-o:o}function pe(e,t={}){let{initialSort:n,compare:r}=t,[i,o]=(0,a.useState)(()=>n?{column:n.column,direction:n.direction}:{column:`id`,direction:`ascending`});return{sortDescriptor:i,onSortChange:o,setSortDescriptor:o,sortedItems:(0,a.useMemo)(()=>{let t=i.column;if(!t)return[...e];let n=r??fe,a=i.direction??`ascending`;return[...e].sort((e,r)=>n(e,r,t,a))},[e,i.column,i.direction,r])}}function me(e,t){let{pageSize:n,initialPage:r=1,getId:i}=t,[o,s]=(0,a.useState)(r),[c,l]=(0,a.useState)(()=>new Set),u=e.length,d=Math.max(1,Math.ceil(u/n));(0,a.useEffect)(()=>{s(e=>e<1?1:e>d?d:e)},[d]);let f=o;f<1?f=1:f>d&&(f=d);let p=(0,a.useMemo)(()=>{let t=(f-1)*n,r=t+n;return e.slice(t,r)},[e,f,n]),m=(0,a.useMemo)(()=>{let t=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(e.map(e=>t(e)))},[i,e]),h=(0,a.useMemo)(()=>{let e=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(p.map(t=>e(t)))},[i,p]);return{page:f,setPage:s,pageItems:p,totalItems:u,totalPages:d,allKeys:m,selectedKeys:c,onSelectionChange:e=>{let t=e===`all`?new Set(h):new Set(e);l(e=>{let n=new Set(t);for(let t of e)h.has(t)||n.add(t);return n})},onPageChange:e=>{s(e.page)},clearSelection:()=>{l(()=>new Set)}}}var $=Object.assign(v,{Grid:V,Header:Z,Column:X,Body:H,Row:Q,Cell:Y,BulkBar:J,BulkBarSelectedCount:K,BulkBarClearButton:q,BulkBarSelectAllButton:de});$.displayName=`Table`,Z.displayName=`Table.Header`,X.displayName=`Table.Column`,H.displayName=`Table.Body`,Q.displayName=`Table.Row`,Y.displayName=`Table.Cell`,exports.Table=$,exports.TableCompound=$,exports.useTablePagination=me,exports.useTableSort=pe;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|