@vuu-ui/vuu-layout 0.8.32 → 0.8.34

package/esm/stack/Stack.js

@@ -0,0 +1,137 @@
+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 React, { forwardRef, useRef, useCallback } from 'react';
+import { getDefaultTabLabel } from '../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 = 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 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 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":["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\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":["path","id"],"mappings":";;;;;;;;;;;;;AAgBA,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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"}