@vuu-ui/vuu-shell 0.8.64 → 0.8.66

package/cjs/application-provider/ApplicationProvider.js

@@ -28,11 +28,6 @@ const ApplicationProvider = ({
     }
   );
 };
-const useApplicationSettings = () => {
-  const { changeSetting, settings } = React.useContext(ApplicationContext.ApplicationContext);
-  return { changeSetting, settings };
-};
 
 exports.ApplicationProvider = ApplicationProvider;
-exports.useApplicationSettings = useApplicationSettings;
 //# sourceMappingURL=ApplicationProvider.js.map

package/cjs/application-provider/ApplicationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { SaltProvider } from \"@salt-ds/core\";\n\nexport interface ApplicationProviderProps\n  extends Partial<ApplicationContextProps> {\n  children: ReactNode;\n}\n\nexport const ApplicationProvider = ({\n  children,\n  settings: settingsProp,\n  user,\n}: ApplicationProviderProps): ReactElement => {\n  const context = useContext(ApplicationContext);\n  const [settings, setSettings] = useState(settingsProp ?? context.settings);\n\n  const changeSetting = useCallback((propertyName: string, value: unknown) => {\n    setSettings((s) => ({ ...s, [propertyName]: value }));\n  }, []);\n\n  return (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        changeSetting,\n        settings,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider theme=\"vuu-theme\" density=\"high\" mode={settings.themeMode}>\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  );\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useApplicationSettings = () => {\n  const { changeSetting, settings } = useContext(ApplicationContext);\n  return { changeSetting, settings };\n};\n"],"names":["useContext","ApplicationContext","useState","useCallback","jsx","SaltProvider"],"mappings":";;;;;;;AAkBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AACF,CAA8C,KAAA;AAC5C,EAAM,MAAA,OAAA,GAAUA,iBAAWC,qCAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAS,CAAA,YAAA,IAAgB,QAAQ,QAAQ,CAAA,CAAA;AAEzE,EAAA,MAAM,aAAgB,GAAAC,iBAAA,CAAY,CAAC,YAAA,EAAsB,KAAmB,KAAA;AAC1E,IAAY,WAAA,CAAA,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,YAAY,GAAG,KAAA,EAAQ,CAAA,CAAA,CAAA;AAAA,GACtD,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,cAAA;AAAA,IAACH,qCAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,aAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAAG,cAAA,CAACC,qBAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,MAAO,EAAA,IAAA,EAAM,QAAS,CAAA,SAAA,EAC3D,QACH,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAOO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAIL,iBAAWC,qCAAkB,CAAA,CAAA;AACjE,EAAO,OAAA,EAAE,eAAe,QAAS,EAAA,CAAA;AACnC;;;;;"}
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { SaltProvider } from \"@salt-ds/core\";\n\nexport interface ApplicationProviderProps\n  extends Partial<ApplicationContextProps> {\n  children: ReactNode;\n}\n\nexport const ApplicationProvider = ({\n  children,\n  settings: settingsProp,\n  user,\n}: ApplicationProviderProps): ReactElement => {\n  const context = useContext(ApplicationContext);\n  const [settings, setSettings] = useState(settingsProp ?? context.settings);\n\n  const changeSetting = useCallback((propertyName: string, value: unknown) => {\n    setSettings((s) => ({ ...s, [propertyName]: value }));\n  }, []);\n\n  return (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        changeSetting,\n        settings,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider theme=\"vuu-theme\" density=\"high\" mode={settings.themeMode}>\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  );\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useApplicationSettings = () => {\n  const { changeSetting, settings } = useContext(ApplicationContext);\n  return { changeSetting, settings };\n};\n"],"names":["useContext","ApplicationContext","useState","useCallback","jsx","SaltProvider"],"mappings":";;;;;;;AAkBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AACF,CAA8C,KAAA;AAC5C,EAAM,MAAA,OAAA,GAAUA,iBAAWC,qCAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAS,CAAA,YAAA,IAAgB,QAAQ,QAAQ,CAAA,CAAA;AAEzE,EAAA,MAAM,aAAgB,GAAAC,iBAAA,CAAY,CAAC,YAAA,EAAsB,KAAmB,KAAA;AAC1E,IAAY,WAAA,CAAA,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,YAAY,GAAG,KAAA,EAAQ,CAAA,CAAA,CAAA;AAAA,GACtD,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,cAAA;AAAA,IAACH,qCAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,aAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAAG,cAAA,CAACC,qBAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,MAAO,EAAA,IAAA,EAAM,QAAS,CAAA,SAAA,EAC3D,QACH,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/application-settings/ApplicationSettingsPanel.js

