@salt-ds/lab 1.0.0-alpha.40 → 1.0.0-alpha.42
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-lab.css +3 -27
- package/dist-cjs/index.js +2 -4
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +16 -3
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/utils/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/index.js +1 -2
- package/dist-es/index.js.map +1 -1
- package/dist-es/layer-layout/LayerLayout.js.map +1 -1
- package/dist-es/menu/MenuBase.js +17 -4
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/utils/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-types/index.d.ts +0 -1
- package/dist-types/layer-layout/LayerLayout.d.ts +1 -2
- package/dist-types/menu/MenuBase.d.ts +5 -0
- package/dist-types/utils/index.d.ts +1 -1
- package/package.json +3 -3
- package/dist-cjs/parent-child-layout/ParentChildLayout.css.js +0 -6
- package/dist-cjs/parent-child-layout/ParentChildLayout.css.js.map +0 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +0 -68
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +0 -1
- package/dist-es/parent-child-layout/ParentChildLayout.css.js +0 -4
- package/dist-es/parent-child-layout/ParentChildLayout.css.js.map +0 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +0 -64
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +0 -1
- package/dist-types/parent-child-layout/ParentChildLayout.d.ts +0 -29
- package/dist-types/parent-child-layout/index.d.ts +0 -1
package/css/salt-lab.css
CHANGED
|
@@ -2116,11 +2116,13 @@
|
|
|
2116
2116
|
padding-left: var(--salt-spacing-100);
|
|
2117
2117
|
padding-right: var(--salt-spacing-100);
|
|
2118
2118
|
display: flex;
|
|
2119
|
+
justify-content: flex-start;
|
|
2119
2120
|
gap: var(--salt-spacing-100);
|
|
2120
2121
|
position: relative;
|
|
2121
2122
|
align-items: center;
|
|
2122
2123
|
cursor: var(--salt-selectable-cursor-hover);
|
|
2123
2124
|
box-sizing: border-box;
|
|
2125
|
+
flex-shrink: 0;
|
|
2124
2126
|
}
|
|
2125
2127
|
.saltMenuItem:focus-visible {
|
|
2126
2128
|
outline: var(--salt-focused-outline);
|
|
@@ -2306,32 +2308,6 @@
|
|
|
2306
2308
|
align-items: flex-end;
|
|
2307
2309
|
}
|
|
2308
2310
|
|
|
2309
|
-
/* src/parent-child-layout/ParentChildLayout.css */
|
|
2310
|
-
.saltParentChildLayout {
|
|
2311
|
-
display: flex;
|
|
2312
|
-
gap: var(--parentChildLayout-gap);
|
|
2313
|
-
}
|
|
2314
|
-
.saltParentChildLayout-child {
|
|
2315
|
-
flex-grow: 1;
|
|
2316
|
-
}
|
|
2317
|
-
.saltParentChildLayout-collapsed {
|
|
2318
|
-
width: 100%;
|
|
2319
|
-
}
|
|
2320
|
-
.saltParentChildLayout-childAnimation {
|
|
2321
|
-
animation: var(--salt-animation-slide-in-right);
|
|
2322
|
-
}
|
|
2323
|
-
.saltParentChildLayout-parentAnimation {
|
|
2324
|
-
animation: var(--salt-animation-slide-in-left);
|
|
2325
|
-
}
|
|
2326
|
-
@media (prefers-reduced-motion) {
|
|
2327
|
-
.saltParentChildLayout-parentAnimation {
|
|
2328
|
-
animation: var(--salt-animation-fade-in-center);
|
|
2329
|
-
}
|
|
2330
|
-
.saltParentChildLayout-childAnimation {
|
|
2331
|
-
animation: var(--salt-animation-fade-in-center);
|
|
2332
|
-
}
|
|
2333
|
-
}
|
|
2334
|
-
|
|
2335
2311
|
/* src/query-input/QueryInput.css */
|
|
2336
2312
|
.saltQueryInput {
|
|
2337
2313
|
}
|
|
@@ -4222,4 +4198,4 @@
|
|
|
4222
4198
|
margin: calc(var(--salt-size-unit) / 2) 0;
|
|
4223
4199
|
}
|
|
4224
4200
|
|
|
4225
|
-
/* src/
|
|
4201
|
+
/* src/661f0e45-f9f4-41c4-b519-2172b59518c6.css */
|
package/dist-cjs/index.js
CHANGED
|
@@ -18,9 +18,9 @@ var isPlainObject = require('./utils/isPlainObject.js');
|
|
|
18
18
|
var partition = require('./utils/partition.js');
|
|
19
19
|
var useClickOutside = require('./utils/useClickOutside.js');
|
|
20
20
|
var useEventCallback = require('./utils/useEventCallback.js');
|
|
21
|
-
var useIsViewportLargerThanBreakpoint = require('./utils/useIsViewportLargerThanBreakpoint.js');
|
|
22
21
|
var useLayoutEffectOnce = require('./utils/useLayoutEffectOnce.js');
|
|
23
22
|
var useLayoutEffectSkipFirst = require('./utils/useLayoutEffectSkipFirst.js');
|
|
23
|
+
var useIsViewportLargerThanBreakpoint = require('./utils/useIsViewportLargerThanBreakpoint.js');
|
|
24
24
|
var useOverflowDetection = require('./utils/useOverflowDetection.js');
|
|
25
25
|
var useSlideSelection = require('./utils/useSlideSelection.js');
|
|
26
26
|
var AppHeader = require('./app-header/AppHeader.js');
|
|
@@ -96,7 +96,6 @@ var MenuButton = require('./menu-button/MenuButton.js');
|
|
|
96
96
|
var Metric = require('./metric/Metric.js');
|
|
97
97
|
var MetricHeader = require('./metric/MetricHeader.js');
|
|
98
98
|
var MetricContent = require('./metric/MetricContent.js');
|
|
99
|
-
var ParentChildLayout = require('./parent-child-layout/ParentChildLayout.js');
|
|
100
99
|
var Portal = require('./portal/Portal.js');
|
|
101
100
|
var QueryInput = require('./query-input/QueryInput.js');
|
|
102
101
|
var useQueryInput = require('./query-input/useQueryInput.js');
|
|
@@ -151,9 +150,9 @@ exports.isPlainObject = isPlainObject.isPlainObject;
|
|
|
151
150
|
exports.partition = partition.partition;
|
|
152
151
|
exports.useClickOutside = useClickOutside.useClickOutside;
|
|
153
152
|
exports.useEventCallback = useEventCallback.useEventCallback;
|
|
154
|
-
exports.useIsViewportLargerThanBreakpoint = useIsViewportLargerThanBreakpoint.useIsViewportLargerThanBreakpoint;
|
|
155
153
|
exports.useLayoutEffectOnce = useLayoutEffectOnce.useLayoutEffectOnce;
|
|
156
154
|
exports.useLayoutEffectSkipFirst = useLayoutEffectSkipFirst.useLayoutEffectSkipFirst;
|
|
155
|
+
exports.useIsViewportLargerThanBreakpoint = useIsViewportLargerThanBreakpoint.useIsViewportLargerThanBreakpoint;
|
|
157
156
|
exports.useOverflowDetection = useOverflowDetection.useOverflowDetection;
|
|
158
157
|
exports.useSlideSelection = useSlideSelection.useSlideSelection;
|
|
159
158
|
exports.AppHeader = AppHeader.AppHeader;
|
|
@@ -240,7 +239,6 @@ exports.MenuButton = MenuButton.MenuButton;
|
|
|
240
239
|
exports.Metric = Metric.Metric;
|
|
241
240
|
exports.MetricHeader = MetricHeader.MetricHeader;
|
|
242
241
|
exports.MetricContent = MetricContent.MetricContent;
|
|
243
|
-
exports.ParentChildLayout = ParentChildLayout.ParentChildLayout;
|
|
244
242
|
exports.Portal = Portal.Portal;
|
|
245
243
|
exports.QueryInput = QueryInput.QueryInput;
|
|
246
244
|
exports.useQueryInput = useQueryInput.useQueryInput;
|
package/dist-cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\
|
|
1
|
+
{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n Scrim,\n ScrimProps,\n Breakpoints,\n makePrefixer,\n usePrevious,\n} from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the scrim.\n */\n disableScrim?: boolean;\n /**\n * Defines the layer position within the screen.\n */\n position?: LayerPositions;\n /**\n * Breakpoint at which the layer will become fullscreen.\n */\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Display or hide the component.\n */\n isOpen?: boolean;\n /**\n * Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}
|
|
@@ -9,7 +9,14 @@ var core = require('@salt-ds/core');
|
|
|
9
9
|
var react = require('@floating-ui/react');
|
|
10
10
|
|
|
11
11
|
function MenuBase(props) {
|
|
12
|
-
const {
|
|
12
|
+
const {
|
|
13
|
+
children,
|
|
14
|
+
defaultOpen,
|
|
15
|
+
open,
|
|
16
|
+
onOpenChange,
|
|
17
|
+
placement,
|
|
18
|
+
getVirtualElement
|
|
19
|
+
} = props;
|
|
13
20
|
const parentId = react.useFloatingParentNodeId();
|
|
14
21
|
const nodeId = react.useFloatingNodeId();
|
|
15
22
|
const tree = react.useFloatingTree();
|
|
@@ -34,7 +41,8 @@ function MenuBase(props) {
|
|
|
34
41
|
nodeId,
|
|
35
42
|
open: openState,
|
|
36
43
|
onOpenChange: setOpen,
|
|
37
|
-
|
|
44
|
+
strategy: !getVirtualElement ? "absolute" : "fixed",
|
|
45
|
+
placement: placement != null ? placement : isNested || getVirtualElement ? "right-start" : "bottom-start",
|
|
38
46
|
middleware: [
|
|
39
47
|
react.offset(isNested ? { crossAxis: -1 } : {}),
|
|
40
48
|
react.flip({}),
|
|
@@ -48,10 +56,15 @@ function MenuBase(props) {
|
|
|
48
56
|
})
|
|
49
57
|
]
|
|
50
58
|
});
|
|
59
|
+
core.useIsomorphicLayoutEffect(() => {
|
|
60
|
+
if (getVirtualElement) {
|
|
61
|
+
refs.setPositionReference(getVirtualElement());
|
|
62
|
+
}
|
|
63
|
+
}, [getVirtualElement]);
|
|
51
64
|
const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions(
|
|
52
65
|
[
|
|
53
66
|
react.useHover(context, {
|
|
54
|
-
enabled: isNested,
|
|
67
|
+
enabled: isNested && !focusInside,
|
|
55
68
|
handleClose: react.safePolygon({ blockPointerEvents: true })
|
|
56
69
|
}),
|
|
57
70
|
react.useClick(context, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n flip,\n offset,\n shift,\n limitShift,\n useInteractions,\n useRole,\n useClick,\n useDismiss,\n useHover,\n safePolygon,\n FloatingNode,\n useFloatingParentNodeId,\n useFloatingNodeId,\n useListNavigation,\n useFloatingTree,\n size,\n} from \"@floating-ui/react\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {
|
|
1
|
+
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport {\n flip,\n offset,\n shift,\n limitShift,\n useInteractions,\n useRole,\n useClick,\n useDismiss,\n useHover,\n safePolygon,\n FloatingNode,\n useFloatingParentNodeId,\n useFloatingNodeId,\n useListNavigation,\n useFloatingTree,\n size,\n ReferenceType,\n} from \"@floating-ui/react\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n /**\n * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n */\n getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {\n children,\n defaultOpen,\n open,\n onOpenChange,\n placement,\n getVirtualElement,\n } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [setOpenState, onOpenChange]\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n placement:\n placement ??\n (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(isNested ? { crossAxis: -1 } : {}),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n useIsomorphicLayoutEffect(() => {\n if (getVirtualElement) {\n refs.setPositionReference(getVirtualElement());\n }\n }, [getVirtualElement]);\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested && !focusInside,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["useFloatingParentNodeId","useFloatingNodeId","useFloatingTree","useRef","useControlled","useCallback","useState","useFloatingUI","offset","flip","shift","limitShift","size","elements","useIsomorphicLayoutEffect","useInteractions","useHover","safePolygon","useClick","useRole","useDismiss","useListNavigation","useEffect","jsx","FloatingNode","MenuContext"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
|
|
3
|
+
var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n justify-content: flex-start;\n gap: var(--salt-spacing-100);\n position: relative;\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=MenuItem.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n useCurrentBreakpoint,\n useOrderedBreakpoints,\n Breakpoints,\n} from \"@salt-ds/core\";\n\nexport const useIsViewportLargerThanBreakpoint = (\n targetedBreakpoint: keyof Breakpoints\n): boolean => {\n const orderedBreakpoints = useOrderedBreakpoints();\n const index = orderedBreakpoints.indexOf(targetedBreakpoint);\n const currentBreakpoint = useCurrentBreakpoint();\n const currentBreakpointIndex = orderedBreakpoints.indexOf(currentBreakpoint);\n return index >= currentBreakpointIndex;\n};\n"],"names":["useOrderedBreakpoints","useCurrentBreakpoint"],"mappings":";;;;;;AAMa,MAAA,iCAAA,GAAoC,CAC/C,kBACY,KAAA;AACZ,EAAA,MAAM,qBAAqBA,0BAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,KAAA,GAAQ,kBAAmB,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,oBAAoBC,yBAAqB,EAAA,CAAA;AAC/C,EAAM,MAAA,sBAAA,GAAyB,kBAAmB,CAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC3E,EAAA,OAAO,KAAS,IAAA,sBAAA,CAAA;AAClB;;;;"}
|
package/dist-es/index.js
CHANGED
|
@@ -14,9 +14,9 @@ export { isPlainObject } from './utils/isPlainObject.js';
|
|
|
14
14
|
export { partition } from './utils/partition.js';
|
|
15
15
|
export { useClickOutside } from './utils/useClickOutside.js';
|
|
16
16
|
export { useEventCallback } from './utils/useEventCallback.js';
|
|
17
|
-
export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
|
|
18
17
|
export { useLayoutEffectOnce } from './utils/useLayoutEffectOnce.js';
|
|
19
18
|
export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
|
|
19
|
+
export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
|
|
20
20
|
export { useOverflowDetection } from './utils/useOverflowDetection.js';
|
|
21
21
|
export { useSlideSelection } from './utils/useSlideSelection.js';
|
|
22
22
|
export { AppHeader } from './app-header/AppHeader.js';
|
|
@@ -92,7 +92,6 @@ export { MenuButton } from './menu-button/MenuButton.js';
|
|
|
92
92
|
export { Metric } from './metric/Metric.js';
|
|
93
93
|
export { MetricHeader } from './metric/MetricHeader.js';
|
|
94
94
|
export { MetricContent } from './metric/MetricContent.js';
|
|
95
|
-
export { ParentChildLayout } from './parent-child-layout/ParentChildLayout.js';
|
|
96
95
|
export { Portal } from './portal/Portal.js';
|
|
97
96
|
export { QueryInput } from './query-input/QueryInput.js';
|
|
98
97
|
export { useQueryInput } from './query-input/useQueryInput.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\
|
|
1
|
+
{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n Scrim,\n ScrimProps,\n Breakpoints,\n makePrefixer,\n usePrevious,\n} from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the scrim.\n */\n disableScrim?: boolean;\n /**\n * Defines the layer position within the screen.\n */\n position?: LayerPositions;\n /**\n * Breakpoint at which the layer will become fullscreen.\n */\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Display or hide the component.\n */\n isOpen?: boolean;\n /**\n * Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}
|
package/dist-es/menu/MenuBase.js
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useRef, useCallback, useState, useEffect } from 'react';
|
|
3
3
|
import { MenuContext } from './MenuContext.js';
|
|
4
|
-
import { useControlled, useFloatingUI } from '@salt-ds/core';
|
|
4
|
+
import { useControlled, useFloatingUI, useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
5
5
|
import { useFloatingParentNodeId, useFloatingNodeId, useFloatingTree, offset, flip, shift, limitShift, size, useInteractions, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, FloatingNode } from '@floating-ui/react';
|
|
6
6
|
|
|
7
7
|
function MenuBase(props) {
|
|
8
|
-
const {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
defaultOpen,
|
|
11
|
+
open,
|
|
12
|
+
onOpenChange,
|
|
13
|
+
placement,
|
|
14
|
+
getVirtualElement
|
|
15
|
+
} = props;
|
|
9
16
|
const parentId = useFloatingParentNodeId();
|
|
10
17
|
const nodeId = useFloatingNodeId();
|
|
11
18
|
const tree = useFloatingTree();
|
|
@@ -30,7 +37,8 @@ function MenuBase(props) {
|
|
|
30
37
|
nodeId,
|
|
31
38
|
open: openState,
|
|
32
39
|
onOpenChange: setOpen,
|
|
33
|
-
|
|
40
|
+
strategy: !getVirtualElement ? "absolute" : "fixed",
|
|
41
|
+
placement: placement != null ? placement : isNested || getVirtualElement ? "right-start" : "bottom-start",
|
|
34
42
|
middleware: [
|
|
35
43
|
offset(isNested ? { crossAxis: -1 } : {}),
|
|
36
44
|
flip({}),
|
|
@@ -44,10 +52,15 @@ function MenuBase(props) {
|
|
|
44
52
|
})
|
|
45
53
|
]
|
|
46
54
|
});
|
|
55
|
+
useIsomorphicLayoutEffect(() => {
|
|
56
|
+
if (getVirtualElement) {
|
|
57
|
+
refs.setPositionReference(getVirtualElement());
|
|
58
|
+
}
|
|
59
|
+
}, [getVirtualElement]);
|
|
47
60
|
const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
|
|
48
61
|
[
|
|
49
62
|
useHover(context, {
|
|
50
|
-
enabled: isNested,
|
|
63
|
+
enabled: isNested && !focusInside,
|
|
51
64
|
handleClose: safePolygon({ blockPointerEvents: true })
|
|
52
65
|
}),
|
|
53
66
|
useClick(context, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n flip,\n offset,\n shift,\n limitShift,\n useInteractions,\n useRole,\n useClick,\n useDismiss,\n useHover,\n safePolygon,\n FloatingNode,\n useFloatingParentNodeId,\n useFloatingNodeId,\n useListNavigation,\n useFloatingTree,\n size,\n} from \"@floating-ui/react\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {
|
|
1
|
+
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport {\n flip,\n offset,\n shift,\n limitShift,\n useInteractions,\n useRole,\n useClick,\n useDismiss,\n useHover,\n safePolygon,\n FloatingNode,\n useFloatingParentNodeId,\n useFloatingNodeId,\n useListNavigation,\n useFloatingTree,\n size,\n ReferenceType,\n} from \"@floating-ui/react\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n /**\n * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n */\n getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {\n children,\n defaultOpen,\n open,\n onOpenChange,\n placement,\n getVirtualElement,\n } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [setOpenState, onOpenChange]\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n placement:\n placement ??\n (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(isNested ? { crossAxis: -1 } : {}),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n useIsomorphicLayoutEffect(() => {\n if (getVirtualElement) {\n refs.setPositionReference(getVirtualElement());\n }\n }, [getVirtualElement]);\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested && !focusInside,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["elements"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
|
|
1
|
+
var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n justify-content: flex-start;\n gap: var(--salt-spacing-100);\n position: relative;\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=MenuItem.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n useCurrentBreakpoint,\n useOrderedBreakpoints,\n Breakpoints,\n} from \"@salt-ds/core\";\n\nexport const useIsViewportLargerThanBreakpoint = (\n targetedBreakpoint: keyof Breakpoints\n): boolean => {\n const orderedBreakpoints = useOrderedBreakpoints();\n const index = orderedBreakpoints.indexOf(targetedBreakpoint);\n const currentBreakpoint = useCurrentBreakpoint();\n const currentBreakpointIndex = orderedBreakpoints.indexOf(currentBreakpoint);\n return index >= currentBreakpointIndex;\n};\n"],"names":[],"mappings":";;AAMa,MAAA,iCAAA,GAAoC,CAC/C,kBACY,KAAA;AACZ,EAAA,MAAM,qBAAqB,qBAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,KAAA,GAAQ,kBAAmB,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,oBAAoB,oBAAqB,EAAA,CAAA;AAC/C,EAAM,MAAA,sBAAA,GAAyB,kBAAmB,CAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC3E,EAAA,OAAO,KAAS,IAAA,sBAAA,CAAA;AAClB;;;;"}
|
package/dist-types/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { HTMLAttributes } from "react";
|
|
2
|
-
import { ScrimProps } from "@salt-ds/core";
|
|
3
|
-
import { Breakpoints } from "@salt-ds/core";
|
|
2
|
+
import { ScrimProps, Breakpoints } from "@salt-ds/core";
|
|
4
3
|
export declare const LAYER_POSITIONS: readonly ["center", "left", "top", "right", "bottom"];
|
|
5
4
|
export declare type LayerPositions = (typeof LAYER_POSITIONS)[number];
|
|
6
5
|
export interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { UseFloatingUIProps } from "@salt-ds/core";
|
|
3
|
+
import { ReferenceType } from "@floating-ui/react";
|
|
3
4
|
export interface MenuBaseProps {
|
|
4
5
|
children?: ReactNode;
|
|
5
6
|
/**
|
|
@@ -18,5 +19,9 @@ export interface MenuBaseProps {
|
|
|
18
19
|
* Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.
|
|
19
20
|
*/
|
|
20
21
|
placement?: UseFloatingUIProps["placement"];
|
|
22
|
+
/**
|
|
23
|
+
* Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.
|
|
24
|
+
*/
|
|
25
|
+
getVirtualElement?: () => ReferenceType | null;
|
|
21
26
|
}
|
|
22
27
|
export declare function MenuBase(props: MenuBaseProps): JSX.Element;
|
|
@@ -5,8 +5,8 @@ export * from "./isPlainObject";
|
|
|
5
5
|
export * from "./partition";
|
|
6
6
|
export * from "./useClickOutside";
|
|
7
7
|
export * from "./useEventCallback";
|
|
8
|
-
export * from "./useIsViewportLargerThanBreakpoint";
|
|
9
8
|
export * from "./useLayoutEffectOnce";
|
|
10
9
|
export * from "./useLayoutEffectSkipFirst";
|
|
10
|
+
export * from "./useIsViewportLargerThanBreakpoint";
|
|
11
11
|
export * from "./useOverflowDetection";
|
|
12
12
|
export * from "./useSlideSelection";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.42",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"react-window": "^1.8.6",
|
|
27
27
|
"rifm": "^0.12.0",
|
|
28
28
|
"tinycolor2": "^1.4.2",
|
|
29
|
-
"@salt-ds/core": "^1.
|
|
29
|
+
"@salt-ds/core": "^1.26.0",
|
|
30
30
|
"@salt-ds/window": "^0.1.1",
|
|
31
31
|
"@salt-ds/styles": "^0.2.1",
|
|
32
|
-
"@salt-ds/icons": "^1.11.
|
|
32
|
+
"@salt-ds/icons": "^1.11.1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@types/react": ">=16.14.0",
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltParentChildLayout {\n display: flex;\n gap: var(--parentChildLayout-gap);\n}\n\n.saltParentChildLayout-child {\n flex-grow: 1;\n}\n\n.saltParentChildLayout-collapsed {\n width: 100%;\n}\n\n.saltParentChildLayout-childAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n.saltParentChildLayout-parentAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n@media (prefers-reduced-motion) {\n .saltParentChildLayout-parentAnimation {\n animation: var(--salt-animation-fade-in-center);\n }\n\n .saltParentChildLayout-childAnimation {\n animation: var(--salt-animation-fade-in-center);\n }\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=ParentChildLayout.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var React = require('react');
|
|
9
|
-
var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var styles = require('@salt-ds/styles');
|
|
12
|
-
var ParentChildLayout$1 = require('./ParentChildLayout.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltParentChildLayout");
|
|
15
|
-
const ParentChildLayout = React.forwardRef(function ParentChildLayout2({
|
|
16
|
-
collapseAtBreakpoint = "sm",
|
|
17
|
-
visibleView = "child",
|
|
18
|
-
parent,
|
|
19
|
-
child,
|
|
20
|
-
className,
|
|
21
|
-
gap = 0,
|
|
22
|
-
onCollapseChange,
|
|
23
|
-
style,
|
|
24
|
-
...rest
|
|
25
|
-
}, ref) {
|
|
26
|
-
const targetWindow = window.useWindow();
|
|
27
|
-
styles.useComponentCssInjection({
|
|
28
|
-
testId: "salt-parent-child-layout",
|
|
29
|
-
css: ParentChildLayout$1,
|
|
30
|
-
window: targetWindow
|
|
31
|
-
});
|
|
32
|
-
const isCollapsed = useIsViewportLargerThanBreakpoint.useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
onCollapseChange == null ? void 0 : onCollapseChange(isCollapsed);
|
|
35
|
-
}, [isCollapsed, onCollapseChange]);
|
|
36
|
-
const parentChildLayoutStyles = {
|
|
37
|
-
...style,
|
|
38
|
-
"--parentChildLayout-gap": `calc(var(--salt-spacing-100) * ${gap})`
|
|
39
|
-
};
|
|
40
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
41
|
-
ref,
|
|
42
|
-
className: clsx.clsx(withBaseName(), className),
|
|
43
|
-
style: parentChildLayoutStyles,
|
|
44
|
-
...rest,
|
|
45
|
-
children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
46
|
-
className: clsx.clsx({
|
|
47
|
-
[withBaseName("collapsed")]: isCollapsed,
|
|
48
|
-
[withBaseName("childAnimation")]: visibleView === "child",
|
|
49
|
-
[withBaseName("parentAnimation")]: visibleView === "parent"
|
|
50
|
-
}),
|
|
51
|
-
children: isCollapsed && visibleView === "child" ? child : parent
|
|
52
|
-
}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
53
|
-
children: [
|
|
54
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
55
|
-
className: withBaseName("parent"),
|
|
56
|
-
children: parent
|
|
57
|
-
}),
|
|
58
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
59
|
-
className: withBaseName("child"),
|
|
60
|
-
children: child
|
|
61
|
-
})
|
|
62
|
-
]
|
|
63
|
-
})
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
exports.ParentChildLayout = ParentChildLayout;
|
|
68
|
-
//# sourceMappingURL=ParentChildLayout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { Breakpoints, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n useEffect,\n} from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nexport interface ParentChildLayoutProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Breakpoint at which the parent and child will stack.\n */\n collapseAtBreakpoint?: keyof Breakpoints;\n /**\n * View that is displayed when in a collapsed state.\n */\n visibleView?: \"child\" | \"parent\";\n /**\n * Controls the space between parent and child components, default is 0.\n */\n gap?: number;\n /**\n * Parent component to be rendered\n */\n parent: ReactNode;\n /**\n * Child component to be rendered\n */\n child: ReactNode;\n /**\n * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n */\n onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n collapseAtBreakpoint = \"sm\",\n visibleView = \"child\",\n parent,\n child,\n className,\n gap = 0,\n onCollapseChange,\n style,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-parent-child-layout\",\n css: parentChildLayoutCss,\n window: targetWindow,\n });\n\n const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n useEffect(() => {\n onCollapseChange?.(isCollapsed);\n }, [isCollapsed, onCollapseChange]);\n\n const parentChildLayoutStyles = {\n ...style,\n \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={parentChildLayoutStyles}\n {...rest}\n >\n {isCollapsed ? (\n <div\n className={clsx({\n [withBaseName(\"collapsed\")]: isCollapsed,\n [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n })}\n >\n {isCollapsed && visibleView === \"child\" ? child : parent}\n </div>\n ) : (\n <>\n <div className={withBaseName(\"parent\")}>{parent}</div>\n <div className={withBaseName(\"child\")}>{child}</div>\n </>\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useWindow","useComponentCssInjection","parentChildLayoutCss","useIsViewportLargerThanBreakpoint","useEffect","jsx","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAE5C,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,oEAAkC,oBAAoB,CAAA,CAAA;AAE1E,EAAAC,eAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,WAAA,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAElC,EAAA,MAAM,uBAA0B,GAAA;AAAA,IAC9B,GAAG,KAAA;AAAA,IACH,2BAA2B,CAAkC,+BAAA,EAAA,GAAA,CAAA,CAAA,CAAA;AAAA,GAC/D,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,KAAO,EAAA,uBAAA;AAAA,IACN,GAAG,IAAA;AAAA,IAEH,wCACED,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAWC,SAAK,CAAA;AAAA,QACd,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAA,GAAI,WAAgB,KAAA,OAAA;AAAA,QAClD,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,WAAgB,KAAA,QAAA;AAAA,OACpD,CAAA;AAAA,MAEA,QAAA,EAAA,WAAA,IAAe,WAAgB,KAAA,OAAA,GAAU,KAAQ,GAAA,MAAA;AAAA,KACpD,CAEA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,UAAI,QAAA,EAAA,MAAA;AAAA,SAAO,CAAA;AAAA,wBAC/CA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,OAAA;AAAA,KAChD,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltParentChildLayout {\n display: flex;\n gap: var(--parentChildLayout-gap);\n}\n\n.saltParentChildLayout-child {\n flex-grow: 1;\n}\n\n.saltParentChildLayout-collapsed {\n width: 100%;\n}\n\n.saltParentChildLayout-childAnimation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n.saltParentChildLayout-parentAnimation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n@media (prefers-reduced-motion) {\n .saltParentChildLayout-parentAnimation {\n animation: var(--salt-animation-fade-in-center);\n }\n\n .saltParentChildLayout-childAnimation {\n animation: var(--salt-animation-fade-in-center);\n }\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=ParentChildLayout.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef, useEffect } from 'react';
|
|
5
|
-
import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import css_248z from './ParentChildLayout.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltParentChildLayout");
|
|
11
|
-
const ParentChildLayout = forwardRef(function ParentChildLayout2({
|
|
12
|
-
collapseAtBreakpoint = "sm",
|
|
13
|
-
visibleView = "child",
|
|
14
|
-
parent,
|
|
15
|
-
child,
|
|
16
|
-
className,
|
|
17
|
-
gap = 0,
|
|
18
|
-
onCollapseChange,
|
|
19
|
-
style,
|
|
20
|
-
...rest
|
|
21
|
-
}, ref) {
|
|
22
|
-
const targetWindow = useWindow();
|
|
23
|
-
useComponentCssInjection({
|
|
24
|
-
testId: "salt-parent-child-layout",
|
|
25
|
-
css: css_248z,
|
|
26
|
-
window: targetWindow
|
|
27
|
-
});
|
|
28
|
-
const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
onCollapseChange == null ? void 0 : onCollapseChange(isCollapsed);
|
|
31
|
-
}, [isCollapsed, onCollapseChange]);
|
|
32
|
-
const parentChildLayoutStyles = {
|
|
33
|
-
...style,
|
|
34
|
-
"--parentChildLayout-gap": `calc(var(--salt-spacing-100) * ${gap})`
|
|
35
|
-
};
|
|
36
|
-
return /* @__PURE__ */ jsx("div", {
|
|
37
|
-
ref,
|
|
38
|
-
className: clsx(withBaseName(), className),
|
|
39
|
-
style: parentChildLayoutStyles,
|
|
40
|
-
...rest,
|
|
41
|
-
children: isCollapsed ? /* @__PURE__ */ jsx("div", {
|
|
42
|
-
className: clsx({
|
|
43
|
-
[withBaseName("collapsed")]: isCollapsed,
|
|
44
|
-
[withBaseName("childAnimation")]: visibleView === "child",
|
|
45
|
-
[withBaseName("parentAnimation")]: visibleView === "parent"
|
|
46
|
-
}),
|
|
47
|
-
children: isCollapsed && visibleView === "child" ? child : parent
|
|
48
|
-
}) : /* @__PURE__ */ jsxs(Fragment, {
|
|
49
|
-
children: [
|
|
50
|
-
/* @__PURE__ */ jsx("div", {
|
|
51
|
-
className: withBaseName("parent"),
|
|
52
|
-
children: parent
|
|
53
|
-
}),
|
|
54
|
-
/* @__PURE__ */ jsx("div", {
|
|
55
|
-
className: withBaseName("child"),
|
|
56
|
-
children: child
|
|
57
|
-
})
|
|
58
|
-
]
|
|
59
|
-
})
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
export { ParentChildLayout };
|
|
64
|
-
//# sourceMappingURL=ParentChildLayout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { Breakpoints, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n useEffect,\n} from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nexport interface ParentChildLayoutProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Breakpoint at which the parent and child will stack.\n */\n collapseAtBreakpoint?: keyof Breakpoints;\n /**\n * View that is displayed when in a collapsed state.\n */\n visibleView?: \"child\" | \"parent\";\n /**\n * Controls the space between parent and child components, default is 0.\n */\n gap?: number;\n /**\n * Parent component to be rendered\n */\n parent: ReactNode;\n /**\n * Child component to be rendered\n */\n child: ReactNode;\n /**\n * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n */\n onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n collapseAtBreakpoint = \"sm\",\n visibleView = \"child\",\n parent,\n child,\n className,\n gap = 0,\n onCollapseChange,\n style,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-parent-child-layout\",\n css: parentChildLayoutCss,\n window: targetWindow,\n });\n\n const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n useEffect(() => {\n onCollapseChange?.(isCollapsed);\n }, [isCollapsed, onCollapseChange]);\n\n const parentChildLayoutStyles = {\n ...style,\n \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={parentChildLayoutStyles}\n {...rest}\n >\n {isCollapsed ? (\n <div\n className={clsx({\n [withBaseName(\"collapsed\")]: isCollapsed,\n [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n })}\n >\n {isCollapsed && visibleView === \"child\" ? child : parent}\n </div>\n ) : (\n <>\n <div className={withBaseName(\"parent\")}>{parent}</div>\n <div className={withBaseName(\"child\")}>{child}</div>\n </>\n )}\n </div>\n );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAE5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,oBAAoB,CAAA,CAAA;AAE1E,EAAA,SAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,WAAA,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAElC,EAAA,MAAM,uBAA0B,GAAA;AAAA,IAC9B,GAAG,KAAA;AAAA,IACH,2BAA2B,CAAkC,+BAAA,EAAA,GAAA,CAAA,CAAA,CAAA;AAAA,GAC/D,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,KAAO,EAAA,uBAAA;AAAA,IACN,GAAG,IAAA;AAAA,IAEH,wCACE,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA;AAAA,QACd,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAA,GAAI,WAAgB,KAAA,OAAA;AAAA,QAClD,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,WAAgB,KAAA,QAAA;AAAA,OACpD,CAAA;AAAA,MAEA,QAAA,EAAA,WAAA,IAAe,WAAgB,KAAA,OAAA,GAAU,KAAQ,GAAA,MAAA;AAAA,KACpD,CAEA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,UAAI,QAAA,EAAA,MAAA;AAAA,SAAO,CAAA;AAAA,wBAC/C,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,OAAA;AAAA,KAChD,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { Breakpoints } from "@salt-ds/core";
|
|
2
|
-
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
3
|
-
export interface ParentChildLayoutProps extends ComponentPropsWithoutRef<"div"> {
|
|
4
|
-
/**
|
|
5
|
-
* Breakpoint at which the parent and child will stack.
|
|
6
|
-
*/
|
|
7
|
-
collapseAtBreakpoint?: keyof Breakpoints;
|
|
8
|
-
/**
|
|
9
|
-
* View that is displayed when in a collapsed state.
|
|
10
|
-
*/
|
|
11
|
-
visibleView?: "child" | "parent";
|
|
12
|
-
/**
|
|
13
|
-
* Controls the space between parent and child components, default is 0.
|
|
14
|
-
*/
|
|
15
|
-
gap?: number;
|
|
16
|
-
/**
|
|
17
|
-
* Parent component to be rendered
|
|
18
|
-
*/
|
|
19
|
-
parent: ReactNode;
|
|
20
|
-
/**
|
|
21
|
-
* Child component to be rendered
|
|
22
|
-
*/
|
|
23
|
-
child: ReactNode;
|
|
24
|
-
/**
|
|
25
|
-
* Function called when the viewport size equal to or less than the collapseAtBreakpoint variable
|
|
26
|
-
*/
|
|
27
|
-
onCollapseChange?: (isCollapsed: boolean) => void;
|
|
28
|
-
}
|
|
29
|
-
export declare const ParentChildLayout: import("react").ForwardRefExoticComponent<ParentChildLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./ParentChildLayout";
|