@vuu-ui/vuu-layout 0.8.35 → 0.8.37

package/cjs/drag-drop/DropTargetRenderer.css

@@ -0,0 +1,40 @@
+#hw-drag-canvas {
+  visibility: hidden;
+  z-index: 10;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+}
+
+#hw-drag-canvas > svg {
+  position: absolute;
+}
+
+.drawing #hw-drag-canvas {
+  visibility: visible;
+}
+
+path.drop-target {
+  stroke: blue;
+  stroke-width: 4px;
+  fill: transparent;
+}
+
+path.drop-target.centre {
+  stroke: red;
+}
+
+#vuu-drop-outline {
+  fill: rgba(0,0,255,.3);
+  stroke: none;
+  stroke-dasharray: 4 2;
+}
+
+#hw-drop-guides {
+  fill: none;
+  stroke: rgba(0, 0, 0, 0.3);
+  stroke-dasharray: 2 3;
+}

package/cjs/drag-drop/DropTargetRenderer.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var BoxModel = require('./BoxModel.js');
+var DropMenu = require('./DropMenu.js');
+
+let _multiDropOptions = false;
+let _hoverDropTarget = null;
+let _shiftedTab = null;
+const onHoverDropTarget = (dropTarget) => _hoverDropTarget = dropTarget;
+const start = ([x, y]) => `M${x},${y}`;
+const point = ([x, y]) => `L${x},${y}`;
+const pathFromPoints = ([p1, ...points]) => `${start(p1)} ${points.map(point)}Z`;
+const pathFromGuideLines = (guideLines) => {
+  if (guideLines) {
+    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;
+    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;
+  } else {
+    return "";
+  }
+};
+function insertSVGRoot() {
+  if (document.getElementById("hw-drag-canvas") === null) {
+    const root = document.getElementById("root");
+    const container = document.createElement("div");
+    container.id = "hw-drag-canvas";
+    container.innerHTML = `
+      <svg width="100%" height="100%">
+        <path id="hw-drop-guides" />
+        <path
+          id="vuu-drop-outline"
+          d="M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z">
+          <animate
+            attributeName="d"
+            id="hw-drop-outline-animate"
+            begin="indefinite"
+            dur="300ms"
+            fill="freeze"
+            to="M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z"
+          />
+        </path>
+      </svg>
+      `;
+    document.body.insertBefore(container, root);
+  }
+}
+class DropTargetCanvas {
+  constructor() {
+    this.currentPath = null;
+    this.tabMode = null;
+    insertSVGRoot();
+  }
+  prepare(dragRect, tabMode = "full-view") {
+    document.body.classList.add("drawing");
+    this.currentPath = null;
+    this.tabMode = tabMode;
+    const points = this.getPoints(0, 0, 0, 0);
+    const d = pathFromPoints(points);
+    const dropOutlinePath = document.getElementById("vuu-drop-outline");
+    dropOutlinePath?.setAttribute("d", d);
+    this.currentPath = d;
+  }
+  clear() {
+    _hoverDropTarget = null;
+    clearShiftedTab();
+    document.body.classList.remove("drawing");
+    vuuPopups.PopupService.hidePopup();
+  }
+  get hoverDropTarget() {
+    return _hoverDropTarget;
+  }
+  getPoints(x, y, width, height, tabLeft = 0, tabWidth = 0, tabHeight = 0) {
+    const tabOnly = this.tabMode === "tab-only";
+    if (tabWidth === 0) {
+      return [
+        [x, y + tabHeight],
+        [x, y + tabHeight],
+        [x, y],
+        [x + tabWidth, y],
+        [x + tabWidth, y],
+        [x + width, y],
+        [x + width, y + height],
+        [x, y + height]
+      ];
+    } else if (tabOnly) {
+      const left = tabLeft;
+      return [
+        [left, y],
+        [left, y],
+        [left + tabWidth, y],
+        [left + tabWidth, y],
+        [left + tabWidth, y + tabHeight],
+        [left + tabWidth, y + tabHeight],
+        [left, y + tabHeight],
+        [left, y + tabHeight]
+      ];
+    } else if (tabLeft === 0) {
+      return [
+        [x, y + tabHeight],
+        [x, y + tabHeight],
+        [x, y],
+        [x + tabWidth, y],
+        [x + tabWidth, y + tabHeight],
+        [x + width, y + tabHeight],
+        [x + width, y + height],
+        [x, y + height]
+      ];
+    } else {
+      return [
+        [x, y + tabHeight],
+        [x + tabLeft, y + tabHeight],
+        [x + tabLeft, y],
+        [x + tabLeft, y],
+        [x + tabLeft, y + tabHeight],
+        [x + width, y + tabHeight],
+        [x + width, y + height],
+        [x, y + height]
+      ];
+    }
+  }
+  draw(dropTarget, dragState) {
+    const sameDropTarget = false;
+    const wasMultiDrop = _multiDropOptions;
+    if (_hoverDropTarget !== null) {
+      this.drawTarget(_hoverDropTarget);
+    } else {
+      {
+        _multiDropOptions = dropTarget.nextDropTarget != null;
+        if (dropTarget.pos.tab) {
+          moveExistingTabs(dropTarget);
+        } else if (_shiftedTab) {
+          clearShiftedTab();
+        }
+        this.drawTarget(dropTarget, dragState);
+      }
+      if (_multiDropOptions) {
+        const [left, top, orientation] = DropMenu.computeMenuPosition(dropTarget);
+        if (!wasMultiDrop || !sameDropTarget) {
+          const component = /* @__PURE__ */ jsxRuntime.jsx(
+            DropMenu.DropMenu,
+            {
+              dropTarget,
+              onHover: onHoverDropTarget,
+              orientation
+            }
+          );
+          vuuPopups.PopupService.showPopup({
+            left,
+            top,
+            component
+          });
+        }
+      } else {
+        vuuPopups.PopupService.hidePopup();
+      }
+    }
+  }
+  drawTarget(dropTarget, dragState) {
+    const lineWidth = 6;
+    const targetDropOutline = dropTarget.getTargetDropOutline(
+      lineWidth,
+      dragState
+    );
+    if (targetDropOutline) {
+      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
+      const w = r - l;
+      const h = b - t;
+      if (this.currentPath) {
+        const path2 = document.getElementById("vuu-drop-outline");
+        path2?.setAttribute("d", this.currentPath);
+      }
+      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);
+      const path = pathFromPoints(points);
+      const animation = document.getElementById(
+        "hw-drop-outline-animate"
+      );
+      animation?.setAttribute("to", path);
+      animation?.beginElement();
+      this.currentPath = path;
+      const dropGuidePath = document.getElementById("hw-drop-guides");
+      dropGuidePath?.setAttribute("d", pathFromGuideLines(guideLines));
+    }
+  }
+}
+const cssShiftRight = "transition:margin-left .4s ease-out;margin-left: 63px";
+const cssShiftBack = "transition:margin-left .4s ease-out;margin-left: 0px";
+function moveExistingTabs(dropTarget) {
+  const { AFTER, BEFORE } = BoxModel.RelativeDropPosition;
+  const {
+    clientRect: { Stack },
+    pos: {
+      // tab: { index: tabIndex, positionRelativeToTab }
+      tab
+    }
+  } = dropTarget;
+  const { id } = dropTarget.component.props;
+  let tabEl = null;
+  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {
+    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;
+    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${tab.index + tabOffset})`;
+    tabEl = document.getElementById(id)?.querySelector(selector);
+    if (tabEl) {
+      if (_shiftedTab === null || _shiftedTab !== tabEl) {
+        tabEl.style.cssText = cssShiftRight;
+        if (_shiftedTab) {
+          _shiftedTab.style.cssText = cssShiftBack;
+        }
+        _shiftedTab = tabEl;
+      }
+    } else {
+      clearShiftedTab();
+    }
+  } else if (tab?.positionRelativeToTab === BEFORE) {
+    if (_shiftedTab === null) {
+      const selector = ".vuuHeader-title";
+      tabEl = document.getElementById(id)?.querySelector(selector);
+      tabEl.style.cssText = cssShiftRight;
+      _shiftedTab = tabEl;
+    }
+  } else {
+    clearShiftedTab();
+  }
+}
+function clearShiftedTab() {
+  if (_shiftedTab) {
+    _shiftedTab.style.cssText = cssShiftBack;
+    _shiftedTab = null;
+  }
+}
+
+module.exports = DropTargetCanvas;
+//# sourceMappingURL=DropTargetRenderer.js.map

package/cjs/drag-drop/DropTargetRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropTargetRenderer.js","sources":["../../src/drag-drop/DropTargetRenderer.tsx"],"sourcesContent":["import { PopupService } from \"@vuu-ui/vuu-popups\";\nimport { RelativeDropPosition } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\nimport { computeMenuPosition, DropMenu } from \"./DropMenu\";\nimport { DropTarget, GuideLine } from \"./DropTarget\";\n\nimport \"./DropTargetRenderer.css\";\n\ntype Point = [number, number];\ntype TabMode = \"full-view\" | \"tab-only\";\n\nlet _multiDropOptions = false;\nlet _hoverDropTarget: DropTarget | null = null;\nlet _shiftedTab: HTMLElement | null = null;\n\nconst onHoverDropTarget = (dropTarget: DropTarget | null) =>\n  (_hoverDropTarget = dropTarget);\n\nconst start = ([x, y]: Point) => `M${x},${y}`;\nconst point = ([x, y]: Point) => `L${x},${y}`;\nconst pathFromPoints = ([p1, ...points]: Point[]) =>\n  `${start(p1)} ${points.map(point)}Z`;\n\nconst pathFromGuideLines = (guideLines?: GuideLine) => {\n  if (guideLines) {\n    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;\n    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;\n  } else {\n    return \"\";\n  }\n};\n\nfunction insertSVGRoot() {\n  if (document.getElementById(\"hw-drag-canvas\") === null) {\n    const root = document.getElementById(\"root\");\n    const container = document.createElement(\"div\");\n    container.id = \"hw-drag-canvas\";\n    container.innerHTML = `\n      <svg width=\"100%\" height=\"100%\">\n        <path id=\"hw-drop-guides\" />\n        <path\n          id=\"vuu-drop-outline\"\n          d=\"M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z\">\n          <animate\n            attributeName=\"d\"\n            id=\"hw-drop-outline-animate\"\n            begin=\"indefinite\"\n            dur=\"300ms\"\n            fill=\"freeze\"\n            to=\"M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z\"\n          />\n        </path>\n      </svg>\n      `;\n    document.body.insertBefore(container, root);\n  }\n}\nexport default class DropTargetCanvas {\n  private currentPath: string | null = null;\n  private tabMode: TabMode | null = null;\n\n  constructor() {\n    insertSVGRoot();\n  }\n\n  prepare(dragRect: DragDropRect, tabMode: TabMode = \"full-view\") {\n    // don't do this on body\n    document.body.classList.add(\"drawing\");\n    this.currentPath = null;\n    this.tabMode = tabMode;\n\n    const points = this.getPoints(0, 0, 0, 0);\n    // const points = this.getPoints(left, top, width, height);\n    const d = pathFromPoints(points);\n\n    const dropOutlinePath = document.getElementById(\"vuu-drop-outline\");\n    dropOutlinePath?.setAttribute(\"d\", d);\n    this.currentPath = d;\n  }\n\n  clear() {\n    // don't do this on body\n    _hoverDropTarget = null;\n    clearShiftedTab();\n    document.body.classList.remove(\"drawing\");\n    PopupService.hidePopup();\n  }\n\n  get hoverDropTarget() {\n    return _hoverDropTarget;\n  }\n\n  getPoints(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    tabLeft = 0,\n    tabWidth = 0,\n    tabHeight = 0\n  ): Point[] {\n    const tabOnly = this.tabMode === \"tab-only\";\n    if (tabWidth === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y],\n        [x + width, y],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else if (tabOnly) {\n      const left = tabLeft;\n      return [\n        [left, y],\n        [left, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y + tabHeight],\n        [left + tabWidth, y + tabHeight],\n        [left, y + tabHeight],\n        [left, y + tabHeight],\n      ];\n    } else if (tabLeft === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else {\n      return [\n        [x, y + tabHeight],\n        [x + tabLeft, y + tabHeight],\n        [x + tabLeft, y],\n        [x + tabLeft, y],\n        [x + tabLeft, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    }\n  }\n\n  draw(dropTarget: DropTarget, dragState: DragState) {\n    const sameDropTarget = false;\n    const wasMultiDrop = _multiDropOptions;\n\n    if (_hoverDropTarget !== null) {\n      this.drawTarget(_hoverDropTarget);\n    } else {\n      if (sameDropTarget === false) {\n        _multiDropOptions = dropTarget.nextDropTarget != null;\n        if (dropTarget.pos.tab) {\n          moveExistingTabs(dropTarget);\n        } else if (_shiftedTab) {\n          clearShiftedTab();\n        }\n        this.drawTarget(dropTarget, dragState);\n      }\n\n      if (_multiDropOptions) {\n        const [left, top, orientation] = computeMenuPosition(dropTarget);\n        if (!wasMultiDrop || !sameDropTarget) {\n          const component = (\n            <DropMenu\n              dropTarget={dropTarget}\n              onHover={onHoverDropTarget}\n              orientation={orientation}\n            />\n          );\n          PopupService.showPopup({\n            left,\n            top,\n            component,\n          });\n        }\n      } else {\n        PopupService.hidePopup();\n      }\n    }\n  }\n\n  drawTarget(dropTarget: DropTarget, dragState?: DragState) {\n    const lineWidth = 6;\n\n    const targetDropOutline = dropTarget.getTargetDropOutline(\n      lineWidth,\n      dragState\n    );\n\n    if (targetDropOutline) {\n      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =\n        targetDropOutline;\n      const w = r - l;\n      const h = b - t;\n\n      if (this.currentPath) {\n        const path = document.getElementById(\"vuu-drop-outline\");\n        path?.setAttribute(\"d\", this.currentPath);\n      }\n\n      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);\n      const path = pathFromPoints(points);\n      const animation = document.getElementById(\n        \"hw-drop-outline-animate\"\n      ) as unknown as SVGAnimateElement;\n      animation?.setAttribute(\"to\", path);\n      animation?.beginElement();\n      this.currentPath = path;\n\n      const dropGuidePath = document.getElementById(\"hw-drop-guides\");\n      dropGuidePath?.setAttribute(\"d\", pathFromGuideLines(guideLines));\n    }\n  }\n}\n\nconst cssShiftRight = \"transition:margin-left .4s ease-out;margin-left: 63px\";\nconst cssShiftBack = \"transition:margin-left .4s ease-out;margin-left: 0px\";\n\nfunction moveExistingTabs(dropTarget: DropTarget) {\n  const { AFTER, BEFORE } = RelativeDropPosition;\n  const {\n    clientRect: { Stack },\n    pos: {\n      // tab: { index: tabIndex, positionRelativeToTab }\n      tab,\n    },\n  } = dropTarget;\n\n  const { id } = dropTarget.component.props;\n  let tabEl = null;\n  // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)\n  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {\n    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;\n    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${\n      tab.index + tabOffset\n    })`;\n    tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;\n    if (tabEl) {\n      if (_shiftedTab === null || _shiftedTab !== tabEl) {\n        tabEl.style.cssText = cssShiftRight;\n        if (_shiftedTab) {\n          _shiftedTab.style.cssText = cssShiftBack;\n        }\n        _shiftedTab = tabEl;\n      }\n    } else {\n      clearShiftedTab();\n    }\n  } else if (tab?.positionRelativeToTab === BEFORE) {\n    if (_shiftedTab === null) {\n      const selector = \".vuuHeader-title\";\n      tabEl = document\n        .getElementById(id)\n        ?.querySelector(selector) as HTMLElement;\n      tabEl.style.cssText = cssShiftRight;\n      _shiftedTab = tabEl;\n    }\n  } else {\n    clearShiftedTab();\n  }\n}\n\nfunction clearShiftedTab() {\n  if (_shiftedTab) {\n    _shiftedTab.style.cssText = cssShiftBack;\n    _shiftedTab = null;\n  }\n}\n"],"names":["PopupService","computeMenuPosition","jsx","DropMenu","path","RelativeDropPosition"],"mappings":"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"}