@@ -1,49 +1,128 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var React = require('react');
 var ApplicationSettingsPanel$1 = require('./ApplicationSettingsPanel.css.js');
-var core = require('@salt-ds/core');
-var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
 
+const isOption = (value) => typeof value === "object" && "label" in value && "label" in value;
+const isBooleanProperty = (property) => property.type === "boolean";
+const isStringOrNumber = (value) => typeof value === "string" || typeof value === "number";
+const getValueAndLabel = (value) => isOption(value) ? [value.value, value.label] : [value, value];
+function getFormControl(property, changeHandler, selectHandler, currentValue) {
+  if (isBooleanProperty(property)) {
+    const checked = typeof currentValue === "boolean" ? currentValue : property.defaultValue ?? false;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Switch,
+      {
+        checked,
+        label: property.label,
+        onChange: changeHandler
+      }
+    );
+  }
+  if (Array.isArray(property.values)) {
+    if (property.values.length <= 2) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.ToggleButtonGroup,
+        {
+          value: currentValue,
+          onChange: changeHandler,
+          children: property.values.map((valueOrOption) => {
+            const [value, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value, children: label }, value);
+          })
+        }
+      );
+    } else if (property.values.length > 2) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.Dropdown,
+        {
+          value: currentValue,
+          onSelectionChange: selectHandler,
+          children: property.values.map((valueOrOption) => {
+            const [value, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value, "data-field": property.name, children: label }, value);
+          })
+        }
+      );
+    }
+  } else {
+    const value = isStringOrNumber(currentValue) ? currentValue : isStringOrNumber(property.defaultValue) ? property.defaultValue : "";
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Input, { value });
+  }
+}
+const SettingsForm = ({
+  applicationSettingsSchema,
+  applicationSettings,
+  onApplicationSettingChanged
+}) => {
+  const getFieldNameFromEventTarget = (evt) => {
+    const fieldElement = vuuUtils.queryClosest(evt.target, "[data-field]");
+    if (fieldElement && fieldElement.dataset.field) {
+      return fieldElement.dataset.field;
+    } else {
+      throw Error("data-field attribute not defined");
+    }
+  };
+  const changeHandler = React.useCallback(
+    (event) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      const { checked, value } = event.target;
+      onApplicationSettingChanged(fieldName, checked ?? value);
+    },
+    [onApplicationSettingChanged]
+  );
+  const selectHandler = React.useCallback(
+    (event, [selected]) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      onApplicationSettingChanged(fieldName, selected);
+    },
+    [onApplicationSettingChanged]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: applicationSettingsSchema.properties.map((property) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": property.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: property.label }),
+    getFormControl(
+      property,
+      changeHandler,
+      selectHandler,
+      applicationSettings[property.name]
+    )
+  ] }, property.name)) });
+};
 const classBase = "vuuApplicationSettingsPanel";
-const ApplicationSettingsPanel = () => {
+const ApplicationSettingsPanel = ({
+  applicationSettingsSchema,
+  applicationSettings,
+  onApplicationSettingChanged,
+  ...htmlAttributes
+}) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "vuu-application-settings-panel",
     css: ApplicationSettingsPanel$1,
     window: targetWindow
   });
-  const { changeSetting, settings } = ApplicationProvider.useApplicationSettings();
-  const onChangeToggleButton = React.useCallback(
-    (e) => {
-      const button = vuuUtils.queryClosest(e.target, "button");
-      if (button) {
-        const fieldName = vuuUtils.getFieldName(button);
-        const { value } = button;
-        changeSetting(fieldName, value);
-      }
-    },
-    [changeSetting]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase, children: /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "themeMode", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Light or Dark Mode" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      core.ToggleButtonGroup,
-      {
-        onChange: onChangeToggleButton,
-        value: settings.themeMode,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "light", children: "Light" }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "dark", children: "Dark" })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: classBase, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SettingsForm,
+    {
+      applicationSettingsSchema,
+      applicationSettings,
+      onApplicationSettingChanged
+    }
+  ) });
 };
 
 exports.ApplicationSettingsPanel = ApplicationSettingsPanel;
