@vuu-ui/vuu-layout 0.8.35 → 0.8.36

package/cjs/responsive/use-breakpoints.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+var breakpoints = require('./breakpoints.js');
+
+const EMPTY_ARRAY = [];
+const useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
+  const [breakpointMatch, setBreakpointmatch] = React.useState(
+    smallerThan ? false : "lg"
+  );
+  const bodyRef = React.useRef(document.body);
+  const breakPointsRef = React.useRef(
+    breakPointsProp ? breakpoints.breakpointRamp(breakPointsProp) : breakpoints.getBreakPoints()
+  );
+  const sizeRef = React.useRef("lg");
+  const stopFromMinWidth = React.useCallback(
+    (w) => {
+      if (breakPointsRef.current) {
+        for (const [name, size] of breakPointsRef.current) {
+          if (w >= size) {
+            return name;
+          }
+        }
+      }
+    },
+    [breakPointsRef]
+  );
+  const matchSizeAgainstBreakpoints = React.useCallback(
+    (width) => {
+      if (smallerThan) {
+        const breakPointRamp = breakPointsRef.current.find(
+          ([name]) => name === smallerThan
+        );
+        if (breakPointRamp) {
+          const [, , maxValue] = breakPointRamp;
+          return width < maxValue;
+        }
+      } else {
+        return stopFromMinWidth(width);
+      }
+      return width;
+    },
+    [smallerThan, stopFromMinWidth]
+  );
+  useResizeObserver.useResizeObserver(
+    ref || bodyRef,
+    breakPointsRef.current ? ["width"] : EMPTY_ARRAY,
+    ({ width: measuredWidth }) => {
+      const result = matchSizeAgainstBreakpoints(measuredWidth);
+      if (result !== sizeRef.current) {
+        sizeRef.current = result;
+        setBreakpointmatch(result);
+      }
+    },
+    true
+  );
+  React.useEffect(() => {
+    const target = ref || bodyRef;
+    if (target.current) {
+      const prevSize = sizeRef.current;
+      if (breakPointsRef.current) {
+        const { clientWidth } = target.current;
+        const result = matchSizeAgainstBreakpoints(clientWidth);
+        sizeRef.current = result;
+        if (result !== prevSize) {
+          setBreakpointmatch(result);
+        }
+      }
+    }
+  }, [setBreakpointmatch, matchSizeAgainstBreakpoints, ref]);
+  return breakpointMatch;
+};
+
+exports.useBreakpoints = useBreakpoints;
+//# sourceMappingURL=use-breakpoints.js.map

package/cjs/responsive/use-breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoints.js","sources":["../../src/responsive/use-breakpoints.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeObserver } from \"./useResizeObserver\";\nimport {\n  BreakPointRamp,\n  breakpointRamp,\n  getBreakPoints as getDocumentBreakpoints,\n} from \"./breakpoints\";\nimport { BreakPoint, BreakPointsProp } from \"../flexbox/flexboxTypes\";\n\nconst EMPTY_ARRAY: BreakPoint[] = [];\n\nexport interface BreakpointsHookProps {\n  breakPoints?: BreakPointsProp;\n  smallerThan?: string;\n}\n\n// TODO how do we cater for smallerThan/greaterThan breakpoints\nexport const useBreakpoints = (\n  { breakPoints: breakPointsProp, smallerThan }: BreakpointsHookProps,\n  ref: RefObject<HTMLElement>\n) => {\n  const [breakpointMatch, setBreakpointmatch] = useState(\n    smallerThan ? false : \"lg\"\n  );\n  const bodyRef = useRef(document.body);\n  const breakPointsRef = useRef<BreakPointRamp[]>(\n    breakPointsProp ? breakpointRamp(breakPointsProp) : getDocumentBreakpoints()\n  );\n\n  // TODO how do we identify the default\n  const sizeRef = useRef(\"lg\");\n\n  const stopFromMinWidth = useCallback(\n    (w) => {\n      if (breakPointsRef.current) {\n        for (const [name, size] of breakPointsRef.current) {\n          if (w >= size) {\n            return name;\n          }\n        }\n      }\n    },\n    [breakPointsRef]\n  );\n\n  const matchSizeAgainstBreakpoints = useCallback(\n    (width) => {\n      if (smallerThan) {\n        const breakPointRamp = breakPointsRef.current.find(\n          ([name]: BreakPointRamp) => name === smallerThan\n        );\n        if (breakPointRamp) {\n          const [, , maxValue] = breakPointRamp;\n          return width < maxValue;\n        }\n      } else {\n        return stopFromMinWidth(width);\n      }\n      // is this right ?\n      return width;\n    },\n    [smallerThan, stopFromMinWidth]\n  );\n\n  // TODO need to make the dimension a config\n  useResizeObserver(\n    ref || bodyRef,\n    breakPointsRef.current ? [\"width\"] : EMPTY_ARRAY,\n    ({ width: measuredWidth }: { width?: number }) => {\n      const result = matchSizeAgainstBreakpoints(measuredWidth);\n      if (result !== sizeRef.current) {\n        sizeRef.current = result;\n        setBreakpointmatch(result);\n      }\n    },\n    true\n  );\n\n  useEffect(() => {\n    const target = ref || bodyRef;\n    if (target.current) {\n      const prevSize = sizeRef.current;\n      if (breakPointsRef.current) {\n        // We're measuring here when the resizeObserver has also measured\n        // There isn't a convenient way to get the Resizeobserver to\n        // notify initial size - that's not really its job, unless we\n        // set a flag ?\n        const { clientWidth } = target.current;\n        const result = matchSizeAgainstBreakpoints(clientWidth);\n        sizeRef.current = result;\n        // If initial size of ref does not match the default, notify client after render\n        if (result !== prevSize) {\n          setBreakpointmatch(result);\n        }\n      }\n    }\n  }, [setBreakpointmatch, matchSizeAgainstBreakpoints, ref]);\n\n  // No, just ass the class directly to the ref, no need to render\n  return breakpointMatch;\n};\n"],"names":["useState","useRef","breakpointRamp","getDocumentBreakpoints","useCallback","useResizeObserver","useEffect"],"mappings":"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"}

