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

package/esm/layout-view/useViewResize.js

@@ -1,40 +0,0 @@
-import { useResizeObserver, WidthHeight } from '../responsive/useResizeObserver.js';
-import { useRef, useCallback } from 'react';
-
-const NO_MEASUREMENT = [];
-const useViewResize = ({
-  mainRef,
-  resize = "responsive",
-  rootRef
-}) => {
-  const deferResize = resize === "defer";
-  const mainSize = useRef({});
-  const resizeHandle = useRef(void 0);
-  const setMainSize = useCallback(() => {
-    if (mainRef.current) {
-      mainRef.current.style.height = mainSize.current.height + "px";
-      mainRef.current.style.width = mainSize.current.width + "px";
-    }
-    resizeHandle.current = void 0;
-  }, [mainRef]);
-  const onResize = useCallback(
-    ({ height, width }) => {
-      mainSize.current.height = height;
-      mainSize.current.width = width;
-      if (resizeHandle.current !== null) {
-        clearTimeout(resizeHandle.current);
-      }
-      resizeHandle.current = window.setTimeout(setMainSize, 40);
-    },
-    [setMainSize]
-  );
-  useResizeObserver(
-    rootRef,
-    deferResize ? WidthHeight : NO_MEASUREMENT,
-    onResize,
-    deferResize
-  );
-};
-
-export { useViewResize };
-//# sourceMappingURL=useViewResize.js.map

package/esm/layout-view/useViewResize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useViewResize.js","sources":["../../../../packages/vuu-layout/src/layout-view/useViewResize.ts"],"sourcesContent":["import { ResizeHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { useResizeObserver, WidthHeight } from \"../responsive\";\nimport { RefObject, useCallback, useRef } from \"react\";\n\nconst NO_MEASUREMENT: string[] = [];\n\ntype size = {\n  height?: number;\n  width?: number;\n};\n\nexport interface ViewResizeHookProps {\n  mainRef: RefObject<HTMLDivElement | null>;\n  resize?: \"defer\" | \"responsive\";\n  rootRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useViewResize = ({\n  mainRef,\n  resize = \"responsive\",\n  rootRef,\n}: ViewResizeHookProps) => {\n  const deferResize = resize === \"defer\";\n\n  const mainSize = useRef<size>({});\n  const resizeHandle = useRef<number>(undefined);\n\n  const setMainSize = useCallback(() => {\n    if (mainRef.current) {\n      mainRef.current.style.height = mainSize.current.height + \"px\";\n      mainRef.current.style.width = mainSize.current.width + \"px\";\n    }\n    resizeHandle.current = undefined;\n  }, [mainRef]);\n\n  const onResize = useCallback<ResizeHandler>(\n    ({ height, width }) => {\n      mainSize.current.height = height;\n      mainSize.current.width = width;\n      if (resizeHandle.current !== null) {\n        clearTimeout(resizeHandle.current);\n      }\n      resizeHandle.current = window.setTimeout(setMainSize, 40);\n    },\n    [setMainSize],\n  );\n\n  useResizeObserver(\n    rootRef,\n    deferResize ? WidthHeight : NO_MEASUREMENT,\n    onResize,\n    deferResize,\n  );\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,iBAA2B,EAAC;AAa3B,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,MAAS,GAAA,YAAA;AAAA,EACT;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,cAAc,MAAW,KAAA,OAAA;AAE/B,EAAM,MAAA,QAAA,GAAW,MAAa,CAAA,EAAE,CAAA;AAChC,EAAM,MAAA,YAAA,GAAe,OAAe,KAAS,CAAA,CAAA;AAE7C,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,IAAA;AACzD,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,KAAQ,GAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,IAAA;AAAA;AAEzD,IAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA;AAAA,GACzB,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACrB,MAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA;AAC1B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,KAAA;AACzB,MAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA;AAEnC,MAAA,YAAA,CAAa,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,EAAE,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,iBAAA;AAAA,IACE,OAAA;AAAA,IACA,cAAc,WAAc,GAAA,cAAA;AAAA,IAC5B,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/layout-view-actions/ViewContext.js

@@ -1,12 +0,0 @@
-import React, { useContext } from 'react';
-
-const NO_CONTEXT = { dispatch: null };
-const ViewContext = React.createContext(NO_CONTEXT);
-const useViewDispatch = () => {
-  const context = useContext(ViewContext);
-  return context?.dispatch ?? null;
-};
-const useViewContext = () => useContext(ViewContext);
-
-export { ViewContext, useViewContext, useViewDispatch };
-//# sourceMappingURL=ViewContext.js.map

package/esm/layout-view-actions/ViewContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewContext.js","sources":["../../../../packages/vuu-layout/src/layout-view-actions/ViewContext.ts"],"sourcesContent":["import React, { SyntheticEvent, useContext } from \"react\";\nimport { ViewAction } from \"../layout-view/viewTypes\";\n\nexport type QueryResponse = { [key: string]: unknown };\n\nexport type ConfigChangeHandler = (config: {\n  [key: string]: unknown;\n  type: string;\n}) => void;\n\nexport type ViewDispatch = <Action extends ViewAction = ViewAction>(\n  action: Action,\n  evt?: SyntheticEvent,\n) => Promise<boolean | QueryResponse | void>;\n\n/**\n * This API is available to any Feature hosted within Vuu (as all Features are wrapped\n * with View component). It offers metadata about the View as well as access to the\n * Vuu persistencew API;\n */\nexport interface ViewContextAPI {\n  /**\n   * dispatcher for View actions. These are a subset of LayoutActions, specifically for\n   * View manipulation\n   */\n  dispatch?: ViewDispatch | null;\n  id?: string;\n  load?: <T = unknown>(key?: string) => T;\n  onConfigChange?: ConfigChangeHandler;\n  path?: string;\n  purge?: (key: string) => void;\n  save?: (state: unknown, key: string) => void;\n  setComponentProps: (props: { [key: string]: unknown }) => void;\n  title?: string;\n}\n\nconst NO_CONTEXT = { dispatch: null } as ViewContextAPI;\nexport const ViewContext = React.createContext<ViewContextAPI>(NO_CONTEXT);\n\nexport const useViewDispatch = () => {\n  const context = useContext(ViewContext);\n  return context?.dispatch ?? null;\n};\n\nexport const useViewContext = () => useContext(ViewContext);\n"],"names":[],"mappings":";;AAoCA,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,IAAK,EAAA;AACvB,MAAA,WAAA,GAAc,KAAM,CAAA,aAAA,CAA8B,UAAU;AAElE,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,OAAA,GAAU,WAAW,WAAW,CAAA;AACtC,EAAA,OAAO,SAAS,QAAY,IAAA,IAAA;AAC9B;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,CAAW,WAAW;;;;"}

