@vuu-ui/vuu-shell 0.8.65 → 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/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/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",

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        <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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"}
+{"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":";;;;;;;;;;;;;;;;;;;AA4BA,MAAM,SAAY,GAAA,YAAA,CAAA;AAQlB,MAAM,gBAAA,GAAmB,CACvB,cAAA,EACA,QACqB,KAAA;AACrB,EAAA,IAAI,mBAAmB,CAAG,EAAA;AACxB,IAAA,OAAO,WAAW,WAAc,GAAA,YAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAA,OAAO,WAAW,mBAAsB,GAAA,oBAAA,CAAA;AAAA,GAC1C;AACF,CAAA,CAAA;AAuBA,MAAM,QAAA,GAAW,CACf,EAAA,EACA,EACG,KAAA;AACH,EAAM,MAAA,EAAA,GAAK,EAAG,CAAA,cAAA,EAAgB,WAAY,CAAA,KAAA,CAAA;AAC1C,EAAM,MAAA,EAAA,GAAK,EAAG,CAAA,cAAA,EAAgB,WAAY,CAAA,KAAA,CAAA;AAC1C,EAAA,IAAI,MAAM,EAAI,EAAA;AACZ,IAAM,MAAA,EAAA,GAAK,EAAG,CAAA,MAAA,CAAO,WAAY,EAAA,CAAA;AACjC,IAAM,MAAA,EAAA,GAAK,EAAG,CAAA,MAAA,CAAO,WAAY,EAAA,CAAA;AACjC,IAAA,IAAI,KAAK,EAAI,EAAA;AACX,MAAO,OAAA,CAAA,CAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAK,EAAI,EAAA;AAClB,MAAO,OAAA,CAAA,CAAA;AAAA,KACE,MAAA,IAAA,EAAA,CAAG,KAAQ,GAAA,EAAA,CAAG,KAAO,EAAA;AAC9B,MAAO,OAAA,CAAA,CAAA,CAAA;AAAA,KACE,MAAA,IAAA,EAAA,CAAG,KAAQ,GAAA,EAAA,CAAG,KAAO,EAAA;AAC9B,MAAO,OAAA,CAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,CAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,sBAAsB,CAAA,CAAA;AAAA,GACpC;AACF,CAAA,CAAA;AAEa,MAAA,OAAA,GAAU,CAAC,KAAwB,KAAA;AAC9C,EAAA,MAAM,WAAWA,mCAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,CAAC,UAAU,CAAA,GAAIC,2BAAmB,EAAA,CAAA;AACxC,EAAM,MAAA;AAAA,IACJ,WAAa,EAAA,IAAA;AAAA,IACb,eAAkB,GAAA,IAAA;AAAA,IAClB,qBAAwB,GAAA,CAAA;AAAA,IACxB,QAAA;AAAA,IACA,cAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAgB,GAAA,EAAA;AAAA,IAChB,WAAc,GAAA,GAAA;AAAA,IACd,YAAe,GAAA,GAAA;AAAA,IACf,KAAO,EAAA,SAAA;AAAA,IACP,aAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,cAAmB,CAAA;AAAA,IACjD,cAAgB,EAAA,qBAAA;AAAA,IAChB,QAAU,EAAA,eAAA;AAAA,GACX,CAAA,CAAA;AAED,EAAA,MAAM,oBAAuB,GAAAC,aAAA;AAAA,IAC3B,MACE,aAAA,CACG,IAAK,CAAA,QAAQ,CACb,CAAA,MAAA;AAAA,MACC,CAAC,KAAK,kBAAuB,KAAA;AAC3B,QAAI,IAAAC,mCAAA,CAA2B,kBAAkB,CAAG,EAAA;AAClD,UAAA,MAAM,EAAE,KAAA,EAAU,GAAA,kBAAA,CAAmB,cAAe,CAAA,WAAA,CAAA;AACpD,UAAM,MAAA,GAAA,GAAM,CAAG,EAAA,KAAA,CAAM,MAAM,CAAA,OAAA,CAAA,CAAA;AAC3B,UAAI,IAAA,CAAC,GAAI,CAAA,GAAG,CAAG,EAAA;AACb,YAAI,GAAA,CAAA,GAAG,IAAI,EAAC,CAAA;AAAA,WACd;AACA,UAAO,OAAA;AAAA,YACL,GAAG,GAAA;AAAA,YACH,CAAC,GAAG,GAAG,IAAI,GAAG,CAAA,CAAE,OAAO,kBAAkB,CAAA;AAAA,WAC3C,CAAA;AAAA,SACK,MAAA;AACL,UAAO,OAAA,GAAA,CAAA;AAAA,SAET;AAAA,OACF;AAAA,MACA,EAAC;AAAA,KACH;AAAA,IACJ,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,UAAkB,QAA8B,KAAA;AAC/C,MAAA,IAAI,aAAa,CAAG,EAAA;AAClB,QAAA,OAAO,WAAW,YAAe,GAAA,aAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAO,OAAA,QAAA,GACH,YAAe,GAAA,WAAA,GACf,aAAgB,GAAA,WAAA,CAAA;AAAA,OACtB;AAAA,KACF;AAAA,IACA,CAAC,aAAe,EAAA,WAAA,EAAa,YAAY,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAAA,iBAAA;AAAA,IACzB,CAAC,cAA2B,KAAA;AAC1B,MAAA,MAAM,EAAE,cAAA,EAAgB,YAAc,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AACnD,MAAM,MAAA,QAAA,GAAW,EAAE,cAAA,EAAgB,QAAS,EAAA,CAAA;AAC5C,MAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,MAAI,IAAA,cAAA,KAAmB,CAAK,IAAA,YAAA,KAAiB,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA,GAAQ,YAAa,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AACnD,QAAS,QAAA,CAAA;AAAA,UACP,IAAM,EAAA,eAAA;AAAA,UACN,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,KAAA;AAAA,SACe,CAAA,CAAA;AAAA,OACzB;AACA,MAAA,cAAA,GAAiB,cAAc,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAA,EAAU,YAAc,EAAA,QAAA,EAAU,cAAc,CAAA;AAAA,GACnD,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,gBAAA;AAAA,IACpB,QAAS,CAAA,cAAA;AAAA,IACT,QAAS,CAAA,QAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiBA,kBAAY,MAAM;AACvC,IAAM,MAAA,EAAE,cAAgB,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AACrC,IAAA,MAAM,sBAAsB,CAAC,QAAA,CAAA;AAC7B,IAAA,MAAM,QAAW,GAAA,EAAE,cAAgB,EAAA,QAAA,EAAU,mBAAoB,EAAA,CAAA;AACjE,IAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,eAAA;AAAA,MACN,IAAM,EAAA,iBAAA;AAAA,MACN,IAAA,EAAM,YAAa,CAAA,cAAA,EAAgB,mBAAmB,CAAA;AAAA,KACjC,CAAA,CAAA;AACvB,IAAA,mBAAA,GAAsB,mBAAmB,CAAA,CAAA;AAAA,KACxC,CAAC,QAAA,EAAU,YAAc,EAAA,QAAA,EAAU,mBAAmB,CAAC,CAAA,CAAA;AAE1D,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,4BAAA,EAA8B,GAAG,aAAa,CAAA,EAAA,CAAA;AAAA,IAC9C,2BAAA,EAA6B,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,IAC5C,0BAAA,EAA4B,GAAG,WAAW,CAAA,EAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;AAAA,MACxD,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAA,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,iBAAiB,UAAU,CAAA;AAAA,YACrD,WAAU,EAAA,MAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iBACb,EAAA,QAAA,kBAAAA,cAAA,CAACC,oBAAQ,CACX,EAAA,CAAA;AAAA,8BACCD,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,kBAAAD,eAAA;AAAA,gBAACG,sBAAA;AAAA,gBAAA;AAAA,kBACC,gBAAgB,QAAS,CAAA,cAAA;AAAA,kBACzB,qBAAuB,EAAA,KAAA;AAAA,kBACvB,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,kBACvB,cAAgB,EAAA,kBAAA;AAAA,kBAChB,WAAY,EAAA,UAAA;AAAA,kBAEZ,QAAA,EAAA;AAAA,oCAAAF,cAAA,CAACG,iBAAI,EAAA,EAAA,WAAA,EAAU,MAAO,EAAA,KAAA,EAAM,MAAO,EAAA,CAAA;AAAA,oCAClCH,cAAA,CAAAG,iBAAA,EAAA,EAAI,WAAU,EAAA,UAAA,EAAW,OAAM,cAAe,EAAA,CAAA;AAAA,oCAC9CH,cAAA,CAAAG,iBAAA,EAAA,EAAI,WAAU,EAAA,QAAA,EAAS,OAAM,YAAa,EAAA,CAAA;AAAA,oCAC1CH,cAAA,CAAAG,iBAAA,EAAA,EAAI,WAAU,EAAA,SAAA,EAAU,OAAM,YAAa,EAAA,CAAA;AAAA,mBAAA;AAAA,iBAAA;AAAA,eAEhD,EAAA,CAAA;AAAA,8BACAH,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,EAAA,QAAA,kBAAAA,cAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,yBAA2B,EAAA;AAAA,oBACvC,8BAAA,EACE,aAAc,CAAA,UAAA,CAAW,WAAW,CAAA;AAAA,oBACtC,gCAAA,EACE,aAAc,CAAA,UAAA,CAAW,YAAY,CAAA;AAAA,mBACxC,CAAA;AAAA,kBACD,WACE,EAAA,aAAA,CAAc,UAAW,CAAA,WAAW,IAChC,cACA,GAAA,eAAA;AAAA,kBAEN,OAAS,EAAA,cAAA;AAAA,iBAAA;AAAA,eAEb,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBACAD,eAAA;AAAA,UAACK,eAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,SAAS,cAAiB,GAAA,CAAA;AAAA,YAClC,SAAA,EAAW,GAAG,SAAS,CAAA,eAAA,CAAA;AAAA,YACvB,QAAU,EAAA,KAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAACJ,cAAA,CAAAK,uBAAA,EAAA,EAAY,QAAoB,EAAA,KAAA,EAAM,cAAe,EAAA,CAAA;AAAA,8BACrDL,cAAA,CAAAK,uBAAA,EAAA,EAAY,QAAU,EAAA,oBAAA,EAAsB,OAAM,YAAa,EAAA,CAAA;AAAA,8BAChEL,cAAA,CAACM,qBAAW,EAAA,EAAA,KAAA,EAAM,YAAa,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACjC;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

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;;;;"}

package/esm/application-settings/ApplicationSettingsPanel.js

@@ -1,47 +1,118 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { queryClosest, getFieldName } from '@vuu-ui/vuu-utils';
+import { queryClosest } from '@vuu-ui/vuu-utils';
+import { Switch, ToggleButtonGroup, ToggleButton, Dropdown, Option, Input, FormField, FormFieldLabel } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { useCallback } from 'react';
 import applicationSettingsPanelCss from './ApplicationSettingsPanel.css.js';
-import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
-import { useApplicationSettings } from '../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__ */ jsx(
+      Switch,
+      {
+        checked,
+        label: property.label,
+        onChange: changeHandler
+      }
+    );
+  }
+  if (Array.isArray(property.values)) {
+    if (property.values.length <= 2) {
+      return /* @__PURE__ */ jsx(
+        ToggleButtonGroup,
+        {
+          value: currentValue,
+          onChange: changeHandler,
+          children: property.values.map((valueOrOption) => {
+            const [value, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsx(ToggleButton, { value, children: label }, value);
+          })
+        }
+      );
+    } else if (property.values.length > 2) {
+      return /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          value: currentValue,
+          onSelectionChange: selectHandler,
+          children: property.values.map((valueOrOption) => {
+            const [value, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsx(Option, { value, "data-field": property.name, children: label }, value);
+          })
+        }
+      );
+    }
+  } else {
+    const value = isStringOrNumber(currentValue) ? currentValue : isStringOrNumber(property.defaultValue) ? property.defaultValue : "";
+    return /* @__PURE__ */ jsx(Input, { value });
+  }
+}
+const SettingsForm = ({
+  applicationSettingsSchema,
+  applicationSettings,
+  onApplicationSettingChanged
+}) => {
+  const getFieldNameFromEventTarget = (evt) => {
+    const fieldElement = queryClosest(evt.target, "[data-field]");
+    if (fieldElement && fieldElement.dataset.field) {
+      return fieldElement.dataset.field;
+    } else {
+      throw Error("data-field attribute not defined");
+    }
+  };
+  const changeHandler = useCallback(
+    (event) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      const { checked, value } = event.target;
+      onApplicationSettingChanged(fieldName, checked ?? value);
+    },
+    [onApplicationSettingChanged]
+  );
+  const selectHandler = useCallback(
+    (event, [selected]) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      onApplicationSettingChanged(fieldName, selected);
+    },
+    [onApplicationSettingChanged]
+  );
+  return /* @__PURE__ */ jsx("div", { children: applicationSettingsSchema.properties.map((property) => /* @__PURE__ */ jsxs(FormField, { "data-field": property.name, children: [
+    /* @__PURE__ */ jsx(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 = useWindow();
   useComponentCssInjection({
     testId: "vuu-application-settings-panel",
     css: applicationSettingsPanelCss,
     window: targetWindow
   });
-  const { changeSetting, settings } = useApplicationSettings();
-  const onChangeToggleButton = useCallback(
-    (e) => {
-      const button = queryClosest(e.target, "button");
-      if (button) {
-        const fieldName = getFieldName(button);
-        const { value } = button;
-        changeSetting(fieldName, value);
-      }
-    },
-    [changeSetting]
-  );
-  return /* @__PURE__ */ jsx("div", { className: classBase, children: /* @__PURE__ */ jsxs(FormField, { "data-field": "themeMode", children: [
-    /* @__PURE__ */ jsx(FormFieldLabel, { children: "Light or Dark Mode" }),
-    /* @__PURE__ */ jsxs(
-      ToggleButtonGroup,
-      {
-        onChange: onChangeToggleButton,
-        value: settings.themeMode,
-        children: [
-          /* @__PURE__ */ jsx(ToggleButton, { value: "light", children: "Light" }),
-          /* @__PURE__ */ jsx(ToggleButton, { value: "dark", children: "Dark" })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: classBase, children: /* @__PURE__ */ jsx(
+    SettingsForm,
+    {
+      applicationSettingsSchema,
+      applicationSettings,
+      onApplicationSettingChanged
+    }
+  ) });
 };
 
-export { ApplicationSettingsPanel };
+export { ApplicationSettingsPanel, SettingsForm, ApplicationSettingsPanel as default, getFormControl, isBooleanProperty, isOption, isStringOrNumber };
 //# sourceMappingURL=ApplicationSettingsPanel.js.map

package/esm/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":[],"mappings":";;;;;;;;;AAmBA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAEX,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAA,2BAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAI,sBAAuB,EAAA,CAAA;AAE3D,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,MAAS,GAAA,YAAA,CAAgC,CAAE,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AACjE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,SAAA,GAAY,aAAa,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,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,WACd,QAAC,kBAAA,IAAA,CAAA,SAAA,EAAA,EAAU,cAAW,WACpB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAe,QAAkB,EAAA,oBAAA,EAAA,CAAA;AAAA,oBAClC,IAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,oBAAA;AAAA,QACV,OAAO,QAAS,CAAA,SAAA;AAAA,QAEhB,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,YAAA,EAAA,EAAa,KAAM,EAAA,OAAA,EAAQ,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,0BAChC,GAAA,CAAA,YAAA,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":[],"mappings":"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"}

package/esm/index.js

@@ -19,4 +19,5 @@ export { SidePanel } from './shell-layouts/side-panel/SidePanel.js';
 export { ShellContextProvider, useShellContext } from './ShellContextProvider.js';
 export { FeatureList } from './feature-list/FeatureList.js';
 export { ThemeSwitch } from './theme-switch/ThemeSwitch.js';
+export { ApplicationSettingsPanel, SettingsForm, getFormControl, isBooleanProperty, isOption, isStringOrNumber } from './application-settings/ApplicationSettingsPanel.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/left-nav/LeftNav.js

@@ -61,9 +61,6 @@ const LeftNav = (props) => {
     tableFeatures,
     ...htmlAttributes
   } = props;
-  console.log("LeftNav", {
-    tableFeatures
-  });
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "vuu-left-nav",

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

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

package/esm/shell-layouts/context-panel/ContextPanel.css.js

@@ -1,4 +1,4 @@
-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";
 
 export { contextPanelCss as default };
 //# sourceMappingURL=ContextPanel.css.js.map

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

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

package/esm/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":[],"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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuB,yBAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,WAAA,GAAc,YAAY,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,GAAA,OAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAW,cAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ,CAAA;AAAA,GACxB,CAAA;AAEA,EACE,uBAAA,GAAA;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,kBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,EAAA,EAAG,eACvD,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5C,GAAA;AAAA,YAAC,UAAA;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,4BACC,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":[],"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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuB,yBAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,WAAA,GAAc,YAAY,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,GAAA,OAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAW,cAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ,CAAA;AAAA,GACxB,CAAA;AAEA,EACE,uBAAA,GAAA;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,kBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,EAAA,EAAG,eACvD,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5C,GAAA;AAAA,YAAC,UAAA;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,4BACC,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/package.json

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

package/types/application-settings/ApplicationSettingsPanel.d.ts

@@ -1,7 +1,40 @@
-import { HTMLAttributes } from "react";
-export interface ApplicationSettingsPanelProps extends HTMLAttributes<HTMLDivElement> {
-    settings: {
-        [key: string]: unknown;
-    };
+import { DropdownProps, Option } from "@salt-ds/core";
+import { FormEventHandler, HTMLAttributes } from "react";
+export type Option<T> = {
+    label: string;
+    value: T;
+};
+export declare const isOption: (value: Option<number | string> | number | string) => value is Option<string | number>;
+export interface BaseProperty {
+    name: string;
+    label: string;
 }
-export declare const ApplicationSettingsPanel: () => JSX.Element;
+export interface StringProperty extends BaseProperty {
+    values?: string[] | Option<string>[];
+    defaultValue?: string;
+    type: "string";
+}
+export interface NumericProperty extends BaseProperty {
+    values?: number[] | Option<number>[];
+    defaultValue?: number;
+    type: "number";
+}
+export interface BooleanProperty extends BaseProperty {
+    defaultValue?: boolean;
+    type: "boolean";
+}
+export type SettingsProperty = StringProperty | NumericProperty | BooleanProperty;
+export declare const isBooleanProperty: (property: SettingsProperty) => property is BooleanProperty;
+export declare const isStringOrNumber: (value: unknown) => value is string | number;
+export interface SettingsSchema {
+    properties: SettingsProperty[];
+}
+export declare function getFormControl(property: SettingsProperty, changeHandler: FormEventHandler, selectHandler: DropdownProps["onSelectionChange"], currentValue?: string | boolean | number): JSX.Element | undefined;
+export interface ApplicatonSettingsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    applicationSettingsSchema: SettingsSchema;
+    applicationSettings: Record<string, string | number | boolean>;
+    onApplicationSettingChanged: (propertyName: string, value: string | number | boolean) => void;
+}
+export declare const SettingsForm: ({ applicationSettingsSchema, applicationSettings, onApplicationSettingChanged, }: ApplicatonSettingsPanelProps) => JSX.Element;
+export declare const ApplicationSettingsPanel: ({ applicationSettingsSchema, applicationSettings, onApplicationSettingChanged, ...htmlAttributes }: ApplicatonSettingsPanelProps) => JSX.Element;
+export default ApplicationSettingsPanel;

package/types/application-settings/applicationsettingsSchema.d.ts

@@ -0,0 +1,3 @@
+import type { SettingsSchema } from "@vuu-ui/vuu-shell";
+export declare const applicationSettingsSchema: SettingsSchema;
+export default applicationSettingsSchema;

package/types/index.d.ts

@@ -12,3 +12,4 @@ export * from "./shell-layouts/side-panel";
 export * from "./ShellContextProvider";
 export * from "./feature-list";
 export * from "./theme-switch";
+export * from "./application-settings";