package/cjs/responsive/useResizeObserver.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var React = require('react');
+
+const WidthHeight = ["height", "width"];
+const HeightOnly = ["height"];
+const WidthOnly = ["width"];
+const observedMap = /* @__PURE__ */ new WeakMap();
+const getTargetSize = (element, contentRect, dimension) => {
+  switch (dimension) {
+    case "height":
+      return contentRect.height;
+    case "scrollHeight":
+      return element.scrollHeight;
+    case "scrollWidth":
+      return element.scrollWidth;
+    case "width":
+      return contentRect.width;
+    default:
+      return 0;
+  }
+};
+const resizeObserver = new ResizeObserver(
+  (entries) => {
+    for (const entry of entries) {
+      const { target, contentRect } = entry;
+      const observedTarget = observedMap.get(target);
+      if (observedTarget) {
+        const { onResize, measurements } = observedTarget;
+        let sizeChanged = false;
+        for (const [dimension, size] of Object.entries(measurements)) {
+          const newSize = getTargetSize(
+            target,
+            contentRect,
+            dimension
+          );
+          if (newSize !== size) {
+            sizeChanged = true;
+            measurements[dimension] = newSize;
+          }
+        }
+        if (sizeChanged) {
+          onResize && onResize(measurements);
+        }
+      }
+    }
+  }
+);
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+  const dimensionsRef = React.useRef(dimensions);
+  const measure = React.useCallback((target) => {
+    const rect = target.getBoundingClientRect();
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(target, rect, dim);
+        return map;
+      },
+      {}
+    );
+  }, []);
+  React.useLayoutEffect(() => {
+    const target = ref.current;
+    let cleanedUp = false;
+    async function registerObserver() {
+      observedMap.set(target, { measurements: {} });
+      cleanedUp = false;
+      const { fonts } = document;
+      if (fonts) {
+        await fonts.ready;
+      }
+      if (!cleanedUp) {
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+          const measurements = measure(target);
+          observedTarget.measurements = measurements;
+          resizeObserver.observe(target);
+          if (reportInitialSize) {
+            onResize(measurements);
+          }
+        }
+      }
+    }
+    if (target) {
+      if (observedMap.has(target)) {
+        throw Error(
+          "useResizeObserver attemping to observe same element twice"
+        );
+      }
+      void registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+        cleanedUp = true;
+      }
+    };
+  }, [ref, measure, reportInitialSize, onResize]);
+  React.useLayoutEffect(() => {
+    const target = ref.current;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+}
+
+exports.HeightOnly = HeightOnly;
+exports.WidthHeight = WidthHeight;
+exports.WidthOnly = WidthOnly;
+exports.resizeObserver = resizeObserver;
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.js.map

package/cjs/responsive/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* eslint-disable no-restricted-syntax */\nimport { useCallback, useLayoutEffect, useRef, RefObject } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nexport const resizeObserver = new ResizeObserver(\n  (entries: ResizeObserverEntry[]) => {\n    for (const entry of entries) {\n      const { target, contentRect } = entry;\n      const observedTarget = observedMap.get(target as HTMLElement);\n      if (observedTarget) {\n        const { onResize, measurements } = observedTarget;\n        let sizeChanged = false;\n        for (const [dimension, size] of Object.entries(measurements)) {\n          const newSize = getTargetSize(\n            target as HTMLElement,\n            contentRect,\n            dimension as measuredDimension\n          );\n          if (newSize !== size) {\n            sizeChanged = true;\n            measurements[dimension as measuredDimension] = newSize;\n          }\n        }\n        if (sizeChanged) {\n          onResize && onResize(measurements);\n        }\n      }\n    }\n  }\n);\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { fonts } = document as any;\n      if (fonts) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        await fonts.ready;\n      }\n      if (!cleanedUp) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            onResize(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\"\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure, reportInitialSize, onResize]);\n\n  useLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":["useRef","useCallback","useLayoutEffect"],"mappings":"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"}