package/esm/layout-view-actions/useViewActionDispatcher.js

@@ -1,110 +0,0 @@
-import { useSessionDataSource } from '@vuu-ui/vuu-data-react';
-import { useCallback } from 'react';
-import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
-import { useViewBroadcastChannel } from '../layout-view/useViewBroadcastChannel.js';
-import { usePersistentState } from '../use-persistent-state.js';
-import { useViewContributions } from './useViewContributions.js';
-
-const useViewActionDispatcher = (id, rootRef, viewPath, dropTargets) => {
-  const { purgeState } = usePersistentState();
-  const { clearDataSource: clearDataSourceFromSessionState } = useSessionDataSource();
-  const { clearContributions, contributions, updateContributions } = useViewContributions({ sessionKey: id });
-  const dispatchLayoutAction = useLayoutProviderDispatch();
-  const unsubscribeAndClearState = useCallback(() => {
-    clearDataSourceFromSessionState(id, true);
-    purgeState(id);
-  }, [clearDataSourceFromSessionState, id, purgeState]);
-  const handleRemove = useCallback(() => {
-    unsubscribeAndClearState();
-    dispatchLayoutAction({ type: "remove", path: viewPath });
-  }, [unsubscribeAndClearState, dispatchLayoutAction, viewPath]);
-  const handleMouseDown = useCallback(
-    async (evt, index, preDragActivity) => {
-      evt.stopPropagation();
-      const dragRect = rootRef.current?.getBoundingClientRect();
-      return new Promise((resolve, reject) => {
-        dispatchLayoutAction({
-          type: "drag-start",
-          evt,
-          path: index === void 0 ? viewPath : `${viewPath}.${index}`,
-          dragRect,
-          preDragActivity,
-          dropTargets,
-          resolveDragStart: resolve,
-          rejectDragStart: reject
-        });
-      });
-    },
-    [rootRef, dispatchLayoutAction, viewPath, dropTargets]
-  );
-  const handleMessageReceived = useCallback(
-    (message) => {
-      switch (message.type) {
-        case "highlight-on":
-          rootRef?.current?.classList.add("vuuHighlighted");
-          break;
-        case "highlight-off":
-          rootRef?.current?.classList.remove("vuuHighlighted");
-          break;
-        case "layout-closed":
-          unsubscribeAndClearState();
-          break;
-        default:
-          console.log(`received ${message.type} message`);
-      }
-    },
-    [rootRef, unsubscribeAndClearState]
-  );
-  const sendMessage = useViewBroadcastChannel(
-    id,
-    viewPath,
-    handleMessageReceived
-  );
-  const dispatchAction = useCallback(
-    async (action, evt) => {
-      const { type } = action;
-      switch (type) {
-        case "collapse":
-        case "expand":
-          return dispatchLayoutAction({ type, path: action.path ?? viewPath });
-        case "remove":
-          return handleRemove();
-        case "mousedown":
-          return handleMouseDown(
-            evt,
-            action.index,
-            action.preDragActivity
-          );
-        case "add-toolbar-contribution":
-          return updateContributions(action.location, action.content);
-        case "remove-toolbar-contribution":
-          return clearContributions();
-        case "query":
-          return dispatchLayoutAction({
-            type,
-            path: action.path,
-            query: action.query
-          });
-        case "broadcast-message":
-          sendMessage(action.message);
-          break;
-        default: {
-          return void 0;
-        }
-      }
-    },
-    [
-      dispatchLayoutAction,
-      viewPath,
-      handleRemove,
-      handleMouseDown,
-      updateContributions,
-      clearContributions,
-      sendMessage
-    ]
-  );
-  return [dispatchAction, contributions];
-};
-
-export { useViewActionDispatcher };
-//# sourceMappingURL=useViewActionDispatcher.js.map