+exports.SettingsForm = SettingsForm;
+exports.default = ApplicationSettingsPanel;
+exports.getFormControl = getFormControl;
+exports.isBooleanProperty = isBooleanProperty;
+exports.isOption = isOption;
+exports.isStringOrNumber = isStringOrNumber;
 //# sourceMappingURL=ApplicationSettingsPanel.js.map

package/cjs/application-settings/ApplicationSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationSettingsPanel.js","sources":["../../src/application-settings/ApplicationSettingsPanel.tsx"],"sourcesContent":["import { getFieldName, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FormEventHandler, HTMLAttributes, useCallback } from \"react\";\n\nimport applicationSettingsPanelCss from \"./ApplicationSettingsPanel.css\";\nimport {\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useApplicationSettings } from \"../application-provider\";\n\nexport interface ApplicationSettingsPanelProps\n  extends HTMLAttributes<HTMLDivElement> {\n  settings: { [key: string]: unknown };\n}\n\nconst classBase = \"vuuApplicationSettingsPanel\";\n\nexport const ApplicationSettingsPanel = () => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-application-settings-panel\",\n    css: applicationSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const { changeSetting, settings } = useApplicationSettings();\n\n  const onChangeToggleButton = useCallback<FormEventHandler>(\n    (e) => {\n      const button = queryClosest<HTMLButtonElement>(e.target, \"button\");\n      if (button) {\n        const fieldName = getFieldName(button);\n        const { value } = button;\n        changeSetting(fieldName, value);\n      }\n    },\n    [changeSetting]\n  );\n\n  return (\n    <div className={classBase}>\n      <FormField data-field=\"themeMode\">\n        <FormFieldLabel>Light or Dark Mode</FormFieldLabel>\n        <ToggleButtonGroup\n          onChange={onChangeToggleButton}\n          value={settings.themeMode}\n        >\n          <ToggleButton value=\"light\">Light</ToggleButton>\n          <ToggleButton value=\"dark\">Dark</ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","applicationSettingsPanelCss","useApplicationSettings","useCallback","queryClosest","getFieldName","jsxs","FormField","jsx","FormFieldLabel","ToggleButtonGroup","ToggleButton"],"mappings":";;;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAEX,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAAC,0BAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAIC,0CAAuB,EAAA,CAAA;AAE3D,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,MAAS,GAAAC,qBAAA,CAAgC,CAAE,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AACjE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,SAAA,GAAYC,sBAAa,MAAM,CAAA,CAAA;AACrC,QAAM,MAAA,EAAE,OAAU,GAAA,MAAA,CAAA;AAClB,QAAA,aAAA,CAAc,WAAW,KAAK,CAAA,CAAA;AAAA,OAChC;AAAA,KACF;AAAA,IACA,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAW,WACd,QAAC,kBAAAC,eAAA,CAAAC,cAAA,EAAA,EAAU,cAAW,WACpB,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,uBAAe,QAAkB,EAAA,oBAAA,EAAA,CAAA;AAAA,oBAClCH,eAAA;AAAA,MAACI,sBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,oBAAA;AAAA,QACV,OAAO,QAAS,CAAA,SAAA;AAAA,QAEhB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,iBAAA,EAAA,EAAa,KAAM,EAAA,OAAA,EAAQ,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,0BAChCH,cAAA,CAAAG,iBAAA,EAAA,EAAa,KAAM,EAAA,MAAA,EAAO,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACjC;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ApplicationSettingsPanel.js","sources":["../../src/application-settings/ApplicationSettingsPanel.tsx"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n  Dropdown,\n  DropdownProps,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n  Switch,\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  FormEventHandler,\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport applicationSettingsPanelCss from \"./ApplicationSettingsPanel.css\";\n\nexport type Option<T> = { label: string; value: T };\n// Schema type definitions\nexport const isOption = (\n  value: Option<number | string> | number | string\n): value is Option<number | string> =>\n  typeof value === \"object\" && \"label\" in value && \"label\" in value;\n\nexport interface BaseProperty {\n  name: string;\n  label: string;\n}\n\nexport interface StringProperty extends BaseProperty {\n  values?: string[] | Option<string>[];\n  defaultValue?: string;\n  type: \"string\";\n}\nexport interface NumericProperty extends BaseProperty {\n  values?: number[] | Option<number>[];\n  defaultValue?: number;\n  type: \"number\";\n}\nexport interface BooleanProperty extends BaseProperty {\n  defaultValue?: boolean;\n  type: \"boolean\";\n}\n\nexport type SettingsProperty =\n  | StringProperty\n  | NumericProperty\n  | BooleanProperty;\n\nexport const isBooleanProperty = (\n  property: SettingsProperty\n): property is BooleanProperty => property.type === \"boolean\";\n\nexport const isStringOrNumber = (value: unknown): value is string | number =>\n  typeof value === \"string\" || typeof value === \"number\";\n\nexport interface SettingsSchema {\n  properties: SettingsProperty[];\n}\n\nconst getValueAndLabel = (value: string | number | Option<string | number>) =>\n  isOption(value) ? [value.value, value.label] : [value, value];\n\n// Determine the form control type to be displayed\nexport function getFormControl(\n  property: SettingsProperty,\n  changeHandler: FormEventHandler,\n  selectHandler: DropdownProps[\"onSelectionChange\"],\n  currentValue?: string | boolean | number\n) {\n  if (isBooleanProperty(property)) {\n    const checked =\n      typeof currentValue === \"boolean\"\n        ? currentValue\n        : property.defaultValue ?? false;\n\n    return (\n      <Switch\n        checked={checked}\n        label={property.label}\n        onChange={changeHandler}\n      ></Switch>\n    );\n  }\n  // Toggle Box for 1 or 2 values\n  if (Array.isArray(property.values)) {\n    if (property.values.length <= 2) {\n      return (\n        <ToggleButtonGroup\n          value={currentValue as ToggleButtonGroupProps[\"value\"]}\n          onChange={changeHandler}\n        >\n          {property.values.map((valueOrOption) => {\n            const [value, label] = getValueAndLabel(valueOrOption);\n            return (\n              <ToggleButton key={value} value={value}>\n                {label}\n              </ToggleButton>\n            );\n          })}\n        </ToggleButtonGroup>\n      );\n    } else if (property.values.length > 2) {\n      return (\n        <Dropdown\n          value={currentValue as DropdownProps[\"value\"]}\n          onSelectionChange={selectHandler}\n        >\n          {property.values.map((valueOrOption) => {\n            const [value, label] = getValueAndLabel(valueOrOption);\n            return (\n              <Option value={value} key={value} data-field={property.name}>\n                {label}\n              </Option>\n            );\n          })}\n        </Dropdown>\n      );\n    }\n  } else {\n    const value = isStringOrNumber(currentValue)\n      ? currentValue\n      : isStringOrNumber(property.defaultValue)\n      ? property.defaultValue\n      : \"\";\n    return <Input value={value} />;\n  }\n}\n\n// Props for Panel\nexport interface ApplicatonSettingsPanelProps\n  extends HTMLAttributes<HTMLDivElement> {\n  applicationSettingsSchema: SettingsSchema;\n  applicationSettings: Record<string, string | number | boolean>;\n  onApplicationSettingChanged: (\n    propertyName: string,\n    value: string | number | boolean\n  ) => void;\n}\n\n// Generates application settings form component\nexport const SettingsForm = ({\n  applicationSettingsSchema,\n  applicationSettings,\n  onApplicationSettingChanged,\n}: ApplicatonSettingsPanelProps) => {\n  const getFieldNameFromEventTarget = (evt: SyntheticEvent) => {\n    const fieldElement = queryClosest(evt.target, \"[data-field]\");\n    if (fieldElement && fieldElement.dataset.field) {\n      return fieldElement.dataset.field;\n    } else {\n      throw Error(\"data-field attribute not defined\");\n    }\n  };\n\n  // Change Handler for toggle and input buttons\n  const changeHandler = useCallback<FormEventHandler>(\n    (event) => {\n      const fieldName = getFieldNameFromEventTarget(event);\n      const { checked, value } = event.target as HTMLInputElement;\n      onApplicationSettingChanged(fieldName, checked ?? value);\n    },\n    [onApplicationSettingChanged]\n  );\n\n  // Change handler for selection form controls\n  const selectHandler = useCallback(\n    (event: SyntheticEvent, [selected]: string[]) => {\n      const fieldName = getFieldNameFromEventTarget(event);\n      onApplicationSettingChanged(fieldName, selected);\n    },\n    [onApplicationSettingChanged]\n  );\n\n  return (\n    <div>\n      {applicationSettingsSchema.properties.map((property) => (\n        <FormField data-field={property.name} key={property.name}>\n          <FormFieldLabel>{property.label}</FormFieldLabel>\n          {getFormControl(\n            property,\n            changeHandler,\n            selectHandler,\n            applicationSettings[property.name]\n          )}\n        </FormField>\n      ))}\n    </div>\n  );\n};\n\nconst classBase = \"vuuApplicationSettingsPanel\";\n\nexport const ApplicationSettingsPanel = ({\n  applicationSettingsSchema,\n  applicationSettings,\n  onApplicationSettingChanged,\n  ...htmlAttributes\n}: ApplicatonSettingsPanelProps) => {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"vuu-application-settings-panel\",\n    css: applicationSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <SettingsForm\n        applicationSettingsSchema={applicationSettingsSchema}\n        applicationSettings={applicationSettings}\n        onApplicationSettingChanged={onApplicationSettingChanged}\n      />\n    </div>\n  );\n};\n\nexport default ApplicationSettingsPanel;\n"],"names":["jsx","Switch","ToggleButtonGroup","ToggleButton","Dropdown","Option","Input","queryClosest","useCallback","jsxs","FormField","FormFieldLabel","useWindow","useComponentCssInjection","applicationSettingsPanelCss"],"mappings":"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"}

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":";;;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAYlB,MAAM,mBAA0C,GAAA;AAAA,EAC9C,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,UAAY,EAAA,EAAA;AACd,CAAA,CAAA;AACA,MAAM,mBAA0C,GAAA;AAAA,EAC9C,kBAAoB,EAAA,GAAA;AAAA,EACpB,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,UAAY,EAAA,EAAA;AACd,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,KAAQ,GAAA,YAAA;AAAA,EACR,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,cAAuB,MAAM;AAC3C,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,MAAO,OAAA;AAAA,wBACJC,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YAEC,WAAY,EAAA,UAAA;AAAA,YACZ,SAAW,EAAA,mBAAA;AAAA,YAEV,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,CAC3B,qBAAAC,eAAA;AAAA,cAACC,qBAAA;AAAA,cAAA;AAAA,gBACC,SAAS,EAAA,IAAA;AAAA,gBACT,SAAW,kBAAAH,cAAA,CAACI,eAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA,gBAEtC,OAAO,YAAa,CAAA,KAAA;AAAA,gBACpB,UAAU,EAAA,IAAA;AAAA,gBACV,MAAO,EAAA,OAAA;AAAA,gBACP,MAAM,EAAA,IAAA;AAAA,gBAEN,QAAA,EAAA;AAAA,kCAAAJ,cAAA,CAACK,kBAAK,EAAA,EAAA,IAAA,EAAK,WAAY,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,iDAChC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAC1B,uBAAa,KAChB,EAAA,CAAA;AAAA,iBAAA;AAAA,eAAA;AAAA,cATK,CAAA;AAAA,aAWR,CAAA;AAAA,WAAA;AAAA,UAnBG,GAAA;AAAA,aAFwC,CAuBhD,CAAA;AAAA,OACF,CAAA;AAAA,KACK,MAAA;AACL,MAAA,OAAO,OAAO,OAAQ,CAAA,QAAQ,CAAE,CAAA,GAAA,CAAI,CAAC,CAAC,OAAA,EAAS,WAAW,CAAA,EAAG,0BAC1DH,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,gBAAiB,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,wBACrDA,cAAA,CAACC,iBAAQ,EAAA,EAAA,WAAA,EAAY,UAAW,EAAA,SAAA,EAAW,qBACxC,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,CAC9B,qBAAAC,eAAA;AAAA,UAACC,qBAAA;AAAA,UAAA;AAAA,YACC,SAAS,EAAA,IAAA;AAAA,YACT,SAAW,kBAAAH,cAAA,CAACI,eAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA,YAEtC,OAAO,YAAa,CAAA,KAAA;AAAA,YACpB,UAAU,EAAA,IAAA;AAAA,YACV,MAAO,EAAA,OAAA;AAAA,YACP,MAAM,EAAA,IAAA;AAAA,YAEN,QAAA,EAAA;AAAA,8BAAAJ,cAAA,CAACK,kBAAK,EAAA,EAAA,IAAA,EAAK,WAAY,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,6CAChC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAC1B,uBAAa,KAChB,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,UATK,CAAA;AAAA,SAWR,CACH,EAAA,CAAA;AAAA,OAAA,EAAA,EAnByC,KAoB3C,CACD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EACE,uBAAAH,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,mCAC7C,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,GACnD,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/index.js

