@vuu-ui/vuu-layout 0.0.26

package/esm/responsive/useResizeObserver.js

@@ -0,0 +1,112 @@
+import { useRef, useCallback, useLayoutEffect } from '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 = useRef(dimensions);
+  const measure = useCallback((target) => {
+    const rect = target.getBoundingClientRect();
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(target, rect, dim);
+        return map;
+      },
+      {}
+    );
+  }, []);
+  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]);
+  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]);
+}
+
+export { HeightOnly, WidthHeight, WidthOnly, resizeObserver, useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/esm/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":[],"mappings":"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"}

package/esm/responsive/utils.js

@@ -0,0 +1,31 @@
+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;
+    },
+    [{}, {}]
+  );
+};
+
+export { extractResponsiveProps, isResponsiveAttribute };
+//# sourceMappingURL=utils.js.map

package/esm/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/esm/stack/Stack.css.js

@@ -0,0 +1,4 @@
+var stackCss = ".vuuTabs {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.vuuTabs-horizontal {\n  --vuu-tabs-border-style: none solid none none;\n  flex-direction: row;\n}\n\n.vuuTabs .Toolbar:before {\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  height: 1px;\n  content: '';\n  position: absolute;\n  background: var(--grey60);\n}\n\n.vuuTabs-tabPanel {\n  display: flex;\n  flex: 1; \n  flex-direction: column;\n}\n\n.vuuTabs-tabPanel > * {\n  flex: 1 1 auto;\n}\n\n.vuuTabHeader + .vuuView > .vuuHeader {\n  height: 0;\n  overflow: hidden;\n}\n\n.Layout-svg-button {\n  --spacing-medium: 5px;\n}\n";
+
+export { stackCss as default };
+//# sourceMappingURL=Stack.css.js.map

package/esm/stack/Stack.css.js.map

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

package/esm/stack/Stack.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tabstrip, Tab } from '@vuu-ui/vuu-ui-controls';
+import { useId } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import React, { forwardRef, useRef, useCallback } from 'react';
+import { getDefaultTabLabel } from '../layout-reducer/layoutUtils.js';
+import stackCss from './Stack.css.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 = forwardRef(function Stack2({
+  TabstripProps: TabstripProps2 = DefaultTabstripProps,
+  active = 0,
+  children,
+  className: classNameProp,
+  getTabIcon = getDefaultTabIcon,
+  getTabLabel = getDefaultTabLabel,
+  id: idProp,
+  keyBoardActivation = "manual",
+  // onMouseDown,
+  onAddTab,
+  onMoveTab,
+  onTabClose,
+  onTabEdit,
+  onTabSelectionChanged,
+  showTabs = "top",
+  style
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-stack",
+    css: stackCss,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const tabLabels = useRef([]);
+  const {
+    allowCloseTab,
+    allowRenameTab,
+    className: tabstripClassName
+  } = TabstripProps2;
+  const handleExitEditMode = 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__ */ jsx(
+      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__ */ jsxs(
+    "div",
+    {
+      className: cx(classBase, classNameProp, {
+        [`${classBase}-horizontal`]: isHorizontal
+      }),
+      style,
+      id,
+      ref,
+      children: [
+        showTabs ? /* @__PURE__ */ jsx(
+          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__ */ jsx(
+          "div",
+          {
+            "aria-labelledby": `${id}-${active}`,
+            className: `${classBase}-tabPanel`,
+            role: "tabpanel",
+            children: child
+          }
+        )
+      ]
+    }
+  );
+});
+Stack.displayName = "Stack";
+
+export { Stack };
+//# sourceMappingURL=Stack.js.map

package/esm/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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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 stackCss from \"./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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-stack\",\n    css: stackCss,\n    window: targetWindow,\n  });\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":["Stack","TabstripProps","child"],"mappings":"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"}

package/esm/stack/StackLayout.js

