@salt-ds/core 1.56.0 → 1.57.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/css/salt-core.css +4 -1
- package/dist-cjs/drawer/Drawer.css.js +1 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +3 -0
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-cjs/table/TableContainer.js +10 -4
- package/dist-cjs/table/TableContainer.js.map +1 -1
- package/dist-cjs/utils/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist-es/drawer/Drawer.css.js +1 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +4 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-es/table/TableContainer.js +7 -1
- package/dist-es/table/TableContainer.js.map +1 -1
- package/dist-es/utils/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist-types/drawer/Drawer.d.ts +1 -1
- package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +3 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @salt-ds/core
|
|
2
2
|
|
|
3
|
+
## 1.57.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 47a23b9: Removed a self-import that caused issues in module federation environments.
|
|
8
|
+
|
|
9
|
+
## 1.57.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 47d113d: Added tertiary variant to Drawer.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Drawer variant="tertiary" />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
- a16cbc5: Added RatingIcon, RatingSelectedIcon, RatingUnselectingIcon to SemanticIconProvider.
|
|
20
|
+
|
|
3
21
|
## 1.56.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
package/css/salt-core.css
CHANGED
|
@@ -1176,6 +1176,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1176
1176
|
.saltDrawer-secondary {
|
|
1177
1177
|
--drawer-background: var(--salt-container-secondary-background);
|
|
1178
1178
|
}
|
|
1179
|
+
.saltDrawer-tertiary {
|
|
1180
|
+
--drawer-background: var(--salt-container-tertiary-background);
|
|
1181
|
+
}
|
|
1179
1182
|
.saltDrawer-top {
|
|
1180
1183
|
left: 0;
|
|
1181
1184
|
right: 0;
|
|
@@ -5760,4 +5763,4 @@ label.saltText small,
|
|
|
5760
5763
|
color: var(--salt-status-error-foreground-informative);
|
|
5761
5764
|
}
|
|
5762
5765
|
|
|
5763
|
-
/* src/
|
|
5766
|
+
/* src/6d38a830-6a81-4708-9979-8b93b2a7c58c.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n background: var(--drawer-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--salt-spacing-300);\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: var(--salt-zIndex-drawer);\n position: fixed;\n top: 0;\n box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
|
|
3
|
+
var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n background: var(--drawer-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--salt-spacing-300);\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: var(--salt-zIndex-drawer);\n position: fixed;\n top: 0;\n box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Drawer.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n useEffect,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n function Drawer(props, ref) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n return (\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n },\n);\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n useEffect,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n function Drawer(props, ref) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n return (\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n },\n);\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":"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"}
|
|
@@ -31,6 +31,9 @@ const defaultIconMap = {
|
|
|
31
31
|
CompletedIcon: icons.SuccessCircleSolidIcon,
|
|
32
32
|
LockedIcon: icons.LockedIcon,
|
|
33
33
|
InProgressIcon: icons.ProgressInprogressIcon,
|
|
34
|
+
RatingIcon: icons.FavoriteIcon,
|
|
35
|
+
RatingSelectedIcon: icons.FavoriteSolidIcon,
|
|
36
|
+
RatingUnselectingIcon: icons.FavoriteStrongIcon,
|
|
34
37
|
ErrorStatusAdornment: ErrorAdornment.ErrorAdornmentIcon,
|
|
35
38
|
WarningStatusAdornment: WarningAdornment.WarningAdornmentIcon,
|
|
36
39
|
SuccessStatusAdornment: SuccessAdornment.SuccessAdornmentIcon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n ErrorStatusAdornment: ElementType;\n WarningStatusAdornment: ElementType;\n SuccessStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n ErrorStatusAdornment: ErrorAdornmentIcon,\n WarningStatusAdornment: WarningAdornmentIcon,\n SuccessStatusAdornment: SuccessAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":["ChevronDownIcon","ChevronUpIcon","ChevronRightIcon","ChevronLeftIcon","TriangleUpIcon","TriangleDownIcon","UploadIcon","ErrorSolidIcon","SuccessCircleSolidIcon","InfoSolidIcon","WarningSolidIcon","OverflowMenuIcon","UserSolidIcon","CalendarIcon","CloseIcon","TearOutIcon","StepDefaultIcon","StepActiveIcon","LockedIcon","ProgressInprogressIcon","ErrorAdornmentIcon","WarningAdornmentIcon","SuccessAdornmentIcon","createContext","jsx","useContext"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n FavoriteIcon,\n FavoriteSolidIcon,\n FavoriteStrongIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n RatingIcon: ElementType;\n RatingSelectedIcon: ElementType;\n RatingUnselectingIcon: ElementType;\n ErrorStatusAdornment: ElementType;\n WarningStatusAdornment: ElementType;\n SuccessStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n RatingIcon: FavoriteIcon,\n RatingSelectedIcon: FavoriteSolidIcon,\n RatingUnselectingIcon: FavoriteStrongIcon,\n ErrorStatusAdornment: ErrorAdornmentIcon,\n WarningStatusAdornment: WarningAdornmentIcon,\n SuccessStatusAdornment: SuccessAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":["ChevronDownIcon","ChevronUpIcon","ChevronRightIcon","ChevronLeftIcon","TriangleUpIcon","TriangleDownIcon","UploadIcon","ErrorSolidIcon","SuccessCircleSolidIcon","InfoSolidIcon","WarningSolidIcon","OverflowMenuIcon","UserSolidIcon","CalendarIcon","CloseIcon","TearOutIcon","StepDefaultIcon","StepActiveIcon","LockedIcon","ProgressInprogressIcon","FavoriteIcon","FavoriteSolidIcon","FavoriteStrongIcon","ErrorAdornmentIcon","WarningAdornmentIcon","SuccessAdornmentIcon","createContext","jsx","useContext"],"mappings":";;;;;;;;;AA+EA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAYA,qBAAA;AAAA,EACZ,YAAA,EAAcC,mBAAA;AAAA,EACd,eAAA,EAAiBC,sBAAA;AAAA,EACjB,iBAAA,EAAmBF,qBAAA;AAAA,EACnB,QAAA,EAAUE,sBAAA;AAAA,EACV,YAAA,EAAcC,qBAAA;AAAA,EACd,YAAA,EAAcC,oBAAA;AAAA,EACd,YAAA,EAAcC,sBAAA;AAAA,cACdC,gBAAA;AAAA,EACA,SAAA,EAAWC,oBAAA;AAAA,EACX,WAAA,EAAaC,4BAAA;AAAA,EACb,QAAA,EAAUC,mBAAA;AAAA,EACV,WAAA,EAAaC,sBAAA;AAAA,EACb,YAAA,EAAcC,sBAAA;AAAA,EACd,QAAA,EAAUC,mBAAA;AAAA,gBACVC,kBAAA;AAAA,aACAC,eAAA;AAAA,EACA,YAAA,EAAcC,iBAAA;AAAA,EACd,WAAA,EAAaC,qBAAA;AAAA,EACb,UAAA,EAAYC,oBAAA;AAAA,EACZ,aAAA,EAAeT,4BAAA;AAAA,cACfU,gBAAA;AAAA,EACA,cAAA,EAAgBC,4BAAA;AAAA,EAChB,UAAA,EAAYC,kBAAA;AAAA,EACZ,kBAAA,EAAoBC,uBAAA;AAAA,EACpB,qBAAA,EAAuBC,wBAAA;AAAA,EACvB,oBAAA,EAAsBC,iCAAA;AAAA,EACtB,sBAAA,EAAwBC,qCAAA;AAAA,EACxB,sBAAA,EAAwBC;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsBC,oBAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACEC,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;;"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
4
|
var styles = require('@salt-ds/styles');
|
|
6
5
|
var window = require('@salt-ds/window');
|
|
7
6
|
var clsx = require('clsx');
|
|
8
7
|
var React = require('react');
|
|
8
|
+
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
9
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
10
|
+
var useForkRef = require('../utils/useForkRef.js');
|
|
11
|
+
require('../utils/useId.js');
|
|
12
|
+
var useResizeObserver = require('../utils/useResizeObserver.js');
|
|
13
|
+
require('../salt-provider/SaltProvider.js');
|
|
14
|
+
require('../viewport/ViewportProvider.js');
|
|
9
15
|
var Table$1 = require('./Table.js');
|
|
10
16
|
var Table = require('./Table.css.js');
|
|
11
17
|
var TableContext = require('./TableContext.js');
|
|
@@ -37,15 +43,15 @@ const TableContainer = React.forwardRef(
|
|
|
37
43
|
...rest
|
|
38
44
|
} = props;
|
|
39
45
|
const scrollRef = React.useRef(null);
|
|
40
|
-
const handleRef =
|
|
46
|
+
const handleRef = useForkRef.useForkRef(ref, scrollRef);
|
|
41
47
|
const checkOverflow = React.useCallback(() => {
|
|
42
48
|
const element = scrollRef.current;
|
|
43
49
|
if (!element) return;
|
|
44
50
|
const overflowing = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
|
|
45
51
|
setIsOverflowing(overflowing);
|
|
46
52
|
}, []);
|
|
47
|
-
|
|
48
|
-
|
|
53
|
+
useResizeObserver.useResizeObserver({ ref: scrollRef, onResize: checkOverflow });
|
|
54
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
49
55
|
checkOverflow();
|
|
50
56
|
}, [checkOverflow]);
|
|
51
57
|
const overflowProps = isOverflowing ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContainer.js","sources":["../src/table/TableContainer.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TableContainer.js","sources":["../src/table/TableContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n useForkRef,\n useIsomorphicLayoutEffect,\n useResizeObserver,\n} from \"../utils\";\nimport { withTableBaseName } from \"./Table\";\nimport tableCss from \"./Table.css\";\nimport { TableContext } from \"./TableContext\";\n\nexport interface TableContainerProps\n extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"aria-label\" | \"aria-labelledby\" | \"role\"\n > {}\n\nexport const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(\n function TableContainer(props, ref) {\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [tableId, setTableId] = useState<string | undefined>();\n const [labelledBy, setLabelledBy] = useState<string | undefined>();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-container\",\n css: tableCss,\n window: targetWindow,\n });\n\n const {\n children,\n className,\n // @ts-expect-error: \"aria-labelledby\" is omitted to prevent accidental misuse,\n // but we still want to forward it for advanced accessible labeling scenarios.\n \"aria-labelledby\": ariaLabelledBy,\n // @ts-expect-error: Allow passing aria-label even though it's omitted from HTMLAttributes\n // Same reasoning as above: we forward aria-label for accessibility purposes.\n \"aria-label\": ariaLabel,\n // @ts-expect-error: Allow passing role even though it's omitted from HTMLAttributes\n // Same reasoning as above: we forward role for accessibility purposes.\n role,\n tabIndex,\n ...rest\n } = props;\n\n const scrollRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useForkRef<HTMLDivElement>(ref, scrollRef);\n\n const checkOverflow = useCallback(() => {\n const element = scrollRef.current;\n if (!element) return;\n const overflowing =\n element.scrollHeight > element.clientHeight ||\n element.scrollWidth > element.clientWidth;\n setIsOverflowing(overflowing);\n }, []);\n\n useResizeObserver({ ref: scrollRef, onResize: checkOverflow });\n\n useIsomorphicLayoutEffect(() => {\n checkOverflow();\n }, [checkOverflow]);\n\n const overflowProps = isOverflowing\n ? {\n role: role ?? \"region\",\n tabIndex: tabIndex ?? 0,\n \"aria-label\": ariaLabel,\n ...(ariaLabelledBy === undefined &&\n ariaLabel === undefined && {\n \"aria-labelledby\": labelledBy ?? tableId,\n }),\n ...(ariaLabelledBy !== undefined && {\n \"aria-labelledby\": ariaLabelledBy,\n }),\n }\n : {\n role,\n tabIndex,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n };\n\n const contextValue = useMemo(\n () => ({ id: tableId, setId: setTableId, labelledBy, setLabelledBy }),\n [tableId, labelledBy],\n );\n\n return (\n <TableContext.Provider value={contextValue}>\n <div\n ref={handleRef}\n className={clsx(withTableBaseName(\"container\"), className)}\n {...overflowProps}\n {...rest}\n >\n {children}\n </div>\n </TableContext.Provider>\n );\n },\n);\n"],"names":["forwardRef","TableContainer","useState","useWindow","useComponentCssInjection","tableCss","useRef","useForkRef","useCallback","useResizeObserver","useIsomorphicLayoutEffect","useMemo","jsx","TableContext","clsx","withTableBaseName"],"mappings":";;;;;;;;;;;;;;;;;;AA0BO,MAAM,cAAA,GAAiBA,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA;AACxD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,cAAA,EAA6B;AAC3D,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,cAAA,EAA6B;AAEjE,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,KAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA;AAAA;AAAA,MAGA,iBAAA,EAAmB,cAAA;AAAA;AAAA;AAAA,MAGnB,YAAA,EAAc,SAAA;AAAA;AAAA;AAAA,MAGd,IAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,SAAA,GAAYC,aAA8B,IAAI,CAAA;AACpD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAA2B,GAAA,EAAK,SAAS,CAAA;AAE3D,IAAA,MAAM,aAAA,GAAgBC,kBAAY,MAAM;AACtC,MAAA,MAAM,UAAU,SAAA,CAAU,OAAA;AAC1B,MAAA,IAAI,CAAC,OAAA,EAAS;AACd,MAAA,MAAM,cACJ,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAA,IAC/B,OAAA,CAAQ,cAAc,OAAA,CAAQ,WAAA;AAChC,MAAA,gBAAA,CAAiB,WAAW,CAAA;AAAA,IAC9B,CAAA,EAAG,EAAE,CAAA;AAEL,IAAAC,mCAAA,CAAkB,EAAE,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,eAAe,CAAA;AAE7D,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,aAAA,EAAc;AAAA,IAChB,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,MAAM,gBAAgB,aAAA,GAClB;AAAA,MACE,MAAM,IAAA,IAAQ,QAAA;AAAA,MACd,UAAU,QAAA,IAAY,CAAA;AAAA,MACtB,YAAA,EAAc,SAAA;AAAA,MACd,GAAI,cAAA,KAAmB,MAAA,IACrB,SAAA,KAAc,MAAA,IAAa;AAAA,QACzB,mBAAmB,UAAA,IAAc;AAAA,OACnC;AAAA,MACF,GAAI,mBAAmB,MAAA,IAAa;AAAA,QAClC,iBAAA,EAAmB;AAAA;AACrB,KACF,GACA;AAAA,MACE,IAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,YAAA,EAAc;AAAA,KAChB;AAEJ,IAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,MACnB,OAAO,EAAE,EAAA,EAAI,SAAS,KAAA,EAAO,UAAA,EAAY,YAAY,aAAA,EAAc,CAAA;AAAA,MACnE,CAAC,SAAS,UAAU;AAAA,KACtB;AAEA,IAAA,uBACEC,cAAA,CAACC,yBAAA,CAAa,QAAA,EAAb,EAAsB,OAAO,YAAA,EAC5B,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWE,SAAA,CAAKC,yBAAA,CAAkB,WAAW,GAAG,SAAS,CAAA;AAAA,QACxD,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["// biome-ignore lint/style/noRestrictedImports: This is the only place useLayoutEffect is acceptable.\nimport { useEffect, useLayoutEffect } from \"react\";\n\n// React currently throws a warning when using useLayoutEffect on the server.\n// To get around it, we can conditionally useEffect on the server (no-op) and\n// useLayoutEffect in the browser. We need useLayoutEffect because we want\n// `connect` to perform sync updates to a ref to save the latest props after\n// a render is actually committed to the DOM.\nexport const useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" &&\n typeof window.document !== \"undefined\" &&\n typeof window.document.createElement !== \"undefined\"\n ? useLayoutEffect\n : useEffect;\n"],"names":["useLayoutEffect","useEffect"],"mappings":";;;;AAQO,MAAM,yBAAA,GACX,OAAO,MAAA,KAAW,WAAA,IAClB,OAAO,MAAA,CAAO,QAAA,KAAa,WAAA,IAC3B,OAAO,MAAA,CAAO,QAAA,CAAS,aAAA,KAAkB,cACrCA,qBAAA,GACAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n background: var(--drawer-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--salt-spacing-300);\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: var(--salt-zIndex-drawer);\n position: fixed;\n top: 0;\n box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n background: var(--drawer-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--salt-spacing-300);\n box-shadow: var(--salt-overlayable-shadow-modal);\n z-index: var(--salt-zIndex-drawer);\n position: fixed;\n top: 0;\n box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Drawer.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n useEffect,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n function Drawer(props, ref) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n return (\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n useEffect,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n function Drawer(props, ref) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n return (\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
|
|
2
|
+
import { FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
|
|
3
3
|
import { createContext, useContext } from 'react';
|
|
4
4
|
import { ErrorAdornmentIcon } from '../status-adornment/ErrorAdornment.js';
|
|
5
5
|
import { SuccessAdornmentIcon } from '../status-adornment/SuccessAdornment.js';
|
|
@@ -29,6 +29,9 @@ const defaultIconMap = {
|
|
|
29
29
|
CompletedIcon: SuccessCircleSolidIcon,
|
|
30
30
|
LockedIcon,
|
|
31
31
|
InProgressIcon: ProgressInprogressIcon,
|
|
32
|
+
RatingIcon: FavoriteIcon,
|
|
33
|
+
RatingSelectedIcon: FavoriteSolidIcon,
|
|
34
|
+
RatingUnselectingIcon: FavoriteStrongIcon,
|
|
32
35
|
ErrorStatusAdornment: ErrorAdornmentIcon,
|
|
33
36
|
WarningStatusAdornment: WarningAdornmentIcon,
|
|
34
37
|
SuccessStatusAdornment: SuccessAdornmentIcon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n ErrorStatusAdornment: ElementType;\n WarningStatusAdornment: ElementType;\n SuccessStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n ErrorStatusAdornment: ErrorAdornmentIcon,\n WarningStatusAdornment: WarningAdornmentIcon,\n SuccessStatusAdornment: SuccessAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n FavoriteIcon,\n FavoriteSolidIcon,\n FavoriteStrongIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n RatingIcon: ElementType;\n RatingSelectedIcon: ElementType;\n RatingUnselectingIcon: ElementType;\n ErrorStatusAdornment: ElementType;\n WarningStatusAdornment: ElementType;\n SuccessStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n RatingIcon: FavoriteIcon,\n RatingSelectedIcon: FavoriteSolidIcon,\n RatingUnselectingIcon: FavoriteStrongIcon,\n ErrorStatusAdornment: ErrorAdornmentIcon,\n WarningStatusAdornment: WarningAdornmentIcon,\n SuccessStatusAdornment: SuccessAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AA+EA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,aAAA;AAAA,EACd,eAAA,EAAiB,gBAAA;AAAA,EACjB,iBAAA,EAAmB,eAAA;AAAA,EACnB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,eAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,EAAW,cAAA;AAAA,EACX,WAAA,EAAa,sBAAA;AAAA,EACb,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,YAAA,EAAc,gBAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,WAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY,cAAA;AAAA,EACZ,aAAA,EAAe,sBAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,oBAAA,EAAsB,kBAAA;AAAA,EACtB,sBAAA,EAAwB,oBAAA;AAAA,EACxB,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useForkRef, useResizeObserver, useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
3
2
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
3
|
import { useWindow } from '@salt-ds/window';
|
|
5
4
|
import { clsx } from 'clsx';
|
|
6
5
|
import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
|
|
6
|
+
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
|
|
7
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
8
|
+
import { useForkRef } from '../utils/useForkRef.js';
|
|
9
|
+
import '../utils/useId.js';
|
|
10
|
+
import { useResizeObserver } from '../utils/useResizeObserver.js';
|
|
11
|
+
import '../salt-provider/SaltProvider.js';
|
|
12
|
+
import '../viewport/ViewportProvider.js';
|
|
7
13
|
import { withTableBaseName } from './Table.js';
|
|
8
14
|
import css_248z from './Table.css.js';
|
|
9
15
|
import { TableContext } from './TableContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContainer.js","sources":["../src/table/TableContainer.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TableContainer.js","sources":["../src/table/TableContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n useForkRef,\n useIsomorphicLayoutEffect,\n useResizeObserver,\n} from \"../utils\";\nimport { withTableBaseName } from \"./Table\";\nimport tableCss from \"./Table.css\";\nimport { TableContext } from \"./TableContext\";\n\nexport interface TableContainerProps\n extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"aria-label\" | \"aria-labelledby\" | \"role\"\n > {}\n\nexport const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(\n function TableContainer(props, ref) {\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [tableId, setTableId] = useState<string | undefined>();\n const [labelledBy, setLabelledBy] = useState<string | undefined>();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-container\",\n css: tableCss,\n window: targetWindow,\n });\n\n const {\n children,\n className,\n // @ts-expect-error: \"aria-labelledby\" is omitted to prevent accidental misuse,\n // but we still want to forward it for advanced accessible labeling scenarios.\n \"aria-labelledby\": ariaLabelledBy,\n // @ts-expect-error: Allow passing aria-label even though it's omitted from HTMLAttributes\n // Same reasoning as above: we forward aria-label for accessibility purposes.\n \"aria-label\": ariaLabel,\n // @ts-expect-error: Allow passing role even though it's omitted from HTMLAttributes\n // Same reasoning as above: we forward role for accessibility purposes.\n role,\n tabIndex,\n ...rest\n } = props;\n\n const scrollRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useForkRef<HTMLDivElement>(ref, scrollRef);\n\n const checkOverflow = useCallback(() => {\n const element = scrollRef.current;\n if (!element) return;\n const overflowing =\n element.scrollHeight > element.clientHeight ||\n element.scrollWidth > element.clientWidth;\n setIsOverflowing(overflowing);\n }, []);\n\n useResizeObserver({ ref: scrollRef, onResize: checkOverflow });\n\n useIsomorphicLayoutEffect(() => {\n checkOverflow();\n }, [checkOverflow]);\n\n const overflowProps = isOverflowing\n ? {\n role: role ?? \"region\",\n tabIndex: tabIndex ?? 0,\n \"aria-label\": ariaLabel,\n ...(ariaLabelledBy === undefined &&\n ariaLabel === undefined && {\n \"aria-labelledby\": labelledBy ?? tableId,\n }),\n ...(ariaLabelledBy !== undefined && {\n \"aria-labelledby\": ariaLabelledBy,\n }),\n }\n : {\n role,\n tabIndex,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n };\n\n const contextValue = useMemo(\n () => ({ id: tableId, setId: setTableId, labelledBy, setLabelledBy }),\n [tableId, labelledBy],\n );\n\n return (\n <TableContext.Provider value={contextValue}>\n <div\n ref={handleRef}\n className={clsx(withTableBaseName(\"container\"), className)}\n {...overflowProps}\n {...rest}\n >\n {children}\n </div>\n </TableContext.Provider>\n );\n },\n);\n"],"names":["TableContainer","tableCss"],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,EAA6B;AAC3D,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA,EAA6B;AAEjE,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA;AAAA;AAAA,MAGA,iBAAA,EAAmB,cAAA;AAAA;AAAA;AAAA,MAGnB,YAAA,EAAc,SAAA;AAAA;AAAA;AAAA,MAGd,IAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,OAA8B,IAAI,CAAA;AACpD,IAAA,MAAM,SAAA,GAAY,UAAA,CAA2B,GAAA,EAAK,SAAS,CAAA;AAE3D,IAAA,MAAM,aAAA,GAAgB,YAAY,MAAM;AACtC,MAAA,MAAM,UAAU,SAAA,CAAU,OAAA;AAC1B,MAAA,IAAI,CAAC,OAAA,EAAS;AACd,MAAA,MAAM,cACJ,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAA,IAC/B,OAAA,CAAQ,cAAc,OAAA,CAAQ,WAAA;AAChC,MAAA,gBAAA,CAAiB,WAAW,CAAA;AAAA,IAC9B,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,eAAe,CAAA;AAE7D,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,aAAA,EAAc;AAAA,IAChB,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,MAAM,gBAAgB,aAAA,GAClB;AAAA,MACE,MAAM,IAAA,IAAQ,QAAA;AAAA,MACd,UAAU,QAAA,IAAY,CAAA;AAAA,MACtB,YAAA,EAAc,SAAA;AAAA,MACd,GAAI,cAAA,KAAmB,MAAA,IACrB,SAAA,KAAc,MAAA,IAAa;AAAA,QACzB,mBAAmB,UAAA,IAAc;AAAA,OACnC;AAAA,MACF,GAAI,mBAAmB,MAAA,IAAa;AAAA,QAClC,iBAAA,EAAmB;AAAA;AACrB,KACF,GACA;AAAA,MACE,IAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,YAAA,EAAc;AAAA,KAChB;AAEJ,IAAA,MAAM,YAAA,GAAe,OAAA;AAAA,MACnB,OAAO,EAAE,EAAA,EAAI,SAAS,KAAA,EAAO,UAAA,EAAY,YAAY,aAAA,EAAc,CAAA;AAAA,MACnE,CAAC,SAAS,UAAU;AAAA,KACtB;AAEA,IAAA,uBACE,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,OAAO,YAAA,EAC5B,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA,CAAK,iBAAA,CAAkB,WAAW,GAAG,SAAS,CAAA;AAAA,QACxD,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../src/utils/useIsomorphicLayoutEffect.ts"],"sourcesContent":["// biome-ignore lint/style/noRestrictedImports: This is the only place useLayoutEffect is acceptable.\nimport { useEffect, useLayoutEffect } from \"react\";\n\n// React currently throws a warning when using useLayoutEffect on the server.\n// To get around it, we can conditionally useEffect on the server (no-op) and\n// useLayoutEffect in the browser. We need useLayoutEffect because we want\n// `connect` to perform sync updates to a ref to save the latest props after\n// a render is actually committed to the DOM.\nexport const useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" &&\n typeof window.document !== \"undefined\" &&\n typeof window.document.createElement !== \"undefined\"\n ? useLayoutEffect\n : useEffect;\n"],"names":[],"mappings":";;AAQO,MAAM,yBAAA,GACX,OAAO,MAAA,KAAW,WAAA,IAClB,OAAO,MAAA,CAAO,QAAA,KAAa,WAAA,IAC3B,OAAO,MAAA,CAAO,QAAA,CAAS,aAAA,KAAkB,cACrC,eAAA,GACA;;;;"}
|
|
@@ -15,7 +15,7 @@ export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
15
15
|
/**
|
|
16
16
|
* Change background color palette
|
|
17
17
|
*/
|
|
18
|
-
variant?: "primary" | "secondary";
|
|
18
|
+
variant?: "primary" | "secondary" | "tertiary";
|
|
19
19
|
/**
|
|
20
20
|
* Prevent the dialog closing on click away
|
|
21
21
|
* */
|
|
@@ -23,6 +23,9 @@ export interface SemanticIconMap {
|
|
|
23
23
|
CompletedIcon: ElementType;
|
|
24
24
|
LockedIcon: ElementType;
|
|
25
25
|
InProgressIcon: ElementType;
|
|
26
|
+
RatingIcon: ElementType;
|
|
27
|
+
RatingSelectedIcon: ElementType;
|
|
28
|
+
RatingUnselectingIcon: ElementType;
|
|
26
29
|
ErrorStatusAdornment: ElementType;
|
|
27
30
|
WarningStatusAdornment: ElementType;
|
|
28
31
|
SuccessStatusAdornment: ElementType;
|