@vuu-ui/vuu-shell 0.8.75 → 0.8.77

package/cjs/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n  LayoutJSON,\n  VuuUser,\n  logger,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  LayoutManagementProvider,\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { UserSettingsPanel } from \"./user-settings\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingApplicationJson } from \"./layout-management/defaultApplicationJson\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  defaultLayout?: LayoutJSON;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst VuuApplication = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        {...LayoutProps}\n        layout={applicationJson.layout}\n        onLayoutChange={handleLayoutChange}\n      >\n        <DraggableLayout\n          className={className}\n          ref={rootRef}\n          {...htmlAttributes}\n        >\n          {shellLayout}\n        </DraggableLayout>\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({ defaultLayout, user, ...props }: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager is configured, configuration data will be persisted to Local Storage, under the key 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider density=\"high\" theme=\"vuu-theme\" user={user}>\n      <LayoutManagementProvider defaultLayout={defaultLayout}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </LayoutManagementProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["registerComponent","UserSettingsPanel","StackLayout","logger","useWindow","useComponentCssInjection","shellCss","useRef","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingApplicationJson","useShellLayout","jsx","AppHeader","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout","usePersistenceManager","LocalPersistenceManager","ApplicationProvider","LayoutManagementProvider","DialogProvider","NotificationsProvider","PersistenceProvider"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { UserSettingsPanel } from \"./user-settings\";\nimport {\n  WorkspaceProps,\n  WorkspaceProvider,\n  useWorkspace,\n  useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  shellLayoutProps?: ShellLayoutProps;\n  workspaceProps?: WorkspaceProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n  shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  shellLayoutProps: ShellLayoutProps,\n  children,\n  // loginUrl, // need to make this available to app header\n  serverUrl,\n  user,\n}: Omit<ShellProps, \"ContentLayoutProps\" | \"loginUrl\" | \"workspaceProps\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"initialising\" | \"connected\" | \"rejected\"\n  >(\"initialising\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `\n      );\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  const initialLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {initialLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({\n  loginUrl,\n  user,\n  workspaceProps,\n  ...props\n}: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider\n      density=\"high\"\n      loginUrl={loginUrl}\n      theme=\"vuu-theme\"\n      user={user}\n    >\n      <WorkspaceProvider {...workspaceProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </WorkspaceProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["registerComponent","UserSettingsPanel","StackLayout","logger","AppHeader","ShellLayoutProps","useWindow","useComponentCssInjection","shellCss","useWorkspace","useWorkspaceContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingJSON","useShellLayout","jsxs","ContextMenuProvider","jsx","LayoutProvider","usePersistenceManager","LocalPersistenceManager","ApplicationProvider","WorkspaceProvider","DialogProvider","NotificationsProvider","PersistenceProvider"],"mappings":"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"}

package/cjs/user-settings/SettingsForm.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var core = require('@salt-ds/core');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var React = require('react');
 
 const isOption = (value) => typeof value === "object" && "label" in value && "label" in value;
@@ -14,7 +15,14 @@ const defaultPropertyValue = {
   number: 0,
   string: ""
 };
-function getFormControl(property, changeHandler, selectHandler, currentValue = property.defaultValue ?? defaultPropertyValue[property.type]) {
+function FormControl({
+  property,
+  changeHandler,
+  selectHandler,
+  inputHandler,
+  currentValue = property.defaultValue ?? defaultPropertyValue[property.type]
+}) {
+  const [value, setValue] = React.useState(currentValue);
   if (isBooleanProperty(property)) {
     const checked = typeof currentValue === "boolean" ? currentValue : property.defaultValue ?? false;
     return /* @__PURE__ */ jsxRuntime.jsx(core.Switch, { checked, onChange: changeHandler });
@@ -27,8 +35,8 @@ function getFormControl(property, changeHandler, selectHandler, currentValue = p
           value: currentValue,
           onChange: changeHandler,
           children: property.values.map((valueOrOption) => {
-            const [value, label] = getValueAndLabel(valueOrOption);
-            return /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value, children: label }, value);
+            const [value2, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: value2, children: label }, value2);
           })
         }
       );
@@ -39,28 +47,69 @@ function getFormControl(property, changeHandler, selectHandler, currentValue = p
           value: currentValue,
           onSelectionChange: selectHandler,
           children: property.values.map((valueOrOption) => {
-            const [value, label] = getValueAndLabel(valueOrOption);
+            const [value2, label] = getValueAndLabel(valueOrOption);
             return /* @__PURE__ */ jsxRuntime.jsx(
               core.Option,
               {
                 value: label,
                 "data-field": property.name
               },
-              value
+              value2
             );
           })
         }
       );
     }
   } else {
-    const value = isStringOrNumber(currentValue) ? currentValue : isStringOrNumber(property.defaultValue) ? property.defaultValue : "";
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Input, { value });
+    const valid = isValidInput(currentValue, property.type);
+    const content = getTooltipContent(property.type, valid);
+    const TooltipProps = {
+      tooltipContent: content
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.VuuInput,
+      {
+        onCommit: inputHandler,
+        onChange: (e) => setValue(e.target.value),
+        validationStatus: valid,
+        TooltipProps,
+        value
+      },
+      property.name
+    );
+  }
+  return null;
+}
+const isValidInput = (value, type) => {
+  if (value === "") {
+    return void 0;
+  }
+  if (type === "string") {
+    return "success";
+  } else if (type === "number") {
+    if (Number.isNaN(Number(value))) {
+      return "error";
+    }
+    return "success";
+  }
+};
+function getTooltipContent(type, valid) {
+  if (valid === "error") {
+    if (type === "number") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Field is expecting a number" });
+    } else if (type === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Field is expecting a string" });
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Please contact Admin for more information on expected type" });
+    }
+  } else {
+    return void 0;
   }
 }
 const SettingsForm = ({
-  settingsSchema: applicationSettingsSchema,
-  settings: applicationSettings,
-  onSettingChanged: onApplicationSettingChanged,
+  settingsSchema,
+  settings,
+  onSettingChanged,
   ...htmlAttributes
 }) => {
   const getFieldNameFromEventTarget = (evt) => {
@@ -75,30 +124,44 @@ const SettingsForm = ({
     (event) => {
       const fieldName = getFieldNameFromEventTarget(event);
       const { checked, value } = event.target;
-      onApplicationSettingChanged(fieldName, checked ?? value);
+      onSettingChanged(fieldName, checked ?? value);
     },
-    [onApplicationSettingChanged]
+    [onSettingChanged]
   );
   const selectHandler = React.useCallback(
     (event, [selected]) => {
       const fieldName = getFieldNameFromEventTarget(event);
-      onApplicationSettingChanged(fieldName, selected);
+      onSettingChanged(fieldName, selected);
+    },
+    [onSettingChanged]
+  );
+  const inputHandler = React.useCallback(
+    (event) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      const { value } = event.target;
+      if (!Number.isNaN(Number(value)) && value != "") {
+        const numValue = Number(value);
+        onSettingChanged(fieldName, numValue);
+      } else {
+        onSettingChanged(fieldName, value);
+      }
     },
-    [onApplicationSettingChanged]
+    [onSettingChanged]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, children: applicationSettingsSchema.properties.map((property) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": property.name, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, children: settingsSchema.properties.map((property) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": property.name, children: [
     /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: property.label }),
-    getFormControl(
+    FormControl({
       property,
       changeHandler,
       selectHandler,
-      applicationSettings[property.name]
-    )
+      inputHandler,
+      currentValue: settings[property.name]
+    })
   ] }, property.name)) });
 };
 