package/cjs/responsive/utils.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const COLLAPSIBLE = "data-collapsible";
+const RESPONSIVE_ATTRIBUTE = {
+  [COLLAPSIBLE]: true,
+  "data-pad-start": true,
+  "data-pad-end": true
+};
+const isResponsiveAttribute = (propName) => RESPONSIVE_ATTRIBUTE[propName] ?? false;
+const isCollapsible = (propName) => propName === COLLAPSIBLE;
+const COLLAPSIBLE_VALUE = {
+  dynamic: "dynamic",
+  instant: "instant",
+  true: "instant"
+};
+const collapsibleValue = (value) => COLLAPSIBLE_VALUE[value] ?? "none";
+const extractResponsiveProps = (props) => {
+  return Object.keys(props).reduce(
+    (result, propName) => {
+      const [toolbarProps, rest] = result;
+      if (isResponsiveAttribute(propName)) {
+        const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];
+        toolbarProps[propName] = value;
+        rest[propName] = void 0;
+      }
+      return result;
+    },
+    [{}, {}]
+  );
+};
+
+exports.extractResponsiveProps = extractResponsiveProps;
+exports.isResponsiveAttribute = isResponsiveAttribute;
+//# sourceMappingURL=utils.js.map

package/cjs/responsive/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = 'data-collapsible';\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  'data-pad-start': true,\n  'data-pad-end': true\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: 'dynamic',\n  instant: 'instant',\n  true: 'instant'\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? 'none';\n\ntype Props = { [key: string]: any };\nexport const extractResponsiveProps = (props: Props) => {\n  return Object.keys(props).reduce<[Props, Props]>(\n    (result, propName) => {\n      const [toolbarProps, rest] = result;\n      if (isResponsiveAttribute(propName)) {\n        const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];\n\n        toolbarProps[propName] = value;\n        rest[propName] = undefined;\n      }\n      return result;\n    },\n    [{}, {}]\n  );\n};\n"],"names":[],"mappings":";;AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAEpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,QACpC,KAAA,oBAAA,CAAqB,QAAQ,CAAK,IAAA,MAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,iBAAA,CAAkB,KAAK,CAAK,IAAA,MAAA,CAAA;AAG3D,MAAA,sBAAA,GAAyB,CAAC,KAAiB,KAAA;AACtD,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,KAAK,CAAE,CAAA,MAAA;AAAA,IACxB,CAAC,QAAQ,QAAa,KAAA;AACpB,MAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,MAAA,CAAA;AAC7B,MAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,QAAM,MAAA,KAAA,GAAQ,aAAc,CAAA,QAAQ,CAAI,GAAA,gBAAA,CAAiB,MAAM,QAAQ,CAAC,CAAI,GAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1F,QAAA,YAAA,CAAa,QAAQ,CAAI,GAAA,KAAA,CAAA;AACzB,QAAA,IAAA,CAAK,QAAQ,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,OACnB;AACA,MAAO,OAAA,MAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,GACT,CAAA;AACF;;;;;"}