package/esm/layout-view-actions/useViewActionDispatcher.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useViewActionDispatcher.js","sources":["../../../../packages/vuu-layout/src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { useSessionDataSource } from \"@vuu-ui/vuu-data-react\";\nimport { RefObject, SyntheticEvent, useCallback } from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport {\n  BroadcastMessageHandler,\n  useViewBroadcastChannel,\n} from \"../layout-view/useViewBroadcastChannel\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { useViewContributions } from \"./useViewContributions\";\nimport { QueryResponse, ViewDispatch } from \"./ViewContext\";\nimport { Contribution, ViewAction } from \"../layout-view/viewTypes\";\n\nexport const useViewActionDispatcher = (\n  id: string,\n  rootRef: RefObject<HTMLDivElement | null>,\n  viewPath?: string,\n  dropTargets?: string[],\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { purgeState } = usePersistentState();\n\n  const { clearDataSource: clearDataSourceFromSessionState } =\n    useSessionDataSource();\n\n  const { clearContributions, contributions, updateContributions } =\n    useViewContributions({ sessionKey: id });\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n\n  // This assumes datasource has been stored in session state\n  // we should extend to accommodate multiple dataSources\n  const unsubscribeAndClearState = useCallback(() => {\n    clearDataSourceFromSessionState(id, true);\n    purgeState(id);\n  }, [clearDataSourceFromSessionState, id, purgeState]);\n\n  const handleRemove = useCallback(() => {\n    unsubscribeAndClearState();\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [unsubscribeAndClearState, dispatchLayoutAction, viewPath]);\n\n  const handleMouseDown = useCallback(\n    async (\n      evt: MouseEvent,\n      index: number,\n      preDragActivity: unknown,\n    ): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = rootRef.current?.getBoundingClientRect();\n      return new Promise((resolve, reject) => {\n        dispatchLayoutAction({\n          type: \"drag-start\",\n          evt,\n          path: index === undefined ? viewPath : `${viewPath}.${index}`,\n          dragRect,\n          preDragActivity,\n          dropTargets,\n          resolveDragStart: resolve,\n          rejectDragStart: reject,\n        } as DragStartAction);\n      });\n    },\n    [rootRef, dispatchLayoutAction, viewPath, dropTargets],\n  );\n\n  const handleMessageReceived = useCallback<BroadcastMessageHandler>(\n    (message) => {\n      switch (message.type) {\n        case \"highlight-on\":\n          rootRef?.current?.classList.add(\"vuuHighlighted\");\n          break;\n        case \"highlight-off\":\n          rootRef?.current?.classList.remove(\"vuuHighlighted\");\n          break;\n        case \"layout-closed\":\n          unsubscribeAndClearState();\n          break;\n        default:\n          console.log(`received ${message.type} message`);\n      }\n    },\n    [rootRef, unsubscribeAndClearState],\n  );\n\n  const sendMessage = useViewBroadcastChannel(\n    id,\n    viewPath,\n    handleMessageReceived,\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: MouseEvent | SyntheticEvent,\n    ): Promise<boolean | QueryResponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"collapse\":\n        case \"expand\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          // TODO fix types\n          return handleMouseDown(\n            evt as MouseEvent,\n            action.index as number,\n            action.preDragActivity,\n          );\n        case \"add-toolbar-contribution\":\n          return updateContributions(action.location, action.content);\n        case \"remove-toolbar-contribution\":\n          return clearContributions();\n        case \"query\":\n          return dispatchLayoutAction({\n            type,\n            path: action.path,\n            query: action.query,\n          });\n        case \"broadcast-message\":\n          sendMessage(action.message);\n          break;\n\n        default: {\n          return undefined;\n        }\n      }\n    },\n    [\n      dispatchLayoutAction,\n      viewPath,\n      handleRemove,\n      handleMouseDown,\n      updateContributions,\n      clearContributions,\n      sendMessage,\n    ],\n  );\n\n  return [dispatchAction, contributions];\n};\n"],"names":[],"mappings":"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"}

