@vuu-ui/vuu-layout 3.0.0-beta.3 → 3.1.0-beta.1

package/src/utils/pathUtils.mjs

@@ -0,0 +1,212 @@
+import { isContainer } from "@vuu-ui/vuu-utils";
+import react, { isValidElement } from "react";
+import { getProp, getProps } from "./propUtils.mjs";
+import { typeOf } from "./typeOf.mjs";
+const removeFinalPathSegment = (path)=>{
+    const pos = path.lastIndexOf(".");
+    if (-1 === pos) return path;
+    return path.slice(0, pos);
+};
+const getChildren = (c)=>react.isValidElement(c.props.children) ? [
+        c.props.children
+    ] : c.props.children;
+const resolvePath = (source, path = "")=>{
+    const [step1, ...steps] = path.split(".");
+    if (step1?.startsWith("#")) {
+        const node = findTargetById(source, step1.slice(1), true);
+        if (node && steps.length) return resolvePath(node, steps.join("."));
+    } else if ("ACTIVE_CHILD" === step1) {
+        const { active } = getProps(source);
+        const children = getChildren(source);
+        const { path } = getProps(children[active]);
+        return path;
+    }
+    return "";
+};
+const resolveJSONPath = (source, path = "")=>{
+    const [step1, ...steps] = path.split(".");
+    if (step1?.startsWith("#")) {
+        const node = findTargetJSONById(source, step1.slice(1), true);
+        if (node && steps.length) return resolveJSONPath(node, steps.join("."));
+    } else if ("ACTIVE_CHILD" === step1) {
+        const { children, props } = source;
+        const { active } = props;
+        if ("number" == typeof active && children?.[active]) return children[active];
+    }
+};
+function followPathToParent(source, path) {
+    const { "data-path": dataPath, path: sourcePath = dataPath } = getProps(source);
+    if ("0" === path) return null;
+    if (path === sourcePath) return null;
+    return followPath(source, removeFinalPathSegment(path), true);
+}
+function findTarget(source, test) {
+    if (source) {
+        const { children, ...props } = getProps(source);
+        if (test(props)) return source;
+        if (react.Children.count(children) > 0) {
+            const array = react.isValidElement(children) ? [
+                children
+            ] : children;
+            for (const child of array){
+                const target = findTarget(child, test);
+                if (target) return target;
+            }
+        }
+    }
+}
+function containerOf(source, target) {
+    if (target === source) return null;
+    const { path: sourcePath, children } = getProps(source);
+    const { idx, finalStep } = pathUtils_nextStep(sourcePath, getProp(target, "path"));
+    if (finalStep) return source;
+    if (void 0 === children || void 0 === children[idx]) return null;
+    return containerOf(children[idx], target);
+}
+const getChild = (children, idx)=>{
+    if (react.isValidElement(children) && 0 == idx) return children;
+    if (Array.isArray(children)) return children[idx];
+};
+function followPathToComponent(component, path) {
+    const paths = path.split(".");
+    let children = [
+        component
+    ];
+    for(let i = 0; i < paths.length; i++){
+        const idx = parseInt(paths[i]);
+        const child = children[idx];
+        if (i === paths.length - 1) return child;
+        children = getChildren(child);
+    }
+}
+const findTargetById = (source, id, throwIfNotFound = true)=>{
+    const { children, id: idProp } = source.props;
+    if (idProp === id) return source;
+    if (react.Children.count(children) > 0) {
+        const childArray = isValidElement(children) ? [
+            children
+        ] : children;
+        for (const child of childArray)if (isValidElement(child)) {
+            const target = findTargetById(child, id, false);
+            if (target) return target;
+        }
+    }
+    if (true === throwIfNotFound) throw Error(`pathUtils.findTargetById id #${id} not found in source`);
+};
+const findTargetJSONById = (source, id, throwIfNotFound = true)=>{
+    const { children, id: idProp } = source;
+    if (idProp === id) return source;
+    if (Array.isArray(children) && children.length > 0) {
+        for (const child of children)if (null !== child && "object" == typeof child) {
+            const target = findTargetJSONById(child, id, false);
+            if (target) return target;
+        }
+    }
+    if (true === throwIfNotFound) throw Error(`pathUtils.findTargetJSONById id #${id} not found in source`);
+};
+function followPath(source, path, throwIfNotFound = false) {
+    if (path.startsWith("#")) return findTargetById(source, path.slice(1), throwIfNotFound);
+    const { "data-path": dataPath, path: sourcePath = dataPath } = getProps(source);
+    if (0 !== path.indexOf(sourcePath)) throw Error(`pathUtils.followPath path ${path} is not within source path ${sourcePath}`);
+    const route = path.slice(sourcePath.length + 1);
+    if ("" === route) return source;
+    let target = source;
+    const paths = route.split(".");
+    for(let i = 0; i < paths.length; i++){
+        if (0 === react.Children.count(target.props.children)) {
+            const message = `element at 0.${paths.slice(0, i).join(".")} has no children, so cannot fulfill rest of path ${paths.slice(i).join(".")}`;
+            if (!throwIfNotFound) return void console.warn(message);
+            throw Error(message);
+        }
+        target = getChild(target.props.children, parseInt(paths[i]));
+        if (void 0 === target) {
+            const message = `model at 0.${paths.slice(0, i).join(".")} has no children that fulfill next step of path ${paths.slice(i).join(".")}`;
+            if (throwIfNotFound) throw Error(message);
+            console.warn(message);
+        }
+    }
+    return target;
+}
+function nextLeaf(root, path) {
+    const parent = followPathToParent(root, path);
+    let pathIndices = path.split(".").map((idx)=>parseInt(idx, 10));
+    if (parent) {
+        const lastIdx = pathIndices.pop();
+        const { children } = parent.props;
+        if (children.length - 1 > lastIdx) return firstLeaf(children[lastIdx + 1]);
+        {
+            const parentIdx = pathIndices.pop();
+            const nextParent = followPathToParent(root, getProp(parent, "path"));
+            if (nextParent && "number" == typeof parentIdx) {
+                pathIndices = nextParent.props.path.split(".").map((idx)=>parseInt(idx, 10));
+                if (nextParent.props.children.length - 1 > parentIdx) {
+                    const nextStep = nextParent.props.children[parentIdx + 1];
+                    if (isContainer(typeOf(nextStep))) return firstLeaf(nextStep);
+                    return nextStep;
+                }
+            }
+        }
+    }
+    return firstLeaf(root);
+}
+function previousLeaf(root, path) {
+    const pathIndices = path.split(".").map((idx)=>parseInt(idx, 10));
+    let lastIdx = pathIndices.pop();
+    let parent = followPathToParent(root, path);
+    if (null != parent && "number" == typeof lastIdx) {
+        const { children } = parent.props;
+        if (lastIdx > 0) return lastLeaf(children[lastIdx - 1]);
+        while(pathIndices.length > 1){
+            lastIdx = pathIndices.pop();
+            parent = followPathToParent(root, getProp(parent, "path"));
+            if (lastIdx > 0) {
+                const nextStep = parent.props.children[lastIdx - 1];
+                if (isContainer(typeOf(nextStep))) return lastLeaf(nextStep);
+                return nextStep;
+            }
+        }
+    }
+    return lastLeaf(root);
+}
+function firstLeaf(layoutRoot) {
+    if (isContainer(typeOf(layoutRoot))) {
+        const { children } = layoutRoot.props || layoutRoot;
+        return firstLeaf(children[0]);
+    }
+    return layoutRoot;
+}
+function lastLeaf(root) {
+    if (isContainer(typeOf(root))) {
+        const { children } = root.props || root;
+        return lastLeaf(children[children.length - 1]);
+    }
+    return root;
+}
+function pathUtils_nextStep(pathSoFar, targetPath, followPathToEnd = false) {
+    if (pathSoFar === targetPath) return {
+        idx: -1,
+        finalStep: true
+    };
+    const pathVisited = `${pathSoFar}.`;
+    if (!targetPath.startsWith(pathVisited)) throw Error("pathUtils nextStep has strayed from the path");
+    const endOfTheLine = followPathToEnd ? 0 : 1;
+    const paths = targetPath.replace(pathVisited, "").split(".").map((n)=>parseInt(n, 10));
+    return {
+        idx: paths[0],
+        finalStep: paths.length === endOfTheLine
+    };
+}
+function resetPath(model, path, additionalProps) {
+    if (getProp(model, "path") === path) return model;
+    const children = [];
+    react.Children.forEach(model.props.children, (child, i)=>{
+        if (getProp(child, "path")) children.push(resetPath(child, `${path}.${i}`));
+        else children.push(child);
+    });
+    const pathPropName = model.props["data-path"] ? "data-path" : "path";
+    return react.cloneElement(model, {
+        [pathPropName]: path,
+        ...additionalProps
+    }, children);
+}
+export { containerOf, findTarget, followPath, followPathToComponent, followPathToParent, getChild, nextLeaf, pathUtils_nextStep as nextStep, previousLeaf, resetPath, resolveJSONPath, resolvePath };

