@vuu-ui/vuu-layout 2.1.17 → 2.1.19-beta.1

package/esm/responsive/utils.js

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sources":["../../../../packages/vuu-layout/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;AAEpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA;AAClB,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,QACpC,KAAA,oBAAA,CAAqB,QAAQ,CAAK,IAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA;AACR,CAAA;AAEA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,iBAAA,CAAkB,KAAK,CAAK,IAAA,MAAA;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;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;AAE1F,QAAA,YAAA,CAAa,QAAQ,CAAI,GAAA,KAAA;AACzB,QAAA,IAAA,CAAK,QAAQ,CAAI,GAAA,KAAA,CAAA;AAAA;AAEnB,MAAO,OAAA,MAAA;AAAA,KACT;AAAA,IACA,CAAC,EAAI,EAAA,EAAE;AAAA,GACT;AACF;;;;"}

package/esm/stack/Stack.css.js

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

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

package/esm/stack/Stack.js

@@ -1,148 +0,0 @@
-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 tabLabelsRef = 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;
-  };
-  tabLabelsRef.current.length = 0;
-  const renderTabs = () => getChildElements(children).map((child2, idx) => {
-    const {
-      closeable = allowCloseTab,
-      id: childId = `${id}-${idx}`,
-      "data-tab-location": tabLocation
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } = child2.props;
-    const label = getTabLabel(child2, idx, tabLabelsRef.current);
-    tabLabelsRef.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,
-          {
-            "aria-label": "data tabs",
-            ...TabstripProps2,
-            activeTabIndex: TabstripProps2?.activeTabIndex ?? (child === null ? -1 : active),
-            allowDragDrop: TabstripProps2.allowDragDrop !== false,
-            animateSelectionThumb: true,
-            className: cx("vuuTabHeader", tabstripClassName),
-            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

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.js","sources":["../../../../packages/vuu-layout/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 tabLabelsRef = 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  // The list of existing Tab Labels is required only when assigning a default label\n  // to a new Tab. We rebuild on each render\n  tabLabelsRef.current.length = 0;\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        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      } = child.props as any;\n      const label = getTabLabel(child, idx, tabLabelsRef.current);\n      tabLabelsRef.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          aria-label=\"data tabs\"\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          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

@@ -1,114 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { registerComponent, 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 { getDefaultTabLabel } from '../layout-reducer/layoutUtils.js';
-import { useViewActionDispatcher } from '../layout-view-actions/useViewActionDispatcher.js';
-import { useViewBroadcastChannel } from '../layout-view/useViewBroadcastChannel.js';
-import { usePersistentState } from '../use-persistent-state.js';
-import { Stack } from './Stack.js';
-
-const StackLayout = (props) => {
-  const rootRef = 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 sendMessage = useViewBroadcastChannel();
-  const [dispatchViewAction] = useViewActionDispatcher(id, rootRef, path);
-  const createNewChildFromContext = useLayoutCreateNewChild();
-  const createNewChild = createNewChildProp ?? createNewChildFromContext;
-  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];
-        sendMessage({ type: "layout-closed", path: path2 });
-        setTimeout(() => {
-          dispatch({ type: "remove", path: path2 });
-        }, 100);
-      }
-    },
-    [children, dispatch, sendMessage]
-  );
-  const handleTabAdd = useCallback(() => {
-    if (path) {
-      const tabIndex = React.Children.count(children);
-      dispatch({
-        type: "add",
-        path,
-        component: createNewChild(tabIndex)
-      });
-    }
-  }, [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: rootRef
-    }
-  );
-};
-StackLayout.displayName = "Stack";
-registerComponent("Stack", StackLayout, "container");
-
-export { StackLayout };
-//# sourceMappingURL=StackLayout.js.map

