@vuu-ui/vuu-layout 0.8.34 → 0.8.35

package/cjs/drag-drop/DropTargetRenderer.css

@@ -1,40 +0,0 @@
-#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

@@ -1,233 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,45 +0,0 @@
-: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

@@ -1,61 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,30 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,134 +0,0 @@
-: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

@@ -1,78 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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;;;;"}