package/src/utils/propUtils.mjs

@@ -0,0 +1,15 @@
+const NO_PROPS = {};
+const getProp = (component, propName)=>{
+    const props = getProps(component);
+    return props[propName] ?? props[`data-${propName}`];
+};
+const getProps = (component)=>component?.props || component || NO_PROPS;
+const getChildProp = (container)=>{
+    const props = getProps(container);
+    if (props.children) {
+        const { children: [target, ...rest] } = props;
+        if (rest.length > 0) console.warn(`getChild expected a single child, found ${rest.length + 1}`);
+        return target;
+    }
+};
+export { getChildProp, getProp, getProps };

package/src/utils/refUtils.mjs

@@ -0,0 +1,5 @@
+function setRef(ref, value) {
+    if ("function" == typeof ref) ref(value);
+    else if (ref) ref.current = value;
+}
+export { setRef };

package/src/utils/styleUtils.mjs

@@ -0,0 +1,9 @@
+const expandFlex = (flex)=>{
+    if ('number' != typeof flex) throw Error(`"no support yet for flex value ${flex}`);
+    return {
+        flexBasis: 0,
+        flexGrow: 1,
+        flexShrink: 1
+    };
+};
+export { expandFlex };

package/src/utils/typeOf.mjs

@@ -0,0 +1,15 @@
+function typeOf(element) {
+    if (element) {
+        const type = element.type;
+        if ("function" == typeof type || "object" == typeof type) {
+            const elementName = type.displayName || type.name || type.type?.name;
+            if ("string" == typeof elementName) return elementName;
+        }
+        if ("string" == typeof element.type) return element.type;
+        if (element.constructor) return element.constructor.displayName;
+        throw Error("typeOf unable to determine type of element");
+    }
+}
+const isTypeOf = (element, type)=>typeOf(element) === type;
+const isLayoutJSON = (layout)=>void 0 !== layout && "type" in layout;
+export { isLayoutJSON, isTypeOf, typeOf };