package/cjs/stack/Stack.css

@@ -0,0 +1,39 @@
+.vuuTabs {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.vuuTabs-horizontal {
+  --vuu-tabs-border-style: none solid none none;
+  flex-direction: row;
+}
+
+.vuuTabs .Toolbar:before {
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  height: 1px;
+  content: '';
+  position: absolute;
+  background: var(--grey60);
+}
+
+.vuuTabs-tabPanel {
+  display: flex;
+  flex: 1; 
+  flex-direction: column;
+}
+
+.vuuTabs-tabPanel > * {
+  flex: 1 1 auto;
+}
+
+.vuuTabHeader + .vuuView > .vuuHeader {
+  height: 0;
+  overflow: hidden;
+}
+
+.Layout-svg-button {
+  --spacing-medium: 5px;
+}

package/cjs/stack/Stack.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var cx = require('clsx');
+var React = require('react');
+var layoutUtils = require('../layout-reducer/layoutUtils.js');
+
+const classBase = "vuuTabs";
+const getDefaultTabIcon = () => void 0;
+const getChildElements = (children) => {
+  const elements = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      elements.push(child);
+    } else {
+      console.warn(`Stack has unexpected child element type`);
+    }
+  });
+  return elements;
+};
+const DefaultTabstripProps = {
+  allowAddTab: false,
+  allowCloseTab: false,
+  allowRenameTab: false
+};
+const Stack = React.forwardRef(function Stack2({
+  TabstripProps: TabstripProps2 = DefaultTabstripProps,
+  active = 0,
+  children,
+  className: classNameProp,
+  getTabIcon = getDefaultTabIcon,
+  getTabLabel = layoutUtils.getDefaultTabLabel,
+  id: idProp,
+  keyBoardActivation = "manual",
+  // onMouseDown,
+  onAddTab,
+  onMoveTab,
+  onTabClose,
+  onTabEdit,
+  onTabSelectionChanged,
+  showTabs = "top",
+  style
+}, ref) {
+  const id = vuuUtils.useId(idProp);
+  const tabLabels = React.useRef([]);
+  const {
+    allowCloseTab,
+    allowRenameTab,
+    className: tabstripClassName
+  } = TabstripProps2;
+  const handleExitEditMode = React.useCallback(
+    (_oldText, newText, _allowDeactivation, tabIndex) => {
+      onTabEdit?.(tabIndex, newText);
+    },
+    [onTabEdit]
+  );
+  const activeChild = () => {
+    if (React.isValidElement(children)) {
+      return children;
+    }
+    if (Array.isArray(children)) {
+      return children[active] ?? null;
+    }
+    return null;
+  };
+  const renderTabs = () => getChildElements(children).map((child2, idx) => {
+    const {
+      closeable = allowCloseTab,
+      id: childId = `${id}-${idx}`,
+      "data-tab-location": tabLocation
+    } = child2.props;
+    const label = getTabLabel(child2, idx, tabLabels.current);
+    tabLabels.current.push(label);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.Tab,
+      {
+        ariaControls: childId,
+        "data-icon": getTabIcon(child2, idx),
+        id: `${childId}-tab`,
+        index: idx,
+        label,
+        location: tabLocation,
+        closeable,
+        editable: allowRenameTab
+      },
+      childId
+    );
+  });
+  const child = activeChild();
+  const isHorizontal = showTabs === "left" || showTabs === "right";
+  const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(classBase, classNameProp, {
+        [`${classBase}-horizontal`]: isHorizontal
+      }),
+      style,
+      id,
+      ref,
+      children: [
+        showTabs ? /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.Tabstrip,
+          {
+            ...TabstripProps2,
+            activeTabIndex: TabstripProps2?.activeTabIndex ?? (child === null ? -1 : active),
+            allowDragDrop: TabstripProps2.allowDragDrop !== false,
+            animateSelectionThumb: true,
+            className: cx("vuuTabHeader", tabstripClassName),
+            "aria-label": "data tabs",
+            keyBoardActivation,
+            onActiveChange: onTabSelectionChanged,
+            onAddTab,
+            onCloseTab: onTabClose,
+            onExitEditMode: handleExitEditMode,
+            onMoveTab,
+            orientation: tabstripOrientation,
+            children: renderTabs()
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-labelledby": `${id}-${active}`,
+            className: `${classBase}-tabPanel`,
+            role: "tabpanel",
+            children: child
+          }
+        )
+      ]
+    }
+  );
+});
+Stack.displayName = "Stack";
+
+exports.Stack = Stack;
+//# sourceMappingURL=Stack.js.map

