@salt-ds/core 1.14.0 → 1.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/css/salt-core.css +261 -9
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +6 -0
- package/dist-cjs/file-drop-zone/FileDropZone.css.js.map +1 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js +99 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -0
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +25 -0
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +58 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
- package/dist-cjs/file-drop-zone/internal/utils.js +30 -0
- package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -0
- package/dist-cjs/index.js +20 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/navigation-item/ConditionalWrapper.js +35 -0
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -0
- package/dist-cjs/navigation-item/ExpansionIcon.js +29 -0
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js +82 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.css.js +6 -0
- package/dist-cjs/pagination/CompactInput.css.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +67 -0
- package/dist-cjs/pagination/CompactInput.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.css.js +6 -0
- package/dist-cjs/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.js +87 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.css.js +6 -0
- package/dist-cjs/pagination/GoToInput.css.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.js +92 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -0
- package/dist-cjs/pagination/PageButton.css.js +6 -0
- package/dist-cjs/pagination/PageButton.css.js.map +1 -0
- package/dist-cjs/pagination/PageButton.js +49 -0
- package/dist-cjs/pagination/PageButton.js.map +1 -0
- package/dist-cjs/pagination/PageRanges.css.js +6 -0
- package/dist-cjs/pagination/PageRanges.css.js.map +1 -0
- package/dist-cjs/pagination/PageRanges.js +78 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -0
- package/dist-cjs/pagination/Pagination.css.js +6 -0
- package/dist-cjs/pagination/Pagination.css.js.map +1 -0
- package/dist-cjs/pagination/Pagination.js +85 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -0
- package/dist-cjs/pagination/PaginationContext.js +17 -0
- package/dist-cjs/pagination/PaginationContext.js.map +1 -0
- package/dist-cjs/pagination/Paginator.css.js +6 -0
- package/dist-cjs/pagination/Paginator.css.js.map +1 -0
- package/dist-cjs/pagination/Paginator.js +74 -0
- package/dist-cjs/pagination/Paginator.js.map +1 -0
- package/dist-cjs/pagination/usePagination.js +27 -0
- package/dist-cjs/pagination/usePagination.js.map +1 -0
- package/dist-cjs/pagination/usePaginationContext.js +19 -0
- package/dist-cjs/pagination/usePaginationContext.js.map +1 -0
- package/dist-cjs/panel/Panel.css.js +1 -1
- package/dist-cjs/scrim/Scrim.css.js +6 -0
- package/dist-cjs/scrim/Scrim.css.js.map +1 -0
- package/dist-cjs/scrim/Scrim.js +44 -0
- package/dist-cjs/scrim/Scrim.js.map +1 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +3 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +2 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +17 -2
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +4 -0
- package/dist-es/file-drop-zone/FileDropZone.css.js.map +1 -0
- package/dist-es/file-drop-zone/FileDropZone.js +95 -0
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -0
- package/dist-es/file-drop-zone/FileDropZoneIcon.js +21 -0
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +54 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
- package/dist-es/file-drop-zone/internal/utils.js +25 -0
- package/dist-es/file-drop-zone/internal/utils.js.map +1 -0
- package/dist-es/index.js +10 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/navigation-item/ConditionalWrapper.js +31 -0
- package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -0
- package/dist-es/navigation-item/ExpansionIcon.js +25 -0
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.css.js +4 -0
- package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.js +78 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -0
- package/dist-es/pagination/CompactInput.css.js +4 -0
- package/dist-es/pagination/CompactInput.css.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +63 -0
- package/dist-es/pagination/CompactInput.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.css.js +4 -0
- package/dist-es/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.js +83 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -0
- package/dist-es/pagination/GoToInput.css.js +4 -0
- package/dist-es/pagination/GoToInput.css.js.map +1 -0
- package/dist-es/pagination/GoToInput.js +88 -0
- package/dist-es/pagination/GoToInput.js.map +1 -0
- package/dist-es/pagination/PageButton.css.js +4 -0
- package/dist-es/pagination/PageButton.css.js.map +1 -0
- package/dist-es/pagination/PageButton.js +45 -0
- package/dist-es/pagination/PageButton.js.map +1 -0
- package/dist-es/pagination/PageRanges.css.js +4 -0
- package/dist-es/pagination/PageRanges.css.js.map +1 -0
- package/dist-es/pagination/PageRanges.js +74 -0
- package/dist-es/pagination/PageRanges.js.map +1 -0
- package/dist-es/pagination/Pagination.css.js +4 -0
- package/dist-es/pagination/Pagination.css.js.map +1 -0
- package/dist-es/pagination/Pagination.js +81 -0
- package/dist-es/pagination/Pagination.js.map +1 -0
- package/dist-es/pagination/PaginationContext.js +13 -0
- package/dist-es/pagination/PaginationContext.js.map +1 -0
- package/dist-es/pagination/Paginator.css.js +4 -0
- package/dist-es/pagination/Paginator.css.js.map +1 -0
- package/dist-es/pagination/Paginator.js +70 -0
- package/dist-es/pagination/Paginator.js.map +1 -0
- package/dist-es/pagination/usePagination.js +23 -0
- package/dist-es/pagination/usePagination.js.map +1 -0
- package/dist-es/pagination/usePaginationContext.js +15 -0
- package/dist-es/pagination/usePaginationContext.js.map +1 -0
- package/dist-es/panel/Panel.css.js +1 -1
- package/dist-es/scrim/Scrim.css.js +4 -0
- package/dist-es/scrim/Scrim.css.js.map +1 -0
- package/dist-es/scrim/Scrim.js +40 -0
- package/dist-es/scrim/Scrim.js.map +1 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +3 -2
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +2 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +18 -3
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-types/file-drop-zone/FileDropZone.d.ts +17 -0
- package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts +9 -0
- package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +22 -0
- package/dist-types/file-drop-zone/index.d.ts +3 -0
- package/dist-types/file-drop-zone/internal/utils.d.ts +3 -0
- package/dist-types/index.d.ts +4 -0
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +8 -0
- package/dist-types/navigation-item/ExpansionIcon.d.ts +2 -0
- package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
- package/dist-types/navigation-item/index.d.ts +1 -0
- package/dist-types/pagination/CompactInput.d.ts +2 -0
- package/dist-types/pagination/CompactPaginator.d.ts +1 -0
- package/dist-types/pagination/GoToInput.d.ts +16 -0
- package/dist-types/pagination/PageButton.d.ts +6 -0
- package/dist-types/pagination/PageRanges.d.ts +5 -0
- package/dist-types/pagination/Pagination.d.ts +20 -0
- package/dist-types/pagination/PaginationContext.d.ts +7 -0
- package/dist-types/pagination/Paginator.d.ts +12 -0
- package/dist-types/pagination/index.d.ts +5 -0
- package/dist-types/pagination/usePagination.d.ts +2 -0
- package/dist-types/pagination/usePaginationContext.d.ts +1 -0
- package/dist-types/scrim/Scrim.d.ts +13 -0
- package/dist-types/scrim/index.d.ts +1 -0
- package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +3 -2
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +5 -3
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +6 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n FloatingFocusManager,\n FloatingFocusManagerProps,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position props for the floating component\n */\n top: number;\n left: number;\n width?: number;\n height?: number;\n position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n /* eslint-disable @typescript-eslint/no-unused-vars */\n width,\n height,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n focusManagerProps,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n if (focusManagerProps) {\n return (\n <FloatingPortal>\n <SaltProvider>\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </SaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref} />\n </SaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame]\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const handleOpenChange = (open: boolean) => {\n update();\n onOpenChange?.(open);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","jsx","FloatingPortal","SaltProvider","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n text-align: left;\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n margin-left: auto;\n}\n";
|
|
1
|
+
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n text-align: left;\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n margin-left: auto;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=AccordionHeader.css.js.map
|
package/dist-es/card/Card.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to the root element */\n.saltCard {\n box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n border-width: var(--salt-size-border);\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-300));\n
|
|
1
|
+
var css_248z = "/* Styles applied to the root element */\n.saltCard {\n box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n border-width: var(--salt-size-border);\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Card.css.js.map
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropZone.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { forwardRef, useState, useRef } from 'react';
|
|
4
|
+
import { containsFiles, extractFiles } from './internal/utils.js';
|
|
5
|
+
import { useWindow } from '@salt-ds/window';
|
|
6
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
+
import css_248z from './FileDropZone.css.js';
|
|
8
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
9
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
10
|
+
import { useForkRef } from '../utils/useForkRef.js';
|
|
11
|
+
import '../utils/useId.js';
|
|
12
|
+
import '../salt-provider/SaltProvider.js';
|
|
13
|
+
import '../viewport/ViewportProvider.js';
|
|
14
|
+
|
|
15
|
+
const withBaseName = makePrefixer("saltFileDropZone");
|
|
16
|
+
const FileDropZone = forwardRef(
|
|
17
|
+
function FileDropZone2({
|
|
18
|
+
status,
|
|
19
|
+
className,
|
|
20
|
+
children,
|
|
21
|
+
disabled,
|
|
22
|
+
onDragOver,
|
|
23
|
+
onDragLeave,
|
|
24
|
+
onDrop,
|
|
25
|
+
...restProps
|
|
26
|
+
}, ref) {
|
|
27
|
+
const targetWindow = useWindow();
|
|
28
|
+
useComponentCssInjection({
|
|
29
|
+
testId: "salt-file-drop-zone",
|
|
30
|
+
css: css_248z,
|
|
31
|
+
window: targetWindow
|
|
32
|
+
});
|
|
33
|
+
const [isActive, setActive] = useState(false);
|
|
34
|
+
const regionRef = useRef(null);
|
|
35
|
+
const handleRef = useForkRef(ref, regionRef);
|
|
36
|
+
const handleDragOver = (event) => {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
event.stopPropagation();
|
|
39
|
+
if (disabled) {
|
|
40
|
+
if (event.dataTransfer) {
|
|
41
|
+
event.dataTransfer.dropEffect = "none";
|
|
42
|
+
}
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (event.dataTransfer) {
|
|
46
|
+
event.dataTransfer.dropEffect = "copy";
|
|
47
|
+
}
|
|
48
|
+
if (!isActive && containsFiles(event)) {
|
|
49
|
+
setActive(true);
|
|
50
|
+
}
|
|
51
|
+
onDragOver == null ? void 0 : onDragOver(event);
|
|
52
|
+
};
|
|
53
|
+
const handleDragLeave = (event) => {
|
|
54
|
+
if (disabled) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const region = regionRef == null ? void 0 : regionRef.current;
|
|
58
|
+
const eventTarget = event.relatedTarget;
|
|
59
|
+
if (eventTarget !== region && !(region == null ? void 0 : region.contains(eventTarget))) {
|
|
60
|
+
setActive(false);
|
|
61
|
+
}
|
|
62
|
+
onDragLeave == null ? void 0 : onDragLeave(event);
|
|
63
|
+
};
|
|
64
|
+
const handleDrop = (event) => {
|
|
65
|
+
if (disabled) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
const files = extractFiles(event);
|
|
70
|
+
setActive(false);
|
|
71
|
+
onDrop == null ? void 0 : onDrop(event, files);
|
|
72
|
+
};
|
|
73
|
+
return /* @__PURE__ */ jsx("div", {
|
|
74
|
+
className: clsx(
|
|
75
|
+
withBaseName(),
|
|
76
|
+
{
|
|
77
|
+
[withBaseName(status)]: status,
|
|
78
|
+
[withBaseName("active")]: isActive,
|
|
79
|
+
[withBaseName("disabled")]: disabled
|
|
80
|
+
},
|
|
81
|
+
className
|
|
82
|
+
),
|
|
83
|
+
"aria-disabled": disabled,
|
|
84
|
+
onDragLeave: handleDragLeave,
|
|
85
|
+
onDragOver: handleDragOver,
|
|
86
|
+
onDrop: handleDrop,
|
|
87
|
+
ref: handleRef,
|
|
88
|
+
...restProps,
|
|
89
|
+
children
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
export { FileDropZone };
|
|
95
|
+
//# sourceMappingURL=FileDropZone.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":";;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE5C,IAAM,MAAA,SAAA,GAAY,OAAuB,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAE3C,IAAM,MAAA,cAAA,GAAmD,CAAC,KAAU,KAAA;AAIlE,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,IAAI,MAAM,YAAc,EAAA;AACtB,UAAA,KAAA,CAAM,aAAa,UAAa,GAAA,MAAA,CAAA;AAAA,SAClC;AACA,QAAA,OAAA;AAAA,OACF;AACA,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAA,KAAA,CAAM,aAAa,UAAa,GAAA,MAAA,CAAA;AAAA,OAClC;AACA,MAAA,IAAI,CAAC,QAAA,IAAY,aAAc,CAAA,KAAK,CAAG,EAAA;AACrC,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,OAChB;AACA,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACf,CAAA;AAEA,IAAM,MAAA,eAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AACA,MAAA,MAAM,SAAS,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,OAAA,CAAA;AAC1B,MAAA,MAAM,cAAc,KAAM,CAAA,aAAA,CAAA;AAC1B,MAAA,IAAI,WAAgB,KAAA,MAAA,IAAU,EAAC,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,SAAS,WAAsB,CAAA,CAAA,EAAA;AACpE,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AACA,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KAChB,CAAA;AAEA,IAAM,MAAA,UAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAM,MAAA,KAAA,GAAQ,aAAa,KAAK,CAAA,CAAA;AAChC,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,MAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,MAAgB,CAAI,GAAA,MAAA;AAAA,UAClC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,eAAe,EAAA,QAAA;AAAA,MACf,WAAa,EAAA,eAAA;AAAA,MACb,UAAY,EAAA,cAAA;AAAA,MACZ,MAAQ,EAAA,UAAA;AAAA,MACR,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { UploadIcon } from '@salt-ds/icons';
|
|
4
|
+
import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
|
|
5
|
+
|
|
6
|
+
const FileDropZoneIcon = forwardRef(function FileDropZoneIcon2({ status, size = 2, ...rest }, ref) {
|
|
7
|
+
const iconProps = {
|
|
8
|
+
ref,
|
|
9
|
+
size,
|
|
10
|
+
...rest
|
|
11
|
+
};
|
|
12
|
+
return status ? /* @__PURE__ */ jsx(StatusIndicator, {
|
|
13
|
+
status,
|
|
14
|
+
...iconProps
|
|
15
|
+
}) : /* @__PURE__ */ jsx(UploadIcon, {
|
|
16
|
+
...iconProps
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export { FileDropZoneIcon };
|
|
21
|
+
//# sourceMappingURL=FileDropZoneIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps, UploadIcon } from \"@salt-ds/icons\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["FileDropZoneIcon"],"mappings":";;;;;AAWa,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBAAiB,CAAA,EAAE,QAAQ,IAAO,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AAC9D,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACA,EAAA,OAAO,yBACJ,GAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,oBAE/C,GAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,SAAA;AAAA,GAAW,CAAA,CAAA;AAE/B,CAAC;;;;"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useRef } from 'react';
|
|
3
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
4
|
+
import { useForkRef } from '../utils/useForkRef.js';
|
|
5
|
+
import '../utils/useId.js';
|
|
6
|
+
import '../salt-provider/SaltProvider.js';
|
|
7
|
+
import '../viewport/ViewportProvider.js';
|
|
8
|
+
import 'clsx';
|
|
9
|
+
import { Button } from '../button/Button.js';
|
|
10
|
+
|
|
11
|
+
const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
|
|
12
|
+
const buttonRef = useRef(null);
|
|
13
|
+
const fileInputRef = useRef(null);
|
|
14
|
+
const triggerRef = useForkRef(ref, buttonRef);
|
|
15
|
+
const handleFocus = (event) => {
|
|
16
|
+
var _a;
|
|
17
|
+
event.stopPropagation();
|
|
18
|
+
(_a = buttonRef.current) == null ? void 0 : _a.focus();
|
|
19
|
+
};
|
|
20
|
+
const handleClick = (event) => {
|
|
21
|
+
var _a;
|
|
22
|
+
event.stopPropagation();
|
|
23
|
+
(_a = fileInputRef.current) == null ? void 0 : _a.click();
|
|
24
|
+
};
|
|
25
|
+
const handleChange = (event) => {
|
|
26
|
+
var _a;
|
|
27
|
+
const files = Array.from((_a = event.target.files) != null ? _a : []);
|
|
28
|
+
onChange == null ? void 0 : onChange(event, files);
|
|
29
|
+
};
|
|
30
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ jsx(Button, {
|
|
33
|
+
onClick: handleClick,
|
|
34
|
+
disabled,
|
|
35
|
+
ref: triggerRef,
|
|
36
|
+
...rest,
|
|
37
|
+
children: children != null ? children : "Browse files"
|
|
38
|
+
}),
|
|
39
|
+
/* @__PURE__ */ jsx("input", {
|
|
40
|
+
accept,
|
|
41
|
+
className: "input-hidden",
|
|
42
|
+
disabled,
|
|
43
|
+
multiple,
|
|
44
|
+
onChange: handleChange,
|
|
45
|
+
onFocus: handleFocus,
|
|
46
|
+
ref: fileInputRef,
|
|
47
|
+
type: "file"
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
export { FileDropZoneTrigger };
|
|
54
|
+
//# sourceMappingURL=FileDropZoneTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport { useForkRef } from \"../utils\";\nimport { Button } from \"../button\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":";;;;;;;;;;AAgCO,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAa,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA7C/D,IAAA,IAAA,EAAA,CAAA;AA8CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAlDpE,IAAA,IAAA,EAAA,CAAA;AAmDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAvDpE,IAAA,IAAA,EAAA,CAAA;AAwDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACC,GAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const containsFiles = (e) => {
|
|
2
|
+
if (!e.dataTransfer) {
|
|
3
|
+
const target = e.target;
|
|
4
|
+
return target == null ? void 0 : target.files;
|
|
5
|
+
}
|
|
6
|
+
return Array.prototype.some.call(
|
|
7
|
+
e.dataTransfer.types,
|
|
8
|
+
(type) => type === "Files"
|
|
9
|
+
);
|
|
10
|
+
};
|
|
11
|
+
const extractFiles = (e) => {
|
|
12
|
+
var _a;
|
|
13
|
+
if (containsFiles(e)) {
|
|
14
|
+
if (e.dataTransfer) {
|
|
15
|
+
return Array.from(e.dataTransfer.files);
|
|
16
|
+
}
|
|
17
|
+
if (e.target) {
|
|
18
|
+
return Array.from((_a = e.target.files) != null ? _a : []);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return [];
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export { containsFiles, extractFiles };
|
|
25
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\"\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":"AAEa,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AAdtD,EAAA,IAAA,EAAA,CAAA;AAeE,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAK,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACxC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAA,OAAO,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,OAA4B,KAA9B,KAAA,IAAA,GAAA,EAAA,GAAuC,EAAE,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV;;;;"}
|
package/dist-es/index.js
CHANGED
|
@@ -22,6 +22,9 @@ export { InteractableCard } from './card/InteractableCard.js';
|
|
|
22
22
|
export { Checkbox } from './checkbox/Checkbox.js';
|
|
23
23
|
export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
|
|
24
24
|
export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
|
|
25
|
+
export { FileDropZone } from './file-drop-zone/FileDropZone.js';
|
|
26
|
+
export { FileDropZoneIcon } from './file-drop-zone/FileDropZoneIcon.js';
|
|
27
|
+
export { FileDropZoneTrigger } from './file-drop-zone/FileDropZoneTrigger.js';
|
|
25
28
|
export { FLEX_ITEM_ALIGNMENTS, FlexItem } from './flex-item/FlexItem.js';
|
|
26
29
|
export { FLEX_ALIGNMENT_BASE, FLEX_CONTENT_ALIGNMENT_BASE, FlexLayout } from './flex-layout/FlexLayout.js';
|
|
27
30
|
export { FlowLayout } from './flow-layout/FlowLayout.js';
|
|
@@ -35,11 +38,18 @@ export { GridLayout } from './grid-layout/GridLayout.js';
|
|
|
35
38
|
export { Input } from './input/Input.js';
|
|
36
39
|
export { Link } from './link/Link.js';
|
|
37
40
|
export { MultilineInput } from './multiline-input/MultilineInput.js';
|
|
41
|
+
export { NavigationItem } from './navigation-item/NavigationItem.js';
|
|
42
|
+
export { Pagination } from './pagination/Pagination.js';
|
|
43
|
+
export { Paginator } from './pagination/Paginator.js';
|
|
44
|
+
export { CompactInput } from './pagination/CompactInput.js';
|
|
45
|
+
export { CompactPaginator } from './pagination/CompactPaginator.js';
|
|
46
|
+
export { GoToInput } from './pagination/GoToInput.js';
|
|
38
47
|
export { Panel } from './panel/Panel.js';
|
|
39
48
|
export { Pill } from './pill/Pill.js';
|
|
40
49
|
export { RadioButton } from './radio-button/RadioButton.js';
|
|
41
50
|
export { RadioButtonGroup } from './radio-button/RadioButtonGroup.js';
|
|
42
51
|
export { RadioButtonIcon } from './radio-button/RadioButtonIcon.js';
|
|
52
|
+
export { Scrim } from './scrim/Scrim.js';
|
|
43
53
|
export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
|
|
44
54
|
export { StackLayout } from './stack-layout/StackLayout.js';
|
|
45
55
|
export { StatusAdornment } from './status-adornment/StatusAdornment.js';
|
package/dist-es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const ConditionalWrapper = ({
|
|
4
|
+
children,
|
|
5
|
+
className,
|
|
6
|
+
parent,
|
|
7
|
+
expanded,
|
|
8
|
+
onExpand,
|
|
9
|
+
active,
|
|
10
|
+
href
|
|
11
|
+
}) => {
|
|
12
|
+
const handleExpand = (event) => {
|
|
13
|
+
event.stopPropagation();
|
|
14
|
+
onExpand == null ? void 0 : onExpand(event);
|
|
15
|
+
};
|
|
16
|
+
return parent || href === void 0 ? /* @__PURE__ */ jsx("button", {
|
|
17
|
+
"aria-label": "expand",
|
|
18
|
+
"aria-expanded": expanded,
|
|
19
|
+
className,
|
|
20
|
+
onClick: handleExpand,
|
|
21
|
+
children
|
|
22
|
+
}) : /* @__PURE__ */ jsx("a", {
|
|
23
|
+
"aria-current": active ? "page" : void 0,
|
|
24
|
+
href,
|
|
25
|
+
className,
|
|
26
|
+
children
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { ConditionalWrapper };
|
|
31
|
+
//# sourceMappingURL=ConditionalWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n extends Pick<\n NavigationItemProps,\n \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\" | \"onClick\"\n > {\n children: ReactNode;\n className: string;\n}\n\nexport const ConditionalWrapper = ({\n children,\n className,\n parent,\n expanded,\n onExpand,\n active,\n href,\n}: ConditionalWrapperProps) => {\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return parent || href === undefined ? (\n <button\n aria-label=\"expand\"\n aria-expanded={expanded}\n className={className}\n onClick={handleExpand}\n >\n {children}\n </button>\n ) : (\n <a\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n >\n {children}\n </a>\n );\n};\n"],"names":[],"mappings":";;AAYO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA,MAAA,IAAU,IAAS,KAAA,KAAA,CAAA,mBACvB,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAEC,GAAA,CAAA,GAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { ChevronDownIcon, ChevronRightIcon } from '@salt-ds/icons';
|
|
3
|
+
|
|
4
|
+
const iconExpansionMap = {
|
|
5
|
+
vertical: {
|
|
6
|
+
expanded: ChevronDownIcon,
|
|
7
|
+
collapsed: ChevronRightIcon
|
|
8
|
+
},
|
|
9
|
+
horizontal: {
|
|
10
|
+
expanded: ChevronDownIcon,
|
|
11
|
+
collapsed: ChevronDownIcon
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
function ExpansionIcon({
|
|
15
|
+
expanded = false,
|
|
16
|
+
orientation = "horizontal"
|
|
17
|
+
}) {
|
|
18
|
+
const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
|
|
19
|
+
return /* @__PURE__ */ jsx(Icon, {
|
|
20
|
+
"aria-hidden": "true"
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { ExpansionIcon };
|
|
25
|
+
//# sourceMappingURL=ExpansionIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronDownIcon,\n },\n};\n\nexport function ExpansionIcon({\n expanded = false,\n orientation = \"horizontal\",\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAChB,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,GAAO,CAAA,CAAA;AAClC;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n position: relative;\n background: none;\n border: none;\n font-size: var(--salt-text-fontSize);\n text-decoration: none;\n cursor: var(--salt-selectable-cursor-hover);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-top: 0;\n padding-bottom: 0;\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n --saltButton-margin: var(--salt-spacing-50) 0;\n\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-25);\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--salt-size-indicator);\n left: var(--salt-spacing-25);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n background: var(--salt-navigable-indicator-active);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=NavigationItem.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
4
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
5
|
+
import '../utils/useId.js';
|
|
6
|
+
import '../salt-provider/SaltProvider.js';
|
|
7
|
+
import '../viewport/ViewportProvider.js';
|
|
8
|
+
import { clsx } from 'clsx';
|
|
9
|
+
import { ExpansionIcon } from './ExpansionIcon.js';
|
|
10
|
+
import { ConditionalWrapper } from './ConditionalWrapper.js';
|
|
11
|
+
import { useWindow } from '@salt-ds/window';
|
|
12
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
13
|
+
import css_248z from './NavigationItem.css.js';
|
|
14
|
+
|
|
15
|
+
const withBaseName = makePrefixer("saltNavigationItem");
|
|
16
|
+
const NavigationItem = forwardRef(
|
|
17
|
+
function NavigationItem2(props, ref) {
|
|
18
|
+
const {
|
|
19
|
+
active,
|
|
20
|
+
blurActive,
|
|
21
|
+
children,
|
|
22
|
+
className,
|
|
23
|
+
expanded = false,
|
|
24
|
+
orientation = "horizontal",
|
|
25
|
+
parent,
|
|
26
|
+
level = 0,
|
|
27
|
+
onExpand,
|
|
28
|
+
href,
|
|
29
|
+
style: styleProp,
|
|
30
|
+
...rest
|
|
31
|
+
} = props;
|
|
32
|
+
const targetWindow = useWindow();
|
|
33
|
+
useComponentCssInjection({
|
|
34
|
+
testId: "salt-navigation-item",
|
|
35
|
+
css: css_248z,
|
|
36
|
+
window: targetWindow
|
|
37
|
+
});
|
|
38
|
+
const style = {
|
|
39
|
+
...styleProp,
|
|
40
|
+
"--saltNavigationItem-level": `${level}`
|
|
41
|
+
};
|
|
42
|
+
return /* @__PURE__ */ jsx("div", {
|
|
43
|
+
ref,
|
|
44
|
+
className: clsx(withBaseName(), className),
|
|
45
|
+
style,
|
|
46
|
+
...rest,
|
|
47
|
+
children: /* @__PURE__ */ jsxs(ConditionalWrapper, {
|
|
48
|
+
className: clsx(
|
|
49
|
+
withBaseName("wrapper"),
|
|
50
|
+
{
|
|
51
|
+
[withBaseName("active")]: active || blurActive,
|
|
52
|
+
[withBaseName("blurActive")]: blurActive,
|
|
53
|
+
[withBaseName("rootItem")]: level === 0
|
|
54
|
+
},
|
|
55
|
+
withBaseName(orientation)
|
|
56
|
+
),
|
|
57
|
+
parent,
|
|
58
|
+
expanded,
|
|
59
|
+
onExpand,
|
|
60
|
+
active,
|
|
61
|
+
href,
|
|
62
|
+
children: [
|
|
63
|
+
/* @__PURE__ */ jsx("span", {
|
|
64
|
+
className: withBaseName("label"),
|
|
65
|
+
children
|
|
66
|
+
}),
|
|
67
|
+
parent && /* @__PURE__ */ jsx(ExpansionIcon, {
|
|
68
|
+
expanded,
|
|
69
|
+
orientation
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
})
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
export { NavigationItem };
|
|
78
|
+
//# sourceMappingURL=NavigationItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,WACxC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,QAAA;AAAA,YAAoB,WAAA;AAAA,WAA0B,CAAA;AAAA,SAAA;AAAA,OAEjE,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltCompactInput {\n --saltInput-paddingLeft: 0;\n --saltInput-paddingRight: 0;\n}\n\n.saltCompactInput-defaultSize.saltInput {\n --saltInput-minWidth: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=CompactInput.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CompactInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { forwardRef, useState, useEffect } from 'react';
|
|
4
|
+
import { Input } from '../input/Input.js';
|
|
5
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
6
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
7
|
+
import '../utils/useId.js';
|
|
8
|
+
import '../salt-provider/SaltProvider.js';
|
|
9
|
+
import '../viewport/ViewportProvider.js';
|
|
10
|
+
import { usePaginationContext } from './usePaginationContext.js';
|
|
11
|
+
import { useWindow } from '@salt-ds/window';
|
|
12
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
13
|
+
import css_248z from './CompactInput.css.js';
|
|
14
|
+
|
|
15
|
+
const withBaseName = makePrefixer("saltCompactInput");
|
|
16
|
+
const CompactInput = forwardRef(function CompactInput2(props, ref) {
|
|
17
|
+
const targetWindow = useWindow();
|
|
18
|
+
useComponentCssInjection({
|
|
19
|
+
testId: "salt-compact-input",
|
|
20
|
+
css: css_248z,
|
|
21
|
+
window: targetWindow
|
|
22
|
+
});
|
|
23
|
+
const { count, page, onPageChange } = usePaginationContext();
|
|
24
|
+
const [inputValue, setInputValue] = useState(`${page}`);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setInputValue(`${page}`);
|
|
27
|
+
}, [page]);
|
|
28
|
+
const handleChange = (event) => {
|
|
29
|
+
setInputValue(event.target.value);
|
|
30
|
+
};
|
|
31
|
+
const handleKeyDown = (event) => {
|
|
32
|
+
if (event.key === "Enter") {
|
|
33
|
+
const pageValue = Number(inputValue);
|
|
34
|
+
if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {
|
|
35
|
+
onPageChange(event, pageValue);
|
|
36
|
+
} else {
|
|
37
|
+
setInputValue(`${page}`);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const handleBlur = () => {
|
|
42
|
+
setInputValue(`${page}`);
|
|
43
|
+
};
|
|
44
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
45
|
+
className: clsx(withBaseName(), {
|
|
46
|
+
[withBaseName("defaultSize")]: count < 100
|
|
47
|
+
}),
|
|
48
|
+
inputProps: {
|
|
49
|
+
"aria-label": `Go to page, ${count} total`,
|
|
50
|
+
style: { width: `${`${count}`.length}ch` }
|
|
51
|
+
},
|
|
52
|
+
onBlur: handleBlur,
|
|
53
|
+
onChange: handleChange,
|
|
54
|
+
onKeyDown: handleKeyDown,
|
|
55
|
+
value: inputValue,
|
|
56
|
+
textAlign: "center",
|
|
57
|
+
ref,
|
|
58
|
+
...props
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
export { CompactInput };
|
|
63
|
+
//# sourceMappingURL=CompactInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport { Input, InputProps } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n HTMLInputElement,\n Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-input\",\n css: compactInputCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const [inputValue, setInputValue] = useState(`${page}`);\n\n useEffect(() => {\n setInputValue(`${page}`);\n }, [page]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n onPageChange(event, pageValue);\n } else {\n setInputValue(`${page}`);\n }\n }\n };\n\n const handleBlur = () => {\n setInputValue(`${page}`);\n };\n\n return (\n <Input\n className={clsx(withBaseName(), {\n [withBaseName(\"defaultSize\")]: count < 100,\n })}\n inputProps={{\n \"aria-label\": `Go to page, ${count} total`,\n style: { width: `${`${count}`.length}ch` },\n }}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n ref={ref}\n {...props}\n />\n );\n});\n"],"names":["CompactInput","compactInputCss"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA,CAG1B,SAASA,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,KACxC,CAAA;AAAA,IACD,UAAY,EAAA;AAAA,MACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,MAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,KAC3C;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,UAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
|