package/cjs/Component.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const Component = React.forwardRef(function Component2({ resizeable, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: "Component", ref });
-});
-Component.displayName = "Component";
-vuuUtils.registerComponent("Component", Component, "component");
-
-module.exports = Component;
-//# sourceMappingURL=Component.js.map

package/cjs/Component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Component.js","sources":["../../../packages/vuu-layout/src/Component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nexport interface ComponentProps extends HTMLAttributes<HTMLDivElement> {\n  resizeable?: boolean;\n}\n\nconst Component = forwardRef(function Component(\n  { resizeable, ...props }: ComponentProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  return <div {...props} className=\"Component\" ref={ref} />;\n}) as React.FunctionComponent<ComponentProps>;\nComponent.displayName = \"Component\";\n\nexport default Component;\n\nregisterComponent(\"Component\", Component, \"component\");\n"],"names":["forwardRef","Component","registerComponent"],"mappings":";;;;;;AAOM,MAAA,SAAA,GAAYA,iBAAW,SAASC,UAAAA,CACpC,EAAE,UAAY,EAAA,GAAG,KAAM,EAAA,EACvB,GACA,EAAA;AACA,EAAA,sCAAQ,KAAK,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAU,aAAY,GAAU,EAAA,CAAA;AACzD,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAIxBC,0BAAkB,CAAA,WAAA,EAAa,WAAW,WAAW,CAAA;;;;"}

package/cjs/LayoutContainer.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var layoutContainerCss = ".vuuLayoutContainer {\n  display: inline-block;\n  outline: none;\n}\n\n[data-dragging=\"true\"] {\n  position: absolute !important;\n  z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n  background-color: white;\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n  height: 100%;\n  width: 100%;\n}\n";
-
-module.exports = layoutContainerCss;
-//# sourceMappingURL=LayoutContainer.css.js.map