@@ -21,6 +21,7 @@ var SidePanel = require('./shell-layouts/side-panel/SidePanel.js');
 var ShellContextProvider = require('./ShellContextProvider.js');
 var FeatureList = require('./feature-list/FeatureList.js');
 var ThemeSwitch = require('./theme-switch/ThemeSwitch.js');
+var ApplicationSettingsPanel = require('./application-settings/ApplicationSettingsPanel.js');
 
 
 
@@ -53,4 +54,10 @@ exports.ShellContextProvider = ShellContextProvider.ShellContextProvider;
 exports.useShellContext = ShellContextProvider.useShellContext;
 exports.FeatureList = FeatureList.FeatureList;
 exports.ThemeSwitch = ThemeSwitch.ThemeSwitch;
+exports.ApplicationSettingsPanel = ApplicationSettingsPanel.ApplicationSettingsPanel;
+exports.SettingsForm = ApplicationSettingsPanel.SettingsForm;
+exports.getFormControl = ApplicationSettingsPanel.getFormControl;
+exports.isBooleanProperty = ApplicationSettingsPanel.isBooleanProperty;
+exports.isOption = ApplicationSettingsPanel.isOption;
+exports.isStringOrNumber = ApplicationSettingsPanel.isStringOrNumber;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

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

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/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