package/esm/layout-view-actions/useViewContributions.js

@@ -1,31 +0,0 @@
-import { useState, useCallback } from 'react';
-
-const sessionState = /* @__PURE__ */ new Map();
-const EMPTY_ARRAY = [];
-const useViewContributions = ({
-  sessionKey
-}) => {
-  const [contributions, setContributions] = useState(EMPTY_ARRAY);
-  const updateContributions = useCallback(
-    (location, content) => {
-      const updatedContributions = contributions.concat([
-        { location, content }
-      ]);
-      sessionState.set(sessionKey, updatedContributions);
-      setContributions(updatedContributions);
-    },
-    [contributions, sessionKey]
-  );
-  const clearContributions = useCallback(() => {
-    sessionState.delete(sessionKey);
-    setContributions([]);
-  }, [sessionKey]);
-  return {
-    clearContributions,
-    contributions,
-    updateContributions
-  };
-};
-
-export { useViewContributions };
-//# sourceMappingURL=useViewContributions.js.map

package/esm/layout-view-actions/useViewContributions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useViewContributions.js","sources":["../../../../packages/vuu-layout/src/layout-view-actions/useViewContributions.ts"],"sourcesContent":["import { ReactElement, useCallback, useState } from \"react\";\nimport type {\n  Contribution,\n  ContributionLocation,\n} from \"../layout-view/viewTypes\";\n\nconst sessionState = new Map<string, Contribution[]>();\n\nconst EMPTY_ARRAY: Contribution[] = [];\n\nexport const useViewContributions = ({\n  sessionKey,\n}: {\n  sessionKey: string;\n}) => {\n  const [contributions, setContributions] =\n    useState<Contribution[]>(EMPTY_ARRAY);\n\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      sessionState.set(sessionKey, updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, sessionKey],\n  );\n\n  const clearContributions = useCallback(() => {\n    sessionState.delete(sessionKey);\n    setContributions([]);\n  }, [sessionKey]);\n\n  return {\n    clearContributions,\n    contributions,\n    updateContributions,\n  };\n};\n"],"names":[],"mappings":";;AAMA,MAAM,YAAA,uBAAmB,GAA4B,EAAA;AAErD,MAAM,cAA8B,EAAC;AAE9B,MAAM,uBAAuB,CAAC;AAAA,EACnC;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GACpC,SAAyB,WAAW,CAAA;AAEtC,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,UAAgC,OAA0B,KAAA;AACzD,MAAM,MAAA,oBAAA,GAAuB,cAAc,MAAO,CAAA;AAAA,QAChD,EAAE,UAAU,OAAQ;AAAA,OACrB,CAAA;AACD,MAAa,YAAA,CAAA,GAAA,CAAI,YAAY,oBAAoB,CAAA;AACjD,MAAA,gBAAA,CAAiB,oBAAoB,CAAA;AAAA,KACvC;AAAA,IACA,CAAC,eAAe,UAAU;AAAA,GAC5B;AAEA,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAA,YAAA,CAAa,OAAO,UAAU,CAAA;AAC9B,IAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,GACrB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/palette/Palette.css.js