package/cjs/flexbox/Flexbox.css

@@ -0,0 +1,45 @@
+:root {
+  --hw-space-unit: 4px;
+  --hw-flex-gap: 3;
+  --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);
+}
+
+.hwFlexbox {
+  background-color: var(--container1-background);
+  box-sizing: border-box;
+  display: flex;
+  gap: calc(var(--spacing) * var(--space));
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.hwFlexbox-column {
+  flex-direction: column;
+}
+
+.hwFlexbox-row {
+  flex-direction: row;
+}
+
+.hwFlexbox > .Splitter {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.hwFlexbox.full-page {
+  height: 100vh;
+  width: 100vw;
+}
+
+.flex-fill {
+  border-color: red;
+  flex: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.vuuView.flex-fill {
+  border-color: red;
+}

package/cjs/flexbox/Flexbox.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var React = require('react');
+var useSplitterResizing = require('./useSplitterResizing.js');
+
+const classBase = "hwFlexbox";
+const Flexbox = React.forwardRef(function Flexbox2(props, ref) {
+  const {
+    breakPoints,
+    children,
+    // cols: colsProp,
+    column,
+    className: classNameProp,
+    flexFill,
+    gap,
+    fullPage,
+    id,
+    onSplitterMoved,
+    resizeable,
+    row,
+    spacing,
+    splitterSize,
+    style,
+    ...rest
+  } = props;
+  const { content, rootRef } = useSplitterResizing.useSplitterResizing({
+    children,
+    // cols: colsProp,
+    onSplitterMoved,
+    style
+  });
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-column`]: column,
+    [`${classBase}-row`]: row,
+    "flex-fill": flexFill,
+    "full-page": fullPage
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className,
+      "data-resizeable": resizeable || void 0,
+      id,
+      ref: core.useForkRef(rootRef, ref),
+      style: {
+        ...style,
+        gap,
+        "--spacing": spacing
+      },
+      children: content
+    }
+  );
+});
+Flexbox.displayName = "Flexbox";
+
+module.exports = Flexbox;
+//# sourceMappingURL=Flexbox.js.map

package/cjs/flexbox/Flexbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flexbox.js","sources":["../../src/flexbox/Flexbox.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { CSSProperties, ForwardedRef, forwardRef } from \"react\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport { useSplitterResizing } from \"./useSplitterResizing\";\n\nimport \"./Flexbox.css\";\n\nconst classBase = \"hwFlexbox\";\n\nconst Flexbox = forwardRef(function Flexbox(\n  props: FlexboxProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    breakPoints,\n    children,\n    // cols: colsProp,\n    column,\n    className: classNameProp,\n    flexFill,\n    gap,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    spacing,\n    splitterSize,\n    style,\n    ...rest\n  } = props;\n\n  const { content, rootRef } = useSplitterResizing({\n    children,\n    // cols: colsProp,\n    onSplitterMoved,\n    style,\n  });\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      // data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={\n        {\n          ...style,\n          gap,\n          \"--spacing\": spacing,\n        } as CSSProperties\n      }\n    >\n      {content}\n    </div>\n  );\n});\nFlexbox.displayName = \"Flexbox\";\n\nexport default Flexbox;\n"],"names":["forwardRef","Flexbox","useSplitterResizing","jsx","useForkRef"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,WAAA,CAAA;AAElB,MAAM,OAAU,GAAAA,gBAAA,CAAW,SAASC,QAAAA,CAClC,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA;AAAA,IAEA,MAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,OAAA,EAAS,OAAQ,EAAA,GAAIC,uCAAoB,CAAA;AAAA,IAC/C,QAAA;AAAA;AAAA,IAEA,eAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MAEA,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KACE,EAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACH,GAAA;AAAA,QACA,WAAa,EAAA,OAAA;AAAA,OACf;AAAA,MAGD,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}

package/cjs/flexbox/FlexboxLayout.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var layoutAction = require('../layout-action.js');
+var LayoutProvider = require('../layout-provider/LayoutProvider.js');
+require('../layout-provider/LayoutProviderContext.js');
+var ComponentRegistry = require('../registry/ComponentRegistry.js');
+var Flexbox = require('./Flexbox.js');
+
+const FlexboxLayout = function FlexboxLayout2(props) {
+  const { path } = props;
+  const dispatch = LayoutProvider.useLayoutProviderDispatch();
+  const handleSplitterMoved = React.useCallback(
+    (sizes) => {
+      dispatch({
+        type: layoutAction.Action.SPLITTER_RESIZE,
+        path,
+        sizes
+      });
+    },
+    [dispatch, path]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Flexbox, { ...props, onSplitterMoved: handleSplitterMoved });
+};
+FlexboxLayout.displayName = "Flexbox";
+ComponentRegistry.registerComponent("Flexbox", FlexboxLayout, "container");
+
+exports.FlexboxLayout = FlexboxLayout;
+//# sourceMappingURL=FlexboxLayout.js.map

package/cjs/flexbox/FlexboxLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexboxLayout.js","sources":["../../src/flexbox/FlexboxLayout.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Action } from \"../layout-action\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { SplitterResizeAction } from \"../layout-reducer\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Flexbox from \"./Flexbox\";\nimport { FlexboxLayoutProps } from \"./flexboxTypes\";\n\nexport const FlexboxLayout = function FlexboxLayout(props: FlexboxLayoutProps) {\n  const { path } = props;\n  const dispatch = useLayoutProviderDispatch();\n\n  const handleSplitterMoved = useCallback(\n    (sizes) => {\n      dispatch({\n        type: Action.SPLITTER_RESIZE,\n        path,\n        sizes,\n      } as SplitterResizeAction);\n    },\n    [dispatch, path]\n  );\n\n  return <Flexbox {...props} onSplitterMoved={handleSplitterMoved} />;\n};\nFlexboxLayout.displayName = \"Flexbox\";\n\nregisterComponent(\"Flexbox\", FlexboxLayout, \"container\");\n"],"names":["FlexboxLayout","useLayoutProviderDispatch","useCallback","Action","jsx","registerComponent"],"mappings":";;;;;;;;;;AAQa,MAAA,aAAA,GAAgB,SAASA,cAAAA,CAAc,KAA2B,EAAA;AAC7E,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA,CAAA;AACjB,EAAA,MAAM,WAAWC,wCAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,mBAAsB,GAAAC,iBAAA;AAAA,IAC1B,CAAC,KAAU,KAAA;AACT,MAAS,QAAA,CAAA;AAAA,QACP,MAAMC,mBAAO,CAAA,eAAA;AAAA,QACb,IAAA;AAAA,QACA,KAAA;AAAA,OACuB,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBAAQC,cAAA,CAAA,OAAA,EAAA,EAAS,GAAG,KAAA,EAAO,iBAAiB,mBAAqB,EAAA,CAAA,CAAA;AACnE,EAAA;AACA,aAAA,CAAc,WAAc,GAAA,SAAA,CAAA;AAE5BC,mCAAkB,CAAA,SAAA,EAAW,eAAe,WAAW,CAAA;;;;"}

package/cjs/flexbox/FluidGrid.css

@@ -0,0 +1,134 @@
+:root {
+  --hw-space-unit: 4px;
+  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);
+}
+
+.hwFluidGrid {
+  --gap: var(--gutter-width);
+
+  display: flex;
+  gap: calc(var(--grid-gap) * var(--hw-space-unit));
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+.hwFluidGrid > * {
+  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
+  --gutter-count: calc(var(--parent-col-count) - 1);
+  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));
+  --available-width: calc(100% - var(--total-gutter-width));
+
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+}
+
+.hwFluidGrid > *:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: dashed 2px blue;
+}
+
+.hwFluidGrid > [data-xs] {
+  --internal-gutter-count: calc(var(--col-span) - 1);
+  --percent-width: calc(var(--col-span) / var(--parent-col-count));
+  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));
+  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));
+  flex-grow: 0;
+}
+
+.hwFluidGrid > [data-xs='1'] {
+  --col-span: 1;
+}
+.hwFluidGrid > [data-xs='2'] {
+  --col-span: 2;
+}
+.hwFluidGrid > [data-xs='3'] {
+  --col-span: 3;
+}
+
+.hwFluidGrid > [data-xs='4'] {
+  --col-span: 4;
+}
+
+.hwFluidGrid > [data-xs='6'] {
+  --col-span: 6;
+}
+
+.hwFluidGrid > [data-xs='8'] {
+  --col-span: 8;
+}
+
+.hwFluidGrid > [data-xs='9'] {
+  --col-span: 9;
+}
+.hwFluidGrid > [data-xs='10'] {
+  --col-span: 10;
+}
+.hwFluidGrid > [data-xs='11'] {
+  --col-span: 11;
+}
+
+.hwFluidGrid > [data-xs='12'] {
+  --col-span: 12;
+}
+
+@media (min-width: 600px) {
+  .hwFluidGrid > [data-sm='1'] {
+    --col-span: 1;
+  }
+  .hwFluidGrid > [data-sm='2'] {
+    --col-span: 2;
+  }
+
+  .hwFluidGrid > [data-sm='3'] {
+    --col-span: 3;
+  }
+
+  .hwFluidGrid > [data-sm='4'] {
+    --col-span: 4;
+  }
+
+  .hwFluidGrid > [data-sm='6'] {
+    --col-span: 6;
+  }
+
+  .hwFluidGrid > [data-sm='8'] {
+    --col-span: 8;
+  }
+  .hwFluidGrid > [data-sm='9'] {
+    --col-span: 9;
+  }
+  .hwFluidGrid > [data-sm='10'] {
+    --col-span: 10;
+  }
+  .hwFluidGrid > [data-sm='11'] {
+    --col-span: 11;
+  }
+  .hwFluidGrid > [data-sm='12'] {
+    --col-span: 12;
+  }
+}
+
+/* Display the grid background */
+
+.hwFluidGrid-show-grid {
+  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
+  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);
+  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));
+  --grid-available-width: calc(100% - var(--grid-total-gutter-width));
+  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));
+  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));
+  background: repeating-linear-gradient(
+    to right,
+    var(--hw-fluid-grid-col-bg) 0,
+    var(--hw-fluid-grid-col-bg) var(--column-width),
+    white var(--column-width),
+    white calc(var(--column-width) + var(--gutter-width))
+  );
+}

package/cjs/flexbox/FluidGrid.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var React = require('react');
+var useBreakpoints = require('../responsive/use-breakpoints.js');
+require('../responsive/useResizeObserver.js');
+var useResponsiveSizing = require('./useResponsiveSizing.js');
+
+const classBase = "hwFluidGrid";
+const FluidGrid = React.forwardRef(function FluidGrid2(props, ref) {
+  const {
+    breakPoints,
+    children: childrenProp,
+    column,
+    cols: colsProp = 12,
+    className: classNameProp,
+    flexFill,
+    gap = 3,
+    fullPage,
+    id,
+    onSplitterMoved,
+    resizeable,
+    row,
+    showGrid,
+    spacing,
+    splitterSize,
+    style: styleProp,
+    ...rest
+  } = props;
+  const children = React.useMemo(() => {
+    return vuuUtils.asReactElements(childrenProp);
+  }, [childrenProp]);
+  const { cols, content, rootRef } = useResponsiveSizing.useResponsiveSizing({
+    children,
+    cols: colsProp,
+    style: styleProp
+  });
+  const breakpoint = useBreakpoints.useBreakpoints(
+    {
+      breakPoints
+    },
+    rootRef
+  );
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-column`]: column,
+    [`${classBase}-row`]: row,
+    [`${classBase}-show-grid`]: showGrid,
+    "flex-fill": flexFill,
+    "full-page": fullPage
+  });
+  const style = {
+    ...styleProp,
+    "--spacing": spacing,
+    "--grid-col-count": cols,
+    "--grid-gap": gap
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className,
+      "data-breakpoint": breakpoint,
+      "data-cols": cols,
+      "data-resizeable": resizeable || void 0,
+      id,
+      ref: core.useForkRef(rootRef, ref),
+      style,
+      children: content
+    }
+  );
+});
+FluidGrid.displayName = "FluidGrid";
+
+exports.FluidGrid = FluidGrid;
+//# sourceMappingURL=FluidGrid.js.map

