@vuu-ui/vuu-shell 0.8.63 → 0.8.65

package/cjs/feature-list/FeatureList.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
+var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-standalone {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
 
 module.exports = featureListCss;
 //# sourceMappingURL=FeatureList.css.js.map

package/cjs/feature-list/FeatureList.js

@@ -34,22 +34,30 @@ const FeatureList = ({
   const content = React.useMemo(() => {
     if (Array.isArray(features)) {
       return [
-        /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", ListProps: listPropsFullHeight, children: features.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-          vuuLayout.PaletteItem,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-standalone`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          vuuLayout.Palette,
           {
-            closeable: true,
-            component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
-            label: featureProps.title,
-            resizeable: true,
-            resize: "defer",
-            header: true,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
-            ]
+            orientation: "vertical",
+            ListProps: listPropsFullHeight,
+            children: features.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              vuuLayout.PaletteItem,
+              {
+                closeable: true,
+                component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
+                label: featureProps.title,
+                resizeable: true,
+                resize: "defer",
+                header: true,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
+                ]
+              },
+              i
+            ))
           },
-          i
-        )) }, "0")
+          "0"
+        ) }, 0)
       ];
     } else {
       return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [

package/cjs/feature-list/FeatureList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureList.js","sources":["../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon, ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n  string,\n  FeatureProps<P>[]\n>;\n\nexport interface FeatureListProps<P extends object | undefined = object>\n  extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps<P>[] | GroupedFeatureProps<P>;\n}\n\nconst listPropsFullHeight: Partial<ListProps> = {\n  height: undefined,\n  itemHeight: 40,\n};\nconst listPropsAutoHeight: Partial<ListProps> = {\n  displayedItemCount: 100,\n  height: undefined,\n  itemHeight: 40,\n};\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\n  const content = useMemo<JSX.Element[]>(() => {\n    if (Array.isArray(features)) {\n      return [\n        <Palette key=\"0\" orientation=\"vertical\" ListProps={listPropsFullHeight}>\n          {features.map((featureProps, i) => (\n            <PaletteItem\n              closeable\n              component={<Feature {...featureProps} />}\n              key={i}\n              label={featureProps.title}\n              resizeable\n              resize=\"defer\"\n              header\n            >\n              <Icon name=\"draggable\" size={18} />\n              <span className={`${classBase}-itemName`}>\n                {featureProps.title}\n              </span>\n            </PaletteItem>\n          ))}\n        </Palette>,\n      ];\n    } else {\n      return Object.entries(features).map(([heading, featureList], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <Palette orientation=\"vertical\" ListProps={listPropsAutoHeight}>\n            {featureList.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>\n      ));\n    }\n  }, [features]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","featureListCss","useMemo","jsx","Palette","jsxs","PaletteItem","Feature","Icon"],"mappings":"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"}
+{"version":3,"file":"FeatureList.js","sources":["../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon, ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n  string,\n  FeatureProps<P>[]\n>;\n\nexport interface FeatureListProps<P extends object | undefined = object>\n  extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps<P>[] | GroupedFeatureProps<P>;\n}\n\nconst listPropsFullHeight: Partial<ListProps> = {\n  height: undefined,\n  itemHeight: 40,\n};\nconst listPropsAutoHeight: Partial<ListProps> = {\n  displayedItemCount: 100,\n  height: undefined,\n  itemHeight: 40,\n};\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\n  const content = useMemo<JSX.Element[]>(() => {\n    if (Array.isArray(features)) {\n      return [\n        <div className={`${classBase}-standalone`} key={0}>\n          <Palette\n            key=\"0\"\n            orientation=\"vertical\"\n            ListProps={listPropsFullHeight}\n          >\n            {features.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>,\n      ];\n    } else {\n      return Object.entries(features).map(([heading, featureList], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <Palette orientation=\"vertical\" ListProps={listPropsAutoHeight}>\n            {featureList.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>\n      ));\n    }\n  }, [features]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","featureListCss","useMemo","jsx","Palette","jsxs","PaletteItem","Feature","Icon"],"mappings":"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"}

package/cjs/layout-management/LayoutList.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutListCss = ".vuuLayoutList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuuListItem-separator-color: transparent;\n\n  background: var(\n    --vuuLayoutList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuLayoutList-padding, 0);\n\n  .vuuListItem {\n    border-bottom: none;\n    justify-content: space-between;\n  }\n}\n\n.vuuLayoutList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuLayoutList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuLayoutList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuLayoutList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuLayoutList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n  margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n  display: flex;\n  padding-top: 24px;\n  width: var(--vuuLayoutList-width);\n  font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 200%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+var layoutListCss = ".vuuLayoutList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuuList-borderStyle: none;\n  --vuuListItem-separator-color: transparent;\n\n  background: var(\n    --vuuLayoutList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuLayoutList-padding, 0);\n\n  .vuuListItem {\n    border-bottom: none;\n    justify-content: space-between;\n  }\n}\n\n.vuuLayoutList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuLayoutList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuLayoutList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuLayoutList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuLayoutList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n  margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n  display: flex;\n  padding-top: 24px;\n  width: var(--vuuLayoutList-width);\n  font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 200%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
 
 module.exports = layoutListCss;
 //# sourceMappingURL=LayoutList.css.js.map

package/cjs/layout-management/LayoutTile.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutTileCss = ".vuuLayoutTile-layoutTile {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0px;\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n  color: var(--light-text-primary, #15171B);\n  font-weight: 600;\n  line-height: 133.333%;\n  text-transform: capitalize;\n}\n\n.vuuLayoutTile-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #D6D7DA;\n}\n\n.vuuLayoutTile-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+var layoutTileCss = ".vuuLayoutTile-layoutTile {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0px;\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.vuuLayoutTile-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutTile-layoutDetails {\n  color: var(--salt-content-secondary-foreground);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
 
 module.exports = layoutTileCss;
 //# sourceMappingURL=LayoutTile.css.js.map

package/cjs/layout-management/SaveLayoutPanel.js

@@ -69,7 +69,6 @@ const SaveLayoutPanel = (props) => {
     [group]
   );
   const handleChange = React.useCallback((e) => {
-    console.log(`set Group ${e.target.value}`);
     setGroup(e.target.value);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContainer`, children: [

package/cjs/layout-management/SaveLayoutPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n  Button,\n  ComboBox,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n  Text,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  const handleSelectionChange = useCallback(\n    (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n      if (\n        (e as KeyboardEvent).key === \"Tab\" &&\n        !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n      ) {\n        // ignore. The ComboBox forces selection of a value from the list on Tab\n      } else {\n        setGroup(selectedValue || \"\");\n      }\n    },\n    [group]\n  );\n\n  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    console.log(`set Group ${e.target.value}`);\n    setGroup(e.target.value);\n  }, []);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              inputProps={{\n                autoComplete: \"off\",\n                className: `${classBase}-inputText`,\n                placeholder: \"Select Group or Enter New Name\",\n                // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                //   setGroup(event.target.value),\n              }}\n              onChange={handleChange}\n              onSelectionChange={handleSelectionChange}\n              value={group}\n            >\n              {groups.map((group, i) => (\n                <Option key={i} value={group} />\n              ))}\n            </ComboBox>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","useCallback","jsxs","FormField","FormFieldLabel","ComboBox","group","Option","Input","Button"],"mappings":"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"}
+{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n  Button,\n  ComboBox,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n  Text,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  const handleSelectionChange = useCallback(\n    (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n      if (\n        (e as KeyboardEvent).key === \"Tab\" &&\n        !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n      ) {\n        // ignore. The ComboBox forces selection of a value from the list on Tab\n      } else {\n        setGroup(selectedValue || \"\");\n      }\n    },\n    [group]\n  );\n\n  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    setGroup(e.target.value);\n  }, []);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              inputProps={{\n                autoComplete: \"off\",\n                className: `${classBase}-inputText`,\n                placeholder: \"Select Group or Enter New Name\",\n                // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                //   setGroup(event.target.value),\n              }}\n              onChange={handleChange}\n              onSelectionChange={handleSelectionChange}\n              value={group}\n            >\n              {groups.map((group, i) => (\n                <Option key={i} value={group} />\n              ))}\n            </ComboBox>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","useCallback","jsxs","FormField","FormFieldLabel","ComboBox","group","Option","Input","Button"],"mappings":";;;;;;;;;;;;;AAyBA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAClB,MAAM,SAAA,GAAY,GAAG,SAAS,CAAA,UAAA,CAAA,CAAA;AAE9B,MAAM,SAAS,CAAC,SAAA,EAAW,SAAW,EAAA,SAAA,EAAW,WAAW,SAAS,CAAA,CAAA;AASxD,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAA,MAAM,EAAE,YAAe,GAAA,EAAA,EAAI,QAAU,EAAA,MAAA,EAAQ,aAAgB,GAAA,KAAA,CAAA;AAE7D,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAiB,YAAY,CAAA,CAAA;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAiB,EAAE,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,cAA6B,EAAA,CAAA;AACjE,EAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GAAIA,cAE1D,EAAA,CAAA;AACF,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAIC,oCAA0B,EAAA,CAAA;AAE7C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAa,EAAA;AACf,MAAAC,8BAAA,CAAe,SAAS,cAAe,CAAA,WAAW,CAAgB,CAC/D,CAAA,IAAA,CAAK,CAACC,WAAe,KAAA;AACpB,QAAA,aAAA,CAAcA,WAAU,CAAA,CAAA;AAAA,OACzB,CAAA,CACA,KAAM,CAAA,CAAC,KAAiB,KAAA;AACvB,QAAA,yBAAA,CAA0B,MAAM,OAAO,CAAA,CAAA;AAAA,OACxC,CAAA,CAAA;AAAA,KACL;AAAA,GACF,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,MAAM,eAAe,MAAM;AACzB,IAAO,MAAA,CAAA;AAAA,MACL,IAAM,EAAA,UAAA;AAAA,MACN,KAAA;AAAA,MACA,YAAY,UAAc,IAAA,EAAA;AAAA,MAC1B,IAAM,EAAA,QAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoBC,cAAQ,MAAM;AACtC,IAAA,IAAI,UAAY,EAAA;AACd,MACE,uBAAAC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,UACvB,GAAK,EAAA,UAAA;AAAA,UACL,GAAI,EAAA,8BAAA;AAAA,SAAA;AAAA,OACN,CAAA;AAAA,KAEJ;AACA,IAAA,IAAI,sBAAwB,EAAA;AAC1B,MAAO,uBAAAA,cAAA,CAACC,aAAM,QAAuB,EAAA,sBAAA,EAAA,CAAA,CAAA;AAAA,KACvC;AACA,IAAO,uBAAAD,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,SAAU,EAAA,CAAA,CAAA;AAAA,GAC/B,EAAA,CAAC,UAAY,EAAA,sBAAsB,CAAC,CAAA,CAAA;AAEvC,EAAA,MAAM,qBAAwB,GAAAE,iBAAA;AAAA,IAC5B,CAAC,CAAA,EAAmC,CAAC,aAAa,CAAgB,KAAA;AAChE,MACG,IAAA,CAAA,CAAoB,GAAQ,KAAA,KAAA,IAC7B,CAAC,aAAA,CAAc,WAAY,EAAA,CAAE,UAAW,CAAA,KAAA,CAAM,WAAY,EAAC,CAC3D,EAAA,CAEK,MAAA;AACL,QAAA,QAAA,CAAS,iBAAiB,EAAE,CAAA,CAAA;AAAA,OAC9B;AAAA,KACF;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AAEA,EAAM,MAAA,YAAA,GAAeA,iBAAY,CAAA,CAAC,CAAqC,KAAA;AACrE,IAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,GACzB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,eAAA,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,cAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAACA,eAAA,CAAAC,cAAA,EAAA,EAAU,WAAW,SACpB,EAAA,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,uBAAe,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,0BACrBL,cAAA;AAAA,YAACM,aAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA;AAAA,gBACV,YAAc,EAAA,KAAA;AAAA,gBACd,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,gBACvB,WAAa,EAAA,gCAAA;AAAA;AAAA;AAAA,eAGf;AAAA,cACA,QAAU,EAAA,YAAA;AAAA,cACV,iBAAmB,EAAA,qBAAA;AAAA,cACnB,KAAO,EAAA,KAAA;AAAA,cAEN,QAAA,EAAA,MAAA,CAAO,GAAI,CAAA,CAACC,MAAO,EAAA,CAAA,oCACjBC,WAAe,EAAA,EAAA,KAAA,EAAOD,MAAV,EAAA,EAAA,CAAiB,CAC/B,CAAA;AAAA,aAAA;AAAA,WACH;AAAA,SACF,EAAA,CAAA;AAAA,wBACAJ,eAAA,CAACC,cAAU,EAAA,EAAA,SAAA,EAAW,SACpB,EAAA,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,0BAC3BL,cAAA;AAAA,YAACS,UAAA;AAAA,YAAA;AAAA,cACC,UAAY,EAAA;AAAA,gBACV,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,gBACvB,WAAa,EAAA,mBAAA;AAAA,eACf;AAAA,cACA,UAAU,CAAC,KAAA,KACT,aAAc,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,cAElC,KAAO,EAAA,UAAA;AAAA,aAAA;AAAA,WACT;AAAA,SACF,EAAA,CAAA;AAAA,OACF,EAAA,CAAA;AAAA,qCACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,wBACzB,QACH,EAAA,iBAAA,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACCN,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,iBAAA,CAAA,EAAA,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACU,eAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAiB,aAAA,CAAA,EAAA,OAAA,EAAS,UAAU,QAEnE,EAAA,QAAA,EAAA,CAAA;AAAA,sBACAV,cAAA;AAAA,QAACU,WAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,UACvB,OAAS,EAAA,YAAA;AAAA,UACT,QAAA,EAAU,UAAe,KAAA,EAAA,IAAM,KAAU,KAAA,EAAA;AAAA,UAC1C,QAAA,EAAA,MAAA;AAAA,SAAA;AAAA,OAED;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/layout-management/useLayoutContextMenuItems.js

@@ -2,20 +2,22 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var vuuPopups = require('@vuu-ui/vuu-popups');
 var useLayoutManager = require('./useLayoutManager.js');
 var SaveLayoutPanel = require('./SaveLayoutPanel.js');
 
-const useLayoutContextMenuItems = (setDialogState) => {
+const useLayoutContextMenuItems = () => {
   const { saveLayout } = useLayoutManager.useLayoutManager();
+  const { showDialog, closeDialog } = vuuPopups.useDialogContext();
   const handleCloseDialog = React.useCallback(() => {
-    setDialogState(void 0);
-  }, [setDialogState]);
+    closeDialog();
+  }, [closeDialog]);
   const handleSave = React.useCallback(
     (layoutMetadata) => {
       saveLayout(layoutMetadata);
-      setDialogState(void 0);
+      closeDialog();
     },
-    [saveLayout, setDialogState]
+    [saveLayout, closeDialog]
   );
   const [buildMenuOptions, handleMenuAction] = React.useMemo(() => {
     return [
@@ -39,12 +41,9 @@ const useLayoutContextMenuItems = (setDialogState) => {
         return menuDescriptors;
       },
       (action) => {
-        console.log("menu action", {
-          action
-        });
         if (action.menuId === "save-layout") {
-          setDialogState({
-            content: /* @__PURE__ */ jsxRuntime.jsx(
+          showDialog(
+            /* @__PURE__ */ jsxRuntime.jsx(
               SaveLayoutPanel.SaveLayoutPanel,
               {
                 onCancel: handleCloseDialog,
@@ -53,15 +52,16 @@ const useLayoutContextMenuItems = (setDialogState) => {
                 defaultTitle: action.options?.controlledComponentTitle
               }
             ),
-            title: "Save Layout",
-            hideCloseButton: true
-          });
+            "Save Layout",
+            [],
+            true
+          );
           return true;
         }
         return false;
       }
     ];
-  }, [handleCloseDialog, handleSave, setDialogState]);
+  }, [handleCloseDialog, handleSave, showDialog]);
   return {
     buildMenuOptions,
     handleMenuAction

package/cjs/layout-management/useLayoutContextMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutContextMenuItems.js","sources":["../../src/layout-management/useLayoutContextMenuItems.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useCallback, useMemo } from \"react\";\nimport { MenuActionClosePopup, SetDialog } from \"@vuu-ui/vuu-popups\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { SaveLayoutPanel } from \"./SaveLayoutPanel\";\n\nexport const useLayoutContextMenuItems = (setDialogState: SetDialog) => {\n  const { saveLayout } = useLayoutManager();\n\n  const handleCloseDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, [setDialogState]);\n\n  const handleSave = useCallback(\n    (layoutMetadata: LayoutMetadataDto) => {\n      saveLayout(layoutMetadata);\n      setDialogState(undefined);\n    },\n    [saveLayout, setDialogState]\n  );\n\n  const [buildMenuOptions, handleMenuAction] = useMemo<\n    [MenuBuilder, MenuActionHandler]\n  >(() => {\n    return [\n      (location, options) => {\n        const locations = location.split(\" \");\n        const menuDescriptors: ContextMenuItemDescriptor[] = [];\n        if (locations.includes(\"main-tab\")) {\n          menuDescriptors.push(\n            {\n              label: \"Save Layout\",\n              action: \"save-layout\",\n              options,\n            },\n            {\n              label: \"Layout Settings\",\n              action: \"layout-settings\",\n              options,\n            }\n          );\n        }\n        return menuDescriptors;\n      },\n      (action: MenuActionClosePopup) => {\n        console.log(\"menu action\", {\n          action,\n        });\n        if (action.menuId === \"save-layout\") {\n          setDialogState({\n            content: (\n              <SaveLayoutPanel\n                onCancel={handleCloseDialog}\n                onSave={handleSave}\n                componentId={action.options?.controlledComponentId}\n                defaultTitle={\n                  action.options?.controlledComponentTitle as string\n                }\n              />\n            ),\n            title: \"Save Layout\",\n            hideCloseButton: true,\n          });\n          return true;\n        }\n        return false;\n      },\n    ];\n  }, [handleCloseDialog, handleSave, setDialogState]);\n\n  return {\n    buildMenuOptions,\n    handleMenuAction,\n  };\n};\n"],"names":["useLayoutManager","useCallback","useMemo","jsx","SaveLayoutPanel"],"mappings":";;;;;;;AAWa,MAAA,yBAAA,GAA4B,CAAC,cAA8B,KAAA;AACtE,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,iCAAiB,EAAA,CAAA;AAExC,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,cAAsC,KAAA;AACrC,MAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACzB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,cAAc,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,CAAC,gBAAA,EAAkB,gBAAgB,CAAA,GAAIC,cAE3C,MAAM;AACN,IAAO,OAAA;AAAA,MACL,CAAC,UAAU,OAAY,KAAA;AACrB,QAAM,MAAA,SAAA,GAAY,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACpC,QAAA,MAAM,kBAA+C,EAAC,CAAA;AACtD,QAAI,IAAA,SAAA,CAAU,QAAS,CAAA,UAAU,CAAG,EAAA;AAClC,UAAgB,eAAA,CAAA,IAAA;AAAA,YACd;AAAA,cACE,KAAO,EAAA,aAAA;AAAA,cACP,MAAQ,EAAA,aAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,YACA;AAAA,cACE,KAAO,EAAA,iBAAA;AAAA,cACP,MAAQ,EAAA,iBAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,WACF,CAAA;AAAA,SACF;AACA,QAAO,OAAA,eAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,MAAiC,KAAA;AAChC,QAAA,OAAA,CAAQ,IAAI,aAAe,EAAA;AAAA,UACzB,MAAA;AAAA,SACD,CAAA,CAAA;AACD,QAAI,IAAA,MAAA,CAAO,WAAW,aAAe,EAAA;AACnC,UAAe,cAAA,CAAA;AAAA,YACb,OACE,kBAAAC,cAAA;AAAA,cAACC,+BAAA;AAAA,cAAA;AAAA,gBACC,QAAU,EAAA,iBAAA;AAAA,gBACV,MAAQ,EAAA,UAAA;AAAA,gBACR,WAAA,EAAa,OAAO,OAAS,EAAA,qBAAA;AAAA,gBAC7B,YAAA,EACE,OAAO,OAAS,EAAA,wBAAA;AAAA,eAAA;AAAA,aAEpB;AAAA,YAEF,KAAO,EAAA,aAAA;AAAA,YACP,eAAiB,EAAA,IAAA;AAAA,WAClB,CAAA,CAAA;AACD,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,cAAc,CAAC,CAAA,CAAA;AAElD,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useLayoutContextMenuItems.js","sources":["../../src/layout-management/useLayoutContextMenuItems.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useCallback, useMemo } from \"react\";\nimport { MenuActionClosePopup, useDialogContext } from \"@vuu-ui/vuu-popups\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { SaveLayoutPanel } from \"./SaveLayoutPanel\";\n\nexport const useLayoutContextMenuItems = () => {\n  const { saveLayout } = useLayoutManager();\n\n  const { showDialog, closeDialog } = useDialogContext();\n\n  const handleCloseDialog = useCallback(() => {\n    closeDialog();\n  }, [closeDialog]);\n\n  const handleSave = useCallback(\n    (layoutMetadata: LayoutMetadataDto) => {\n      saveLayout(layoutMetadata);\n      closeDialog();\n    },\n    [saveLayout, closeDialog]\n  );\n\n  const [buildMenuOptions, handleMenuAction] = useMemo<\n    [MenuBuilder, MenuActionHandler]\n  >(() => {\n    return [\n      (location, options) => {\n        const locations = location.split(\" \");\n        const menuDescriptors: ContextMenuItemDescriptor[] = [];\n        if (locations.includes(\"main-tab\")) {\n          menuDescriptors.push(\n            {\n              label: \"Save Layout\",\n              action: \"save-layout\",\n              options,\n            },\n            {\n              label: \"Layout Settings\",\n              action: \"layout-settings\",\n              options,\n            }\n          );\n        }\n        return menuDescriptors;\n      },\n      (action: MenuActionClosePopup) => {\n        if (action.menuId === \"save-layout\") {\n          showDialog(\n            <SaveLayoutPanel\n              onCancel={handleCloseDialog}\n              onSave={handleSave}\n              componentId={action.options?.controlledComponentId}\n              defaultTitle={action.options?.controlledComponentTitle as string}\n            />,\n            \"Save Layout\",\n            [],\n            true\n          );\n          return true;\n        }\n        return false;\n      },\n    ];\n  }, [handleCloseDialog, handleSave, showDialog]);\n\n  return {\n    buildMenuOptions,\n    handleMenuAction,\n  };\n};\n"],"names":["useLayoutManager","useDialogContext","useCallback","useMemo","jsx","SaveLayoutPanel"],"mappings":";;;;;;;;AAWO,MAAM,4BAA4B,MAAM;AAC7C,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,iCAAiB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAA,EAAY,WAAY,EAAA,GAAIC,0BAAiB,EAAA,CAAA;AAErD,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAY,WAAA,EAAA,CAAA;AAAA,GACd,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,cAAsC,KAAA;AACrC,MAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACzB,MAAY,WAAA,EAAA,CAAA;AAAA,KACd;AAAA,IACA,CAAC,YAAY,WAAW,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,MAAM,CAAC,gBAAA,EAAkB,gBAAgB,CAAA,GAAIC,cAE3C,MAAM;AACN,IAAO,OAAA;AAAA,MACL,CAAC,UAAU,OAAY,KAAA;AACrB,QAAM,MAAA,SAAA,GAAY,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACpC,QAAA,MAAM,kBAA+C,EAAC,CAAA;AACtD,QAAI,IAAA,SAAA,CAAU,QAAS,CAAA,UAAU,CAAG,EAAA;AAClC,UAAgB,eAAA,CAAA,IAAA;AAAA,YACd;AAAA,cACE,KAAO,EAAA,aAAA;AAAA,cACP,MAAQ,EAAA,aAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,YACA;AAAA,cACE,KAAO,EAAA,iBAAA;AAAA,cACP,MAAQ,EAAA,iBAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,WACF,CAAA;AAAA,SACF;AACA,QAAO,OAAA,eAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,MAAiC,KAAA;AAChC,QAAI,IAAA,MAAA,CAAO,WAAW,aAAe,EAAA;AACnC,UAAA,UAAA;AAAA,4BACEC,cAAA;AAAA,cAACC,+BAAA;AAAA,cAAA;AAAA,gBACC,QAAU,EAAA,iBAAA;AAAA,gBACV,MAAQ,EAAA,UAAA;AAAA,gBACR,WAAA,EAAa,OAAO,OAAS,EAAA,qBAAA;AAAA,gBAC7B,YAAA,EAAc,OAAO,OAAS,EAAA,wBAAA;AAAA,eAAA;AAAA,aAChC;AAAA,YACA,aAAA;AAAA,YACA,EAAC;AAAA,YACD,IAAA;AAAA,WACF,CAAA;AACA,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,UAAU,CAAC,CAAA,CAAA;AAE9C,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/cjs/left-nav/LeftNav.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var leftNavCss = ".vuuLeftNav {\n  --vuuOverflowContainer-height: auto;\n  --vuuFeatureList-padding: 195px 32px 16px 24px;\n  --salt-navigable-fontWeight-active: 700;\n  --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n  --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n  --vuuTab-before-content: none;\n  --vuuTab-borderRadius: 6px;\n  --vuuTab-height: 40px;\n  --vuuTabstrip-fontWeight: 700;\n  --vuuTabstrip-width: 100%;\n  --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n  --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n  --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n  --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n  --vuu-light-text-primary: #15171b;\n\n  --menu-level-2-width: 0px;\n\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: calc(100% - 4px);\n  margin-bottom: 4px;\n  overflow: hidden;\n  position: relative;\n  transition: width 0.2s ease-out;\n  z-index: 0;\n  /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n  /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n  --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n  --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n  --menu-width: var(--nav-menu-collapsed-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n  --menu-width: var(--nav-menu-expanded-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n  display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n  background-color: #2a015f;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 32px 16px;\n  transition: flex-basis ease-out 0.2s;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n  flex: 1 1 auto;\n  display: none;\n  /* position: absolute; */\n  top: 0;\n  right: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--nav-menu-content-width, 240px);\n  z-index: -1;\n\n  .vuuTabs-tabPanel {\n    background: var(--salt-container-primary-background);\n    height: 100%;\n    padding: var(--salt-spacing-200) var(--salt-spacing-100)\n      var(--salt-spacing-200) var(--salt-spacing-400);\n  }\n}\n\n.vuuLeftNav .vuuTabstrip {\n  margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n  --vuuTab-focusVisible-color: pink;\n  --vuu-icon-color: white;\n  --vuu-icon-left: 12px;\n  --vuu-icon-size: 16px;\n  border-left: solid 4px transparent;\n  padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n  --vuu-icon-color: var(--salt-navigable-indicator-active);\n  border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.vuuLeftNav-main {\n  flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n  color: white;\n  margin-top: 102px;\n  padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n  --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n  --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n  --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n  --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n  .vuuTab {\n    /* --vuu-icon-left: 12px !important; */\n    --vuuTab-padding: 0 0 0 42px;\n  }\n\n  .vuuTab-main {\n    display: none !important;\n  }\n}\n\n.vuuLeftNav-buttonBar {\n  align-items: center;\n  display: flex;\n  flex: 0 0 100px;\n  justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n  --vuu-icon-color: var(--vuu-light-text-primary);\n  --vuu-icon-left: 11px;\n  --vuu-icon-top: 10px;\n  --vuu-icon-size: 16px;\n  background-color: var(--salt-navigable-indicator-active);\n  border-width: 0;\n  border-radius: 18px;\n  height: 36px;\n  position: relative;\n  width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n  --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n  display: flex;\n  padding: 0 0 0 24px;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-shrink: 0;\n  align-self: stretch;\n  background: #fff;\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  height: 100%;\n}\n";
+var leftNavCss = ".vuuLeftNav {\n  --vuuOverflowContainer-height: auto;\n  --vuuFeatureList-padding: 195px 32px 16px 24px;\n  --salt-navigable-fontWeight-active: 700;\n  --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n  --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n  --vuuTab-before-content: none;\n  --vuuTab-borderRadius: 6px;\n  --vuuTab-height: 40px;\n  --vuuTabstrip-fontWeight: 700;\n  --vuuTabstrip-width: 100%;\n  --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n  --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n  --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n  --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n  --vuu-light-text-primary: #15171b;\n\n  --menu-level-2-width: 0px;\n\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: calc(100% - 4px);\n  margin-bottom: 4px;\n  overflow: hidden;\n  position: relative;\n  transition: width 0.2s ease-out;\n  z-index: 0;\n  /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n  /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n  --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n  --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n  --menu-width: var(--nav-menu-collapsed-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n  --menu-width: var(--nav-menu-expanded-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n  display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n  background-color: #2a015f;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 32px 16px;\n  transition: flex-basis ease-out 0.2s;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n  flex: 1 1 auto;\n  display: none;\n  /* position: absolute; */\n  top: 0;\n  right: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--nav-menu-content-width, 240px);\n  z-index: -1;\n\n  .vuuTabs-tabPanel {\n    background: var(--salt-container-primary-background);\n    height: 100%;\n    padding: 34px 32px 8px 24px;\n  }\n}\n\n.vuuLeftNav .vuuTabstrip {\n  margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n  --vuuTab-focusVisible-color: pink;\n  --vuu-icon-color: white;\n  --vuu-icon-left: 12px;\n  --vuu-icon-size: 16px;\n  border-left: solid 4px transparent;\n  padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n  --vuu-icon-color: var(--salt-navigable-indicator-active);\n  border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.vuuLeftNav-main {\n  flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n  color: white;\n  margin-top: 102px;\n  padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n  --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n  --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n  --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n  --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n  .vuuTab {\n    /* --vuu-icon-left: 12px !important; */\n    --vuuTab-padding: 0 0 0 42px;\n  }\n\n  .vuuTab-main {\n    display: none !important;\n  }\n}\n\n.vuuLeftNav-buttonBar {\n  align-items: center;\n  display: flex;\n  flex: 0 0 100px;\n  justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n  --vuu-icon-color: var(--vuu-light-text-primary);\n  --vuu-icon-left: 11px;\n  --vuu-icon-top: 10px;\n  --vuu-icon-size: 16px;\n  background-color: var(--salt-navigable-indicator-active);\n  border-width: 0;\n  border-radius: 18px;\n  height: 36px;\n  position: relative;\n  width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n  --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n  display: flex;\n  padding: 0 0 0 24px;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-shrink: 0;\n  align-self: stretch;\n  background: #fff;\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  height: 100%;\n}\n";
 
 module.exports = leftNavCss;
 //# sourceMappingURL=LeftNav.css.js.map

package/cjs/left-nav/LeftNav.js

@@ -14,6 +14,7 @@ require('html-to-image');
 require('@salt-ds/core');
 var LayoutList = require('../layout-management/LayoutList.js');
 require('../layout-management/useLayoutManager.js');
+require('@vuu-ui/vuu-popups');
 var LeftNav$1 = require('./LeftNav.css.js');
 
 const classBase = "vuuLeftNav";
@@ -198,7 +199,7 @@ const LeftNav = (props) => {
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(FeatureList.FeatureList, { features, title: "VUU FEATURES" }),
               /* @__PURE__ */ jsxRuntime.jsx(FeatureList.FeatureList, { features: tableFeaturesByGroup, title: "VUU TABLES" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-drawer", children: /* @__PURE__ */ jsxRuntime.jsx(LayoutList.LayoutList, { title: "My Layouts" }) })
+              /* @__PURE__ */ jsxRuntime.jsx(LayoutList.LayoutList, { title: "MY LAYOUTS" })
             ]
           }
         )

package/cjs/left-nav/LeftNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  console.log(\"LeftNav\", {\n    tableFeatures,\n  });\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <div className=\"vuuLeftNav-drawer\">\n          <LayoutList title=\"My Layouts\" />\n        </div>\n      </Stack>\n    </div>\n  );\n};\n"],"names":["useLayoutProviderDispatch","useThemeAttributes","useWindow","useComponentCssInjection","leftNavCss","useState","useMemo","hasFilterTableFeatureProps","useCallback","jsxs","jsx","VuuLogo","Tabstrip","Tab","Stack","FeatureList","LayoutList"],"mappings":"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"}
+{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  console.log(\"LeftNav\", {\n    tableFeatures,\n  });\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <LayoutList title=\"MY LAYOUTS\" />\n      </Stack>\n    </div>\n  );\n};\n"],"names":["useLayoutProviderDispatch","useThemeAttributes","useWindow","useComponentCssInjection","leftNavCss","useState","useMemo","hasFilterTableFeatureProps","useCallback","jsxs","jsx","VuuLogo","Tabstrip","Tab","Stack","FeatureList","LayoutList"],"mappings":"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"}

package/cjs/shell.js

@@ -34,7 +34,7 @@ if (process.env.NODE_ENV === "production") {
 }
 const { error } = vuuUtils.logger("Shell");
 const defaultLeftSidePanel = {};
-const Shell = ({
+const VuuApplication = ({
   LayoutProps,
   LeftSidePanelProps = defaultLeftSidePanel,
   children,
@@ -53,9 +53,8 @@ const Shell = ({
     window: targetWindow
   });
   const rootRef = React.useRef(null);
-  const { dialog, setDialogState } = vuuPopups.useDialog();
   const { applicationJson, saveApplicationLayout } = useLayoutManager.useLayoutManager();
-  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems.useLayoutContextMenuItems(setDialogState);
+  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems.useLayoutContextMenuItems();
   const [connectionStatus, setConnectionStatus] = React.useState("connected");
   const handleLayoutChange = React.useCallback(
     (layout) => {
@@ -87,7 +86,7 @@ const Shell = ({
   if (connectionStatus === "rejected") {
     console.log("game over, no connection to server");
   }
-  return isLayoutLoading ? null : /* @__PURE__ */ jsxRuntime.jsx(ApplicationProvider.ApplicationProvider, { user, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return isLayoutLoading ? null : /* @__PURE__ */ jsxRuntime.jsxs(
     vuuPopups.ContextMenuProvider,
     {
       menuActionHandler: handleMenuAction,
@@ -110,10 +109,18 @@ const Shell = ({
             )
           }
         ),
-        children || dialog
+        children
       ]
     }
-  ) });
+  );
+};
+const Shell = ({ user, ...props }) => {
+  return (
+    // ApplicationProvider must go outside Dialog and Notification providers
+    // ApplicationProvider injects the SaltProvider and this must be the root
+    // SaltProvider.
+    /* @__PURE__ */ jsxRuntime.jsx(ApplicationProvider.ApplicationProvider, { user, children: /* @__PURE__ */ jsxRuntime.jsx(useLayoutManager.LayoutManagementProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(vuuPopups.DialogProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(vuuPopups.NotificationsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VuuApplication, { ...props, user }) }) }) }) })
+  );
 };
 
 exports.Shell = Shell;

package/cjs/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { dialog, setDialogState } = useDialog();\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } =\n    useLayoutContextMenuItems(setDialogState);\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ApplicationProvider user={user}>\n      <ContextMenuProvider\n        menuActionHandler={handleMenuAction}\n        menuBuilder={buildMenuOptions}\n      >\n        <LayoutProvider\n          {...LayoutProps}\n          layout={applicationJson.layout}\n          onLayoutChange={handleLayoutChange}\n        >\n          <DraggableLayout\n            className={className}\n            ref={rootRef}\n            {...htmlAttributes}\n          >\n            {shellLayout}\n          </DraggableLayout>\n        </LayoutProvider>\n        {children || dialog}\n      </ContextMenuProvider>\n    </ApplicationProvider>\n  );\n};\n"],"names":["registerComponent","ApplicationSettingsPanel","StackLayout","logger","useWindow","useComponentCssInjection","shellCss","useRef","useDialog","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingApplicationJson","useShellLayout","jsx","AppHeader","ApplicationProvider","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n  LayoutManagementProvider,\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst VuuApplication = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        {...LayoutProps}\n        layout={applicationJson.layout}\n        onLayoutChange={handleLayoutChange}\n      >\n        <DraggableLayout\n          className={className}\n          ref={rootRef}\n          {...htmlAttributes}\n        >\n          {shellLayout}\n        </DraggableLayout>\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({ user, ...props }: ShellProps) => {\n  return (\n    // ApplicationProvider must go outside Dialog and Notification providers\n    // ApplicationProvider injects the SaltProvider and this must be the root\n    // SaltProvider.\n    <ApplicationProvider user={user}>\n      <LayoutManagementProvider>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </LayoutManagementProvider>\n    </ApplicationProvider>\n  );\n};\n"],"names":["registerComponent","ApplicationSettingsPanel","StackLayout","logger","useWindow","useComponentCssInjection","shellCss","useRef","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingApplicationJson","useShellLayout","jsx","AppHeader","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout","ApplicationProvider","LayoutManagementProvider","DialogProvider","NotificationsProvider"],"mappings":"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"}

package/esm/feature-list/FeatureList.css.js

@@ -1,4 +1,4 @@
-var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
+var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-standalone {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
 
 export { featureListCss as default };
 //# sourceMappingURL=FeatureList.css.js.map

package/esm/feature-list/FeatureList.js

@@ -32,22 +32,30 @@ const FeatureList = ({
   const content = useMemo(() => {
     if (Array.isArray(features)) {
       return [
-        /* @__PURE__ */ jsx(Palette, { orientation: "vertical", ListProps: listPropsFullHeight, children: features.map((featureProps, i) => /* @__PURE__ */ jsxs(
-          PaletteItem,
+        /* @__PURE__ */ jsx("div", { className: `${classBase}-standalone`, children: /* @__PURE__ */ jsx(
+          Palette,
           {
-            closeable: true,
-            component: /* @__PURE__ */ jsx(Feature, { ...featureProps }),
-            label: featureProps.title,
-            resizeable: true,
-            resize: "defer",
-            header: true,
-            children: [
-              /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
-              /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
-            ]
+            orientation: "vertical",
+            ListProps: listPropsFullHeight,
+            children: features.map((featureProps, i) => /* @__PURE__ */ jsxs(
+              PaletteItem,
+              {
+                closeable: true,
+                component: /* @__PURE__ */ jsx(Feature, { ...featureProps }),
+                label: featureProps.title,
+                resizeable: true,
+                resize: "defer",
+                header: true,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
+                  /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
+                ]
+              },
+              i
+            ))
           },
-          i
-        )) }, "0")
+          "0"
+        ) }, 0)
       ];
     } else {
       return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxs("div", { className: `${classBase}-group`, children: [

package/esm/feature-list/FeatureList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureList.js","sources":["../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon, ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n  string,\n  FeatureProps<P>[]\n>;\n\nexport interface FeatureListProps<P extends object | undefined = object>\n  extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps<P>[] | GroupedFeatureProps<P>;\n}\n\nconst listPropsFullHeight: Partial<ListProps> = {\n  height: undefined,\n  itemHeight: 40,\n};\nconst listPropsAutoHeight: Partial<ListProps> = {\n  displayedItemCount: 100,\n  height: undefined,\n  itemHeight: 40,\n};\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\n  const content = useMemo<JSX.Element[]>(() => {\n    if (Array.isArray(features)) {\n      return [\n        <Palette key=\"0\" orientation=\"vertical\" ListProps={listPropsFullHeight}>\n          {features.map((featureProps, i) => (\n            <PaletteItem\n              closeable\n              component={<Feature {...featureProps} />}\n              key={i}\n              label={featureProps.title}\n              resizeable\n              resize=\"defer\"\n              header\n            >\n              <Icon name=\"draggable\" size={18} />\n              <span className={`${classBase}-itemName`}>\n                {featureProps.title}\n              </span>\n            </PaletteItem>\n          ))}\n        </Palette>,\n      ];\n    } else {\n      return Object.entries(features).map(([heading, featureList], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <Palette orientation=\"vertical\" ListProps={listPropsAutoHeight}>\n            {featureList.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>\n      ));\n    }\n  }, [features]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FeatureList.js","sources":["../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon, ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n  string,\n  FeatureProps<P>[]\n>;\n\nexport interface FeatureListProps<P extends object | undefined = object>\n  extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps<P>[] | GroupedFeatureProps<P>;\n}\n\nconst listPropsFullHeight: Partial<ListProps> = {\n  height: undefined,\n  itemHeight: 40,\n};\nconst listPropsAutoHeight: Partial<ListProps> = {\n  displayedItemCount: 100,\n  height: undefined,\n  itemHeight: 40,\n};\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\n  const content = useMemo<JSX.Element[]>(() => {\n    if (Array.isArray(features)) {\n      return [\n        <div className={`${classBase}-standalone`} key={0}>\n          <Palette\n            key=\"0\"\n            orientation=\"vertical\"\n            ListProps={listPropsFullHeight}\n          >\n            {features.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>,\n      ];\n    } else {\n      return Object.entries(features).map(([heading, featureList], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <Palette orientation=\"vertical\" ListProps={listPropsAutoHeight}>\n            {featureList.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>\n      ));\n    }\n  }, [features]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/layout-management/LayoutList.css.js

@@ -1,4 +1,4 @@
-var layoutListCss = ".vuuLayoutList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuuListItem-separator-color: transparent;\n\n  background: var(\n    --vuuLayoutList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuLayoutList-padding, 0);\n\n  .vuuListItem {\n    border-bottom: none;\n    justify-content: space-between;\n  }\n}\n\n.vuuLayoutList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuLayoutList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuLayoutList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuLayoutList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuLayoutList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n  margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n  display: flex;\n  padding-top: 24px;\n  width: var(--vuuLayoutList-width);\n  font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 200%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+var layoutListCss = ".vuuLayoutList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuuList-borderStyle: none;\n  --vuuListItem-separator-color: transparent;\n\n  background: var(\n    --vuuLayoutList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuLayoutList-padding, 0);\n\n  .vuuListItem {\n    border-bottom: none;\n    justify-content: space-between;\n  }\n}\n\n.vuuLayoutList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuLayoutList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuLayoutList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuLayoutList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuLayoutList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n  margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n  display: flex;\n  padding-top: 24px;\n  width: var(--vuuLayoutList-width);\n  font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 200%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
 
 export { layoutListCss as default };
 //# sourceMappingURL=LayoutList.css.js.map

package/esm/layout-management/LayoutTile.css.js

@@ -1,4 +1,4 @@
-var layoutTileCss = ".vuuLayoutTile-layoutTile {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0px;\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n  color: var(--light-text-primary, #15171B);\n  font-weight: 600;\n  line-height: 133.333%;\n  text-transform: capitalize;\n}\n\n.vuuLayoutTile-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #D6D7DA;\n}\n\n.vuuLayoutTile-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+var layoutTileCss = ".vuuLayoutTile-layoutTile {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0px;\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.vuuLayoutTile-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutTile-layoutDetails {\n  color: var(--salt-content-secondary-foreground);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
 
 export { layoutTileCss as default };
 //# sourceMappingURL=LayoutTile.css.js.map

package/esm/layout-management/SaveLayoutPanel.js

@@ -67,7 +67,6 @@ const SaveLayoutPanel = (props) => {
     [group]
   );
   const handleChange = useCallback((e) => {
-    console.log(`set Group ${e.target.value}`);
     setGroup(e.target.value);
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: `${classBase}-panelContainer`, children: [

package/esm/layout-management/SaveLayoutPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n  Button,\n  ComboBox,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n  Text,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  const handleSelectionChange = useCallback(\n    (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n      if (\n        (e as KeyboardEvent).key === \"Tab\" &&\n        !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n      ) {\n        // ignore. The ComboBox forces selection of a value from the list on Tab\n      } else {\n        setGroup(selectedValue || \"\");\n      }\n    },\n    [group]\n  );\n\n  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    console.log(`set Group ${e.target.value}`);\n    setGroup(e.target.value);\n  }, []);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              inputProps={{\n                autoComplete: \"off\",\n                className: `${classBase}-inputText`,\n                placeholder: \"Select Group or Enter New Name\",\n                // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                //   setGroup(event.target.value),\n              }}\n              onChange={handleChange}\n              onSelectionChange={handleSelectionChange}\n              value={group}\n            >\n              {groups.map((group, i) => (\n                <Option key={i} value={group} />\n              ))}\n            </ComboBox>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["screenshot","group"],"mappings":"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"}
+{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n  Button,\n  ComboBox,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n  Text,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  const handleSelectionChange = useCallback(\n    (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n      if (\n        (e as KeyboardEvent).key === \"Tab\" &&\n        !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n      ) {\n        // ignore. The ComboBox forces selection of a value from the list on Tab\n      } else {\n        setGroup(selectedValue || \"\");\n      }\n    },\n    [group]\n  );\n\n  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    setGroup(e.target.value);\n  }, []);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              inputProps={{\n                autoComplete: \"off\",\n                className: `${classBase}-inputText`,\n                placeholder: \"Select Group or Enter New Name\",\n                // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                //   setGroup(event.target.value),\n              }}\n              onChange={handleChange}\n              onSelectionChange={handleSelectionChange}\n              value={group}\n            >\n              {groups.map((group, i) => (\n                <Option key={i} value={group} />\n              ))}\n            </ComboBox>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["screenshot","group"],"mappings":"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"}

package/esm/layout-management/useLayoutContextMenuItems.js

@@ -1,19 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { useCallback, useMemo } from 'react';
+import { useDialogContext } from '@vuu-ui/vuu-popups';
 import { useLayoutManager } from './useLayoutManager.js';
 import { SaveLayoutPanel } from './SaveLayoutPanel.js';
 
-const useLayoutContextMenuItems = (setDialogState) => {
+const useLayoutContextMenuItems = () => {
   const { saveLayout } = useLayoutManager();
+  const { showDialog, closeDialog } = useDialogContext();
   const handleCloseDialog = useCallback(() => {
-    setDialogState(void 0);
-  }, [setDialogState]);
+    closeDialog();
+  }, [closeDialog]);
   const handleSave = useCallback(
     (layoutMetadata) => {
       saveLayout(layoutMetadata);
-      setDialogState(void 0);
+      closeDialog();
     },
-    [saveLayout, setDialogState]
+    [saveLayout, closeDialog]
   );
   const [buildMenuOptions, handleMenuAction] = useMemo(() => {
     return [
@@ -37,12 +39,9 @@ const useLayoutContextMenuItems = (setDialogState) => {
         return menuDescriptors;
       },
       (action) => {
-        console.log("menu action", {
-          action
-        });
         if (action.menuId === "save-layout") {
-          setDialogState({
-            content: /* @__PURE__ */ jsx(
+          showDialog(
+            /* @__PURE__ */ jsx(
               SaveLayoutPanel,
               {
                 onCancel: handleCloseDialog,
@@ -51,15 +50,16 @@ const useLayoutContextMenuItems = (setDialogState) => {
                 defaultTitle: action.options?.controlledComponentTitle
               }
             ),
-            title: "Save Layout",
-            hideCloseButton: true
-          });
+            "Save Layout",
+            [],
+            true
+          );
           return true;
         }
         return false;
       }
     ];
-  }, [handleCloseDialog, handleSave, setDialogState]);
+  }, [handleCloseDialog, handleSave, showDialog]);
   return {
     buildMenuOptions,
     handleMenuAction

package/esm/layout-management/useLayoutContextMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutContextMenuItems.js","sources":["../../src/layout-management/useLayoutContextMenuItems.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useCallback, useMemo } from \"react\";\nimport { MenuActionClosePopup, SetDialog } from \"@vuu-ui/vuu-popups\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { SaveLayoutPanel } from \"./SaveLayoutPanel\";\n\nexport const useLayoutContextMenuItems = (setDialogState: SetDialog) => {\n  const { saveLayout } = useLayoutManager();\n\n  const handleCloseDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, [setDialogState]);\n\n  const handleSave = useCallback(\n    (layoutMetadata: LayoutMetadataDto) => {\n      saveLayout(layoutMetadata);\n      setDialogState(undefined);\n    },\n    [saveLayout, setDialogState]\n  );\n\n  const [buildMenuOptions, handleMenuAction] = useMemo<\n    [MenuBuilder, MenuActionHandler]\n  >(() => {\n    return [\n      (location, options) => {\n        const locations = location.split(\" \");\n        const menuDescriptors: ContextMenuItemDescriptor[] = [];\n        if (locations.includes(\"main-tab\")) {\n          menuDescriptors.push(\n            {\n              label: \"Save Layout\",\n              action: \"save-layout\",\n              options,\n            },\n            {\n              label: \"Layout Settings\",\n              action: \"layout-settings\",\n              options,\n            }\n          );\n        }\n        return menuDescriptors;\n      },\n      (action: MenuActionClosePopup) => {\n        console.log(\"menu action\", {\n          action,\n        });\n        if (action.menuId === \"save-layout\") {\n          setDialogState({\n            content: (\n              <SaveLayoutPanel\n                onCancel={handleCloseDialog}\n                onSave={handleSave}\n                componentId={action.options?.controlledComponentId}\n                defaultTitle={\n                  action.options?.controlledComponentTitle as string\n                }\n              />\n            ),\n            title: \"Save Layout\",\n            hideCloseButton: true,\n          });\n          return true;\n        }\n        return false;\n      },\n    ];\n  }, [handleCloseDialog, handleSave, setDialogState]);\n\n  return {\n    buildMenuOptions,\n    handleMenuAction,\n  };\n};\n"],"names":[],"mappings":";;;;;AAWa,MAAA,yBAAA,GAA4B,CAAC,cAA8B,KAAA;AACtE,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAExC,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,cAAsC,KAAA;AACrC,MAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACzB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,cAAc,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,CAAC,gBAAA,EAAkB,gBAAgB,CAAA,GAAI,QAE3C,MAAM;AACN,IAAO,OAAA;AAAA,MACL,CAAC,UAAU,OAAY,KAAA;AACrB,QAAM,MAAA,SAAA,GAAY,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACpC,QAAA,MAAM,kBAA+C,EAAC,CAAA;AACtD,QAAI,IAAA,SAAA,CAAU,QAAS,CAAA,UAAU,CAAG,EAAA;AAClC,UAAgB,eAAA,CAAA,IAAA;AAAA,YACd;AAAA,cACE,KAAO,EAAA,aAAA;AAAA,cACP,MAAQ,EAAA,aAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,YACA;AAAA,cACE,KAAO,EAAA,iBAAA;AAAA,cACP,MAAQ,EAAA,iBAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,WACF,CAAA;AAAA,SACF;AACA,QAAO,OAAA,eAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,MAAiC,KAAA;AAChC,QAAA,OAAA,CAAQ,IAAI,aAAe,EAAA;AAAA,UACzB,MAAA;AAAA,SACD,CAAA,CAAA;AACD,QAAI,IAAA,MAAA,CAAO,WAAW,aAAe,EAAA;AACnC,UAAe,cAAA,CAAA;AAAA,YACb,OACE,kBAAA,GAAA;AAAA,cAAC,eAAA;AAAA,cAAA;AAAA,gBACC,QAAU,EAAA,iBAAA;AAAA,gBACV,MAAQ,EAAA,UAAA;AAAA,gBACR,WAAA,EAAa,OAAO,OAAS,EAAA,qBAAA;AAAA,gBAC7B,YAAA,EACE,OAAO,OAAS,EAAA,wBAAA;AAAA,eAAA;AAAA,aAEpB;AAAA,YAEF,KAAO,EAAA,aAAA;AAAA,YACP,eAAiB,EAAA,IAAA;AAAA,WAClB,CAAA,CAAA;AACD,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,cAAc,CAAC,CAAA,CAAA;AAElD,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useLayoutContextMenuItems.js","sources":["../../src/layout-management/useLayoutContextMenuItems.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useCallback, useMemo } from \"react\";\nimport { MenuActionClosePopup, useDialogContext } from \"@vuu-ui/vuu-popups\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { SaveLayoutPanel } from \"./SaveLayoutPanel\";\n\nexport const useLayoutContextMenuItems = () => {\n  const { saveLayout } = useLayoutManager();\n\n  const { showDialog, closeDialog } = useDialogContext();\n\n  const handleCloseDialog = useCallback(() => {\n    closeDialog();\n  }, [closeDialog]);\n\n  const handleSave = useCallback(\n    (layoutMetadata: LayoutMetadataDto) => {\n      saveLayout(layoutMetadata);\n      closeDialog();\n    },\n    [saveLayout, closeDialog]\n  );\n\n  const [buildMenuOptions, handleMenuAction] = useMemo<\n    [MenuBuilder, MenuActionHandler]\n  >(() => {\n    return [\n      (location, options) => {\n        const locations = location.split(\" \");\n        const menuDescriptors: ContextMenuItemDescriptor[] = [];\n        if (locations.includes(\"main-tab\")) {\n          menuDescriptors.push(\n            {\n              label: \"Save Layout\",\n              action: \"save-layout\",\n              options,\n            },\n            {\n              label: \"Layout Settings\",\n              action: \"layout-settings\",\n              options,\n            }\n          );\n        }\n        return menuDescriptors;\n      },\n      (action: MenuActionClosePopup) => {\n        if (action.menuId === \"save-layout\") {\n          showDialog(\n            <SaveLayoutPanel\n              onCancel={handleCloseDialog}\n              onSave={handleSave}\n              componentId={action.options?.controlledComponentId}\n              defaultTitle={action.options?.controlledComponentTitle as string}\n            />,\n            \"Save Layout\",\n            [],\n            true\n          );\n          return true;\n        }\n        return false;\n      },\n    ];\n  }, [handleCloseDialog, handleSave, showDialog]);\n\n  return {\n    buildMenuOptions,\n    handleMenuAction,\n  };\n};\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,4BAA4B,MAAM;AAC7C,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAA,EAAY,WAAY,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAErD,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAY,WAAA,EAAA,CAAA;AAAA,GACd,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,cAAsC,KAAA;AACrC,MAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACzB,MAAY,WAAA,EAAA,CAAA;AAAA,KACd;AAAA,IACA,CAAC,YAAY,WAAW,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,MAAM,CAAC,gBAAA,EAAkB,gBAAgB,CAAA,GAAI,QAE3C,MAAM;AACN,IAAO,OAAA;AAAA,MACL,CAAC,UAAU,OAAY,KAAA;AACrB,QAAM,MAAA,SAAA,GAAY,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACpC,QAAA,MAAM,kBAA+C,EAAC,CAAA;AACtD,QAAI,IAAA,SAAA,CAAU,QAAS,CAAA,UAAU,CAAG,EAAA;AAClC,UAAgB,eAAA,CAAA,IAAA;AAAA,YACd;AAAA,cACE,KAAO,EAAA,aAAA;AAAA,cACP,MAAQ,EAAA,aAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,YACA;AAAA,cACE,KAAO,EAAA,iBAAA;AAAA,cACP,MAAQ,EAAA,iBAAA;AAAA,cACR,OAAA;AAAA,aACF;AAAA,WACF,CAAA;AAAA,SACF;AACA,QAAO,OAAA,eAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,MAAiC,KAAA;AAChC,QAAI,IAAA,MAAA,CAAO,WAAW,aAAe,EAAA;AACnC,UAAA,UAAA;AAAA,4BACE,GAAA;AAAA,cAAC,eAAA;AAAA,cAAA;AAAA,gBACC,QAAU,EAAA,iBAAA;AAAA,gBACV,MAAQ,EAAA,UAAA;AAAA,gBACR,WAAA,EAAa,OAAO,OAAS,EAAA,qBAAA;AAAA,gBAC7B,YAAA,EAAc,OAAO,OAAS,EAAA,wBAAA;AAAA,eAAA;AAAA,aAChC;AAAA,YACA,aAAA;AAAA,YACA,EAAC;AAAA,YACD,IAAA;AAAA,WACF,CAAA;AACA,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,UAAU,CAAC,CAAA,CAAA;AAE9C,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/left-nav/LeftNav.css.js

@@ -1,4 +1,4 @@
-var leftNavCss = ".vuuLeftNav {\n  --vuuOverflowContainer-height: auto;\n  --vuuFeatureList-padding: 195px 32px 16px 24px;\n  --salt-navigable-fontWeight-active: 700;\n  --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n  --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n  --vuuTab-before-content: none;\n  --vuuTab-borderRadius: 6px;\n  --vuuTab-height: 40px;\n  --vuuTabstrip-fontWeight: 700;\n  --vuuTabstrip-width: 100%;\n  --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n  --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n  --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n  --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n  --vuu-light-text-primary: #15171b;\n\n  --menu-level-2-width: 0px;\n\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: calc(100% - 4px);\n  margin-bottom: 4px;\n  overflow: hidden;\n  position: relative;\n  transition: width 0.2s ease-out;\n  z-index: 0;\n  /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n  /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n  --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n  --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n  --menu-width: var(--nav-menu-collapsed-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n  --menu-width: var(--nav-menu-expanded-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n  display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n  background-color: #2a015f;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 32px 16px;\n  transition: flex-basis ease-out 0.2s;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n  flex: 1 1 auto;\n  display: none;\n  /* position: absolute; */\n  top: 0;\n  right: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--nav-menu-content-width, 240px);\n  z-index: -1;\n\n  .vuuTabs-tabPanel {\n    background: var(--salt-container-primary-background);\n    height: 100%;\n    padding: var(--salt-spacing-200) var(--salt-spacing-100)\n      var(--salt-spacing-200) var(--salt-spacing-400);\n  }\n}\n\n.vuuLeftNav .vuuTabstrip {\n  margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n  --vuuTab-focusVisible-color: pink;\n  --vuu-icon-color: white;\n  --vuu-icon-left: 12px;\n  --vuu-icon-size: 16px;\n  border-left: solid 4px transparent;\n  padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n  --vuu-icon-color: var(--salt-navigable-indicator-active);\n  border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.vuuLeftNav-main {\n  flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n  color: white;\n  margin-top: 102px;\n  padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n  --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n  --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n  --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n  --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n  .vuuTab {\n    /* --vuu-icon-left: 12px !important; */\n    --vuuTab-padding: 0 0 0 42px;\n  }\n\n  .vuuTab-main {\n    display: none !important;\n  }\n}\n\n.vuuLeftNav-buttonBar {\n  align-items: center;\n  display: flex;\n  flex: 0 0 100px;\n  justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n  --vuu-icon-color: var(--vuu-light-text-primary);\n  --vuu-icon-left: 11px;\n  --vuu-icon-top: 10px;\n  --vuu-icon-size: 16px;\n  background-color: var(--salt-navigable-indicator-active);\n  border-width: 0;\n  border-radius: 18px;\n  height: 36px;\n  position: relative;\n  width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n  --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n  display: flex;\n  padding: 0 0 0 24px;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-shrink: 0;\n  align-self: stretch;\n  background: #fff;\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  height: 100%;\n}\n";
+var leftNavCss = ".vuuLeftNav {\n  --vuuOverflowContainer-height: auto;\n  --vuuFeatureList-padding: 195px 32px 16px 24px;\n  --salt-navigable-fontWeight-active: 700;\n  --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n  --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n  --vuuTab-before-content: none;\n  --vuuTab-borderRadius: 6px;\n  --vuuTab-height: 40px;\n  --vuuTabstrip-fontWeight: 700;\n  --vuuTabstrip-width: 100%;\n  --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n  --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n  --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n  --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n  --vuu-light-text-primary: #15171b;\n\n  --menu-level-2-width: 0px;\n\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: calc(100% - 4px);\n  margin-bottom: 4px;\n  overflow: hidden;\n  position: relative;\n  transition: width 0.2s ease-out;\n  z-index: 0;\n  /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n  /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n  --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n  --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n  --menu-width: var(--nav-menu-collapsed-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n  --menu-width: var(--nav-menu-expanded-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n  display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n  background-color: #2a015f;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 32px 16px;\n  transition: flex-basis ease-out 0.2s;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n  flex: 1 1 auto;\n  display: none;\n  /* position: absolute; */\n  top: 0;\n  right: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--nav-menu-content-width, 240px);\n  z-index: -1;\n\n  .vuuTabs-tabPanel {\n    background: var(--salt-container-primary-background);\n    height: 100%;\n    padding: 34px 32px 8px 24px;\n  }\n}\n\n.vuuLeftNav .vuuTabstrip {\n  margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n  --vuuTab-focusVisible-color: pink;\n  --vuu-icon-color: white;\n  --vuu-icon-left: 12px;\n  --vuu-icon-size: 16px;\n  border-left: solid 4px transparent;\n  padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n  --vuu-icon-color: var(--salt-navigable-indicator-active);\n  border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.vuuLeftNav-main {\n  flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n  color: white;\n  margin-top: 102px;\n  padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n  --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n  --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n  --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n  --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n  .vuuTab {\n    /* --vuu-icon-left: 12px !important; */\n    --vuuTab-padding: 0 0 0 42px;\n  }\n\n  .vuuTab-main {\n    display: none !important;\n  }\n}\n\n.vuuLeftNav-buttonBar {\n  align-items: center;\n  display: flex;\n  flex: 0 0 100px;\n  justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n  --vuu-icon-color: var(--vuu-light-text-primary);\n  --vuu-icon-left: 11px;\n  --vuu-icon-top: 10px;\n  --vuu-icon-size: 16px;\n  background-color: var(--salt-navigable-indicator-active);\n  border-width: 0;\n  border-radius: 18px;\n  height: 36px;\n  position: relative;\n  width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n  --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n  display: flex;\n  padding: 0 0 0 24px;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-shrink: 0;\n  align-self: stretch;\n  background: #fff;\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  height: 100%;\n}\n";
 
 export { leftNavCss as default };
 //# sourceMappingURL=LeftNav.css.js.map

package/esm/left-nav/LeftNav.js

@@ -12,6 +12,7 @@ import 'html-to-image';
 import '@salt-ds/core';
 import { LayoutList } from '../layout-management/LayoutList.js';
 import '../layout-management/useLayoutManager.js';
+import '@vuu-ui/vuu-popups';
 import leftNavCss from './LeftNav.css.js';
 
 const classBase = "vuuLeftNav";
@@ -196,7 +197,7 @@ const LeftNav = (props) => {
             children: [
               /* @__PURE__ */ jsx(FeatureList, { features, title: "VUU FEATURES" }),
               /* @__PURE__ */ jsx(FeatureList, { features: tableFeaturesByGroup, title: "VUU TABLES" }),
-              /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-drawer", children: /* @__PURE__ */ jsx(LayoutList, { title: "My Layouts" }) })
+              /* @__PURE__ */ jsx(LayoutList, { title: "MY LAYOUTS" })
             ]
           }
         )

package/esm/left-nav/LeftNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  console.log(\"LeftNav\", {\n    tableFeatures,\n  });\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <div className=\"vuuLeftNav-drawer\">\n          <LayoutList title=\"My Layouts\" />\n        </div>\n      </Stack>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAM,SAAY,GAAA,YAAA,CAAA;AAQlB,MAAM,gBAAA,GAAmB,CACvB,cAAA,EACA,QACqB,KAAA;AACrB,EAAA,IAAI,mBAAmB,CAAG,EAAA;AACxB,IAAA,OAAO,WAAW,WAAc,GAAA,YAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAA,OAAO,WAAW,mBAAsB,GAAA,oBAAA,CAAA;AAAA,GAC1C;AACF,CAAA,CAAA;AAuBA,MAAM,QAAA,GAAW,CACf,EAAA,EACA,EACG,KAAA;AACH,EAAM,MAAA,EAAA,GAAK,EAAG,CAAA,cAAA,EAAgB,WAAY,CAAA,KAAA,CAAA;AAC1C,EAAM,MAAA,EAAA,GAAK,EAAG,CAAA,cAAA,EAAgB,WAAY,CAAA,KAAA,CAAA;AAC1C,EAAA,IAAI,MAAM,EAAI,EAAA;AACZ,IAAM,MAAA,EAAA,GAAK,EAAG,CAAA,MAAA,CAAO,WAAY,EAAA,CAAA;AACjC,IAAM,MAAA,EAAA,GAAK,EAAG,CAAA,MAAA,CAAO,WAAY,EAAA,CAAA;AACjC,IAAA,IAAI,KAAK,EAAI,EAAA;AACX,MAAO,OAAA,CAAA,CAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAK,EAAI,EAAA;AAClB,MAAO,OAAA,CAAA,CAAA;AAAA,KACE,MAAA,IAAA,EAAA,CAAG,KAAQ,GAAA,EAAA,CAAG,KAAO,EAAA;AAC9B,MAAO,OAAA,CAAA,CAAA,CAAA;AAAA,KACE,MAAA,IAAA,EAAA,CAAG,KAAQ,GAAA,EAAA,CAAG,KAAO,EAAA;AAC9B,MAAO,OAAA,CAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,CAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,sBAAsB,CAAA,CAAA;AAAA,GACpC;AACF,CAAA,CAAA;AAEa,MAAA,OAAA,GAAU,CAAC,KAAwB,KAAA;AAC9C,EAAA,MAAM,WAAW,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,CAAC,UAAU,CAAA,GAAI,kBAAmB,EAAA,CAAA;AACxC,EAAM,MAAA;AAAA,IACJ,WAAa,EAAA,IAAA;AAAA,IACb,eAAkB,GAAA,IAAA;AAAA,IAClB,qBAAwB,GAAA,CAAA;AAAA,IACxB,QAAA;AAAA,IACA,cAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAgB,GAAA,EAAA;AAAA,IAChB,WAAc,GAAA,GAAA;AAAA,IACd,YAAe,GAAA,GAAA;AAAA,IACf,KAAO,EAAA,SAAA;AAAA,IACP,aAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,OAAA,CAAQ,IAAI,SAAW,EAAA;AAAA,IACrB,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAmB,CAAA;AAAA,IACjD,cAAgB,EAAA,qBAAA;AAAA,IAChB,QAAU,EAAA,eAAA;AAAA,GACX,CAAA,CAAA;AAED,EAAA,MAAM,oBAAuB,GAAA,OAAA;AAAA,IAC3B,MACE,aAAA,CACG,IAAK,CAAA,QAAQ,CACb,CAAA,MAAA;AAAA,MACC,CAAC,KAAK,kBAAuB,KAAA;AAC3B,QAAI,IAAA,0BAAA,CAA2B,kBAAkB,CAAG,EAAA;AAClD,UAAA,MAAM,EAAE,KAAA,EAAU,GAAA,kBAAA,CAAmB,cAAe,CAAA,WAAA,CAAA;AACpD,UAAM,MAAA,GAAA,GAAM,CAAG,EAAA,KAAA,CAAM,MAAM,CAAA,OAAA,CAAA,CAAA;AAC3B,UAAI,IAAA,CAAC,GAAI,CAAA,GAAG,CAAG,EAAA;AACb,YAAI,GAAA,CAAA,GAAG,IAAI,EAAC,CAAA;AAAA,WACd;AACA,UAAO,OAAA;AAAA,YACL,GAAG,GAAA;AAAA,YACH,CAAC,GAAG,GAAG,IAAI,GAAG,CAAA,CAAE,OAAO,kBAAkB,CAAA;AAAA,WAC3C,CAAA;AAAA,SACK,MAAA;AACL,UAAO,OAAA,GAAA,CAAA;AAAA,SAET;AAAA,OACF;AAAA,MACA,EAAC;AAAA,KACH;AAAA,IACJ,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,UAAkB,QAA8B,KAAA;AAC/C,MAAA,IAAI,aAAa,CAAG,EAAA;AAClB,QAAA,OAAO,WAAW,YAAe,GAAA,aAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAO,OAAA,QAAA,GACH,YAAe,GAAA,WAAA,GACf,aAAgB,GAAA,WAAA,CAAA;AAAA,OACtB;AAAA,KACF;AAAA,IACA,CAAC,aAAe,EAAA,WAAA,EAAa,YAAY,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,cAA2B,KAAA;AAC1B,MAAA,MAAM,EAAE,cAAA,EAAgB,YAAc,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AACnD,MAAM,MAAA,QAAA,GAAW,EAAE,cAAA,EAAgB,QAAS,EAAA,CAAA;AAC5C,MAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,MAAI,IAAA,cAAA,KAAmB,CAAK,IAAA,YAAA,KAAiB,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA,GAAQ,YAAa,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AACnD,QAAS,QAAA,CAAA;AAAA,UACP,IAAM,EAAA,eAAA;AAAA,UACN,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,KAAA;AAAA,SACe,CAAA,CAAA;AAAA,OACzB;AACA,MAAA,cAAA,GAAiB,cAAc,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAA,EAAU,YAAc,EAAA,QAAA,EAAU,cAAc,CAAA;AAAA,GACnD,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,gBAAA;AAAA,IACpB,QAAS,CAAA,cAAA;AAAA,IACT,QAAS,CAAA,QAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAM,MAAA,EAAE,cAAgB,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AACrC,IAAA,MAAM,sBAAsB,CAAC,QAAA,CAAA;AAC7B,IAAA,MAAM,QAAW,GAAA,EAAE,cAAgB,EAAA,QAAA,EAAU,mBAAoB,EAAA,CAAA;AACjE,IAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,eAAA;AAAA,MACN,IAAM,EAAA,iBAAA;AAAA,MACN,IAAA,EAAM,YAAa,CAAA,cAAA,EAAgB,mBAAmB,CAAA;AAAA,KACjC,CAAA,CAAA;AACvB,IAAA,mBAAA,GAAsB,mBAAmB,CAAA,CAAA;AAAA,KACxC,CAAC,QAAA,EAAU,YAAc,EAAA,QAAA,EAAU,mBAAmB,CAAC,CAAA,CAAA;AAE1D,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,4BAAA,EAA8B,GAAG,aAAa,CAAA,EAAA,CAAA;AAAA,IAC9C,2BAAA,EAA6B,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,IAC5C,0BAAA,EAA4B,GAAG,WAAW,CAAA,EAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;AAAA,MACxD,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,iBAAiB,UAAU,CAAA;AAAA,YACrD,WAAU,EAAA,MAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iBACb,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,CACX,EAAA,CAAA;AAAA,8BACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,gBAAgB,QAAS,CAAA,cAAA;AAAA,kBACzB,qBAAuB,EAAA,KAAA;AAAA,kBACvB,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,kBACvB,cAAgB,EAAA,kBAAA;AAAA,kBAChB,WAAY,EAAA,UAAA;AAAA,kBAEZ,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAU,MAAO,EAAA,KAAA,EAAM,MAAO,EAAA,CAAA;AAAA,oCAClC,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,EAAA,UAAA,EAAW,OAAM,cAAe,EAAA,CAAA;AAAA,oCAC9C,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,EAAA,QAAA,EAAS,OAAM,YAAa,EAAA,CAAA;AAAA,oCAC1C,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,EAAA,SAAA,EAAU,OAAM,YAAa,EAAA,CAAA;AAAA,mBAAA;AAAA,iBAAA;AAAA,eAEhD,EAAA,CAAA;AAAA,8BACA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,yBAA2B,EAAA;AAAA,oBACvC,8BAAA,EACE,aAAc,CAAA,UAAA,CAAW,WAAW,CAAA;AAAA,oBACtC,gCAAA,EACE,aAAc,CAAA,UAAA,CAAW,YAAY,CAAA;AAAA,mBACxC,CAAA;AAAA,kBACD,WACE,EAAA,aAAA,CAAc,UAAW,CAAA,WAAW,IAChC,cACA,GAAA,eAAA;AAAA,kBAEN,OAAS,EAAA,cAAA;AAAA,iBAAA;AAAA,eAEb,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBACA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,SAAS,cAAiB,GAAA,CAAA;AAAA,YAClC,SAAA,EAAW,GAAG,SAAS,CAAA,eAAA,CAAA;AAAA,YACvB,QAAU,EAAA,KAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,WAAA,EAAA,EAAY,QAAoB,EAAA,KAAA,EAAM,cAAe,EAAA,CAAA;AAAA,8BACrD,GAAA,CAAA,WAAA,EAAA,EAAY,QAAU,EAAA,oBAAA,EAAsB,OAAM,YAAa,EAAA,CAAA;AAAA,8BAChE,GAAA,CAAC,SAAI,SAAU,EAAA,mBAAA,EACb,8BAAC,UAAW,EAAA,EAAA,KAAA,EAAM,cAAa,CACjC,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  console.log(\"LeftNav\", {\n    tableFeatures,\n  });\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <LayoutList title=\"MY LAYOUTS\" />\n      </Stack>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/shell.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { connectToServer } from '@vuu-ui/vuu-data-remote';
 import { StackLayout, LayoutProvider, DraggableLayout } from '@vuu-ui/vuu-layout';
-import { useDialog, ContextMenuProvider } from '@vuu-ui/vuu-popups';
+import { DialogProvider, NotificationsProvider, ContextMenuProvider } from '@vuu-ui/vuu-popups';
 import { registerComponent, logger } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -13,7 +13,7 @@ import { ApplicationSettingsPanel } from './application-settings/ApplicationSett
 import 'html-to-image';
 import '@salt-ds/core';
 import '@vuu-ui/vuu-ui-controls';
-import { useLayoutManager } from './layout-management/useLayoutManager.js';
+import { LayoutManagementProvider, useLayoutManager } from './layout-management/useLayoutManager.js';
 import { useLayoutContextMenuItems } from './layout-management/useLayoutContextMenuItems.js';
 import { loadingApplicationJson } from './persistence-management/defaultApplicationJson.js';
 import './persistence-management/LocalPersistenceManager.js';
@@ -32,7 +32,7 @@ if (process.env.NODE_ENV === "production") {
 }
 const { error } = logger("Shell");
 const defaultLeftSidePanel = {};
-const Shell = ({
+const VuuApplication = ({
   LayoutProps,
   LeftSidePanelProps = defaultLeftSidePanel,
   children,
@@ -51,9 +51,8 @@ const Shell = ({
     window: targetWindow
   });
   const rootRef = useRef(null);
-  const { dialog, setDialogState } = useDialog();
   const { applicationJson, saveApplicationLayout } = useLayoutManager();
-  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems(setDialogState);
+  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();
   const [connectionStatus, setConnectionStatus] = useState("connected");
   const handleLayoutChange = useCallback(
     (layout) => {
@@ -85,7 +84,7 @@ const Shell = ({
   if (connectionStatus === "rejected") {
     console.log("game over, no connection to server");
   }
-  return isLayoutLoading ? null : /* @__PURE__ */ jsx(ApplicationProvider, { user, children: /* @__PURE__ */ jsxs(
+  return isLayoutLoading ? null : /* @__PURE__ */ jsxs(
     ContextMenuProvider,
     {
       menuActionHandler: handleMenuAction,
@@ -108,10 +107,18 @@ const Shell = ({
             )
           }
         ),
-        children || dialog
+        children
       ]
     }
-  ) });
+  );
+};
+const Shell = ({ user, ...props }) => {
+  return (
+    // ApplicationProvider must go outside Dialog and Notification providers
+    // ApplicationProvider injects the SaltProvider and this must be the root
+    // SaltProvider.
+    /* @__PURE__ */ jsx(ApplicationProvider, { user, children: /* @__PURE__ */ jsx(LayoutManagementProvider, { children: /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(NotificationsProvider, { children: /* @__PURE__ */ jsx(VuuApplication, { ...props, user }) }) }) }) })
+  );
 };
 
 export { Shell };

package/esm/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { dialog, setDialogState } = useDialog();\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } =\n    useLayoutContextMenuItems(setDialogState);\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ApplicationProvider user={user}>\n      <ContextMenuProvider\n        menuActionHandler={handleMenuAction}\n        menuBuilder={buildMenuOptions}\n      >\n        <LayoutProvider\n          {...LayoutProps}\n          layout={applicationJson.layout}\n          onLayoutChange={handleLayoutChange}\n        >\n          <DraggableLayout\n            className={className}\n            ref={rootRef}\n            {...htmlAttributes}\n          >\n            {shellLayout}\n          </DraggableLayout>\n        </LayoutProvider>\n        {children || dialog}\n      </ContextMenuProvider>\n    </ApplicationProvider>\n  );\n};\n"],"names":["connectionStatus"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n  LayoutManagementProvider,\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst VuuApplication = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        {...LayoutProps}\n        layout={applicationJson.layout}\n        onLayoutChange={handleLayoutChange}\n      >\n        <DraggableLayout\n          className={className}\n          ref={rootRef}\n          {...htmlAttributes}\n        >\n          {shellLayout}\n        </DraggableLayout>\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({ user, ...props }: ShellProps) => {\n  return (\n    // ApplicationProvider must go outside Dialog and Notification providers\n    // ApplicationProvider injects the SaltProvider and this must be the root\n    // SaltProvider.\n    <ApplicationProvider user={user}>\n      <LayoutManagementProvider>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </LayoutManagementProvider>\n    </ApplicationProvider>\n  );\n};\n"],"names":["connectionStatus"],"mappings":"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"}

package/package.json

@@ -1,24 +1,24 @@
 {
-  "version": "0.8.63",
+  "version": "0.8.65",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.63",
-    "@vuu-ui/vuu-protocol-types": "0.8.63",
-    "@vuu-ui/vuu-table-types": "0.8.63"
+    "@vuu-ui/vuu-data-types": "0.8.65",
+    "@vuu-ui/vuu-protocol-types": "0.8.65",
+    "@vuu-ui/vuu-table-types": "0.8.65"
   },
   "dependencies": {
     "@salt-ds/core": "1.27.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-remote": "0.8.63",
-    "@vuu-ui/vuu-icons": "0.8.63",
-    "@vuu-ui/vuu-layout": "0.8.63",
-    "@vuu-ui/vuu-popups": "0.8.63",
-    "@vuu-ui/vuu-table": "0.8.63",
-    "@vuu-ui/vuu-ui-controls": "0.8.63",
-    "@vuu-ui/vuu-utils": "0.8.63",
+    "@vuu-ui/vuu-data-remote": "0.8.65",
+    "@vuu-ui/vuu-icons": "0.8.65",
+    "@vuu-ui/vuu-layout": "0.8.65",
+    "@vuu-ui/vuu-popups": "0.8.65",
+    "@vuu-ui/vuu-table": "0.8.65",
+    "@vuu-ui/vuu-ui-controls": "0.8.65",
+    "@vuu-ui/vuu-utils": "0.8.65",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {

package/types/layout-management/useLayoutContextMenuItems.d.ts

@@ -1,6 +1,5 @@
 import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
-import { SetDialog } from "@vuu-ui/vuu-popups";
-export declare const useLayoutContextMenuItems: (setDialogState: SetDialog) => {
+export declare const useLayoutContextMenuItems: () => {
     buildMenuOptions: MenuBuilder;
     handleMenuAction: MenuActionHandler;
 };

package/types/shell.d.ts

@@ -13,4 +13,4 @@ export interface ShellProps extends HTMLAttributes<HTMLDivElement> {
     serverUrl?: string;
     user: VuuUser;
 }
-export declare const Shell: ({ LayoutProps, LeftSidePanelProps, children, className: classNameProp, leftSidePanelLayout, loginUrl, saveUrl, serverUrl, user, ...htmlAttributes }: ShellProps) => JSX.Element | null;
+export declare const Shell: ({ user, ...props }: ShellProps) => JSX.Element;