@@ -1,4 +0,0 @@
-var paletteCss = ".vuuPalette {\n  --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n  align-items: center;\n  display: flex;\n}\n\n.vuuPaletteItem {\n  --vuu-icon-color: var(--salt-content-secondary-foreground);\n  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n  font-size: 12px;\n  font-weight: 600;\n  gap: var(--salt-spacing-200);\n  padding-left: 12px;\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n  --vuu-icon-color: var(--salt-selectable-foreground);\n}\n\n.salt-theme .vuuPaletteItem {\n  font-size: 11px;\n  font-weight: normal;\n}\n";
-
-export { paletteCss as default };
-//# sourceMappingURL=Palette.css.js.map

package/esm/palette/Palette.css.js.map

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

package/esm/palette/Palette.js

@@ -1,112 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Option, ListBox } from '@salt-ds/core';
-import { queryClosest, registerComponent, uuid } from '@vuu-ui/vuu-utils';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { memo, useCallback, cloneElement } from 'react';
-import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
-import '../layout-provider/LayoutProviderContext.js';
-import { View as MemoView } from '../layout-view/View.js';
-import paletteCss from './Palette.css.js';
-
-const classBase = "vuuPalette";
-const clonePaletteItem = (paletteItem) => {
-  const dolly = paletteItem.cloneNode(true);
-  dolly.id = "";
-  delete dolly.dataset.idx;
-  return dolly;
-};
-const wrapInView = (component, viewProps) => {
-  const id = uuid();
-  return /* @__PURE__ */ jsx(MemoView, { id, ...viewProps, children: component }, id);
-};
-const PaletteItem = memo(
-  ({
-    className,
-    component,
-    idx,
-    key,
-    value,
-    ViewProps,
-    ...props
-  }) => {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "vuu-palette",
-      css: paletteCss,
-      window: targetWindow
-    });
-    const dispatch = useLayoutProviderDispatch();
-    const handleMouseDown = useCallback(
-      (e) => {
-        const el = queryClosest(e.target, ".vuuPaletteItem", true);
-        const { height, left, top, width } = el.getBoundingClientRect();
-        dispatch({
-          dragRect: {
-            left,
-            top,
-            right: left + width,
-            bottom: top + 150,
-            width,
-            height
-          },
-          dragElement: clonePaletteItem(el),
-          evt: e.nativeEvent,
-          instructions: {
-            DoNotRemove: true,
-            DoNotTransform: true,
-            DriftHomeIfNoDropTarget: true,
-            RemoveDraggableOnDragEnd: true,
-            dragThreshold: 10
-          },
-          path: "*",
-          payload: wrapInView(component, ViewProps),
-          type: "drag-start"
-        });
-      },
-      [ViewProps, component, dispatch]
-    );
-    return /* @__PURE__ */ jsx(
-      Option,
-      {
-        className: cx("vuuPaletteItem", className),
-        "data-draggable": true,
-        "data-index": idx,
-        onMouseDown: handleMouseDown,
-        value,
-        ...props
-      }
-    );
-  }
-);
-PaletteItem.displayName = "PaletteItem";
-const Palette = ({
-  ListBoxProps: ListBoxProps2,
-  ViewProps,
-  children,
-  className,
-  orientation = "horizontal",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    ListBox,
-    {
-      ...ListBoxProps2,
-      ...props,
-      className: cx(classBase, className, `${classBase}-${orientation}`),
-      selected: [],
-      children: children.map(
-        (child, idx) => child.type === PaletteItem ? cloneElement(child, {
-          idx,
-          key: idx
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        }) : child
-      )
-    }
-  );
-};
-registerComponent("Palette", Palette, "view");
-
-export { Palette, PaletteItem };
-//# sourceMappingURL=Palette.js.map

