@vuu-ui/vuu-layout 0.8.35 → 0.8.36

package/esm/layout-view/useViewResize.js

@@ -0,0 +1,40 @@
+import { useRef, useCallback } from 'react';
+import { useResizeObserver, WidthHeight } from '../responsive/useResizeObserver.js';
+
+const NO_MEASUREMENT = [];
+const useViewResize = ({
+  mainRef,
+  resize = "responsive",
+  rootRef
+}) => {
+  const deferResize = resize === "defer";
+  const mainSize = useRef({});
+  const resizeHandle = useRef();
+  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

@@ -0,0 +1 @@
+{"version":3,"file":"useViewResize.js","sources":["../../src/layout-view/useViewResize.ts"],"sourcesContent":["import { 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>;\n  resize?: \"defer\" | \"responsive\";\n  rootRef: RefObject<HTMLDivElement>;\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>();\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(\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":";;;AAGA,MAAM,iBAA2B,EAAC,CAAA;AAa3B,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,MAAS,GAAA,YAAA;AAAA,EACT,OAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,cAAc,MAAW,KAAA,OAAA,CAAA;AAE/B,EAAM,MAAA,QAAA,GAAW,MAAa,CAAA,EAAE,CAAA,CAAA;AAChC,EAAA,MAAM,eAAe,MAAe,EAAA,CAAA;AAEpC,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,CAAA;AACzD,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,KAAQ,GAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,IAAA,CAAA;AAAA,KACzD;AACA,IAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACrB,MAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA,CAAA;AAC1B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,KAAA,CAAA;AACzB,MAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA,CAAA;AAAA,OACnC;AACA,MAAA,YAAA,CAAa,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,EAAE,CAAA,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,iBAAA;AAAA,IACE,OAAA;AAAA,IACA,cAAc,WAAc,GAAA,cAAA;AAAA,IAC5B,QAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewContext.js","sources":["../../src/layout-view-actions/ViewContext.ts"],"sourcesContent":["import React, { SyntheticEvent, useContext } from \"react\";\nimport { ViewAction } from \"../layout-view/viewTypes\";\n\nexport type QueryReponse = { [key: string]: unknown };\n\nexport type ViewDispatch = <Action extends ViewAction = ViewAction>(\n  action: Action,\n  evt?: SyntheticEvent\n) => Promise<boolean | QueryReponse | 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?: (key?: string) => unknown;\n  loadSession?: (key?: string) => unknown;\n  onConfigChange?: (config: unknown) => void;\n  path?: string;\n  purge?: (key: string) => void;\n  save?: (state: unknown, key: string) => void;\n  saveSession?: (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":";;AAiCA,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,IAAK,EAAA,CAAA;AACvB,MAAA,WAAA,GAAc,KAAM,CAAA,aAAA,CAA8B,UAAU,EAAA;AAElE,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,OAAA,GAAU,WAAW,WAAW,CAAA,CAAA;AACtC,EAAA,OAAO,SAAS,QAAY,IAAA,IAAA,CAAA;AAC9B,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,CAAW,WAAW;;;;"}

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

@@ -0,0 +1,101 @@
+import { useState, useCallback } from 'react';
+import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
+import '../layout-provider/LayoutProviderContext.js';
+import { usePersistentState } from '../use-persistent-state.js';
+
+const useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
+  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } = usePersistentState();
+  const [contributions, setContributions] = useState(
+    loadSessionState(id, "contributions") ?? []
+  );
+  const dispatchLayoutAction = useLayoutProviderDispatch();
+  const updateContributions = useCallback(
+    (location, content) => {
+      const updatedContributions = contributions.concat([
+        { location, content }
+      ]);
+      saveSessionState(id, "contributions", updatedContributions);
+      setContributions(updatedContributions);
+    },
+    [contributions, id, saveSessionState]
+  );
+  const clearContributions = useCallback(() => {
+    purgeSessionState(id, "contributions");
+    setContributions([]);
+  }, [id, purgeSessionState]);
+  const handleRemove = useCallback(() => {
+    const ds = loadSessionState(id, "data-source");
+    if (ds) {
+      ds.unsubscribe();
+    }
+    purgeSessionState(id);
+    purgeState(id);
+    dispatchLayoutAction({ type: "remove", path: viewPath });
+  }, [
+    dispatchLayoutAction,
+    id,
+    loadSessionState,
+    purgeSessionState,
+    purgeState,
+    viewPath
+  ]);
+  const handleMouseDown = useCallback(
+    async (evt, index, preDragActivity) => {
+      evt.stopPropagation();
+      const dragRect = root.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
+        });
+      });
+    },
+    [root, dispatchLayoutAction, viewPath, dropTargets]
+  );
+  const dispatchAction = useCallback(
+    async (action, evt) => {
+      const { type } = action;
+      switch (type) {
+        case "maximize":
+        case "minimize":
+        case "restore":
+          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
+          });
+        default: {
+          return void 0;
+        }
+      }
+    },
+    [
+      dispatchLayoutAction,
+      viewPath,
+      handleRemove,
+      handleMouseDown,
+      updateContributions,
+      clearContributions
+    ]
+  );
+  return [dispatchAction, contributions];
+};
+
+export { useViewActionDispatcher };
+//# sourceMappingURL=useViewActionDispatcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useViewActionDispatcher.js","sources":["../../src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ReactElement,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { QueryReponse, ViewDispatch } from \"./ViewContext\";\nimport { ViewAction } from \"../layout-view/viewTypes\";\n\nexport type ContributionLocation = \"post-title\" | \"pre-title\";\n\nexport type Contribution = {\n  index?: number;\n  location?: ContributionLocation;\n  content: ReactElement;\n};\n\nexport const useViewActionDispatcher = (\n  id: string,\n  root: RefObject<HTMLDivElement>,\n  viewPath?: string,\n  dropTargets?: string[]\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =\n    usePersistentState();\n\n  const [contributions, setContributions] = useState<Contribution[]>(\n    loadSessionState(id, \"contributions\") ?? []\n  );\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      saveSessionState(id, \"contributions\", updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, id, saveSessionState]\n  );\n\n  const clearContributions = useCallback(() => {\n    purgeSessionState(id, \"contributions\");\n    setContributions([]);\n  }, [id, purgeSessionState]);\n\n  const handleRemove = useCallback(() => {\n    const ds = loadSessionState(id, \"data-source\") as DataSource;\n    if (ds) {\n      ds.unsubscribe();\n    }\n    purgeSessionState(id);\n    purgeState(id);\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [\n    dispatchLayoutAction,\n    id,\n    loadSessionState,\n    purgeSessionState,\n    purgeState,\n    viewPath,\n  ]);\n\n  const handleMouseDown = useCallback(\n    async (evt, index, preDragActivity): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = root.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    [root, dispatchLayoutAction, viewPath, dropTargets]\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: SyntheticEvent\n    ): Promise<boolean | QueryReponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"maximize\":\n        case \"minimize\":\n        case \"restore\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          return handleMouseDown(evt, action.index, action.preDragActivity);\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          return;\n        default: {\n          return undefined;\n        }\n      }\n    },\n    [\n      dispatchLayoutAction,\n      viewPath,\n      handleRemove,\n      handleMouseDown,\n      updateContributions,\n      clearContributions,\n    ]\n  );\n\n  return [dispatchAction, contributions];\n};\n"],"names":[],"mappings":"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"}