+exports.FormControl = FormControl;
 exports.SettingsForm = SettingsForm;
-exports.getFormControl = getFormControl;
 exports.isBooleanProperty = isBooleanProperty;
 exports.isOption = isOption;
 exports.isStringOrNumber = isStringOrNumber;

package/cjs/user-settings/SettingsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsForm.js","sources":["../../src/user-settings/SettingsForm.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { queryClosest, Settings } 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 {\n  FormEventHandler,\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nexport interface SettingsSchema {\n  properties: SettingsProperty[];\n}\n\nexport interface SettingsProps {\n  settingsSchema: SettingsSchema;\n  settings: Settings;\n  onSettingChanged: (\n    propertyName: string,\n    value: string | number | boolean\n  ) => void;\n}\n\nexport type Option<T> = { label: string; value: T };\n\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\nconst getValueAndLabel = (value: string | number | Option<string | number>) =>\n  isOption(value) ? [value.value, value.label] : [value, value];\n\nconst defaultPropertyValue: Record<\n  SettingsProperty[\"type\"],\n  VuuRowDataItemType\n> = {\n  boolean: false,\n  number: 0,\n  string: \"\",\n};\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: VuuRowDataItemType = property.defaultValue ??\n    defaultPropertyValue[property.type]\n) {\n  if (isBooleanProperty(property)) {\n    const checked =\n      typeof currentValue === \"boolean\"\n        ? currentValue\n        : property.defaultValue ?? false;\n\n    return <Switch checked={checked} onChange={changeHandler}></Switch>;\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\n                value={label}\n                key={value}\n                data-field={property.name}\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\nexport type SettingsFormProps = SettingsProps & HTMLAttributes<HTMLDivElement>;\n\n// Generates application settings form component\nexport const SettingsForm = ({\n  settingsSchema: applicationSettingsSchema,\n  settings: applicationSettings,\n  onSettingChanged: onApplicationSettingChanged,\n  ...htmlAttributes\n}: SettingsFormProps) => {\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 {...htmlAttributes}>\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"],"names":["jsx","Switch","ToggleButtonGroup","ToggleButton","Dropdown","Option","Input","queryClosest","useCallback","jsxs","FormField","FormFieldLabel"],"mappings":"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"}
+{"version":3,"file":"SettingsForm.js","sources":["../../src/user-settings/SettingsForm.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { queryClosest, Settings } from \"@vuu-ui/vuu-utils\";\nimport {\n  Dropdown,\n  DropdownProps,\n  FormField,\n  FormFieldLabel,\n  Option,\n  Switch,\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FormEventHandler,\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\nexport interface SettingsSchema {\n  properties: SettingsProperty[];\n}\n\nexport interface SettingsProps {\n  settingsSchema: SettingsSchema;\n  settings: Settings;\n  onSettingChanged: (\n    propertyName: string,\n    value: string | number | boolean\n  ) => void;\n}\n\nexport type Option<T> = { label: string; value: T };\n\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\nconst getValueAndLabel = (value: string | number | Option<string | number>) =>\n  isOption(value) ? [value.value, value.label] : [value, value];\n\nconst defaultPropertyValue: Record<\n  SettingsProperty[\"type\"],\n  VuuRowDataItemType\n> = {\n  boolean: false,\n  number: 0,\n  string: \"\",\n};\n\n// Determine the form control type to be displayed\nexport function FormControl({\n  property,\n  changeHandler,\n  selectHandler,\n  inputHandler,\n  currentValue = property.defaultValue ?? defaultPropertyValue[property.type],\n}: {\n  property: SettingsProperty;\n  changeHandler: FormEventHandler;\n  selectHandler: DropdownProps[\"onSelectionChange\"];\n  inputHandler: FormEventHandler;\n  currentValue: VuuRowDataItemType;\n}) {\n  const [value, setValue] = useState(currentValue);\n  if (isBooleanProperty(property)) {\n    const checked =\n      typeof currentValue === \"boolean\"\n        ? currentValue\n        : property.defaultValue ?? false;\n\n    return <Switch checked={checked} onChange={changeHandler}></Switch>;\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\n                value={label}\n                key={value}\n                data-field={property.name}\n              ></Option>\n            );\n          })}\n        </Dropdown>\n      );\n    }\n  } else {\n    const valid = isValidInput(currentValue, property.type);\n    const content = getTooltipContent(property.type, valid);\n    const TooltipProps = {\n      tooltipContent: content,\n    };\n    return (\n      <VuuInput\n        key={property.name}\n        onCommit={inputHandler}\n        onChange={(e) => setValue((e.target as HTMLInputElement).value)}\n        validationStatus={valid}\n        TooltipProps={TooltipProps}\n        value={value as string}\n      />\n    );\n  }\n  return null;\n}\n\n//Validation logic for input boxes\nconst isValidInput = (value: unknown, type: unknown) => {\n  if (value === \"\") {\n    return undefined;\n  }\n  if (type === \"string\") {\n    return \"success\";\n  } else if (type === \"number\") {\n    if (Number.isNaN(Number(value))) {\n      return \"error\";\n    }\n    return \"success\";\n  }\n};\n\n//Function to Generate Tooltip Content\nfunction getTooltipContent(type: string, valid: string | undefined) {\n  if (valid === \"error\") {\n    if (type === \"number\") {\n      return <p>Field is expecting a number</p>;\n    } else if (type === \"string\") {\n      return <p>Field is expecting a string</p>;\n    } else {\n      return <p>Please contact Admin for more information on expected type</p>;\n    }\n  } else {\n    return undefined;\n  }\n}\n\nexport type SettingsFormProps = SettingsProps & HTMLAttributes<HTMLDivElement>;\n\n// Generates application settings form component\nexport const SettingsForm = ({\n  settingsSchema,\n  settings,\n  onSettingChanged,\n  ...htmlAttributes\n}: SettingsFormProps) => {\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 switch buttons\n  const changeHandler = useCallback<FormEventHandler>(\n    (event) => {\n      const fieldName = getFieldNameFromEventTarget(event);\n      const { checked, value } = event.target as HTMLInputElement;\n      onSettingChanged(fieldName, checked ?? value);\n    },\n    [onSettingChanged]\n  );\n\n  // Change handler for selection form controls\n  const selectHandler = useCallback(\n    (event: SyntheticEvent, [selected]: string[]) => {\n      const fieldName = getFieldNameFromEventTarget(event);\n      onSettingChanged(fieldName, selected);\n    },\n    [onSettingChanged]\n  );\n\n  // Change Handler for input boxes\n  const inputHandler = useCallback<FormEventHandler>(\n    (event) => {\n      const fieldName = getFieldNameFromEventTarget(event);\n      const { value } = event.target as HTMLInputElement;\n      if (!Number.isNaN(Number(value)) && value != \"\") {\n        const numValue = Number(value);\n        onSettingChanged(fieldName, numValue);\n      } else {\n        onSettingChanged(fieldName, value);\n      }\n    },\n    [onSettingChanged]\n  );\n  return (\n    <div {...htmlAttributes}>\n      {settingsSchema.properties.map((property) => (\n        <FormField data-field={property.name} key={property.name}>\n          <FormFieldLabel>{property.label}</FormFieldLabel>\n          {FormControl({\n            property,\n            changeHandler,\n            selectHandler,\n            inputHandler,\n            currentValue: settings[property.name],\n          })}\n        </FormField>\n      ))}\n    </div>\n  );\n};\n"],"names":["useState","jsx","Switch","ToggleButtonGroup","value","ToggleButton","Dropdown","Option","VuuInput","queryClosest","useCallback","jsxs","FormField","FormFieldLabel"],"mappings":";;;;;;;;AAoCa,MAAA,QAAA,GAAW,CACtB,KAEA,KAAA,OAAO,UAAU,QAAY,IAAA,OAAA,IAAW,SAAS,OAAW,IAAA,MAAA;AA2BvD,MAAM,iBAAoB,GAAA,CAC/B,QACgC,KAAA,QAAA,CAAS,IAAS,KAAA,UAAA;AAE7C,MAAM,mBAAmB,CAAC,KAAA,KAC/B,OAAO,KAAU,KAAA,QAAA,IAAY,OAAO,KAAU,KAAA,SAAA;AAEhD,MAAM,gBAAmB,GAAA,CAAC,KACxB,KAAA,QAAA,CAAS,KAAK,CAAI,GAAA,CAAC,KAAM,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAI,GAAA,CAAC,OAAO,KAAK,CAAA,CAAA;AAE9D,MAAM,oBAGF,GAAA;AAAA,EACF,OAAS,EAAA,KAAA;AAAA,EACT,MAAQ,EAAA,CAAA;AAAA,EACR,MAAQ,EAAA,EAAA;AACV,CAAA,CAAA;AAGO,SAAS,WAAY,CAAA;AAAA,EAC1B,QAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAe,GAAA,QAAA,CAAS,YAAgB,IAAA,oBAAA,CAAqB,SAAS,IAAI,CAAA;AAC5E,CAMG,EAAA;AACD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA,CAAA;AAC/C,EAAI,IAAA,iBAAA,CAAkB,QAAQ,CAAG,EAAA;AAC/B,IAAA,MAAM,UACJ,OAAO,YAAA,KAAiB,SACpB,GAAA,YAAA,GACA,SAAS,YAAgB,IAAA,KAAA,CAAA;AAE/B,IAAA,uBAAQC,cAAA,CAAAC,WAAA,EAAA,EAAO,OAAkB,EAAA,QAAA,EAAU,aAAe,EAAA,CAAA,CAAA;AAAA,GAC5D;AAEA,EAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,QAAS,CAAA,MAAM,CAAG,EAAA;AAClC,IAAI,IAAA,QAAA,CAAS,MAAO,CAAA,MAAA,IAAU,CAAG,EAAA;AAC/B,MACE,uBAAAD,cAAA;AAAA,QAACE,sBAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,QAAU,EAAA,aAAA;AAAA,UAET,QAAS,EAAA,QAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,aAAkB,KAAA;AACtC,YAAA,MAAM,CAACC,MAAAA,EAAO,KAAK,CAAA,GAAI,iBAAiB,aAAa,CAAA,CAAA;AACrD,YAAA,uBACGH,cAAA,CAAAI,iBAAA,EAAA,EAAyB,KAAOD,EAAAA,MAAAA,EAC9B,mBADgBA,MAEnB,CAAA,CAAA;AAAA,WAEH,CAAA;AAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAEO,MAAA,IAAA,QAAA,CAAS,MAAO,CAAA,MAAA,GAAS,CAAG,EAAA;AACrC,MACE,uBAAAH,cAAA;AAAA,QAACK,aAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,iBAAmB,EAAA,aAAA;AAAA,UAElB,QAAS,EAAA,QAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,aAAkB,KAAA;AACtC,YAAA,MAAM,CAACF,MAAAA,EAAO,KAAK,CAAA,GAAI,iBAAiB,aAAa,CAAA,CAAA;AACrD,YACE,uBAAAH,cAAA;AAAA,cAACM,WAAA;AAAA,cAAA;AAAA,gBACC,KAAO,EAAA,KAAA;AAAA,gBAEP,cAAY,QAAS,CAAA,IAAA;AAAA,eAAA;AAAA,cADhBH,MAAAA;AAAA,aAEN,CAAA;AAAA,WAEJ,CAAA;AAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAEJ;AAAA,GACK,MAAA;AACL,IAAA,MAAM,KAAQ,GAAA,YAAA,CAAa,YAAc,EAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACtD,IAAA,MAAM,OAAU,GAAA,iBAAA,CAAkB,QAAS,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AACtD,IAAA,MAAM,YAAe,GAAA;AAAA,MACnB,cAAgB,EAAA,OAAA;AAAA,KAClB,CAAA;AACA,IACE,uBAAAH,cAAA;AAAA,MAACO,sBAAA;AAAA,MAAA;AAAA,QAEC,QAAU,EAAA,YAAA;AAAA,QACV,UAAU,CAAC,CAAA,KAAM,QAAU,CAAA,CAAA,CAAE,OAA4B,KAAK,CAAA;AAAA,QAC9D,gBAAkB,EAAA,KAAA;AAAA,QAClB,YAAA;AAAA,QACA,KAAA;AAAA,OAAA;AAAA,MALK,QAAS,CAAA,IAAA;AAAA,KAMhB,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAGA,MAAM,YAAA,GAAe,CAAC,KAAA,EAAgB,IAAkB,KAAA;AACtD,EAAA,IAAI,UAAU,EAAI,EAAA;AAChB,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AACA,EAAA,IAAI,SAAS,QAAU,EAAA;AACrB,IAAO,OAAA,SAAA,CAAA;AAAA,GACT,MAAA,IAAW,SAAS,QAAU,EAAA;AAC5B,IAAA,IAAI,MAAO,CAAA,KAAA,CAAM,MAAO,CAAA,KAAK,CAAC,CAAG,EAAA;AAC/B,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AACA,IAAO,OAAA,SAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAGA,SAAS,iBAAA,CAAkB,MAAc,KAA2B,EAAA;AAClE,EAAA,IAAI,UAAU,OAAS,EAAA;AACrB,IAAA,IAAI,SAAS,QAAU,EAAA;AACrB,MAAO,uBAAAP,cAAA,CAAC,OAAE,QAA2B,EAAA,6BAAA,EAAA,CAAA,CAAA;AAAA,KACvC,MAAA,IAAW,SAAS,QAAU,EAAA;AAC5B,MAAO,uBAAAA,cAAA,CAAC,OAAE,QAA2B,EAAA,6BAAA,EAAA,CAAA,CAAA;AAAA,KAChC,MAAA;AACL,MAAO,uBAAAA,cAAA,CAAC,OAAE,QAA0D,EAAA,4DAAA,EAAA,CAAA,CAAA;AAAA,KACtE;AAAA,GACK,MAAA;AACL,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA;AAKO,MAAM,eAAe,CAAC;AAAA,EAC3B,cAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAM,MAAA,2BAAA,GAA8B,CAAC,GAAwB,KAAA;AAC3D,IAAA,MAAM,YAAe,GAAAQ,qBAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AAC5D,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,CAAQ,KAAO,EAAA;AAC9C,MAAA,OAAO,aAAa,OAAQ,CAAA,KAAA,CAAA;AAAA,KACvB,MAAA;AACL,MAAA,MAAM,MAAM,kCAAkC,CAAA,CAAA;AAAA,KAChD;AAAA,GACF,CAAA;AAGA,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,KAAU,KAAA;AACT,MAAM,MAAA,SAAA,GAAY,4BAA4B,KAAK,CAAA,CAAA;AACnD,MAAA,MAAM,EAAE,OAAA,EAAS,KAAM,EAAA,GAAI,KAAM,CAAA,MAAA,CAAA;AACjC,MAAiB,gBAAA,CAAA,SAAA,EAAW,WAAW,KAAK,CAAA,CAAA;AAAA,KAC9C;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAGA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,KAAA,EAAuB,CAAC,QAAQ,CAAgB,KAAA;AAC/C,MAAM,MAAA,SAAA,GAAY,4BAA4B,KAAK,CAAA,CAAA;AACnD,MAAA,gBAAA,CAAiB,WAAW,QAAQ,CAAA,CAAA;AAAA,KACtC;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAGA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,KAAU,KAAA;AACT,MAAM,MAAA,SAAA,GAAY,4BAA4B,KAAK,CAAA,CAAA;AACnD,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,KAAM,CAAA,MAAA,CAAA;AACxB,MAAI,IAAA,CAAC,OAAO,KAAM,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA,IAAK,SAAS,EAAI,EAAA;AAC/C,QAAM,MAAA,QAAA,GAAW,OAAO,KAAK,CAAA,CAAA;AAC7B,QAAA,gBAAA,CAAiB,WAAW,QAAQ,CAAA,CAAA;AAAA,OAC/B,MAAA;AACL,QAAA,gBAAA,CAAiB,WAAW,KAAK,CAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AACA,EAAA,uBACGT,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EACN,QAAe,EAAA,cAAA,CAAA,UAAA,CAAW,GAAI,CAAA,CAAC,QAC9B,qBAAAU,eAAA,CAACC,cAAU,EAAA,EAAA,YAAA,EAAY,SAAS,IAC9B,EAAA,QAAA,EAAA;AAAA,oBAACX,cAAA,CAAAY,mBAAA,EAAA,EAAgB,mBAAS,KAAM,EAAA,CAAA;AAAA,IAC/B,WAAY,CAAA;AAAA,MACX,QAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA,EAAc,QAAS,CAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KACrC,CAAA;AAAA,GARwC,EAAA,EAAA,QAAA,CAAS,IASpD,CACD,CACH,EAAA,CAAA,CAAA;AAEJ;;;;;;;;"}