package/esm/palette/Palette.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Palette.js","sources":["../../../../packages/vuu-layout/src/palette/Palette.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { queryClosest, registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  ReactElement,\n  cloneElement,\n  memo,\n  useCallback,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View } from \"../layout-view/View\";\nimport type { ViewProps } from \"../layout-view/viewTypes\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst classBase = \"vuuPalette\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n  const dolly = paletteItem.cloneNode(true) as HTMLElement;\n  dolly.id = \"\";\n  delete dolly.dataset.idx;\n  return dolly;\n};\n\nconst wrapInView = (\n  component: ReactElement,\n  viewProps?: Partial<ViewProps>,\n) => {\n  const id = uuid();\n  return (\n    <View id={id} key={id} {...viewProps}>\n      {component}\n    </View>\n  );\n};\nexport interface PaletteItemProps extends OptionProps {\n  /**\n   * This is the payload that will be created when the\n   * palette item is dropped\n   */\n  ViewProps?: Pick<\n    ViewProps,\n    \"allowRename\" | \"closeable\" | \"header\" | \"resizeable\" | \"resize\" | \"title\"\n  >;\n  component: ReactElement;\n  idx?: number;\n}\n\nexport const PaletteItem = memo(\n  ({\n    className,\n    component,\n    idx,\n    key,\n    value,\n    ViewProps,\n    ...props\n  }: PaletteItemProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-palette\",\n      css: paletteCss,\n      window: targetWindow,\n    });\n    const dispatch = useLayoutProviderDispatch();\n\n    const handleMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (e) => {\n        const el = queryClosest(e.target, \".vuuPaletteItem\", true);\n        const { height, left, top, width } = el.getBoundingClientRect();\n\n        dispatch({\n          dragRect: {\n            left,\n            top,\n            right: left + width,\n            bottom: top + 150,\n            width,\n            height,\n          },\n          dragElement: clonePaletteItem(el),\n          evt: e.nativeEvent,\n          instructions: {\n            DoNotRemove: true,\n            DoNotTransform: true,\n            DriftHomeIfNoDropTarget: true,\n            RemoveDraggableOnDragEnd: true,\n            dragThreshold: 10,\n          },\n          path: \"*\",\n          payload: wrapInView(component, ViewProps),\n          type: \"drag-start\",\n        });\n      },\n      [ViewProps, component, dispatch],\n    );\n\n    return (\n      <Option\n        className={cx(\"vuuPaletteItem\", className)}\n        data-draggable\n        data-index={idx}\n        onMouseDown={handleMouseDown}\n        value={value}\n        {...props}\n      />\n    );\n  },\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\"\n  > {\n  ListBoxProps?: Partial<ListBoxProps>;\n  ViewProps?: Partial<ViewProps>;\n  children: ReactElement[];\n  orientation: \"horizontal\" | \"vertical\";\n  selection?: string;\n}\n\nexport const Palette = ({\n  ListBoxProps,\n  ViewProps,\n  children,\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: PaletteProps) => {\n  return (\n    <ListBox\n      {...ListBoxProps}\n      {...props}\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      selected={[]}\n    >\n      {children.map((child, idx) =>\n        child.type === PaletteItem\n          ? cloneElement(child, {\n              idx,\n              key: idx,\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            } as any)\n          : child,\n      )}\n    </ListBox>\n  );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["View","ListBoxProps"],"mappings":"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"}

package/esm/placeholder/LayoutStartPanel.css.js