package/cjs/stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../src/stack/Stack.tsx"],"sourcesContent":["import { Tab, Tabstrip, TabstripProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { StackProps } from \"./stackTypes\";\n\nimport \"./Stack.css\";\n\nconst classBase = \"vuuTabs\";\n\nconst getDefaultTabIcon = () => undefined;\n\nconst getChildElements = <T extends ReactElement = ReactElement>(\n  children: ReactNode\n): T[] => {\n  const elements: T[] = [];\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) {\n      elements.push(child as T);\n    } else {\n      console.warn(`Stack has unexpected child element type`);\n    }\n  });\n  return elements;\n};\n\nconst DefaultTabstripProps: Partial<TabstripProps> = {\n  allowAddTab: false,\n  allowCloseTab: false,\n  allowRenameTab: false,\n};\n\nexport const Stack = forwardRef(function Stack(\n  {\n    TabstripProps = DefaultTabstripProps,\n    active = 0,\n    children,\n    className: classNameProp,\n    getTabIcon = getDefaultTabIcon,\n    getTabLabel = getDefaultTabLabel,\n    id: idProp,\n    keyBoardActivation = \"manual\",\n    // onMouseDown,\n    onAddTab,\n    onMoveTab,\n    onTabClose,\n    onTabEdit,\n    onTabSelectionChanged,\n    showTabs = \"top\",\n    style,\n  }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const tabLabels = useRef<string[]>([]);\n  const {\n    allowCloseTab,\n    allowRenameTab,\n    className: tabstripClassName,\n  } = TabstripProps;\n\n  const handleExitEditMode = useCallback(\n    (\n      _oldText: string,\n      newText: string,\n      _allowDeactivation: boolean,\n      tabIndex: number\n    ) => {\n      onTabEdit?.(tabIndex, newText);\n    },\n    [onTabEdit]\n  );\n\n  const activeChild = () => {\n    //TODO need to inject an id if child does not have one, so we can\n    // establish the aria-controls relationship. In a Vuu layout, there\n    // will always be an id.\n    if (React.isValidElement(children)) {\n      return children;\n    }\n    if (Array.isArray(children)) {\n      return children[active] ?? null;\n    }\n    return null;\n  };\n\n  const renderTabs = () =>\n    getChildElements(children).map((child, idx) => {\n      const {\n        closeable = allowCloseTab,\n        id: childId = `${id}-${idx}`,\n        \"data-tab-location\": tabLocation,\n      } = child.props;\n      const label = getTabLabel(child, idx, tabLabels.current);\n      tabLabels.current.push(label);\n      return (\n        <Tab\n          ariaControls={childId}\n          data-icon={getTabIcon(child, idx)}\n          key={childId}\n          id={`${childId}-tab`}\n          index={idx}\n          label={label}\n          location={tabLocation}\n          closeable={closeable}\n          editable={allowRenameTab}\n        />\n      );\n    });\n\n  const child = activeChild();\n  const isHorizontal = showTabs === \"left\" || showTabs === \"right\";\n  const tabstripOrientation = isHorizontal ? \"vertical\" : \"horizontal\";\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-horizontal`]: isHorizontal,\n      })}\n      style={style}\n      id={id}\n      ref={ref}\n    >\n      {showTabs ? (\n        <Tabstrip\n          {...TabstripProps}\n          activeTabIndex={\n            TabstripProps?.activeTabIndex ?? (child === null ? -1 : active)\n          }\n          allowDragDrop={TabstripProps.allowDragDrop !== false}\n          animateSelectionThumb\n          className={cx(\"vuuTabHeader\", tabstripClassName)}\n          aria-label=\"data tabs\"\n          keyBoardActivation={keyBoardActivation}\n          onActiveChange={onTabSelectionChanged}\n          onAddTab={onAddTab}\n          onCloseTab={onTabClose}\n          onExitEditMode={handleExitEditMode}\n          onMoveTab={onMoveTab}\n          orientation={tabstripOrientation}\n        >\n          {renderTabs()}\n        </Tabstrip>\n      ) : null}\n      <div\n        aria-labelledby={`${id}-${active}`}\n        className={`${classBase}-tabPanel`}\n        role=\"tabpanel\"\n      >\n        {child}\n      </div>\n    </div>\n  );\n});\nStack.displayName = \"Stack\";\n"],"names":["forwardRef","Stack","TabstripProps","getDefaultTabLabel","useId","useRef","useCallback","child","jsx","Tab","jsxs","Tabstrip"],"mappings":"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"}