@@ -0,0 +1,120 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@vuu-ui/vuu-utils';
+import React, { useRef, useCallback } from 'react';
+import { useLayoutProviderDispatch, useLayoutCreateNewChild } from '../layout-provider/LayoutProvider.js';
+import '../layout-provider/LayoutProviderContext.js';
+import { useViewActionDispatcher } from '../layout-view-actions/useViewActionDispatcher.js';
+import '../layout-view-actions/ViewContext.js';
+import { registerComponent } from '../registry/ComponentRegistry.js';
+import { usePersistentState } from '../use-persistent-state.js';
+import { Stack } from './Stack.js';
+import { getDefaultTabLabel } from '../layout-reducer/layoutUtils.js';
+import { Placeholder } from '../placeholder/Placeholder.js';
+
+const defaultCreateNewChild = () => /* @__PURE__ */ jsx(
+  Placeholder,
+  {
+    resizeable: true,
+    style: { flexGrow: 1, flexShrink: 0, flexBasis: 0 }
+  }
+);
+const StackLayout = (props) => {
+  const ref = useRef(null);
+  const dispatch = useLayoutProviderDispatch();
+  const { loadState } = usePersistentState();
+  const {
+    createNewChild: createNewChildProp,
+    id: idProp,
+    onTabSelectionChanged,
+    path,
+    ...restProps
+  } = props;
+  const { children } = props;
+  const id = useId(idProp);
+  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
+  const createNewChildFromContext = useLayoutCreateNewChild();
+  const createNewChild = createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;
+  const handleTabSelection = (nextIdx) => {
+    if (path) {
+      dispatch({ type: "switch-tab", id, path, nextIdx });
+      onTabSelectionChanged?.(nextIdx);
+    }
+  };
+  const handleTabClose = 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 = useCallback(() => {
+    if (path) {
+      const tabIndex = React.Children.count(children);
+      const component = createNewChild(tabIndex);
+      dispatch({
+        type: "add",
+        path,
+        component
+      });
+    }
+  }, [children, createNewChild, dispatch, path]);
+  const handleMoveTab = 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
+    getDefaultTabLabel(component, idx, existingLabels);
+  };
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      ...restProps,
+      id,
+      getTabLabel,
+      onMouseDown: handleMouseDown,
+      onMoveTab: handleMoveTab,
+      onAddTab: handleTabAdd,
+      onTabClose: handleTabClose,
+      onTabEdit: handleTabEdit,
+      onTabSelectionChanged: handleTabSelection,
+      ref
+    }
+  );
+};
+StackLayout.displayName = "Stack";
+registerComponent("Stack", StackLayout, "container");
+
+export { StackLayout };
+//# sourceMappingURL=StackLayout.js.map

package/esm/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\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":["path","id"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,wBAAwB,sBAC5B,GAAA;AAAA,EAAC,WAAA;AAAA,EAAA;AAAA,IACC,UAAU,EAAA,IAAA;AAAA,IACV,OAAO,EAAE,QAAA,EAAU,GAAG,UAAY,EAAA,CAAA,EAAG,WAAW,CAAE,EAAA;AAAA,GAAA;AACpD,CAAA,CAAA;AAGW,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AAChD,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,kBAAmB,EAAA,CAAA;AAEzC,EAAM,MAAA;AAAA,IACJ,cAAgB,EAAA,kBAAA;AAAA,IAChB,EAAI,EAAA,MAAA;AAAA,IACJ,qBAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,kBAAkB,CAAA,GAAI,uBAAwB,CAAA,EAAA,EAAI,KAAK,IAAI,CAAA,CAAA;AAClE,EAAA,MAAM,4BAA4B,uBAAwB,EAAA,CAAA;AAC1D,EAAM,MAAA,cAAA,GACJ,sBAAsB,yBAA6B,IAAA,qBAAA,CAAA;AAErD,EAAM,MAAA,kBAAA,GAAqB,CAAC,OAAoB,KAAA;AAC9C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,QAAA,CAAS,EAAE,IAAM,EAAA,YAAA,EAAc,EAAI,EAAA,IAAA,EAAM,SAAS,CAAA,CAAA;AAClD,MAAA,qBAAA,GAAwB,OAAO,CAAA,CAAA;AAAA,KACjC;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,QAAqB,KAAA;AACpB,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,QAAM,MAAA;AAAA,UACJ,OAAO,EAAE,WAAA,EAAa,QAAU,EAAA,IAAA,EAAAA,QAAO,QAAS,EAAA;AAAA,SAClD,GAAI,SAAS,QAAQ,CAAA,CAAA;AACrB,QAAA,QAAA,CAAS,EAAE,IAAA,EAAM,QAAU,EAAA,IAAA,EAAAA,OAAM,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,CAAC,UAAU,QAAQ,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,MAAM,QAAW,GAAA,KAAA,CAAM,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAC9C,MAAM,MAAA,SAAA,GAAY,eAAe,QAAQ,CAAA,CAAA;AACzC,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,IAAA;AAAA,QACA,SAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,KACC,CAAC,QAAA,EAAU,cAAgB,EAAA,QAAA,EAAU,IAAI,CAAC,CAAA,CAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,WAAmB,OAAoB,KAAA;AACtC,MAAA,IAAI,IAAM,EAAA;AACR,QAAS,QAAA,CAAA;AAAA,UACP,SAAA;AAAA,UACA,OAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAM,EAAA,YAAA;AAAA,SACP,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,eAAA,GAAkB,OAAO,CAAA,EAAQ,KAAkB,KAAA;AACvD,IAAI,IAAA,WAAA,CAAA;AAEJ,IAAA,MAAM,eAAkB,GAAA,YACtB,IAAI,OAAA,CAAQ,CAAC,OAAY,KAAA;AACvB,MAAA,OAAA,CAAQ,IAAI,6CAA6C,CAAA,CAAA;AACzD,MAAc,WAAA,GAAA,OAAA,CAAA;AAAA,KACf,CAAA,CAAA;AAEH,IAAA,MAAM,WAAW,MAAM,kBAAA;AAAA,MACrB,EAAE,IAAA,EAAM,WAAa,EAAA,KAAA,EAAO,eAAgB,EAAA;AAAA,MAC5C,CAAA;AAAA,KACF,CAAA;AAEA,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,WAAA,GAAc,KAAS,CAAA,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,QAAA,EAAkB,IAAiB,KAAA;AACxD,IAAS,QAAA,CAAA,EAAE,IAAM,EAAA,WAAA,EAAa,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAA,EAAI,KAAO,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GAC1E,CAAA;AAEA,EAAA,MAAM,WAA+B,GAAA,CAAC,SAAW,EAAA,GAAA,EAAK,cAAmB,KAAA;AACvE,IAAA,MAAM,EAAE,EAAA,EAAAC,GAAI,EAAA,KAAA,KAAU,SAAU,CAAA,KAAA,CAAA;AAChC,IACE,OAAA,SAAA,CAAUA,GAAI,EAAA,YAAY,CAC1B,IAAA,KAAA;AAAA,IAEA,kBAAA,CAAmB,SAAW,EAAA,GAAA,EAAK,cAAc,CAAA,CAAA;AAAA,GAErD,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,EAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAa,EAAA,eAAA;AAAA,MACb,SAAW,EAAA,aAAA;AAAA,MACX,QAAU,EAAA,YAAA;AAAA,MACV,UAAY,EAAA,cAAA;AAAA,MACZ,SAAW,EAAA,aAAA;AAAA,MACX,qBAAuB,EAAA,kBAAA;AAAA,MACvB,GAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AACA,WAAA,CAAY,WAAc,GAAA,OAAA,CAAA;AAE1B,iBAAkB,CAAA,OAAA,EAAS,aAAa,WAAW,CAAA;;;;"}