@@ -1,4 +0,0 @@
-var layoutStartPanelCss = ".vuuLayoutStartPanel {\n    align-items: center;\n    flex: 0 0 auto !important;\n    display: flex;\n    flex-direction: column;\n    font-weight: 700;\n    gap: 12px;\n}\n\n.vuuLayoutStartPanel-title {\n    color: var(--vuu-color-gray-80);\n    font-size: 28px;\n    line-height: 1.5;\n    text-align: center;\n}\n\n.vuuLayoutStartPanel-text {\n    color: var(--vuu-color-gray-50);\n    font-size: 18px;\n    line-height: 1.5;\n    max-width: 460px;\n}\n\n.vuuLayoutStartPanel-addButton {\n    --vuu-icon-size: 20px;\n    --saltButton-borderRadius: 28px !important;\n    --saltButton-height: 56px;\n    --saltButton-width: 56px;\n    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}";
-
-export { layoutStartPanelCss as default };
-//# sourceMappingURL=LayoutStartPanel.css.js.map

package/esm/placeholder/LayoutStartPanel.css.js.map

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

package/esm/placeholder/LayoutStartPanel.js

@@ -1,54 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { IconButton } from '@vuu-ui/vuu-ui-controls';
-import { VuuShellLocation } from '@vuu-ui/vuu-utils';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import { useState, useMemo } from 'react';
-import { useViewContext } from '../layout-view-actions/ViewContext.js';
-import layoutStartPanelCss from './LayoutStartPanel.css.js';
-
-const classBase = "vuuLayoutStartPanel";
-const LayoutStartPanel = (htmlAttributes) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-layout-start-panel",
-    css: layoutStartPanelCss,
-    window: targetWindow
-  });
-  const { dispatch, path } = useViewContext();
-  const [displayState, setDisplayState] = useState();
-  useMemo(() => {
-    dispatch?.({
-      type: "query",
-      path,
-      query: "PARENT_CONTAINER"
-    }).then((response) => {
-      if (response?.parentContainerId === VuuShellLocation.Workspace) {
-        setDisplayState("initial");
-      } else {
-        setDisplayState("nested");
-      }
-    });
-  }, [dispatch, path]);
-  if (displayState === void 0) {
-    return null;
-  }
-  const showInitialState = displayState === "initial";
-  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, children: [
-    showInitialState ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: `${classBase}-title`, children: "Start by adding a table" }),
-      /* @__PURE__ */ jsx("div", { className: `${classBase}-text`, children: "To add a table, drag any of the Vuu Tables to this area or click the button below" })
-    ] }) : null,
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        className: `${classBase}-addButton`,
-        icon: "add",
-        variant: "cta"
-      }
-    )
-  ] });
-};
-
-export { LayoutStartPanel };
-//# sourceMappingURL=LayoutStartPanel.js.map

package/esm/placeholder/LayoutStartPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutStartPanel.js","sources":["../../../../packages/vuu-layout/src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport {\n  QueryResponse,\n  useViewContext,\n} from \"../layout-view-actions/ViewContext\";\n\nimport layoutStartPanelCss from \"./LayoutStartPanel.css\";\n\nconst classBase = \"vuuLayoutStartPanel\";\n\nexport interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\n\nexport const LayoutStartPanel = (htmlAttributes: LayoutStartPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-start-panel\",\n    css: layoutStartPanelCss,\n    window: targetWindow,\n  });\n\n  const { dispatch, path } = useViewContext();\n  const [displayState, setDisplayState] = useState<\n    \"initial\" | \"nested\" | undefined\n  >();\n\n  useMemo(() => {\n    dispatch?.({\n      type: \"query\",\n      path,\n      query: \"PARENT_CONTAINER\",\n    }).then((response) => {\n      if (\n        (response as QueryResponse)?.parentContainerId ===\n        VuuShellLocation.Workspace\n      ) {\n        setDisplayState(\"initial\");\n      } else {\n        setDisplayState(\"nested\");\n      }\n    });\n  }, [dispatch, path]);\n\n  if (displayState === undefined) {\n    return null;\n  }\n\n  const showInitialState = displayState === \"initial\";\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      {showInitialState ? (\n        <>\n          <div className={`${classBase}-title`}>Start by adding a table</div>\n          <div className={`${classBase}-text`}>\n            To add a table, drag any of the Vuu Tables to this area or click the\n            button below\n          </div>\n        </>\n      ) : null}\n      <IconButton\n        className={`${classBase}-addButton`}\n        icon=\"add\"\n        variant=\"cta\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAI,cAAe,EAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAEtC,EAAA;AAEF,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MACG,IAAA,QAAA,EAA4B,iBAC7B,KAAA,gBAAA,CAAiB,SACjB,EAAA;AACA,QAAA,eAAA,CAAgB,SAAS,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA;AAAA;AAC1B,KACD,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA;AAE1C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAuB,EAAA,yBAAA,EAAA,CAAA;AAAA,0BAC5D,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,IAAK,EAAA,KAAA;AAAA,QACL,OAAQ,EAAA;AAAA;AAAA;AACV,GACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/placeholder/Placeholder.css.js