package/esm/stack/StackLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackLayout.js","sources":["../../../../packages/vuu-layout/src/stack/StackLayout.tsx"],"sourcesContent":["import { registerComponent, useId } from \"@vuu-ui/vuu-utils\";\nimport React, { MouseEvent, useCallback, useRef } from \"react\";\nimport {\n  useLayoutCreateNewChild,\n  useLayoutProviderDispatch,\n} from \"../layout-provider\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { useViewActionDispatcher } from \"../layout-view-actions/useViewActionDispatcher\";\nimport { useViewBroadcastChannel } from \"../layout-view/useViewBroadcastChannel\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { Stack } from \"./Stack\";\nimport { StackProps, TabLabelFactory } from \"./stackTypes\";\n\nexport const StackLayout = (props: StackProps) => {\n  const rootRef = 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 sendMessage = useViewBroadcastChannel();\n\n  const [dispatchViewAction] = useViewActionDispatcher(id, rootRef, path);\n  const createNewChildFromContext = useLayoutCreateNewChild();\n  const createNewChild = createNewChildProp ?? createNewChildFromContext;\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        sendMessage({ type: \"layout-closed\", path });\n        setTimeout(() => {\n          dispatch({ type: \"remove\", path });\n        }, 100);\n      }\n    },\n    [children, dispatch, sendMessage],\n  );\n\n  const handleTabAdd = useCallback(() => {\n    if (path) {\n      const tabIndex = React.Children.count(children);\n      dispatch({\n        type: \"add\",\n        path,\n        component: createNewChild(tabIndex),\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: MouseEvent, 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    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const { id, title } = component.props as any;\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={rootRef}\n    />\n  );\n};\nStackLayout.displayName = \"Stack\";\n\nregisterComponent(\"Stack\", StackLayout, \"container\");\n"],"names":["path","id"],"mappings":"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"}

package/esm/use-persistent-state.js

@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-
-const persistentState = /* @__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 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 {
-    loadState,
-    saveState,
-    purgeState
-  };
-};
-
-export { getPersistentState, hasPersistentState, setPersistentState, usePersistentState };
-//# sourceMappingURL=use-persistent-state.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-persistent-state.js","sources":["../../../packages/vuu-layout/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>();\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 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    loadState,\n    saveState,\n    purgeState,\n  };\n};\n"],"names":[],"mappings":";;AAYA,MAAM,eAAA,uBAAsB,GAAiB,EAAA;AAEtC,MAAM,kBAAqB,GAAA,CAAC,EAAe,KAAA,eAAA,CAAgB,IAAI,EAAE;AACjE,MAAM,kBAAqB,GAAA,CAAC,EAAe,KAAA,eAAA,CAAgB,IAAI,EAAE;AACjE,MAAM,qBAAqB,CAAC,EAAA,EAAY,UAC7C,eAAgB,CAAA,GAAA,CAAI,IAAI,KAAK;AAExB,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,SAAY,GAAA,WAAA,CAAY,CAAC,EAAA,EAAY,GAAiB,KAAA;AAC1D,IAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,GAAA,CAAI,EAAE,CAAA;AACpC,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,IAAI,QAAQ,KAAW,CAAA,EAAA;AACrB,QAAA,OAAO,MAAM,GAAG,CAAA;AAAA;AAElB,MAAO,OAAA,KAAA;AAAA;AACT,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,EAAY,EAAA,GAAA,EAAyB,IAAkB,KAAA;AACtD,MAAA,IAAI,QAAQ,KAAW,CAAA,EAAA;AACrB,QAAgB,eAAA,CAAA,GAAA,CAAI,IAAI,IAAI,CAAA;AAAA,OACnB,MAAA,IAAA,eAAA,CAAgB,GAAI,CAAA,EAAE,CAAG,EAAA;AAClC,QAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,GAAA,CAAI,EAAE,CAAA;AACpC,QAAA,eAAA,CAAgB,IAAI,EAAI,EAAA;AAAA,UACtB,GAAG,KAAA;AAAA,UACH,CAAC,GAAG,GAAG;AAAA,SACR,CAAA;AAAA,OACI,MAAA;AACL,QAAA,eAAA,CAAgB,IAAI,EAAI,EAAA,EAAE,CAAC,GAAG,GAAG,MAAM,CAAA;AAAA;AACzC,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA,CAAY,CAAC,EAAA,EAAY,GAAiB,KAAA;AAC3D,IAAI,IAAA,eAAA,CAAgB,GAAI,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,IAAI,QAAQ,KAAW,CAAA,EAAA;AACrB,QAAA,eAAA,CAAgB,OAAO,EAAE,CAAA;AAAA,OACpB,MAAA;AACL,QAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,GAAA,CAAI,EAAE,CAAA;AACpC,QAAI,IAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AACd,UAAM,MAAA,EAAE,CAAC,GAAG,GAAG,YAAA,EAAc,GAAG,IAAK,EAAA,GAAI,eAAgB,CAAA,GAAA,CAAI,EAAE,CAAA;AAC/D,UAAA,IAAI,MAAO,CAAA,IAAA,CAAK,IAAI,CAAA,CAAE,SAAS,CAAG,EAAA;AAChC,YAAgB,eAAA,CAAA,GAAA,CAAI,IAAI,IAAI,CAAA;AAAA,WACvB,MAAA;AACL,YAAA,eAAA,CAAgB,OAAO,EAAE,CAAA;AAAA;AAC3B;AACF;AACF;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}