package/cjs/stack/StackLayout.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var LayoutProvider = require('../layout-provider/LayoutProvider.js');
+require('../layout-provider/LayoutProviderContext.js');
+var useViewActionDispatcher = require('../layout-view-actions/useViewActionDispatcher.js');
+require('../layout-view-actions/ViewContext.js');
+var ComponentRegistry = require('../registry/ComponentRegistry.js');
+var usePersistentState = require('../use-persistent-state.js');
+var Stack = require('./Stack.js');
+var layoutUtils = require('../layout-reducer/layoutUtils.js');
+var Placeholder = require('../placeholder/Placeholder.js');
+
+const defaultCreateNewChild = () => /* @__PURE__ */ jsxRuntime.jsx(
+  Placeholder.Placeholder,
+  {
+    resizeable: true,
+    style: { flexGrow: 1, flexShrink: 0, flexBasis: 0 }
+  }
+);
+const StackLayout = (props) => {
+  const ref = React.useRef(null);
+  const dispatch = LayoutProvider.useLayoutProviderDispatch();
+  const { loadState } = usePersistentState.usePersistentState();
+  const {
+    createNewChild: createNewChildProp,
+    id: idProp,
+    onTabSelectionChanged,
+    path,
+    ...restProps
+  } = props;
+  const { children } = props;
+  const id = vuuUtils.useId(idProp);
+  const [dispatchViewAction] = useViewActionDispatcher.useViewActionDispatcher(id, ref, path);
+  const createNewChildFromContext = LayoutProvider.useLayoutCreateNewChild();
+  const createNewChild = createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;
+  const handleTabSelection = (nextIdx) => {
+    if (path) {
+      dispatch({ type: "switch-tab", id, path, nextIdx });
+      onTabSelectionChanged?.(nextIdx);
+    }
+  };
+  const handleTabClose = React.useCallback(
+    (tabIndex) => {
+      if (Array.isArray(children)) {
+        const {
+          props: { "data-path": dataPath, path: path2 = dataPath }
+        } = children[tabIndex];
+        dispatch({ type: "remove", path: path2 });
+      }
+    },
+    [children, dispatch]
+  );
+  const handleTabAdd = React.useCallback(() => {
+    if (path) {
+      const tabIndex = React.Children.count(children);
+      const component = createNewChild(tabIndex);
+      dispatch({
+        type: "add",
+        path,
+        component
+      });
+    }
+  }, [children, createNewChild, dispatch, path]);
+  const handleMoveTab = React.useCallback(
+    (fromIndex, toIndex) => {
+      if (path) {
+        dispatch({
+          fromIndex,
+          toIndex,
+          path,
+          type: "move-child"
+        });
+      }
+    },
+    [dispatch, path]
+  );
+  const handleMouseDown = async (e, index) => {
+    let readyToDrag;
+    const preDragActivity = async () => new Promise((resolve) => {
+      console.log("preDragActivity: Ok, gonna release the drag");
+      readyToDrag = resolve;
+    });
+    const dragging = await dispatchViewAction(
+      { type: "mousedown", index, preDragActivity },
+      e
+    );
+    if (dragging) {
+      readyToDrag?.(void 0);
+    }
+  };
+  const handleTabEdit = (tabIndex, text) => {
+    dispatch({ type: "set-title", path: `${path}.${tabIndex}`, title: text });
+  };
+  const getTabLabel = (component, idx, existingLabels) => {
+    const { id: id2, title } = component.props;
+    return loadState(id2, "view-title") || title || // This will normally never be called as title is always assigned in layout model
+    layoutUtils.getDefaultTabLabel(component, idx, existingLabels);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Stack.Stack,
+    {
+      ...restProps,
+      id,
+      getTabLabel,
+      onMouseDown: handleMouseDown,
+      onMoveTab: handleMoveTab,
+      onAddTab: handleTabAdd,
+      onTabClose: handleTabClose,
+      onTabEdit: handleTabEdit,
+      onTabSelectionChanged: handleTabSelection,
+      ref
+    }
+  );
+};
+StackLayout.displayName = "Stack";
+ComponentRegistry.registerComponent("Stack", StackLayout, "container");
+
+exports.StackLayout = StackLayout;
+//# sourceMappingURL=StackLayout.js.map