@@ -1,4 +0,0 @@
-var placeholderCss = ".vuuPlaceholder {\n  --vuuView-justify: center;\n  align-items: center;\n  display: flex;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n}\n\n.vuuPlaceholder-nested {\n  background-color: red;\n}\n\n.vuuPlaceholder-shim {\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
-
-export { placeholderCss as default };
-//# sourceMappingURL=Placeholder.css.js.map

package/esm/placeholder/Placeholder.css.js.map

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

package/esm/placeholder/Placeholder.js

@@ -1,32 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import cx from 'clsx';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import { registerComponent } from '@vuu-ui/vuu-utils';
-import { LayoutStartPanel } from './LayoutStartPanel.js';
-import { View as MemoView } from '../layout-view/View.js';
-import placeholderCss from './Placeholder.css.js';
-
-const classBase = "vuuPlaceholder";
-const PlaceholderCore = ({ showStartMenu = true }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: showStartMenu ? /* @__PURE__ */ jsx(LayoutStartPanel, {}) : null });
-};
-const Placeholder = ({
-  className: classNameProp,
-  showStartMenu,
-  ...viewProps
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-placeholder",
-    css: placeholderCss,
-    window: targetWindow
-  });
-  const className = cx(classBase, classNameProp);
-  return /* @__PURE__ */ jsx(MemoView, { ...viewProps, className, "data-placeholder": true, resizeable: true, children: /* @__PURE__ */ jsx(PlaceholderCore, { showStartMenu }) });
-};
-Placeholder.displayName = "Placeholder";
-registerComponent("Placeholder", Placeholder, "component");
-
-export { Placeholder };
-//# sourceMappingURL=Placeholder.js.map

package/esm/placeholder/Placeholder.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Placeholder.js","sources":["../../../../packages/vuu-layout/src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View } from \"../layout-view/View\";\nimport type { ViewProps } from \"../layout-view/viewTypes\";\n\nimport placeholderCss from \"./Placeholder.css\";\n\nconst classBase = \"vuuPlaceholder\";\n\nexport interface PlaceholderProps extends ViewProps {\n  closeable?: boolean;\n  flexFill?: boolean;\n  resizeable?: boolean;\n  showStartMenu?: boolean;\n  /**\n   * shim is only when we're dealing with intrinsically sized children, which is never\n   * in an actual application. Intrinsic sizing is still experimental.\n   */\n  shim?: boolean;\n}\n\nconst PlaceholderCore = ({ showStartMenu = true }: PlaceholderProps) => {\n  return <>{showStartMenu ? <LayoutStartPanel /> : null}</>;\n};\n\nexport const Placeholder = ({\n  className: classNameProp,\n  showStartMenu,\n  ...viewProps\n}: PlaceholderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-placeholder\",\n    css: placeholderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <View {...viewProps} className={className} data-placeholder resizeable>\n      <PlaceholderCore showStartMenu={showStartMenu} />\n    </View>\n  );\n};\n\nPlaceholder.displayName = \"Placeholder\";\nregisterComponent(\"Placeholder\", Placeholder, \"component\");\n"],"names":["View"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAU,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiB,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAK,IAAK,EAAA,CAAA;AACxD,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAE7C,EAAA,uBACG,GAAA,CAAAA,QAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;AAC1B,iBAAkB,CAAA,aAAA,EAAe,aAAa,WAAW,CAAA;;;;"}

package/esm/responsive/useResizeObserver.js

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

@@ -1 +0,0 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../../../packages/vuu-layout/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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"}