package/cjs/LayoutContainer.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutContainer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/LayoutContainer.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var cx = require('clsx');
-var React = require('react');
-var LayoutContainer$1 = require('./LayoutContainer.css.js');
-
-const LayoutContainer = React.forwardRef(function LayoutContainer2({
-  children,
-  className: classNameProp,
-  dropTarget,
-  resizeable: _,
-  // ignore, its just a marker used by the layout system
-  ...htmlAttributes
-}, forwardedRef) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-layout-container",
-    css: LayoutContainer$1,
-    window: targetWindow
-  });
-  const className = cx("vuuLayoutContainer", classNameProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
-});
-const componentName = "LayoutContainer";
-LayoutContainer.displayName = componentName;
-vuuUtils.registerComponent(componentName, LayoutContainer, "container");
-
-exports.LayoutContainer = LayoutContainer;
-//# sourceMappingURL=LayoutContainer.js.map

package/cjs/LayoutContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutContainer.js","sources":["../../../packages/vuu-layout/src/LayoutContainer.tsx"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\n\nimport layoutContainerCss from \"./LayoutContainer.css\";\n\nexport interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutContainer = forwardRef(function LayoutContainer(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: LayoutContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-container\",\n    css: layoutContainerCss,\n    window: targetWindow,\n  });\n\n  const className = cx(\"vuuLayoutContainer\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"LayoutContainer\";\n\nLayoutContainer.displayName = componentName;\n\nregisterComponent(componentName, LayoutContainer, \"container\");\n"],"names":["forwardRef","LayoutContainer","useWindow","useComponentCssInjection","layoutContainerCss","registerComponent"],"mappings":";;;;;;;;;;AAaa,MAAA,eAAA,GAAkBA,gBAAW,CAAA,SAASC,gBACjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AAAA,EACA,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,oBAAA,EAAsB,aAAa,CAAA;AACxD,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA;AAEJ,CAAC;AAED,MAAM,aAAgB,GAAA,iBAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA;AAE9BC,0BAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}

package/cjs/dock-layout/DockLayout.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var dockLayoutCss = ".vuuDockLayout {\n  --chest-bg: var(--hw-chest-bg, inherit);\n  --drawer-bg: var(--hw-drawer-bg, inherit);\n  --drawer-size: var(--hw-drawer-size, 200px);\n  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n  background-color: var(--chest-bg);\n  display: flex;\n}\n\n.vuuDockLayout-horizontal {\n  flex-direction: row;\n}\n\n.vuuDockLayout-vertical {\n  flex-direction: column;\n}\n\n.vuuDockLayout-content {\n  background-color: var(--chest-bg);\n  flex-grow: 1;\n  flex-shrink: 1;\n  overflow: hidden;\n  /* position: relative; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDockLayout-horizontal .vuuDockLayout-content {\n  flex-basis: 100%;\n}\n\n.vuuDockLayout-vertical .vuuDockLayout-content {\n  flex-basis: 100%;\n}\n";
-
-module.exports = dockLayoutCss;
-//# sourceMappingURL=DockLayout.css.js.map

package/cjs/dock-layout/DockLayout.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DockLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dock-layout/DockLayout.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var cx = require('clsx');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var React = require('react');
-var Drawer = require('./Drawer.js');
-var DockLayout$1 = require('./DockLayout.css.js');
-
-const isDrawer = (component) => component.type === Drawer;
-const isVertical = (element) => (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  element.props.position && // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  element.props.position.match(/top|bottom/)
-);
-const classBase = "vuuDockLayout";
-const DockLayout = (props) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-dock-layput",
-    css: DockLayout$1,
-    window: targetWindow
-  });
-  const { children, className: classNameProp, id, style } = props;
-  const childElements = React.useMemo(() => vuuUtils.asReactElements(children), [children]);
-  const [drawers, content] = vuuUtils.partition(childElements, isDrawer);
-  const [verticalDrawers, horizontalDrawers] = vuuUtils.partition(drawers, isVertical);
-  const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, id, style, children: [
-    drawers,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
-  ] });
-};
-DockLayout.displayName = "DockLayout";
-vuuUtils.registerComponent("DockLayout", DockLayout, "container");
-
-module.exports = DockLayout;
-//# sourceMappingURL=DockLayout.js.map