package/cjs/stack/StackLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackLayout.js","sources":["../../src/stack/StackLayout.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport React, { useCallback, useRef } from \"react\";\nimport {\n  useLayoutCreateNewChild,\n  useLayoutProviderDispatch,\n} from \"../layout-provider\";\nimport { useViewActionDispatcher } from \"../layout-view-actions\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { Stack } from \"./Stack\";\nimport { StackProps, TabLabelFactory } from \"./stackTypes\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { Placeholder } from \"../placeholder\";\n\nimport \"./Stack.css\";\n\nconst defaultCreateNewChild = () => (\n  <Placeholder\n    resizeable\n    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}\n  />\n);\n\nexport const StackLayout = (props: StackProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const dispatch = useLayoutProviderDispatch();\n  const { loadState } = usePersistentState();\n\n  const {\n    createNewChild: createNewChildProp,\n    id: idProp,\n    onTabSelectionChanged,\n    path,\n    ...restProps\n  } = props;\n\n  const { children } = props;\n\n  const id = useId(idProp);\n\n  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);\n  const createNewChildFromContext = useLayoutCreateNewChild();\n  const createNewChild =\n    createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;\n\n  const handleTabSelection = (nextIdx: number) => {\n    if (path) {\n      dispatch({ type: \"switch-tab\", id, path, nextIdx });\n      onTabSelectionChanged?.(nextIdx);\n    }\n  };\n\n  const handleTabClose = useCallback(\n    (tabIndex: number) => {\n      if (Array.isArray(children)) {\n        const {\n          props: { \"data-path\": dataPath, path = dataPath },\n        } = children[tabIndex];\n        dispatch({ type: \"remove\", path });\n      }\n    },\n    [children, dispatch]\n  );\n\n  const handleTabAdd = useCallback(() => {\n    if (path) {\n      const tabIndex = React.Children.count(children);\n      const component = createNewChild(tabIndex);\n      dispatch({\n        type: \"add\",\n        path,\n        component,\n      });\n    }\n  }, [children, createNewChild, dispatch, path]);\n\n  const handleMoveTab = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      if (path) {\n        dispatch({\n          fromIndex,\n          toIndex,\n          path,\n          type: \"move-child\",\n        });\n      }\n    },\n    [dispatch, path]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleMouseDown = async (e: any, index: number) => {\n    let readyToDrag: undefined | ((value: unknown) => void);\n\n    const preDragActivity = async () =>\n      new Promise((resolve) => {\n        console.log(\"preDragActivity: Ok, gonna release the drag\");\n        readyToDrag = resolve;\n      });\n\n    const dragging = await dispatchViewAction(\n      { type: \"mousedown\", index, preDragActivity },\n      e\n    );\n\n    if (dragging) {\n      readyToDrag?.(undefined);\n    }\n  };\n\n  const handleTabEdit = (tabIndex: number, text: string) => {\n    dispatch({ type: \"set-title\", path: `${path}.${tabIndex}`, title: text });\n  };\n\n  const getTabLabel: TabLabelFactory = (component, idx, existingLabels) => {\n    const { id, title } = component.props;\n    return (\n      loadState(id, \"view-title\") ||\n      title ||\n      // This will normally never be called as title is always assigned in layout model\n      getDefaultTabLabel(component, idx, existingLabels)\n    );\n  };\n\n  return (\n    <Stack\n      {...restProps}\n      id={id}\n      getTabLabel={getTabLabel}\n      onMouseDown={handleMouseDown}\n      onMoveTab={handleMoveTab}\n      onAddTab={handleTabAdd}\n      onTabClose={handleTabClose}\n      onTabEdit={handleTabEdit}\n      onTabSelectionChanged={handleTabSelection}\n      ref={ref}\n    />\n  );\n};\nStackLayout.displayName = \"Stack\";\n\nregisterComponent(\"Stack\", StackLayout, \"container\");\n"],"names":["jsx","Placeholder","useRef","useLayoutProviderDispatch","usePersistentState","useId","useViewActionDispatcher","useLayoutCreateNewChild","useCallback","path","id","getDefaultTabLabel","Stack","registerComponent"],"mappings":"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"}