package/esm/use-persistent-state.js

@@ -0,0 +1,104 @@
+import { useCallback } from 'react';
+
+const persistentState = /* @__PURE__ */ new Map();
+const sessionState = /* @__PURE__ */ new Map();
+const getPersistentState = (id) => persistentState.get(id);
+const hasPersistentState = (id) => persistentState.has(id);
+const setPersistentState = (id, value) => persistentState.set(id, value);
+const usePersistentState = () => {
+  const loadSessionState = useCallback((id, key) => {
+    const state = sessionState.get(id);
+    if (state) {
+      if (key !== void 0 && state[key] !== void 0) {
+        return state[key];
+      }
+      if (key !== void 0) {
+        return void 0;
+      }
+      return state;
+    }
+  }, []);
+  const saveSessionState = useCallback((id, key, data) => {
+    if (key === void 0) {
+      sessionState.set(id, data);
+    } else if (sessionState.has(id)) {
+      const state = sessionState.get(id);
+      sessionState.set(id, {
+        ...state,
+        [key]: data
+      });
+    } else {
+      sessionState.set(id, { [key]: data });
+    }
+  }, []);
+  const purgeSessionState = useCallback((id, key) => {
+    if (sessionState.has(id)) {
+      if (key === void 0) {
+        sessionState.delete(id);
+      } else {
+        const state = sessionState.get(id);
+        if (state[key]) {
+          const { [key]: _doomedState, ...rest } = sessionState.get(id);
+          if (Object.keys(rest).length > 0) {
+            sessionState.set(id, rest);
+          } else {
+            sessionState.delete(id);
+          }
+        }
+      }
+    }
+  }, []);
+  const loadState = useCallback((id, key) => {
+    const state = persistentState.get(id);
+    if (state) {
+      if (key !== void 0) {
+        return state[key];
+      }
+      return state;
+    }
+  }, []);
+  const saveState = useCallback(
+    (id, key, data) => {
+      if (key === void 0) {
+        persistentState.set(id, data);
+      } else if (persistentState.has(id)) {
+        const state = persistentState.get(id);
+        persistentState.set(id, {
+          ...state,
+          [key]: data
+        });
+      } else {
+        persistentState.set(id, { [key]: data });
+      }
+    },
+    []
+  );
+  const purgeState = useCallback((id, key) => {
+    if (persistentState.has(id)) {
+      if (key === void 0) {
+        persistentState.delete(id);
+      } else {
+        const state = persistentState.get(id);
+        if (state[key]) {
+          const { [key]: _doomedState, ...rest } = persistentState.get(id);
+          if (Object.keys(rest).length > 0) {
+            persistentState.set(id, rest);
+          } else {
+            persistentState.delete(id);
+          }
+        }
+      }
+    }
+  }, []);
+  return {
+    loadSessionState,
+    loadState,
+    saveSessionState,
+    saveState,
+    purgeState,
+    purgeSessionState
+  };
+};
+
+export { getPersistentState, hasPersistentState, setPersistentState, usePersistentState };
+//# sourceMappingURL=use-persistent-state.js.map