package/cjs/dock-layout/DockLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DockLayout.js","sources":["../../../../packages/vuu-layout/src/dock-layout/DockLayout.tsx"],"sourcesContent":["import {\n  asReactElements,\n  partition,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactElement, useMemo } from \"react\";\nimport Drawer from \"./Drawer\";\n\nimport dockLayoutCss from \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = (element: ReactElement) =>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (element.props as any).position &&\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (element.props as any).position.match(/top|bottom/);\n\nexport type DockLayoutProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuDockLayout\";\n\nconst DockLayout = (props: DockLayoutProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dock-layput\",\n    css: dockLayoutCss,\n    window: targetWindow,\n  });\n\n  const { children, className: classNameProp, id, style } = props;\n  const childElements = useMemo(() => asReactElements(children), [children]);\n\n  const [drawers, content] = partition(childElements, isDrawer);\n  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);\n  const orientation =\n    verticalDrawers.length === 0\n      ? \"horizontal\"\n      : horizontalDrawers.length === 0\n        ? \"vertical\"\n        : \"both\";\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  return (\n    <div className={className} id={id} style={style}>\n      {drawers}\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\nDockLayout.displayName = \"DockLayout\";\n\nexport default DockLayout;\n\nregisterComponent(\"DockLayout\", DockLayout, \"container\");\n"],"names":["useWindow","useComponentCssInjection","dockLayoutCss","useMemo","asReactElements","partition","jsxs","registerComponent"],"mappings":";;;;;;;;;;;AAaA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA;AACjE,MAAM,aAAa,CAAC,OAAA;AAAA;AAAA,EAEjB,QAAQ,KAAc,CAAA,QAAA;AAAA,EAEtB,OAAQ,CAAA,KAAA,CAAc,QAAS,CAAA,KAAA,CAAM,YAAY;AAAA,CAAA;AAIpD,MAAM,SAAY,GAAA,eAAA;AAEZ,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA;AAC1D,EAAM,MAAA,aAAA,GAAgBC,cAAQ,MAAMC,wBAAA,CAAgB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAEzE,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAAC,kBAAA,CAAU,eAAe,QAAQ,CAAA;AAC5D,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAAA,kBAAA,CAAU,SAAS,UAAU,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC3B,UACA,GAAA,MAAA;AAER,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAE5E,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,EAAA,EAAQ,KAChC,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,mCACA,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA;AAAA,GACnD,EAAA,CAAA;AAEJ;AACA,UAAA,CAAW,WAAc,GAAA,YAAA;AAIzBC,0BAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}

package/cjs/dock-layout/Drawer.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var drawerCss = ".vuuDrawer {\n  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n  --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n  transition: flex-basis;\n  transition-duration: var(--drawer-transition-duration);\n  position: relative;\n  z-index: 1;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n\n.vuuDrawer-peekaboo {\n  flex-basis: var(--drawer-peek-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n  flex-basis: var(--drawer-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n  background-color: var(--drawer-bg);\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuDrawer-content {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  right: var(--drawer-peek-size);\n  transition: right;\n  transition-duration: var(--drawer-transition-duration);\n  width: 100%;\n  flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n  right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n  display: none;\n} */\n\n.vuuDrawer-left {\n  border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n  border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n  border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n  border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n  height: 100%;\n  transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n  width: 100%;\n  transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n  width: 100%;\n  height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n  position: absolute;\n  transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n  top: 0;\n  left: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n  top: 0;\n  right: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n  height: 0;\n  top: 0;\n  left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n  bottom: 0;\n  height: 0;\n  left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n  order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n  order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n  flex-direction: column;\n}\n\n.vuuToggleButton-container {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n  --vuu-icon-size: 12px;\n  flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n  --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n";
-
-module.exports = drawerCss;
-//# sourceMappingURL=Drawer.css.js.map

package/cjs/dock-layout/Drawer.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dock-layout/Drawer.js