package/cjs/user-settings/UserSettingsPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var userSettingsPanelCss = ".vuuUserSettingsPanel {\n  height: 100%;\n}\n";
+var userSettingsPanelCss = ".vuuUserSettingsPanel {\n  height: 100%;\n  overflow: auto;\n}";
 
 module.exports = userSettingsPanelCss;
 //# sourceMappingURL=UserSettingsPanel.css.js.map

package/cjs/user-settings/UserSettingsPanel.js

@@ -5,6 +5,7 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
 var SettingsForm = require('./SettingsForm.js');
+var cx = require('clsx');
 var UserSettingsPanel$1 = require('./UserSettingsPanel.css.js');
 
 const classBase = "vuuUserSettingsPanel";
@@ -23,7 +24,7 @@ const UserSettingsPanel = ({
     window: targetWindow
   });
   if (userSettingsSchema) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: classBase, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: /* @__PURE__ */ jsxRuntime.jsx(
       SettingsForm.SettingsForm,
       {
         settings: userSettings,

package/cjs/user-settings/UserSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsPanel.js","sources":["../../src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n  ...htmlAttributes\n}: UserSettingsPanelProps) => {\n  const targetWindow = useWindow();\n\n  const {\n    onUserSettingChanged,\n    userSettings = {},\n    userSettingsSchema,\n  } = useApplicationSettings();\n\n  useComponentCssInjection({\n    testId: \"vuu-user-settings-panel\",\n    css: userSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  // Without a schema, we can't render a form\n  // We could render a list of input boxes but lets require a schema for now.\n  if (userSettingsSchema) {\n    return (\n      <div {...htmlAttributes} className={classBase}>\n        <SettingsForm\n          settings={userSettings}\n          settingsSchema={userSettingsSchema}\n          onSettingChanged={onUserSettingChanged}\n        />\n      </div>\n    );\n  } else {\n    console.warn(\"no settingsSchema provided to UserSettingsPanel\");\n    return null;\n  }\n};\n"],"names":["useWindow","useApplicationSettings","useComponentCssInjection","userSettingsPanelCss","jsx","SettingsForm"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAEX,MAAM,oBAAoB,CAAC;AAAA,EAChC,GAAG,cAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAE/B,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,kBAAA;AAAA,MACEC,0CAAuB,EAAA,CAAA;AAE3B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,YAAA;AAAA,QACV,cAAgB,EAAA,kBAAA;AAAA,QAChB,gBAAkB,EAAA,oBAAA;AAAA,OAAA;AAAA,KAEtB,EAAA,CAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,KAAK,iDAAiD,CAAA,CAAA;AAC9D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}
+{"version":3,"file":"UserSettingsPanel.js","sources":["../../src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n  ...htmlAttributes\n}: UserSettingsPanelProps) => {\n  const targetWindow = useWindow();\n\n  const {\n    onUserSettingChanged,\n    userSettings = {},\n    userSettingsSchema,\n  } = useApplicationSettings();\n\n  useComponentCssInjection({\n    testId: \"vuu-user-settings-panel\",\n    css: userSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  // Without a schema, we can't render a form\n  // We could render a list of input boxes but lets require a schema for now.\n  if (userSettingsSchema) {\n    return (\n      <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n        <SettingsForm\n          settings={userSettings}\n          settingsSchema={userSettingsSchema}\n          onSettingChanged={onUserSettingChanged}\n        />\n      </div>\n    );\n  } else {\n    console.warn(\"no settingsSchema provided to UserSettingsPanel\");\n    return null;\n  }\n};\n"],"names":["useWindow","useApplicationSettings","useComponentCssInjection","userSettingsPanelCss","jsx","SettingsForm"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAEX,MAAM,oBAAoB,CAAC;AAAA,EAChC,GAAG,cAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAE/B,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,kBAAA;AAAA,MACEC,0CAAuB,EAAA,CAAA;AAE3B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAA,IAAI,kBAAoB,EAAA;AACtB,IACE,uBAAAC,cAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,YAAA;AAAA,QACV,cAAgB,EAAA,kBAAA;AAAA,QAChB,gBAAkB,EAAA,oBAAA;AAAA,OAAA;AAAA,KAEtB,EAAA,CAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,KAAK,iDAAiD,CAAA,CAAA;AAC9D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/cjs/{layout-management → workspace-management}/LayoutList.js

@@ -2,12 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var useLayoutManager = require('./useLayoutManager.js');
-var LayoutTile = require('./LayoutTile.js');
 var cx = require('clsx');
+var LayoutTile = require('./LayoutTile.js');
+var WorkspaceProvider = require('./WorkspaceProvider.js');
 var LayoutList$1 = require('./LayoutList.css.js');
 
 const classBase = "vuuLayoutList";
@@ -22,7 +22,7 @@ const LayoutList = ({
     css: LayoutList$1,
     window: targetWindow
   });
-  const { layoutMetadata, loadLayoutById } = useLayoutManager.useLayoutManager();
+  const { layoutMetadata, loadLayoutById } = WorkspaceProvider.useWorkspace();
   const handleLoadLayout = React.useCallback(
     (layoutId) => {
       if (layoutId) {

package/cjs/workspace-management/LayoutList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutList.js","sources":["../../src/workspace-management/LayoutList.tsx"],"sourcesContent":["import { IconButton, List, ListItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutMetadata } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useMemo } from \"react\";\nimport { LayoutTile } from \"./LayoutTile\";\nimport { useWorkspace } from \"./WorkspaceProvider\";\n\nimport layoutListCss from \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nexport const LayoutList = ({\n  className,\n  title,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-list\",\n    css: layoutListCss,\n    window: targetWindow,\n  });\n\n  const { layoutMetadata, loadLayoutById } = useWorkspace();\n\n  const handleLoadLayout = useCallback(\n    (layoutId?: string) => {\n      if (layoutId) {\n        loadLayoutById(layoutId);\n      }\n    },\n    [loadLayoutById]\n  );\n\n  const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {\n    if (acc[cur.group]) {\n      return {\n        ...acc,\n        [cur.group]: [...acc[cur.group], cur],\n      };\n    }\n    return {\n      ...acc,\n      [cur.group]: [cur],\n    };\n  }, {});\n\n  const content = useMemo<JSX.Element[]>(() => {\n    return Object.entries(layoutsByGroup).map(\n      ([heading, layoutMetadata], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <List<LayoutMetadata, \"none\">\n            height={undefined}\n            itemHeight={68}\n            selectionStrategy=\"none\"\n            source={layoutMetadata}\n            ListItem={({ item, ...props }) => (\n              <ListItem {...props}>\n                <LayoutTile\n                  {...htmlAttributes}\n                  key={item?.id}\n                  metadata={item as LayoutMetadata}\n                  onLoadLayout={handleLoadLayout}\n                />\n                <IconButton\n                  className={`${classBase}-menu`}\n                  data-embedded\n                  icon=\"more-vert\"\n                  variant=\"secondary\"\n                />\n              </ListItem>\n            )}\n          />\n        </div>\n      )\n    );\n  }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutListCss","useWorkspace","useCallback","useMemo","layoutMetadata","jsxs","jsx","List","ListItem","createElement","LayoutTile","IconButton"],"mappings":"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"}

package/cjs/workspace-management/LayoutTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutTile.js","sources":["../../src/workspace-management/LayoutTile.tsx"],"sourcesContent":["import { LayoutMetadata } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\n\nimport layoutTileCss from \"./LayoutTile.css\";\n\nconst classBase = \"vuuLayoutTile\";\n\nexport interface LayoutTileProps extends HTMLAttributes<HTMLDivElement> {\n  metadata: LayoutMetadata;\n  onLoadLayout: (layoutId?: string) => void;\n}\n\nexport const LayoutTile = ({\n  metadata,\n  onLoadLayout,\n  ...htmlAttributes\n}: LayoutTileProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-tile\",\n    css: layoutTileCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={`${classBase}-layoutTile`}\n      key={metadata?.id}\n      onClick={() => onLoadLayout(metadata?.id)}\n    >\n      <img className={`${classBase}-screenshot`} src={metadata?.screenshot} />\n      <div>\n        <div className={`${classBase}-layoutName`}>{metadata?.name}</div>\n        <div className={`${classBase}-layoutDetails`}>\n          <div>{`${metadata?.created}`}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutTileCss","createElement","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOX,MAAM,aAAa,CAAC;AAAA,EACzB,QAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,mBAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,MACvB,KAAK,QAAU,EAAA,EAAA;AAAA,MACf,OAAS,EAAA,MAAM,YAAa,CAAA,QAAA,EAAU,EAAE,CAAA;AAAA,KAAA;AAAA,oBAExCC,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,WAAA,CAAA,EAAA,GAAA,EAAK,UAAU,UAAY,EAAA,CAAA;AAAA,oCACrE,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAA,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,WAAA,CAAA,EAAgB,oBAAU,IAAK,EAAA,CAAA;AAAA,sBAC1DA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,cAAA,CAAA,EAC1B,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA,EAAK,QAAG,EAAA,CAAA,EAAA,QAAA,EAAU,OAAO,CAAA,CAAA,EAAG,CAC/B,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

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

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

package/cjs/{layout-management/useLayoutManager.js → workspace-management/WorkspaceProvider.js}

@@ -3,23 +3,19 @@
 var jsxRuntime = require('react/jsx-runtime');
 var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuPopups = require('@vuu-ui/vuu-popups');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 var React = require('react');
 var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js');
 require('../persistence-manager/LocalPersistenceManager.js');
-require('../persistence-manager/RemotePersistenceManager.js');
+require('@vuu-ui/vuu-ui-controls');
+require('@salt-ds/core');
+require('@salt-ds/styles');
+require('@salt-ds/window');
+require('clsx');
 require('../persistence-manager/StaticPersistenceManager.js');
-var defaultApplicationJson = require('./defaultApplicationJson.js');
+var defaultWorkspaceJSON = require('./defaultWorkspaceJSON.js');
 
-const LayoutManagementContext = React.createContext({
-  getApplicationSettings: () => void 0,
-  layoutMetadata: [],
-  saveLayout: () => void 0,
-  // The default Application JSON will be served if no LayoutManagementProvider
-  applicationJson: defaultApplicationJson.defaultApplicationJson,
-  saveApplicationLayout: () => void 0,
-  saveApplicationSettings: () => void 0,
-  loadLayoutById: () => void 0
-});
+const { info } = vuuUtils.logger("useLayoutManager");
 const ensureLayoutHasTitle = (layout, layoutMetadata) => {
   if (layout.props?.title !== void 0) {
     return layout;
@@ -33,15 +29,22 @@ const ensureLayoutHasTitle = (layout, layoutMetadata) => {
     };
   }
 };
-const LayoutManagementProvider = ({
-  defaultLayout,
-  ...props
+const loadingApplicationJSON = {
+  workspaceJSON: defaultWorkspaceJSON.loadingJSON
+};
+const WorkspaceProvider = ({
+  TabstripProps,
+  children,
+  layoutJSON,
+  layoutPlaceholderJSON,
+  showTabs,
+  workspaceJSON: customWorkspaceJSON
 }) => {
   const [layoutMetadata, setLayoutMetadata] = React.useState([]);
   const [, forceRefresh] = React.useState({});
   const notify = vuuPopups.useNotifications();
   const persistenceManager = PersistenceProvider.usePersistenceManager();
-  const applicationJSONRef = React.useRef(defaultApplicationJson.loadingApplicationJson);
+  const applicationJSONRef = React.useRef(loadingApplicationJSON);
   const setApplicationJSON = React.useCallback(
     (applicationJSON, rerender = true) => {
       applicationJSONRef.current = applicationJSON;
@@ -51,12 +54,12 @@ const LayoutManagementProvider = ({
     },
     []
   );
-  const setApplicationLayout = React.useCallback(
-    (layout, rerender = true) => {
+  const setWorkspaceJSON = React.useCallback(
+    (workspaceJSON, rerender = true) => {
       setApplicationJSON(
         {
           ...applicationJSONRef.current,
-          layout
+          workspaceJSON
         },
         rerender
       );
@@ -91,10 +94,19 @@ const LayoutManagementProvider = ({
     });
     persistenceManager?.loadApplicationJSON().then((applicationJSON) => {
       if (applicationJSON) {
+        info?.("applicationJSON loaded successfully");
         setApplicationJSON(applicationJSON);
       } else {
+        const workspaceJSON = defaultWorkspaceJSON.getWorkspaceWithLayoutJSON(
+          customWorkspaceJSON,
+          layoutJSON,
+          { TabstripProps, showTabs }
+        );
+        info?.(`applicationJSON not found, getting defaultWorkspaceJSON,
+            ${JSON.stringify(workspaceJSON, null, 2)}
+            `);
         setApplicationJSON({
-          layout: defaultApplicationJson.getDefaultApplicationLayout(defaultLayout)
+          workspaceJSON
         });
       }
     }).catch((error) => {
@@ -108,25 +120,33 @@ const LayoutManagementProvider = ({
         error
       );
     });
-  }, [defaultLayout, notify, persistenceManager, setApplicationJSON]);
+  }, [
+    TabstripProps,
+    customWorkspaceJSON,
+    layoutJSON,
+    notify,
+    persistenceManager,
+    setApplicationJSON,
+    showTabs
+  ]);
   const saveApplicationLayout = React.useCallback(
     (layout) => {
       if (vuuLayout.isLayoutJSON(layout)) {
-        setApplicationLayout(layout, false);
+        setWorkspaceJSON(layout, false);
         persistenceManager?.saveApplicationJSON(applicationJSONRef.current);
       } else {
         console.error("Tried to save invalid application layout", layout);
       }
     },
-    [persistenceManager, setApplicationLayout]
+    [persistenceManager, setWorkspaceJSON]
   );
   const saveLayout = React.useCallback(
     (metadata) => {
       let layoutToSave;
       try {
         layoutToSave = vuuLayout.resolveJSONPath(
-          applicationJSONRef.current.layout,
-          "#main-tabs.ACTIVE_CHILD"
+          applicationJSONRef.current.workspaceJSON,
+          `#${vuuUtils.VuuShellLocation.Workspace}.ACTIVE_CHILD`
         );
       } catch (e) {
       }
@@ -182,8 +202,8 @@ const LayoutManagementProvider = ({
   const loadLayoutById = React.useCallback(
     (id) => {
       persistenceManager?.loadLayout(id).then((layoutJson) => {
-        const { layout: currentLayout } = applicationJSONRef.current;
-        setApplicationLayout({
+        const { workspaceJSON: currentLayout } = applicationJSONRef.current;
+        setWorkspaceJSON({
           ...currentLayout,
           children: (currentLayout.children || []).concat(layoutJson),
           props: {
@@ -200,27 +220,33 @@ const LayoutManagementProvider = ({
         console.error("Error occurred while loading layout", error);
       });
     },
-    [notify, persistenceManager, setApplicationLayout]
+    [notify, persistenceManager, setWorkspaceJSON]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LayoutManagementContext.Provider,
+    vuuUtils.WorkspaceContext.Provider,
     {
       value: {
         getApplicationSettings,
         layoutMetadata,
+        layoutPlaceholderJSON,
         saveLayout,
-        applicationJson: applicationJSONRef.current,
+        workspaceJSON: applicationJSONRef.current.workspaceJSON,
         saveApplicationLayout,
         saveApplicationSettings,
         loadLayoutById
       },
-      children: props.children
+      children
     }
   );
 };
-const useLayoutManager = () => React.useContext(LayoutManagementContext);
+const useWorkspace = () => {
+  const { workspaceJSON = defaultWorkspaceJSON.getWorkspaceWithLayoutJSON(), ...contextProps } = React.useContext(vuuUtils.WorkspaceContext);
+  return {
+    ...contextProps,
+    workspaceJSON
+  };
+};
 
-exports.LayoutManagementContext = LayoutManagementContext;
-exports.LayoutManagementProvider = LayoutManagementProvider;
-exports.useLayoutManager = useLayoutManager;
-//# sourceMappingURL=useLayoutManager.js.map
+exports.WorkspaceProvider = WorkspaceProvider;
+exports.useWorkspace = useWorkspace;
+//# sourceMappingURL=WorkspaceProvider.js.map

package/cjs/workspace-management/WorkspaceProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceProvider.js","sources":["../../src/workspace-management/WorkspaceProvider.tsx"],"sourcesContent":["import { isLayoutJSON, resolveJSONPath } from \"@vuu-ui/vuu-layout\";\nimport { useNotifications } from \"@vuu-ui/vuu-popups\";\nimport {\n  LayoutMetadata,\n  LayoutMetadataDto,\n  VuuShellLocation,\n  WorkspaceContext,\n  logger,\n  type ApplicationJSON,\n  type ApplicationSetting,\n  type ApplicationSettings,\n  type LayoutJSON,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport {\n  getWorkspaceWithLayoutJSON,\n  loadingJSON,\n  type WorkspaceStackProps,\n} from \"./defaultWorkspaceJSON\";\n\nconst { info } = logger(\"useLayoutManager\");\n\nexport type WorkspaceProps = WorkspaceStackProps & {\n  layoutPlaceholderJSON?: LayoutJSON;\n  /**\n   * layoutJSON defines the default layout to render on first load and until such time as\n   * layout state has been persisted. After that, the persisted state will be rendered.\n   */\n  layoutJSON?: LayoutJSON;\n  /**\n   * The Vuu workspace is the container into which layouts are loaded. By default, it will be\n   * a Tabbed Panel (Stack + Tabstrip), showing a tab per Layout.\n   */\n  workspaceJSON?: LayoutJSON;\n};\n\nexport interface WorkspaceProviderProps extends WorkspaceProps {\n  children: JSX.Element | JSX.Element[];\n\n  /**\n   * layoutPlaceholderJSON defines the layout to render when a new workspace layout is created.\n   */\n  layoutPlaceholderJSON?: LayoutJSON;\n}\n\nconst ensureLayoutHasTitle = (\n  layout: LayoutJSON,\n  layoutMetadata: LayoutMetadataDto\n) => {\n  if (layout.props?.title !== undefined) {\n    return layout;\n  } else {\n    return {\n      ...layout,\n      props: {\n        ...layout.props,\n        title: layoutMetadata.name,\n      },\n    };\n  }\n};\n\nconst loadingApplicationJSON: ApplicationJSON = {\n  workspaceJSON: loadingJSON,\n};\n\n/**\n * LayoutManagementProvider supplies an API for loading and saving layout documents.\n * Initial layout is automatically loaded on startup. Because this hook is responsible\n * only for loading and saving layouts, it only triggers a render when content is loaded.\n *\n * Initial layout displays a loading state\n * User may supply a default layout. This will not be displayed until call has been made to\n * persistenceManager to retrieve stored layout state. If no stored state is returned, the\n * default layout provided by user will be set as current state (and hence rendered). If no\n * default layout has been provided by user, the sysem default will be used (simple PlaceHolder)\n * If saved layout state has been returned, that will be set as current state (and rendered)\n *\n */\nexport const WorkspaceProvider = ({\n  TabstripProps,\n  children,\n  layoutJSON,\n  layoutPlaceholderJSON,\n  showTabs,\n  workspaceJSON: customWorkspaceJSON,\n}: WorkspaceProviderProps) => {\n  const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);\n  // TODO this default should probably be a loading state rather than the placeholder\n  // It will be replaced as soon as the localStorage/remote layout is resolved\n  const [, forceRefresh] = useState({});\n  const notify = useNotifications();\n  const persistenceManager = usePersistenceManager();\n  const applicationJSONRef = useRef<ApplicationJSON>(loadingApplicationJSON);\n\n  const setApplicationJSON = useCallback(\n    (applicationJSON: ApplicationJSON, rerender = true) => {\n      applicationJSONRef.current = applicationJSON;\n      if (rerender) {\n        forceRefresh({});\n      }\n    },\n    []\n  );\n\n  const setWorkspaceJSON = useCallback(\n    (workspaceJSON: LayoutJSON, rerender = true) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          workspaceJSON,\n        },\n        rerender\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  const setApplicationSettings = useCallback(\n    (settings: ApplicationSettings) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          settings: {\n            ...applicationJSONRef.current.settings,\n            ...settings,\n          },\n        },\n        false\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  useEffect(() => {\n    //TODO this does not need to be done ahead of time\n    persistenceManager\n      ?.loadMetadata()\n      .then((metadata) => {\n        setLayoutMetadata(metadata);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layouts\",\n          body: \"Could not load list of available layouts\",\n        });\n        console.error(\"Error occurred while retrieving metadata\", error);\n      });\n\n    persistenceManager\n      ?.loadApplicationJSON()\n      .then((applicationJSON?: ApplicationJSON) => {\n        if (applicationJSON) {\n          info?.(\"applicationJSON loaded successfully\");\n          setApplicationJSON(applicationJSON);\n        } else {\n          // No applicationJSON has been saved yet. Construct our\n          // initial applicationJSON from user configuration and\n          // default values.\n          const workspaceJSON = getWorkspaceWithLayoutJSON(\n            customWorkspaceJSON,\n            layoutJSON,\n            { TabstripProps, showTabs }\n          );\n          info?.(`applicationJSON not found, getting defaultWorkspaceJSON,\n            ${JSON.stringify(workspaceJSON, null, 2)}\n            `);\n          setApplicationJSON({\n            workspaceJSON,\n          });\n        }\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layout\",\n          body: \"Could not load your latest view\",\n        });\n        console.error(\n          \"Error occurred while retrieving application layout\",\n          error\n        );\n      });\n  }, [\n    TabstripProps,\n    customWorkspaceJSON,\n    layoutJSON,\n    notify,\n    persistenceManager,\n    setApplicationJSON,\n    showTabs,\n  ]);\n\n  const saveApplicationLayout = useCallback(\n    (layout: LayoutJSON) => {\n      if (isLayoutJSON(layout)) {\n        setWorkspaceJSON(layout, false);\n        persistenceManager?.saveApplicationJSON(applicationJSONRef.current);\n      } else {\n        console.error(\"Tried to save invalid application layout\", layout);\n      }\n    },\n    [persistenceManager, setWorkspaceJSON]\n  );\n\n  const saveLayout = useCallback(\n    (metadata: LayoutMetadataDto) => {\n      let layoutToSave: LayoutJSON | undefined;\n      try {\n        layoutToSave = resolveJSONPath(\n          applicationJSONRef.current.workspaceJSON,\n          `#${VuuShellLocation.Workspace}.ACTIVE_CHILD`\n        );\n      } catch (e) {\n        // ignore, code below will handle\n      }\n\n      if (layoutToSave && isLayoutJSON(layoutToSave)) {\n        persistenceManager\n          ?.createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata))\n          .then((metadata) => {\n            notify({\n              type: \"success\",\n              header: \"Layout Saved Successfully\",\n              body: `${metadata.name} saved successfully`,\n            });\n            setLayoutMetadata((prev) => [...prev, metadata]);\n          })\n          .catch((error: Error) => {\n            notify({\n              type: \"error\",\n              header: \"Failed to Save Layout\",\n              body: `Failed to save layout ${metadata.name}`,\n            });\n            console.error(\"Error occurred while saving layout\", error);\n          });\n      } else {\n        console.error(\"Tried to save invalid layout\", layoutToSave);\n        notify({\n          type: \"error\",\n          header: \"Failed to Save Layout\",\n          body: \"Cannot save invalid layout\",\n        });\n      }\n    },\n    [notify, persistenceManager]\n  );\n\n  const saveApplicationSettings = useCallback(\n    (\n      settings: ApplicationSettings | ApplicationSetting,\n      key?: keyof ApplicationSettings\n    ) => {\n      const { settings: applicationSettings } = applicationJSONRef.current;\n      if (key) {\n        setApplicationSettings({\n          ...applicationSettings,\n          [key]: settings,\n        });\n      } else {\n        setApplicationSettings(settings as ApplicationSettings);\n      }\n      persistenceManager?.saveApplicationJSON(applicationJSONRef.current);\n    },\n    [persistenceManager, setApplicationSettings]\n  );\n\n  const getApplicationSettings = useCallback(\n    (key?: keyof ApplicationSettings) => {\n      const { settings } = applicationJSONRef.current;\n      return key ? settings?.[key] : settings;\n    },\n    []\n  );\n\n  const loadLayoutById = useCallback(\n    (id: string) => {\n      persistenceManager\n        ?.loadLayout(id)\n        .then((layoutJson) => {\n          const { workspaceJSON: currentLayout } = applicationJSONRef.current;\n          setWorkspaceJSON({\n            ...currentLayout,\n            children: (currentLayout.children || []).concat(layoutJson),\n            props: {\n              ...currentLayout.props,\n              active: currentLayout.children?.length ?? 0,\n            },\n          });\n        })\n        .catch((error: Error) => {\n          notify({\n            type: \"error\",\n            header: \"Failed to Load Layout\",\n            body: \"Failed to load the requested layout\",\n          });\n          console.error(\"Error occurred while loading layout\", error);\n        });\n    },\n    [notify, persistenceManager, setWorkspaceJSON]\n  );\n\n  return (\n    <WorkspaceContext.Provider\n      value={{\n        getApplicationSettings,\n        layoutMetadata,\n        layoutPlaceholderJSON,\n        saveLayout,\n        workspaceJSON: applicationJSONRef.current.workspaceJSON,\n        saveApplicationLayout,\n        saveApplicationSettings,\n        loadLayoutById,\n      }}\n    >\n      {children}\n    </WorkspaceContext.Provider>\n  );\n};\n\nexport const useWorkspace = () => {\n  // The default Application JSON will be served if no LayoutManagementProvider\n  const { workspaceJSON = getWorkspaceWithLayoutJSON(), ...contextProps } =\n    useContext(WorkspaceContext);\n\n  return {\n    ...contextProps,\n    workspaceJSON,\n  };\n};\n"],"names":["logger","loadingJSON","useState","useNotifications","usePersistenceManager","useRef","useCallback","useEffect","getWorkspaceWithLayoutJSON","isLayoutJSON","resolveJSONPath","VuuShellLocation","metadata","jsx","WorkspaceContext","useContext"],"mappings":"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"}