@salt-ds/lab 1.0.0-alpha.40 → 1.0.0-alpha.41
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 +1 -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/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/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/utils/index.d.ts +1 -1
- package/package.json +2 -2
- 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
|
@@ -2306,32 +2306,6 @@
|
|
|
2306
2306
|
align-items: flex-end;
|
|
2307
2307
|
}
|
|
2308
2308
|
|
|
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
2309
|
/* src/query-input/QueryInput.css */
|
|
2336
2310
|
.saltQueryInput {
|
|
2337
2311
|
}
|
|
@@ -4222,4 +4196,4 @@
|
|
|
4222
4196
|
margin: calc(var(--salt-size-unit) / 2) 0;
|
|
4223
4197
|
}
|
|
4224
4198
|
|
|
4225
|
-
/* src/
|
|
4199
|
+
/* src/2fe49ec6-e2f9-4c04-81c8-2df59285f1f2.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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"}
|
|
@@ -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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"}
|
|
@@ -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> {
|
|
@@ -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.41",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
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.25.0",
|
|
30
30
|
"@salt-ds/window": "^0.1.1",
|
|
31
31
|
"@salt-ds/styles": "^0.2.1",
|
|
32
32
|
"@salt-ds/icons": "^1.11.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";
|