@@ -1,95 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var cx = require('clsx');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var React = require('react');
-var Drawer$1 = require('./Drawer.css.js');
-
-const classBase = "vuuDrawer";
-const sizeAttribute = (value) => {
-  return typeof value === "string" ? value : value + "px";
-};
-const getStyle = (styleProp, sizeOpen, sizeClosed) => {
-  const hasSizeOpen = sizeOpen !== void 0;
-  const hasSizeClosed = sizeClosed !== void 0;
-  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {
-    return void 0;
-  }
-  if (!hasSizeClosed && !hasSizeOpen) {
-    return styleProp;
-  }
-  return {
-    ...styleProp,
-    "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : void 0,
-    "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : void 0
-  };
-};
-const Drawer = ({
-  children,
-  className: classNameProp,
-  clickToOpen,
-  defaultOpen,
-  sizeOpen,
-  sizeClosed,
-  style: styleProp,
-  open: openProp,
-  position = "left",
-  inline,
-  onClick,
-  peekaboo = false,
-  toggleButton,
-  ...props
-}) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-drawer",
-    css: Drawer$1,
-    window: targetWindow
-  });
-  const [open, setOpen] = core.useControlled({
-    controlled: openProp,
-    default: defaultOpen ?? false,
-    name: "Drawer",
-    state: "open"
-  });
-  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
-    [`${classBase}-open`]: open,
-    [`${classBase}-inline`]: inline,
-    [`${classBase}-over`]: !inline,
-    [`${classBase}-peekaboo`]: peekaboo
-  });
-  const toggleDrawer = React.useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
-  const style = getStyle(styleProp, sizeOpen, sizeClosed);
-  const handleClick = clickToOpen ? toggleDrawer : onClick;
-  const renderToggleButton = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("vuuToggleButton-container"), children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-    core.Button,
-    {
-      "aria-label": "close",
-      onClick: toggleDrawer,
-      "data-icon": "close",
-      variant: "secondary"
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    core.Button,
-    {
-      "aria-label": "open",
-      onClick: toggleDrawer,
-      "data-icon": "close",
-      variant: "secondary"
-    }
-  ) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className, onClick: handleClick, style, children: [
-    toggleButton == "start" ? renderToggleButton() : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-liner`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children }) }),
-    toggleButton == "end" ? renderToggleButton() : null
-  ] });
-};
-Drawer.displayName = "Drawer";
-
-module.exports = Drawer;
-//# sourceMappingURL=Drawer.js.map

package/cjs/dock-layout/Drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../packages/vuu-layout/src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n  return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n  styleProp?: CSSProperties,\n  sizeOpen?: number,\n  sizeClosed?: number,\n) => {\n  const hasSizeOpen = sizeOpen !== undefined;\n  const hasSizeClosed = sizeClosed !== undefined;\n\n  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n    return undefined;\n  }\n\n  if (!hasSizeClosed && !hasSizeOpen) {\n    return styleProp;\n  }\n\n  return {\n    ...styleProp,\n    \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n    \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n  };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  clickToOpen?: boolean;\n  defaultOpen?: boolean;\n  inline?: boolean;\n  open?: boolean;\n  peekaboo?: boolean;\n  position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  sizeOpen?: number;\n  sizeClosed?: number;\n  toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n  children,\n  className: classNameProp,\n  clickToOpen,\n  defaultOpen,\n  sizeOpen,\n  sizeClosed,\n  style: styleProp,\n  open: openProp,\n  position = \"left\",\n  inline,\n  onClick,\n  peekaboo = false,\n  toggleButton,\n  ...props\n}: DrawerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: defaultOpen ?? false,\n    name: \"Drawer\",\n    state: \"open\",\n  });\n\n  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n    [`${classBase}-open`]: open,\n    [`${classBase}-inline`]: inline,\n    [`${classBase}-over`]: !inline,\n    [`${classBase}-peekaboo`]: peekaboo,\n  });\n\n  const toggleDrawer = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n  const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n  const renderToggleButton = () => (\n    <div className={cx(\"vuuToggleButton-container\")}>\n      {open ? (\n        <Button\n          aria-label=\"close\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <Button\n          aria-label=\"open\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div {...props} className={className} onClick={handleClick} style={style}>\n      {toggleButton == \"start\" ? renderToggleButton() : null}\n      <div className={`${classBase}-liner`}>\n        <div className={`${classBase}-content`}>{children}</div>\n      </div>\n      {toggleButton == \"end\" ? renderToggleButton() : null}\n    </div>\n  );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":["useWindow","useComponentCssInjection","drawerCss","useControlled","useCallback","jsx","Button"],"mappings":"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"}