package/esm/use-persistent-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-persistent-state.js","sources":["../src/use-persistent-state.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useCallback } from \"react\";\n\n/**\n * Persistent state is stored at module level (i.e singleton-style)\n * It is kept at this level, rather than passed to the target component(s)\n * so that it endures across the unmount/mount lifecycle journey of any\n * individual component. e.g when switching between tabs, components are\n * unmounted and mounted. They re-request their persistent state on re-mount.\n * Persistent state is populated as the serialized layout schema is processed\n * (see layoutFromJSON).\n */\nconst persistentState = new Map<string, any>();\nconst sessionState = new Map<string, any>();\n\nexport const getPersistentState = (id: string) => persistentState.get(id);\nexport const hasPersistentState = (id: string) => persistentState.has(id);\nexport const setPersistentState = (id: string, value: any) =>\n  persistentState.set(id, value);\n\nexport const usePersistentState = () => {\n  const loadSessionState = useCallback((id, key) => {\n    const state = sessionState.get(id);\n    if (state) {\n      if (key !== undefined && state[key] !== undefined) {\n        return state[key];\n      }\n      if (key !== undefined) {\n        return undefined;\n      }\n      return state;\n    }\n  }, []);\n\n  const saveSessionState = useCallback((id, key, data) => {\n    if (key === undefined) {\n      sessionState.set(id, data);\n    } else if (sessionState.has(id)) {\n      const state = sessionState.get(id);\n      sessionState.set(id, {\n        ...state,\n        [key]: data,\n      });\n    } else {\n      sessionState.set(id, { [key]: data });\n    }\n  }, []);\n\n  const purgeSessionState = useCallback((id: string, key?: string) => {\n    if (sessionState.has(id)) {\n      if (key === undefined) {\n        sessionState.delete(id);\n      } else {\n        const state = sessionState.get(id);\n        if (state[key]) {\n          const { [key]: _doomedState, ...rest } = sessionState.get(id);\n          if (Object.keys(rest).length > 0) {\n            sessionState.set(id, rest);\n          } else {\n            sessionState.delete(id);\n          }\n        }\n      }\n    }\n  }, []);\n\n  const loadState = useCallback((id: string, key?: string) => {\n    const state = persistentState.get(id);\n    if (state) {\n      if (key !== undefined) {\n        return state[key];\n      }\n      return state;\n    }\n  }, []);\n\n  const saveState = useCallback(\n    (id: string, key: string | undefined, data: unknown) => {\n      if (key === undefined) {\n        persistentState.set(id, data);\n      } else if (persistentState.has(id)) {\n        const state = persistentState.get(id);\n        persistentState.set(id, {\n          ...state,\n          [key]: data,\n        });\n      } else {\n        persistentState.set(id, { [key]: data });\n      }\n    },\n    []\n  );\n\n  const purgeState = useCallback((id: string, key?: string) => {\n    if (persistentState.has(id)) {\n      if (key === undefined) {\n        persistentState.delete(id);\n      } else {\n        const state = persistentState.get(id);\n        if (state[key]) {\n          const { [key]: _doomedState, ...rest } = persistentState.get(id);\n          if (Object.keys(rest).length > 0) {\n            persistentState.set(id, rest);\n          } else {\n            persistentState.delete(id);\n          }\n        }\n      }\n    }\n  }, []);\n\n  return {\n    loadSessionState,\n    loadState,\n    saveSessionState,\n    saveState,\n    purgeState,\n    purgeSessionState,\n  };\n};\n"],"names":[],"mappings":"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"}