@@ -63,9 +63,6 @@ const LeftNav = (props) => {
     tableFeatures,
     ...htmlAttributes
   } = props;
-  console.log("LeftNav", {
-    tableFeatures
-  });
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "vuu-left-nav",
@@ -199,7 +196,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  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-layouts/context-panel/ContextPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var contextPanelCss = ".vuuContextPanel {\n  position: relative;\n  transition: width 0.3s ease-in-out;\n  width: var(--vuu-side-panel-width, 0px) !important;\n  z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n}\n\n.vuuContextPanel-overlay {\n  width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n  background-color: var(--salt-container-primary-background);\n  box-shadow: var(--vuu-side-panel-shadow, none);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0 !important;\n  overflow: auto;\n  padding-bottom: 24px;\n  padding-top: 24px;\n  padding: var(--vuu-side-panel-padding);\n  position: absolute !important;\n  right: 0;\n  top: 0;\n  transition-property: padding-left, padding-right, width;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 0 0 27px !important;\n  height: var(--vuuContextPanel-header-height, 48px);\n  justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n  font-size: 20px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n  flex: 1 1 auto;\n  width: 100%;\n}\n";
+var contextPanelCss = ".vuuContextPanel {\n  position: relative;\n  transition: width 0.3s ease-in-out;\n  width: var(--vuu-side-panel-width, 0px) !important;\n  z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n}\n\n.vuuContextPanel-overlay {\n  width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n  background-color: var(--salt-container-primary-background);\n  box-shadow: var(--vuu-side-panel-shadow, none);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0 !important;\n  overflow: auto;\n  padding-bottom: 24px;\n  padding-top: 24px;\n  padding: var(--vuu-side-panel-padding);\n  position: absolute !important;\n  right: 0;\n  top: 0;\n  transition-property: padding-left, padding-right, width;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 0 0 27px !important;\n  height: var(--vuuContextPanel-header-height, 48px);\n  justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n  font-size: 20px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  width: 100%;\n}\n";
 
 module.exports = contextPanelCss;
 //# sourceMappingURL=ContextPanel.css.js.map