package/esm/palette/Palette.css

@@ -0,0 +1,33 @@
+.vuuPalette {
+  --vuuList-borderStyle: none;
+}
+
+.vuuPalette-horizontal {
+  align-items: center;
+  display: flex;
+}
+
+.vuuPaletteItem {
+  --vuu-icon-color: var(--salt-content-primary-foreground);
+  --vuu-icon-left: 0;
+  --vuu-icon-size: 16px;
+  --vuu-icon-top: 11px;
+  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
+  border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
+  padding-left: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.vuuSimpleDraggableWrapper > .vuuPaletteItem {
+  --vuu-icon-color: var(--salt-selectable-foreground);
+
+}
+
+.salt-theme .vuuPaletteItem {
+  font-size: 11px;
+  font-weight: normal;
+
+}
+
+

package/esm/palette/Palette.js

@@ -0,0 +1,115 @@
+import { jsx } from 'react/jsx-runtime';
+import { uuid } from '@vuu-ui/vuu-utils';
+import { ListItem, List } from '@vuu-ui/vuu-ui-controls';
+import cx from 'clsx';
+import { memo, 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 { registerComponent } from '../registry/ComponentRegistry.js';
+
+const clonePaletteItem = (paletteItem) => {
+  const dolly = paletteItem.cloneNode(true);
+  dolly.id = "";
+  delete dolly.dataset.idx;
+  return dolly;
+};
+const PaletteItem = memo(
+  ({
+    className,
+    children: component,
+    idx,
+    resizeable,
+    header,
+    closeable,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        className: cx("vuuPaletteItem", className),
+        "data-draggable": true,
+        "data-icon": "draggable",
+        ...props
+      }
+    );
+  }
+);
+PaletteItem.displayName = "PaletteItem";
+const Palette = ({
+  ListProps: ListProps2,
+  ViewProps: ViewProps2,
+  children,
+  className,
+  itemHeight = 41,
+  orientation = "horizontal",
+  ...props
+}) => {
+  const dispatch = useLayoutProviderDispatch();
+  const classBase = "vuuPalette";
+  function handleMouseDown(evt) {
+    const target = evt.target;
+    const listItemElement = target.closest(".vuuPaletteItem");
+    const idx = parseInt(listItemElement.dataset?.index ?? "-1");
+    const {
+      props: { caption, children: payload, template, ...props2 }
+    } = children[idx];
+    const { ViewProps: componentViewProps } = payload.props;
+    const { height, left, top, width } = listItemElement.getBoundingClientRect();
+    const id = uuid();
+    const identifiers = { id, key: id };
+    const component = template ? payload : /* @__PURE__ */ jsx(
+      MemoView,
+      {
+        ...ViewProps2,
+        ...identifiers,
+        ...props2,
+        ...componentViewProps,
+        title: props2.label,
+        children: payload
+      }
+    );
+    dispatch({
+      dragRect: {
+        left,
+        top,
+        right: left + width,
+        bottom: top + 150,
+        width,
+        height
+      },
+      dragElement: clonePaletteItem(listItemElement),
+      evt: evt.nativeEvent,
+      instructions: {
+        DoNotRemove: true,
+        DoNotTransform: true,
+        DriftHomeIfNoDropTarget: true,
+        RemoveDraggableOnDragEnd: true,
+        dragThreshold: 10
+      },
+      path: "*",
+      payload: component,
+      type: "drag-start"
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      ...ListProps2,
+      ...props,
+      className: cx(classBase, className, `${classBase}-${orientation}`),
+      itemHeight,
+      selected: null,
+      children: children.map(
+        (child, idx) => child.type === PaletteItem ? cloneElement(child, {
+          key: idx,
+          onMouseDown: handleMouseDown
+        }) : child
+      )
+    }
+  );
+};
+registerComponent("Palette", Palette, "view");
+
+export { Palette, PaletteItem };
+//# sourceMappingURL=Palette.js.map

package/esm/palette/Palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import { uuid } from \"@vuu-ui/vuu-utils\";\nimport {\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  memo,\n  MouseEvent,\n  ReactElement,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\n\nimport \"./Palette.css\";\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\nexport interface PaletteItemProps extends ListItemProps {\n  children: ReactElement;\n  closeable?: boolean;\n  header?: boolean;\n  idx?: number;\n  resize?: \"defer\";\n  resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n  ({\n    className,\n    children: component,\n    idx,\n    resizeable,\n    header,\n    closeable,\n    ...props\n  }: PaletteItemProps) => {\n    return (\n      <ListItem\n        className={cx(\"vuuPaletteItem\", className)}\n        data-draggable\n        data-icon=\"draggable\"\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  ListProps?: Partial<ListProps>;\n  ViewProps?: Partial<ViewProps>;\n  children: ReactElement[];\n  itemHeight?: number;\n  orientation: \"horizontal\" | \"vertical\";\n  selection?: string;\n}\n\nexport const Palette = ({\n  ListProps,\n  ViewProps,\n  children,\n  className,\n  itemHeight = 41,\n  orientation = \"horizontal\",\n  ...props\n}: PaletteProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const classBase = \"vuuPalette\";\n\n  function handleMouseDown(evt: MouseEvent) {\n    const target = evt.target as HTMLElement;\n    const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n    const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n    const {\n      props: { caption, children: payload, template, ...props },\n    } = children[idx];\n    const { ViewProps: componentViewProps } = payload.props;\n    const { height, left, top, width } =\n      listItemElement.getBoundingClientRect();\n    const id = uuid();\n    const identifiers = { id, key: id };\n    const component = template ? (\n      payload\n    ) : (\n      <View\n        {...ViewProps}\n        {...identifiers}\n        {...props}\n        {...componentViewProps}\n        title={props.label}\n      >\n        {payload}\n      </View>\n    );\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(listItemElement),\n      evt: evt.nativeEvent,\n      instructions: {\n        DoNotRemove: true,\n        DoNotTransform: true,\n        DriftHomeIfNoDropTarget: true,\n        RemoveDraggableOnDragEnd: true,\n        dragThreshold: 10,\n      },\n      path: \"*\",\n      payload: component,\n      type: \"drag-start\",\n    });\n  }\n\n  return (\n    <List\n      {...ListProps}\n      {...props}\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      itemHeight={itemHeight}\n      selected={null}\n    >\n      {children.map((child, idx) =>\n        child.type === PaletteItem\n          ? cloneElement(child, {\n              key: idx,\n              onMouseDown: handleMouseDown,\n            })\n          : child\n      )}\n    </List>\n  );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["ListProps","ViewProps","props","View"],"mappings":";;;;;;;;;;AAqBA,MAAM,gBAAA,GAAmB,CAAC,WAA6B,KAAA;AACrD,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACxC,EAAA,KAAA,CAAM,EAAK,GAAA,EAAA,CAAA;AACX,EAAA,OAAO,MAAM,OAAQ,CAAA,GAAA,CAAA;AACrB,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAWO,MAAM,WAAc,GAAA,IAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAU,EAAA,SAAA;AAAA,IACV,GAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG,KAAA;AAAA,GACmB,KAAA;AACtB,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,SAAS,CAAA;AAAA,QACzC,gBAAc,EAAA,IAAA;AAAA,QACd,WAAU,EAAA,WAAA;AAAA,QACT,GAAG,KAAA;AAAA,OAAA;AAAA,KACN,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAenB,MAAM,UAAU,CAAC;AAAA,EACtB,SAAAA,EAAAA,UAAAA;AAAA,EACA,SAAAC,EAAAA,UAAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAa,GAAA,EAAA;AAAA,EACb,WAAc,GAAA,YAAA;AAAA,EACd,GAAG,KAAA;AACL,CAAoB,KAAA;AAClB,EAAA,MAAM,WAAW,yBAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,SAAY,GAAA,YAAA,CAAA;AAElB,EAAA,SAAS,gBAAgB,GAAiB,EAAA;AACxC,IAAA,MAAM,SAAS,GAAI,CAAA,MAAA,CAAA;AACnB,IAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AACxD,IAAA,MAAM,GAAM,GAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,EAAS,SAAS,IAAI,CAAA,CAAA;AAC3D,IAAM,MAAA;AAAA,MACJ,OAAO,EAAE,OAAA,EAAS,UAAU,OAAS,EAAA,QAAA,EAAU,GAAGC,MAAM,EAAA;AAAA,KAC1D,GAAI,SAAS,GAAG,CAAA,CAAA;AAChB,IAAA,MAAM,EAAE,SAAA,EAAW,kBAAmB,EAAA,GAAI,OAAQ,CAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAQ,EAAA,IAAA,EAAM,KAAK,KAAM,EAAA,GAC/B,gBAAgB,qBAAsB,EAAA,CAAA;AACxC,IAAA,MAAM,KAAK,IAAK,EAAA,CAAA;AAChB,IAAA,MAAM,WAAc,GAAA,EAAE,EAAI,EAAA,GAAA,EAAK,EAAG,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAY,WAChB,OAEA,mBAAA,GAAA;AAAA,MAACC,QAAA;AAAA,MAAA;AAAA,QACE,GAAGF,UAAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACH,GAAGC,MAAAA;AAAA,QACH,GAAG,kBAAA;AAAA,QACJ,OAAOA,MAAM,CAAA,KAAA;AAAA,QAEZ,QAAA,EAAA,OAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAGF,IAAS,QAAA,CAAA;AAAA,MACP,QAAU,EAAA;AAAA,QACR,IAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAO,IAAO,GAAA,KAAA;AAAA,QACd,QAAQ,GAAM,GAAA,GAAA;AAAA,QACd,KAAA;AAAA,QACA,MAAA;AAAA,OACF;AAAA,MACA,WAAA,EAAa,iBAAiB,eAAe,CAAA;AAAA,MAC7C,KAAK,GAAI,CAAA,WAAA;AAAA,MACT,YAAc,EAAA;AAAA,QACZ,WAAa,EAAA,IAAA;AAAA,QACb,cAAgB,EAAA,IAAA;AAAA,QAChB,uBAAyB,EAAA,IAAA;AAAA,QACzB,wBAA0B,EAAA,IAAA;AAAA,QAC1B,aAAe,EAAA,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA,GAAA;AAAA,MACN,OAAS,EAAA,SAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAGF,UAAAA;AAAA,MACH,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,UAAA;AAAA,MACA,QAAU,EAAA,IAAA;AAAA,MAET,QAAS,EAAA,QAAA,CAAA,GAAA;AAAA,QAAI,CAAC,KAAO,EAAA,GAAA,KACpB,MAAM,IAAS,KAAA,WAAA,GACX,aAAa,KAAO,EAAA;AAAA,UAClB,GAAK,EAAA,GAAA;AAAA,UACL,WAAa,EAAA,eAAA;AAAA,SACd,CACD,GAAA,KAAA;AAAA,OACN;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEA,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

package/esm/placeholder/LayoutStartPanel.css

@@ -0,0 +1,30 @@
+.vuuLayoutStartPanel {
+    align-items: center;
+    flex: 0 0 auto !important;
+    display: flex;
+    flex-direction: column;
+    font-weight: 700;
+    gap: 12px;
+}
+
+.vuuLayoutStartPanel-title {
+    color: var(--vuu-color-gray-80);
+    font-size: 28px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+.vuuLayoutStartPanel-text {
+    color: var(--vuu-color-gray-50);
+    font-size: 18px;
+    line-height: 1.5;
+    max-width: 460px;
+}
+
+.vuuLayoutStartPanel-addButton {
+    --vuu-icon-size: 20px;
+    --saltButton-borderRadius: 28px !important;
+    --saltButton-height: 56px;
+    --saltButton-width: 56px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}

package/esm/placeholder/LayoutStartPanel.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Button } from '@salt-ds/core';
+import { useState, useMemo } from 'react';
+import '@vuu-ui/vuu-utils';
+import '../layout-provider/LayoutProviderContext.js';
+import '../drag-drop/Draggable.js';
+import 'clsx';
+import '../drag-drop/BoxModel.js';
+import { useViewContext } from '../layout-view-actions/ViewContext.js';
+
+const classBase = "vuuLayoutStartPanel";
+const LayoutStartPanel = (htmlAttributes) => {
+  const { dispatch, path } = useViewContext();
+  const [displayState, setDisplayState] = useState();
+  useMemo(() => {
+    dispatch?.({
+      type: "query",
+      path,
+      query: "PARENT_CONTAINER"
+    }).then((response) => {
+      if (response?.parentContainerId === "main-tabs") {
+        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("header", { 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(
+      Button,
+      {
+        className: `${classBase}-addButton`,
+        "data-icon": "add",
+        variant: "cta"
+      }
+    )
+  ] });
+};
+
+export { LayoutStartPanel };
+//# sourceMappingURL=LayoutStartPanel.js.map

package/esm/placeholder/LayoutStartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutStartPanel.js","sources":["../../src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport { useViewContext, QueryReponse } from \"../layout-view-actions\";\n\nimport \"./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 { 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 ((response as QueryReponse)?.parentContainerId === \"main-tabs\") {\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          <header className={`${classBase}-title`}>\n            Start by adding a table\n          </header>\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      <Button\n        className={`${classBase}-addButton`}\n        data-icon=\"add\"\n        variant=\"cta\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAMA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAI,cAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAEtC,EAAA,CAAA;AAEF,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA,kBAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MAAK,IAAA,QAAA,EAA2B,sBAAsB,WAAa,EAAA;AACjE,QAAA,eAAA,CAAgB,SAAS,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA,CAAA;AAAA,OAC1B;AAAA,KACD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA,CAAA;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,QAAO,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAEzC,EAAA,yBAAA,EAAA,CAAA;AAAA,0BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,WAAU,EAAA,KAAA;AAAA,QACV,OAAQ,EAAA,KAAA;AAAA,OAAA;AAAA,KACV;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/placeholder/Placeholder.css

@@ -0,0 +1,17 @@
+.vuuPlaceholder {
+  --vuuView-justify: center;
+  align-items: center;
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.vuuPlaceholder-nested {
+  background-color: red;
+}
+
+.vuuPlaceholder-shim {
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/esm/placeholder/Placeholder.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { registerComponent } from '../registry/ComponentRegistry.js';
+import { LayoutStartPanel } from './LayoutStartPanel.js';
+import { View as MemoView } from '../layout-view/View.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 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);
+
+export { Placeholder };
+//# sourceMappingURL=Placeholder.js.map

package/esm/placeholder/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","sources":["../../src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport \"./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 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);\n"],"names":["View"],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;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,CAAA;AACxD,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,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,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1B,iBAAA,CAAkB,eAAe,WAAW,CAAA;;;;"}

package/esm/registry/ComponentRegistry.js

@@ -0,0 +1,21 @@
+const _containers = {};
+const _views = {};
+const ComponentRegistry = {};
+function isContainer(componentType) {
+  return _containers[componentType] === true;
+}
+function isView(componentType) {
+  return _views[componentType] === true;
+}
+const isLayoutComponent = (type) => isContainer(type) || isView(type);
+function registerComponent(componentName, component, type = "component") {
+  ComponentRegistry[componentName] = component;
+  if (type === "container") {
+    _containers[componentName] = true;
+  } else if (type === "view") {
+    _views[componentName] = true;
+  }
+}
+
+export { ComponentRegistry, isContainer, isLayoutComponent, isView, registerComponent };
+//# sourceMappingURL=ComponentRegistry.js.map

package/esm/registry/ComponentRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRegistry.js","sources":["../../src/registry/ComponentRegistry.ts"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nconst _containers: { [key: string]: boolean } = {};\nconst _views: { [key: string]: boolean } = {};\n\nexport type layoutComponentType = \"component\" | \"container\" | \"view\";\n\nexport interface ComponentWithId {\n  id: string;\n  [key: string]: unknown;\n}\n\nexport const ComponentRegistry: {\n  [key: string]: FunctionComponent<ComponentWithId>;\n} = {};\n\nexport function isContainer(componentType: string) {\n  return _containers[componentType] === true;\n}\n\nexport function isView(componentType: string) {\n  return _views[componentType] === true;\n}\n\nexport const isLayoutComponent = (type: string) =>\n  isContainer(type) || isView(type);\n\n// export const isRegistered = (className: string) =>\n//   !!ComponentRegistry[className];\n\nexport function registerComponent(\n  componentName: string,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: FunctionComponent<any>,\n  type: layoutComponentType = \"component\"\n) {\n  ComponentRegistry[componentName] = component;\n\n  if (type === \"container\") {\n    _containers[componentName] = true;\n  } else if (type === \"view\") {\n    _views[componentName] = true;\n  }\n}\n"],"names":[],"mappings":"AAEA,MAAM,cAA0C,EAAC,CAAA;AACjD,MAAM,SAAqC,EAAC,CAAA;AASrC,MAAM,oBAET,GAAC;AAEE,SAAS,YAAY,aAAuB,EAAA;AACjD,EAAO,OAAA,WAAA,CAAY,aAAa,CAAM,KAAA,IAAA,CAAA;AACxC,CAAA;AAEO,SAAS,OAAO,aAAuB,EAAA;AAC5C,EAAO,OAAA,MAAA,CAAO,aAAa,CAAM,KAAA,IAAA,CAAA;AACnC,CAAA;AAEO,MAAM,oBAAoB,CAAC,IAAA,KAChC,YAAY,IAAI,CAAA,IAAK,OAAO,IAAI,EAAA;AAK3B,SAAS,iBACd,CAAA,aAAA,EAEA,SACA,EAAA,IAAA,GAA4B,WAC5B,EAAA;AACA,EAAA,iBAAA,CAAkB,aAAa,CAAI,GAAA,SAAA,CAAA;AAEnC,EAAA,IAAI,SAAS,WAAa,EAAA;AACxB,IAAA,WAAA,CAAY,aAAa,CAAI,GAAA,IAAA,CAAA;AAAA,GAC/B,MAAA,IAAW,SAAS,MAAQ,EAAA;AAC1B,IAAA,MAAA,CAAO,aAAa,CAAI,GAAA,IAAA,CAAA;AAAA,GAC1B;AACF;;;;"}

package/esm/responsive/breakpoints.js

@@ -0,0 +1,33 @@
+function breakpointReader(themeName, defaultBreakpoints) {
+  const themeRoot = document.body.querySelector(`.${themeName}`);
+  const handler = {
+    get: function(style, stopName) {
+      const val = style.getPropertyValue(
+        // lets assume we have the following naming convention
+        `--${themeName}-breakpoint-${stopName}`
+      );
+      return val ? parseInt(val) : void 0;
+    }
+  };
+  return themeRoot ? new Proxy(getComputedStyle(themeRoot), handler) : defaultBreakpoints ?? {};
+}
+const byDescendingStopSize = ([, s1], [, s2]) => s2 - s1;
+const breakpointRamp = (breakpoints) => Object.entries(breakpoints).sort(byDescendingStopSize).map(([name, value], i, all) => [
+  name,
+  value,
+  i < all.length - 1 ? all[i + 1][1] : 9999
+]);
+let documentBreakpoints = null;
+const loadBreakpoints = (themeName = "salt") => {
+  const { xs, sm, md, lg, xl } = breakpointReader(themeName);
+  return breakpointRamp({ xs, sm, md, lg, xl });
+};
+const getBreakPoints = (themeName) => {
+  if (documentBreakpoints === null) {
+    documentBreakpoints = loadBreakpoints(themeName);
+  }
+  return documentBreakpoints;
+};
+
+export { breakpointRamp, getBreakPoints };
+//# sourceMappingURL=breakpoints.js.map

package/esm/responsive/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../src/responsive/breakpoints.ts"],"sourcesContent":["// should we have some global; defaults ?\n\nimport { BreakPointsProp } from \"../flexbox/flexboxTypes\";\n\nexport type BreakPointRamp = [string, number, number];\n\nfunction breakpointReader(\n  themeName: string,\n  defaultBreakpoints?: BreakPointsProp\n) {\n  //TODO ownerDocument\n  const themeRoot = document.body.querySelector(`.${themeName}`);\n  const handler = {\n    get: function (style: CSSStyleDeclaration, stopName: string) {\n      const val = style.getPropertyValue(\n        // lets assume we have the following naming convention\n        `--${themeName}-breakpoint-${stopName}`\n      );\n      return val ? parseInt(val) : undefined;\n    },\n  };\n\n  return themeRoot\n    ? new Proxy(getComputedStyle(themeRoot), handler)\n    : defaultBreakpoints ?? {};\n}\n\nconst byDescendingStopSize = (\n  [, s1]: [string, number],\n  [, s2]: [string, number]\n) => s2 - s1;\n\n// These are assumed to be min-width (aka mobile-first) stops, we could take a\n// paramneter to support max-width as well ?\n// return [stopName, minWidth, maxWidth]\nexport const breakpointRamp = (\n  breakpoints: BreakPointsProp\n): BreakPointRamp[] =>\n  Object.entries(breakpoints)\n    .sort(byDescendingStopSize)\n    .map(([name, value], i, all) => [\n      name,\n      value,\n      i < all.length - 1 ? all[i + 1][1] : 9999,\n    ]);\n\nlet documentBreakpoints: BreakPointRamp[] | null = null;\n\nconst loadBreakpoints = (themeName = \"salt\") => {\n  // TODO would be nice to read these breakpoint labels from a css variable to\n  // avoid hard-coding them here ?\n  const { xs, sm, md, lg, xl } = breakpointReader(themeName) as BreakPointsProp;\n  return breakpointRamp({ xs, sm, md, lg, xl });\n};\n\n//TODO support multiple themes loaded\nexport const getBreakPoints = (themeName?: string) => {\n  if (documentBreakpoints === null) {\n    documentBreakpoints = loadBreakpoints(themeName);\n  }\n  return documentBreakpoints;\n};\n"],"names":[],"mappings":"AAMA,SAAS,gBAAA,CACP,WACA,kBACA,EAAA;AAEA,EAAA,MAAM,YAAY,QAAS,CAAA,IAAA,CAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA,CAAA;AAC7D,EAAA,MAAM,OAAU,GAAA;AAAA,IACd,GAAA,EAAK,SAAU,KAAA,EAA4B,QAAkB,EAAA;AAC3D,MAAA,MAAM,MAAM,KAAM,CAAA,gBAAA;AAAA;AAAA,QAEhB,CAAA,EAAA,EAAK,SAAS,CAAA,YAAA,EAAe,QAAQ,CAAA,CAAA;AAAA,OACvC,CAAA;AACA,MAAO,OAAA,GAAA,GAAM,QAAS,CAAA,GAAG,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,SAAA,GACH,IAAI,KAAM,CAAA,gBAAA,CAAiB,SAAS,CAAG,EAAA,OAAO,CAC9C,GAAA,kBAAA,IAAsB,EAAC,CAAA;AAC7B,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAC3B,GAAG,EAAE,GACL,GAAG,EAAE,CAAA,KACF,EAAK,GAAA,EAAA,CAAA;AAKH,MAAM,iBAAiB,CAC5B,WAAA,KAEA,MAAO,CAAA,OAAA,CAAQ,WAAW,CACvB,CAAA,IAAA,CAAK,oBAAoB,CAAA,CACzB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAA,EAAG,GAAG,GAAQ,KAAA;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,CAAA,GAAI,IAAI,MAAS,GAAA,CAAA,GAAI,IAAI,CAAI,GAAA,CAAC,CAAE,CAAA,CAAC,CAAI,GAAA,IAAA;AACvC,CAAC,EAAA;AAEL,IAAI,mBAA+C,GAAA,IAAA,CAAA;AAEnD,MAAM,eAAA,GAAkB,CAAC,SAAA,GAAY,MAAW,KAAA;AAG9C,EAAM,MAAA,EAAE,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,EAAG,EAAA,GAAI,iBAAiB,SAAS,CAAA,CAAA;AACzD,EAAA,OAAO,eAAe,EAAE,EAAA,EAAI,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,CAAA,CAAA;AAC9C,CAAA,CAAA;AAGa,MAAA,cAAA,GAAiB,CAAC,SAAuB,KAAA;AACpD,EAAA,IAAI,wBAAwB,IAAM,EAAA;AAChC,IAAA,mBAAA,GAAsB,gBAAgB,SAAS,CAAA,CAAA;AAAA,GACjD;AACA,EAAO,OAAA,mBAAA,CAAA;AACT;;;;"}

package/esm/responsive/use-breakpoints.js

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

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

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