package/cjs/flexbox/FluidGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluidGrid.js","sources":["../../src/flexbox/FluidGrid.tsx"],"sourcesContent":["import { asReactElements } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, useMemo } from \"react\";\nimport { useBreakpoints } from \"../responsive\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport \"./FluidGrid.css\";\nimport { useResponsiveSizing } from \"./useResponsiveSizing\";\n\nconst classBase = \"hwFluidGrid\";\n\nexport interface FluidGridProps extends FlexboxProps {\n  showGrid?: boolean;\n}\n\nexport const FluidGrid = forwardRef(function FluidGrid(\n  props: FluidGridProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    breakPoints,\n    children: childrenProp,\n    column,\n    cols: colsProp = 12,\n    className: classNameProp,\n    flexFill,\n    gap = 3,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    showGrid,\n    spacing,\n    splitterSize,\n    style: styleProp,\n    ...rest\n  } = props;\n\n  //TODO does thie useMemo serve any actual purpose or will childrenProp\n  // always be new anyway ?\n  const children = useMemo(() => {\n    return asReactElements(childrenProp);\n  }, [childrenProp]);\n\n  const { cols, content, rootRef } = useResponsiveSizing({\n    children,\n    cols: colsProp,\n    style: styleProp,\n  });\n\n  const breakpoint = useBreakpoints(\n    {\n      breakPoints,\n    },\n    rootRef\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    [`${classBase}-show-grid`]: showGrid,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  const style = {\n    ...styleProp,\n    \"--spacing\": spacing,\n    \"--grid-col-count\": cols,\n    \"--grid-gap\": gap,\n  };\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-breakpoint={breakpoint}\n      data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={style}\n    >\n      {content}\n    </div>\n  );\n});\nFluidGrid.displayName = \"FluidGrid\";\n"],"names":["forwardRef","FluidGrid","useMemo","asReactElements","useResponsiveSizing","useBreakpoints","jsx","useForkRef"],"mappings":";;;;;;;;;;;AASA,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,SAAY,GAAAA,gBAAA,CAAW,SAASC,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAA;AAAA,IACA,MAAM,QAAW,GAAA,EAAA;AAAA,IACjB,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAIJ,EAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,IAAA,OAAOC,yBAAgB,YAAY,CAAA,CAAA;AAAA,GACrC,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAYC,uCAAoB,CAAA;AAAA,IACrD,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAAC,6BAAA;AAAA,IACjB;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,QAAA;AAAA,IAC5B,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,WAAa,EAAA,OAAA;AAAA,IACb,kBAAoB,EAAA,IAAA;AAAA,IACpB,YAAc,EAAA,GAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAiB,EAAA,UAAA;AAAA,MACjB,WAAW,EAAA,IAAA;AAAA,MACX,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}