package/cjs/shell-layouts/context-panel/ContextPanel.js

@@ -44,7 +44,7 @@ const ContextPanel = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cx(classBase, className, {
+      className: cx(classBase, className, "vuuScrollable", {
         [`${classBase}-expanded`]: expanded
       }),
       children: /* @__PURE__ */ jsxRuntime.jsxs(vuuLayout.View, { className: `${classBase}-inner`, header: false, id: "context-panel", children: [

package/cjs/shell-layouts/context-panel/ContextPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextPanel.js","sources":["../../../src/shell-layouts/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  LayoutJSON,\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useCallback, useMemo } from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  overlay?: boolean;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  // const [contentJson, setContentJson] = useState(contentProp);\n  const handleClose = useCallback(() => {\n    dispatchLayoutAction({\n      path: \"#context-panel\",\n      propName: \"expanded\",\n      propValue: false,\n      type: \"set-prop\",\n    });\n  }, [dispatchLayoutAction]);\n  // TODO look up content using context\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded]\n  );\n\n  return (\n    <div\n      className={cx(classBase, className, {\n        [`${classBase}-expanded`]: expanded,\n      })}\n    >\n      <View className={`${classBase}-inner`} header={false} id=\"context-panel\">\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            size={16}\n            variant=\"secondary\"\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","contextPanelCss","useLayoutProviderDispatch","useCallback","useMemo","layoutFromJson","jsx","jsxs","View","IconButton"],"mappings":";;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAUX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAW,EAAA,aAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACT,OAAU,GAAA,KAAA;AAAA,EACV,KAAA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuBC,mCAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAM,EAAA,gBAAA;AAAA,MACN,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,IAAM,EAAA,UAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAGzB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,IAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,OAAY,KAAA,IAAA;AAAA,IACrC,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA;AAAA,GAC3B,CAAA,CAAA;AAED,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAWC,wBAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ,CAAA;AAAA,GACxB,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,OAC5B,CAAA;AAAA,MAED,QAAA,kBAAAC,eAAA,CAACC,kBAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,EAAA,EAAG,eACvD,EAAA,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5CA,cAAA;AAAA,YAACG,wBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,IAAK,EAAA,OAAA;AAAA,cACL,OAAS,EAAA,WAAA;AAAA,cACT,IAAM,EAAA,EAAA;AAAA,cACN,OAAQ,EAAA,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SACF,EAAA,CAAA;AAAA,uCACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,OACnD,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ContextPanel.js","sources":["../../../src/shell-layouts/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  LayoutJSON,\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useCallback, useMemo } from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  overlay?: boolean;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  // const [contentJson, setContentJson] = useState(contentProp);\n  const handleClose = useCallback(() => {\n    dispatchLayoutAction({\n      path: \"#context-panel\",\n      propName: \"expanded\",\n      propValue: false,\n      type: \"set-prop\",\n    });\n  }, [dispatchLayoutAction]);\n  // TODO look up content using context\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded]\n  );\n\n  return (\n    <div\n      className={cx(classBase, className, \"vuuScrollable\", {\n        [`${classBase}-expanded`]: expanded,\n      })}\n    >\n      <View className={`${classBase}-inner`} header={false} id=\"context-panel\">\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            size={16}\n            variant=\"secondary\"\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","contextPanelCss","useLayoutProviderDispatch","useCallback","useMemo","layoutFromJson","jsx","jsxs","View","IconButton"],"mappings":";;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAUX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAW,EAAA,aAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACT,OAAU,GAAA,KAAA;AAAA,EACV,KAAA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuBC,mCAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAM,EAAA,gBAAA;AAAA,MACN,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,IAAM,EAAA,UAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAGzB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,IAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,OAAY,KAAA,IAAA;AAAA,IACrC,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA;AAAA,GAC3B,CAAA,CAAA;AAED,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAWC,wBAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ,CAAA;AAAA,GACxB,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,eAAiB,EAAA;AAAA,QACnD,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,OAC5B,CAAA;AAAA,MAED,QAAA,kBAAAC,eAAA,CAACC,kBAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,EAAA,EAAG,eACvD,EAAA,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5CA,cAAA;AAAA,YAACG,wBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,IAAK,EAAA,OAAA;AAAA,cACL,OAAS,EAAA,WAAA;AAAA,cACT,IAAM,EAAA,EAAA;AAAA,cACN,OAAQ,EAAA,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SACF,EAAA,CAAA;AAAA,uCACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,OACnD,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/application-provider/ApplicationProvider.js

@@ -26,10 +26,6 @@ const ApplicationProvider = ({
     }
   );
 };
-const useApplicationSettings = () => {
-  const { changeSetting, settings } = useContext(ApplicationContext);
-  return { changeSetting, settings };
-};
 
-export { ApplicationProvider, useApplicationSettings };
+export { ApplicationProvider };
 //# sourceMappingURL=ApplicationProvider.js.map

package/esm/application-provider/ApplicationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { SaltProvider } from \"@salt-ds/core\";\n\nexport interface ApplicationProviderProps\n  extends Partial<ApplicationContextProps> {\n  children: ReactNode;\n}\n\nexport const ApplicationProvider = ({\n  children,\n  settings: settingsProp,\n  user,\n}: ApplicationProviderProps): ReactElement => {\n  const context = useContext(ApplicationContext);\n  const [settings, setSettings] = useState(settingsProp ?? context.settings);\n\n  const changeSetting = useCallback((propertyName: string, value: unknown) => {\n    setSettings((s) => ({ ...s, [propertyName]: value }));\n  }, []);\n\n  return (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        changeSetting,\n        settings,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider theme=\"vuu-theme\" density=\"high\" mode={settings.themeMode}>\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  );\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useApplicationSettings = () => {\n  const { changeSetting, settings } = useContext(ApplicationContext);\n  return { changeSetting, settings };\n};\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AACF,CAA8C,KAAA;AAC5C,EAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAI,QAAS,CAAA,YAAA,IAAgB,QAAQ,QAAQ,CAAA,CAAA;AAEzE,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,CAAC,YAAA,EAAsB,KAAmB,KAAA;AAC1E,IAAY,WAAA,CAAA,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,YAAY,GAAG,KAAA,EAAQ,CAAA,CAAA,CAAA;AAAA,GACtD,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,GAAA;AAAA,IAAC,kBAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,aAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,gBAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,MAAO,EAAA,IAAA,EAAM,QAAS,CAAA,SAAA,EAC3D,QACH,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAOO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAI,WAAW,kBAAkB,CAAA,CAAA;AACjE,EAAO,OAAA,EAAE,eAAe,QAAS,EAAA,CAAA;AACnC;;;;"}
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { SaltProvider } from \"@salt-ds/core\";\n\nexport interface ApplicationProviderProps\n  extends Partial<ApplicationContextProps> {\n  children: ReactNode;\n}\n\nexport const ApplicationProvider = ({\n  children,\n  settings: settingsProp,\n  user,\n}: ApplicationProviderProps): ReactElement => {\n  const context = useContext(ApplicationContext);\n  const [settings, setSettings] = useState(settingsProp ?? context.settings);\n\n  const changeSetting = useCallback((propertyName: string, value: unknown) => {\n    setSettings((s) => ({ ...s, [propertyName]: value }));\n  }, []);\n\n  return (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        changeSetting,\n        settings,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider theme=\"vuu-theme\" density=\"high\" mode={settings.themeMode}>\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  );\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useApplicationSettings = () => {\n  const { changeSetting, settings } = useContext(ApplicationContext);\n  return { changeSetting, settings };\n};\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AACF,CAA8C,KAAA;AAC5C,EAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAI,QAAS,CAAA,YAAA,IAAgB,QAAQ,QAAQ,CAAA,CAAA;AAEzE,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,CAAC,YAAA,EAAsB,KAAmB,KAAA;AAC1E,IAAY,WAAA,CAAA,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,YAAY,GAAG,KAAA,EAAQ,CAAA,CAAA,CAAA;AAAA,GACtD,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,GAAA;AAAA,IAAC,kBAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,aAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,gBAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,MAAO,EAAA,IAAA,EAAM,QAAS,CAAA,SAAA,EAC3D,QACH,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}