@vuu-ui/vuu-shell 0.8.60 → 0.8.62

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

package/esm/persistence-management/StaticPersistenceManager.js

@@ -0,0 +1,56 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _layoutMetaData;
+function unsupported() {
+  return new Promise((_, reject) => {
+    reject("not supported");
+  });
+}
+class StaticPersistenceManager {
+  constructor(layoutMetadata) {
+    __privateAdd(this, _layoutMetaData, void 0);
+    __privateSet(this, _layoutMetaData, layoutMetadata);
+  }
+  createLayout() {
+    return unsupported();
+  }
+  updateLayout() {
+    return unsupported();
+  }
+  deleteLayout() {
+    return unsupported();
+  }
+  loadLayout(id) {
+    console.log(`load layout #${id}`);
+    return unsupported();
+  }
+  loadMetadata() {
+    return Promise.resolve(__privateGet(this, _layoutMetaData));
+  }
+  loadApplicationJSON() {
+    return unsupported();
+  }
+  saveApplicationJSON() {
+    return unsupported();
+  }
+}
+_layoutMetaData = new WeakMap();
+
+export { StaticPersistenceManager };
+//# sourceMappingURL=StaticPersistenceManager.js.map

package/esm/persistence-management/StaticPersistenceManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticPersistenceManager.js","sources":["../../src/persistence-management/StaticPersistenceManager.ts"],"sourcesContent":["import { LayoutJSON, ApplicationJSON } from \"@vuu-ui/vuu-layout\";\nimport { PersistenceManager } from \"./PersistenceManager\";\nimport { LayoutMetadata } from \"../layout-management\";\n\nfunction unsupported<T = void>() {\n  return new Promise<T>((_, reject) => {\n    reject(\"not supported\");\n  });\n}\n\nexport class StaticPersistenceManager implements PersistenceManager {\n  #layoutMetaData: LayoutMetadata[];\n  constructor(layoutMetadata: LayoutMetadata[]) {\n    this.#layoutMetaData = layoutMetadata;\n  }\n  createLayout() {\n    return unsupported<LayoutMetadata>();\n  }\n  updateLayout() {\n    return unsupported();\n  }\n  deleteLayout() {\n    return unsupported();\n  }\n  loadLayout(id: string) {\n    console.log(`load layout #${id}`);\n    return unsupported<LayoutJSON>();\n  }\n  loadMetadata() {\n    return Promise.resolve(this.#layoutMetaData);\n  }\n  loadApplicationJSON() {\n    return unsupported<ApplicationJSON>();\n  }\n  saveApplicationJSON() {\n    return unsupported();\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,CAAA;AAIA,SAAS,WAAwB,GAAA;AAC/B,EAAA,OAAO,IAAI,OAAA,CAAW,CAAC,CAAA,EAAG,MAAW,KAAA;AACnC,IAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAAA,GACvB,CAAA,CAAA;AACH,CAAA;AAEO,MAAM,wBAAuD,CAAA;AAAA,EAElE,YAAY,cAAkC,EAAA;AAD9C,IAAA,YAAA,CAAA,IAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEE,IAAA,YAAA,CAAA,IAAA,EAAK,eAAkB,EAAA,cAAA,CAAA,CAAA;AAAA,GACzB;AAAA,EACA,YAAe,GAAA;AACb,IAAA,OAAO,WAA4B,EAAA,CAAA;AAAA,GACrC;AAAA,EACA,YAAe,GAAA;AACb,IAAA,OAAO,WAAY,EAAA,CAAA;AAAA,GACrB;AAAA,EACA,YAAe,GAAA;AACb,IAAA,OAAO,WAAY,EAAA,CAAA;AAAA,GACrB;AAAA,EACA,WAAW,EAAY,EAAA;AACrB,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAgB,aAAA,EAAA,EAAE,CAAE,CAAA,CAAA,CAAA;AAChC,IAAA,OAAO,WAAwB,EAAA,CAAA;AAAA,GACjC;AAAA,EACA,YAAe,GAAA;AACb,IAAO,OAAA,OAAA,CAAQ,OAAQ,CAAA,YAAA,CAAA,IAAA,EAAK,eAAe,CAAA,CAAA,CAAA;AAAA,GAC7C;AAAA,EACA,mBAAsB,GAAA;AACpB,IAAA,OAAO,WAA6B,EAAA,CAAA;AAAA,GACtC;AAAA,EACA,mBAAsB,GAAA;AACpB,IAAA,OAAO,WAAY,EAAA,CAAA;AAAA,GACrB;AACF,CAAA;AA1BE,eAAA,GAAA,IAAA,OAAA,EAAA;;;;"}

package/esm/session-editing-form/SessionEditingForm.js

@@ -101,10 +101,10 @@ const SessionEditingForm = ({
   const formContentRef = useRef(null);
   const initialDataRef = useRef();
   const dataStatusRef = useRef(Status.uninitialised);
-  const ds = getDataSource(dataSourceProp, schema);
-  const { columns } = ds;
-  const columnMap = buildColumnMap(ds.columns);
   const dataSource = useMemo(() => {
+    const ds = getDataSource(dataSourceProp, schema);
+    const { columns } = ds;
+    const columnMap = buildColumnMap(ds.columns);
     const applyServerData = (data) => {
       if (columnMap) {
         const values2 = {};
@@ -128,12 +128,13 @@ const SessionEditingForm = ({
       }
     });
     return ds;
-  }, [columnMap, columns, ds]);
+  }, [dataSourceProp, schema]);
   const id = useIdMemo(idProp);
   const handleChange = useCallback(
     (evt) => {
       const [field, value] = getFieldNameAndValue(evt);
-      const typedValue = value;
+      const { type } = getField(fields, field);
+      const typedValue = getTypedValue(value, type);
       setValues((values2 = {}) => {
         const newValues = {
           ...values2,
@@ -144,16 +145,14 @@ const SessionEditingForm = ({
         return newValues;
       });
     },
-    []
+    [fields]
   );
   const handleBlur = useCallback(
     (evt) => {
       const [field, value] = getFieldNameAndValue(evt);
       const rowKey = values?.[keyField];
       const { type } = getField(fields, field);
-      const clientTypedValue = getTypedValue(value, type, true);
-      console.log(`client typed value ${clientTypedValue}`);
-      const typedValue = value;
+      const typedValue = getTypedValue(value, type, true);
       if (typeof rowKey === "string") {
         dataSource.menuRpcCall({
           rowKey,

package/esm/session-editing-form/SessionEditingForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionEditingForm.js","sources":["../../src/session-editing-form/SessionEditingForm.tsx"],"sourcesContent":["import { VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport { DataSource, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n  VuuColumnDataType,\n  VuuDataRow,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  hasAction,\n  isErrorResponse,\n  isValidNumber,\n  queryClosest,\n  shallowEquals,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  Button,\n  FormField,\n  FormFieldHelperText,\n  FormFieldLabel,\n  Input,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport sessionEditingFormCss from \"./SessionEditingForm.css\";\n\nexport type FormFieldDescriptor = {\n  isKeyField?: boolean;\n  label?: string;\n  name: string;\n  type: VuuColumnDataType;\n  description: string;\n  readonly?: boolean;\n  required?: boolean;\n};\n\nexport type FormConfig = {\n  title: string;\n  key: string;\n  fields: FormFieldDescriptor[];\n};\n\nexport interface SessionEditingFormProps\n  extends HTMLAttributes<HTMLDivElement> {\n  config: FormConfig;\n  onClose?: () => void;\n  dataSource?: DataSource;\n  schema?: TableSchema;\n}\n\nconst classBase = \"vuuSessionEditingForm\";\n\nconst getField = (\n  fields: FormFieldDescriptor[],\n  name: string\n): FormFieldDescriptor => {\n  const field = fields.find((f) => f.name === name);\n  if (field) {\n    return field;\n  } else {\n    throw Error(`SessionEditingForm, no field '${name}' found`);\n  }\n};\n\nconst getFieldNameAndValue = ({\n  target,\n}: ChangeEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>): [\n  string,\n  string\n] => {\n  const formField = queryClosest(target, \".saltFormField\");\n  if (formField) {\n    const {\n      dataset: { field },\n    } = formField;\n    if (field === undefined) {\n      throw Error(\"SessionEditingForm, form field has no field data attribute\");\n    }\n    return [field, target.value];\n  } else {\n    throw Error(\"Form control is not enclosed in FormField\");\n  }\n};\n\nconst Status = {\n  uninitialised: 0,\n  unchanged: 1,\n  changed: 2,\n  invalid: 3,\n};\n\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined?: false\n): VuuRowDataItemType | undefined;\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined: true\n): VuuRowDataItemType;\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined = false\n): VuuRowDataItemType | undefined {\n  switch (type) {\n    case \"int\":\n    case \"long\": {\n      const typedValue = parseInt(value, 10);\n      if (isValidNumber(typedValue)) {\n        return typedValue;\n      } else if (throwIfUndefined) {\n        throw Error(\"SessionEditingForm getTypedValue\");\n      } else {\n        return undefined;\n      }\n    }\n\n    case \"double\": {\n      const typedValue = parseFloat(value);\n      if (isValidNumber(typedValue)) {\n        return typedValue;\n      }\n      return undefined;\n    }\n\n    case \"boolean\":\n      return value === \"true\" ? true : false;\n    default:\n      return value;\n  }\n}\n\nconst getDataSource = (\n  dataSource?: DataSource,\n  schema?: TableSchema\n): DataSource => {\n  if (dataSource) {\n    return dataSource;\n  } else if (schema) {\n    return new VuuDataSource({\n      bufferSize: 0,\n      table: schema.table,\n      columns: schema.columns.map((col) => col.name),\n    }) as DataSource;\n  } else {\n    throw Error(\n      \"SessionEditingForm: either a DataSource or a TableSchema must be provided\"\n    );\n  }\n};\n\ntype FormValues = { [key: string]: VuuRowDataItemType | undefined };\n\nexport const SessionEditingForm = ({\n  className,\n  config: { fields, key: keyField },\n  dataSource: dataSourceProp,\n  id: idProp,\n  onClose,\n  schema,\n  ...htmlAttributes\n}: SessionEditingFormProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-session-editing-form\",\n    css: sessionEditingFormCss,\n    window: targetWindow,\n  });\n\n  const [fieldStatusValues, setFieldStatusValues] = useState<\n    Record<string, string | undefined>\n  >({});\n  const [values, setValues] = useState<FormValues>();\n  const [errorMessage, setErrorMessage] = useState(\"\");\n  const formContentRef = useRef<HTMLDivElement>(null);\n  const initialDataRef = useRef<FormValues>();\n  const dataStatusRef = useRef(Status.uninitialised);\n\n  const ds = getDataSource(dataSourceProp, schema);\n  const { columns } = ds;\n  const columnMap = buildColumnMap(ds.columns);\n\n  const dataSource = useMemo(() => {\n    const applyServerData = (data: VuuDataRow) => {\n      if (columnMap) {\n        const values: { [key: string]: VuuRowDataItemType } = {};\n        for (const column of columns) {\n          values[column] = data[columnMap[column]];\n        }\n        if (dataStatusRef.current === Status.uninitialised) {\n          dataStatusRef.current = Status.unchanged;\n          initialDataRef.current = values;\n        }\n        setValues(values);\n      }\n    };\n\n    ds.subscribe({ range: { from: 0, to: 5 } }, (message) => {\n      if (message.type === \"viewport-update\" && message.rows) {\n        if (dataStatusRef.current === Status.uninitialised) {\n          applyServerData(message.rows[0]);\n        } else {\n          console.log(\"what do we do with server updates\");\n        }\n      }\n    });\n    return ds;\n  }, [columnMap, columns, ds]);\n\n  const id = useIdMemo(idProp);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      // const { type } = getField(fields, field);\n      // const typedValue = getTypedValue(value, type);\n      const typedValue = value;\n      setValues((values = {}) => {\n        const newValues = {\n          ...values,\n          [field]: typedValue,\n        };\n        const notUpdated = shallowEquals(newValues, initialDataRef.current);\n        dataStatusRef.current = notUpdated\n          ? Status.unchanged\n          : typedValue !== undefined\n          ? Status.changed\n          : Status.invalid;\n        return newValues;\n      });\n    },\n    []\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      const rowKey = values?.[keyField];\n      // TODO link this with client side validation if we're going to use it\n      const { type } = getField(fields, field);\n      const clientTypedValue = getTypedValue(value, type, true);\n      console.log(`client typed value ${clientTypedValue}`);\n      const typedValue = value;\n      if (typeof rowKey === \"string\") {\n        dataSource\n          .menuRpcCall({\n            rowKey,\n            field: field,\n            value: typedValue,\n            type: \"VP_EDIT_CELL_RPC\",\n          })\n          .then((response) => {\n            if (response?.type === \"VP_EDIT_RPC_REJECT\") {\n              console.log(`edit rejected ${response.error}`);\n              setFieldStatusValues((map) => ({\n                ...map,\n                [field]: response.error,\n              }));\n            } else {\n              setFieldStatusValues((map) => ({\n                ...map,\n                [field]: undefined,\n              }));\n            }\n          });\n      }\n    },\n    [dataSource, fields, keyField, values]\n  );\n\n  const applyAction = useCallback(\n    (action: unknown) => {\n      if (typeof action === \"object\" && action !== null) {\n        if (\"type\" in action && action.type === \"CLOSE_DIALOG_ACTION\") {\n          onClose?.();\n        }\n      }\n    },\n    [onClose]\n  );\n\n  const handleSubmit = useCallback(async () => {\n    const response = await dataSource.menuRpcCall({\n      type: \"VP_EDIT_SUBMIT_FORM_RPC\",\n    });\n    if (isErrorResponse(response)) {\n      setErrorMessage(response.error);\n    } else if (hasAction(response)) {\n      applyAction(response.action);\n    }\n  }, [applyAction, dataSource]);\n\n  const handleKeyDown = useCallback(\n    (evt) => {\n      if (evt.key === \"Enter\" && dataStatusRef.current === Status.changed) {\n        handleSubmit();\n      }\n    },\n    [handleSubmit]\n  );\n\n  const handleCancel = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  const getFormControl = (field: FormFieldDescriptor) => {\n    const value = String(values?.[field.name] ?? \"\");\n    if (field.readonly || field.name === keyField) {\n      return (\n        <div className={`${classBase}-fieldValue vuuReadOnly`}>{value}</div>\n      );\n    } else {\n      return (\n        <Input\n          className={`${classBase}-fieldValue`}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          value={value}\n          id={`${id}-input-${field.name}`}\n        />\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (formContentRef.current) {\n      const firstInput = formContentRef.current.querySelector(\n        \"input\"\n      ) as HTMLInputElement;\n      if (firstInput) {\n        setTimeout(() => {\n          firstInput.focus();\n          firstInput.select();\n        }, 100);\n      }\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (dataSource) {\n        dataSource.unsubscribe();\n      }\n    };\n  }, [dataSource]);\n\n  const isDirty = dataStatusRef.current === Status.changed;\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {errorMessage ? (\n        <div\n          className={`${classBase}-errorBanner`}\n          data-icon=\"error\"\n          title={errorMessage}\n        >\n          Error, edit(s) not saved\n        </div>\n      ) : undefined}\n      <div\n        className={`${classBase}-content`}\n        ref={formContentRef}\n        onKeyDown={handleKeyDown}\n      >\n        {fields.map((field) => (\n          <FormField\n            className={`${classBase}-field`}\n            data-field={field.name}\n            key={field.name}\n            necessity={field.required ? \"required\" : \"optional\"}\n            readOnly={field.readonly}\n            validationStatus={\n              fieldStatusValues[field.name] ? \"error\" : undefined\n            }\n          >\n            <FormFieldLabel>{field?.label ?? field.description}</FormFieldLabel>\n            {getFormControl(field)}\n            <FormFieldHelperText>\n              {fieldStatusValues[field.name] ?? \"\"}\n            </FormFieldHelperText>\n          </FormField>\n        ))}\n      </div>\n      <div className={`${classBase}-buttonbar salt-theme salt-density-high`}>\n        <Button\n          type=\"submit\"\n          variant=\"cta\"\n          disabled={!isDirty}\n          onClick={handleSubmit}\n        >\n          Submit\n        </Button>\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          Cancel\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["values"],"mappings":"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"}
+{"version":3,"file":"SessionEditingForm.js","sources":["../../src/session-editing-form/SessionEditingForm.tsx"],"sourcesContent":["import { VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport { DataSource, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n  VuuColumnDataType,\n  VuuDataRow,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  hasAction,\n  isErrorResponse,\n  isValidNumber,\n  queryClosest,\n  shallowEquals,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  Button,\n  FormField,\n  FormFieldHelperText,\n  FormFieldLabel,\n  Input,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport sessionEditingFormCss from \"./SessionEditingForm.css\";\n\nexport type FormFieldDescriptor = {\n  isKeyField?: boolean;\n  label?: string;\n  name: string;\n  type: VuuColumnDataType;\n  description: string;\n  readonly?: boolean;\n  required?: boolean;\n};\n\nexport type FormConfig = {\n  title: string;\n  key: string;\n  fields: FormFieldDescriptor[];\n};\n\nexport interface SessionEditingFormProps\n  extends HTMLAttributes<HTMLDivElement> {\n  config: FormConfig;\n  onClose?: () => void;\n  dataSource?: DataSource;\n  schema?: TableSchema;\n}\n\nconst classBase = \"vuuSessionEditingForm\";\n\nconst getField = (\n  fields: FormFieldDescriptor[],\n  name: string\n): FormFieldDescriptor => {\n  const field = fields.find((f) => f.name === name);\n  if (field) {\n    return field;\n  } else {\n    throw Error(`SessionEditingForm, no field '${name}' found`);\n  }\n};\n\nconst getFieldNameAndValue = ({\n  target,\n}: ChangeEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>): [\n  string,\n  string\n] => {\n  const formField = queryClosest(target, \".saltFormField\");\n  if (formField) {\n    const {\n      dataset: { field },\n    } = formField;\n    if (field === undefined) {\n      throw Error(\"SessionEditingForm, form field has no field data attribute\");\n    }\n    return [field, target.value];\n  } else {\n    throw Error(\"Form control is not enclosed in FormField\");\n  }\n};\n\nconst Status = {\n  uninitialised: 0,\n  unchanged: 1,\n  changed: 2,\n  invalid: 3,\n};\n\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined?: false\n): VuuRowDataItemType | undefined;\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined: true\n): VuuRowDataItemType;\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined = false\n): VuuRowDataItemType | undefined {\n  switch (type) {\n    case \"int\":\n    case \"long\": {\n      const typedValue = parseInt(value, 10);\n      if (isValidNumber(typedValue)) {\n        return typedValue;\n      } else if (throwIfUndefined) {\n        throw Error(\"SessionEditingForm getTypedValue\");\n      } else {\n        return undefined;\n      }\n    }\n\n    case \"double\": {\n      const typedValue = parseFloat(value);\n      if (isValidNumber(typedValue)) {\n        return typedValue;\n      }\n      return undefined;\n    }\n\n    case \"boolean\":\n      return value === \"true\" ? true : false;\n    default:\n      return value;\n  }\n}\n\nconst getDataSource = (\n  dataSource?: DataSource,\n  schema?: TableSchema\n): DataSource => {\n  if (dataSource) {\n    return dataSource;\n  } else if (schema) {\n    return new VuuDataSource({\n      bufferSize: 0,\n      table: schema.table,\n      columns: schema.columns.map((col) => col.name),\n    }) as DataSource;\n  } else {\n    throw Error(\n      \"SessionEditingForm: either a DataSource or a TableSchema must be provided\"\n    );\n  }\n};\n\ntype FormValues = { [key: string]: VuuRowDataItemType | undefined };\n\nexport const SessionEditingForm = ({\n  className,\n  config: { fields, key: keyField },\n  dataSource: dataSourceProp,\n  id: idProp,\n  onClose,\n  schema,\n  ...htmlAttributes\n}: SessionEditingFormProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-session-editing-form\",\n    css: sessionEditingFormCss,\n    window: targetWindow,\n  });\n\n  const [fieldStatusValues, setFieldStatusValues] = useState<\n    Record<string, string | undefined>\n  >({});\n  const [values, setValues] = useState<FormValues>();\n  const [errorMessage, setErrorMessage] = useState(\"\");\n  const formContentRef = useRef<HTMLDivElement>(null);\n  const initialDataRef = useRef<FormValues>();\n  const dataStatusRef = useRef(Status.uninitialised);\n\n  const dataSource = useMemo(() => {\n    const ds = getDataSource(dataSourceProp, schema);\n    const { columns } = ds;\n    const columnMap = buildColumnMap(ds.columns);\n\n    const applyServerData = (data: VuuDataRow) => {\n      if (columnMap) {\n        const values: { [key: string]: VuuRowDataItemType } = {};\n        for (const column of columns) {\n          values[column] = data[columnMap[column]];\n        }\n        if (dataStatusRef.current === Status.uninitialised) {\n          dataStatusRef.current = Status.unchanged;\n          initialDataRef.current = values;\n        }\n        setValues(values);\n      }\n    };\n\n    ds.subscribe({ range: { from: 0, to: 5 } }, (message) => {\n      if (message.type === \"viewport-update\" && message.rows) {\n        if (dataStatusRef.current === Status.uninitialised) {\n          applyServerData(message.rows[0]);\n        } else {\n          console.log(\"what do we do with server updates\");\n        }\n      }\n    });\n    return ds;\n  }, [dataSourceProp, schema]);\n\n  const id = useIdMemo(idProp);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      const { type } = getField(fields, field);\n      const typedValue = getTypedValue(value, type);\n      setValues((values = {}) => {\n        const newValues = {\n          ...values,\n          [field]: typedValue,\n        };\n        const notUpdated = shallowEquals(newValues, initialDataRef.current);\n        dataStatusRef.current = notUpdated\n          ? Status.unchanged\n          : typedValue !== undefined\n          ? Status.changed\n          : Status.invalid;\n        return newValues;\n      });\n    },\n    [fields]\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      const rowKey = values?.[keyField];\n      // TODO link this with client side validation if we're going to use it\n      const { type } = getField(fields, field);\n      const typedValue = getTypedValue(value, type, true);\n      if (typeof rowKey === \"string\") {\n        dataSource\n          .menuRpcCall({\n            rowKey,\n            field: field,\n            value: typedValue,\n            type: \"VP_EDIT_CELL_RPC\",\n          })\n          .then((response) => {\n            if (response?.type === \"VP_EDIT_RPC_REJECT\") {\n              console.log(`edit rejected ${response.error}`);\n              setFieldStatusValues((map) => ({\n                ...map,\n                [field]: response.error,\n              }));\n            } else {\n              setFieldStatusValues((map) => ({\n                ...map,\n                [field]: undefined,\n              }));\n            }\n          });\n      }\n    },\n    [dataSource, fields, keyField, values]\n  );\n\n  const applyAction = useCallback(\n    (action: unknown) => {\n      if (typeof action === \"object\" && action !== null) {\n        if (\"type\" in action && action.type === \"CLOSE_DIALOG_ACTION\") {\n          onClose?.();\n        }\n      }\n    },\n    [onClose]\n  );\n\n  const handleSubmit = useCallback(async () => {\n    const response = await dataSource.menuRpcCall({\n      type: \"VP_EDIT_SUBMIT_FORM_RPC\",\n    });\n    if (isErrorResponse(response)) {\n      setErrorMessage(response.error);\n    } else if (hasAction(response)) {\n      applyAction(response.action);\n    }\n  }, [applyAction, dataSource]);\n\n  const handleKeyDown = useCallback(\n    (evt) => {\n      if (evt.key === \"Enter\" && dataStatusRef.current === Status.changed) {\n        handleSubmit();\n      }\n    },\n    [handleSubmit]\n  );\n\n  const handleCancel = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  const getFormControl = (field: FormFieldDescriptor) => {\n    const value = String(values?.[field.name] ?? \"\");\n    if (field.readonly || field.name === keyField) {\n      return (\n        <div className={`${classBase}-fieldValue vuuReadOnly`}>{value}</div>\n      );\n    } else {\n      return (\n        <Input\n          className={`${classBase}-fieldValue`}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          value={value}\n          id={`${id}-input-${field.name}`}\n        />\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (formContentRef.current) {\n      const firstInput = formContentRef.current.querySelector(\n        \"input\"\n      ) as HTMLInputElement;\n      if (firstInput) {\n        setTimeout(() => {\n          firstInput.focus();\n          firstInput.select();\n        }, 100);\n      }\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (dataSource) {\n        dataSource.unsubscribe();\n      }\n    };\n  }, [dataSource]);\n\n  const isDirty = dataStatusRef.current === Status.changed;\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {errorMessage ? (\n        <div\n          className={`${classBase}-errorBanner`}\n          data-icon=\"error\"\n          title={errorMessage}\n        >\n          Error, edit(s) not saved\n        </div>\n      ) : undefined}\n      <div\n        className={`${classBase}-content`}\n        ref={formContentRef}\n        onKeyDown={handleKeyDown}\n      >\n        {fields.map((field) => (\n          <FormField\n            className={`${classBase}-field`}\n            data-field={field.name}\n            key={field.name}\n            necessity={field.required ? \"required\" : \"optional\"}\n            readOnly={field.readonly}\n            validationStatus={\n              fieldStatusValues[field.name] ? \"error\" : undefined\n            }\n          >\n            <FormFieldLabel>{field?.label ?? field.description}</FormFieldLabel>\n            {getFormControl(field)}\n            <FormFieldHelperText>\n              {fieldStatusValues[field.name] ?? \"\"}\n            </FormFieldHelperText>\n          </FormField>\n        ))}\n      </div>\n      <div className={`${classBase}-buttonbar salt-theme salt-density-high`}>\n        <Button\n          type=\"submit\"\n          variant=\"cta\"\n          disabled={!isDirty}\n          onClick={handleSubmit}\n        >\n          Submit\n        </Button>\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          Cancel\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["values"],"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: 300px !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-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-left: var(--vuu-side-panel-padding, 0);\n  padding-right: var(--vuu-side-panel-padding, 0);\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  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  width: 100%;\n}\n";
 
 export { contextPanelCss as default };
 //# sourceMappingURL=ContextPanel.css.js.map

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button } from '@salt-ds/core';
+import { useLayoutProviderDispatch, layoutFromJson, View } from '@vuu-ui/vuu-layout';
+import { IconButton } from '@vuu-ui/vuu-ui-controls';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useCallback, useMemo } from 'react';
-import { useLayoutProviderDispatch, layoutFromJson, View } from '@vuu-ui/vuu-layout';
 import contextPanelCss from './ContextPanel.css.js';
 
 const classBase = "vuuContextPanel";
@@ -49,11 +49,13 @@ const ContextPanel = ({
         /* @__PURE__ */ jsxs("div", { className: `${classBase}-header`, children: [
           /* @__PURE__ */ jsx("h2", { className: `${classBase}-title`, children: title }),
           /* @__PURE__ */ jsx(
-            Button,
+            IconButton,
             {
               className: `${classBase}-close`,
-              "data-icon": "close",
+              "data-embedded": true,
+              icon: "close",
               onClick: handleClose,
+              size: 16,
               variant: "secondary"
             }
           )

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 { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  layoutFromJson,\n  LayoutJSON,\n  View,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\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          <Button\n            className={`${classBase}-close`}\n            data-icon=\"close\"\n            onClick={handleClose}\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,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cACvB,WAAU,EAAA,OAAA;AAAA,cACV,OAAS,EAAA,WAAA;AAAA,cACT,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, {\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;;;;"}

package/esm/shell.js

@@ -18,14 +18,17 @@ import { useLayoutContextMenuItems } from './layout-management/useLayoutContextM
 import { loadingApplicationJson } from './persistence-management/defaultApplicationJson.js';
 import './persistence-management/LocalPersistenceManager.js';
 import './persistence-management/RemotePersistenceManager.js';
+import './persistence-management/StaticPersistenceManager.js';
 import { useShellLayout } from './shell-layouts/useShellLayout.js';
 import shellCss from './shell.css.js';
 
 registerComponent("ApplicationSettings", ApplicationSettingsPanel, "view");
-if (typeof StackLayout !== "function") {
-  console.warn(
-    "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
-  );
+if (process.env.NODE_ENV === "production") {
+  if (typeof StackLayout !== "function") {
+    console.warn(
+      "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
+    );
+  }
 }
 const { error } = logger("Shell");
 const defaultLeftSidePanel = {};
@@ -36,7 +39,6 @@ const Shell = ({
   className: classNameProp,
   leftSidePanelLayout,
   loginUrl,
-  saveLocation: _,
   saveUrl,
   serverUrl,
   user,

package/esm/shell.js.map

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

package/package.json

@@ -1,24 +1,24 @@
 {
-  "version": "0.8.60",
+  "version": "0.8.62",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.60",
-    "@vuu-ui/vuu-protocol-types": "0.8.60",
-    "@vuu-ui/vuu-table-types": "0.8.60"
+    "@vuu-ui/vuu-data-types": "0.8.62",
+    "@vuu-ui/vuu-protocol-types": "0.8.62",
+    "@vuu-ui/vuu-table-types": "0.8.62"
   },
   "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.60",
-    "@vuu-ui/vuu-icons": "0.8.60",
-    "@vuu-ui/vuu-layout": "0.8.60",
-    "@vuu-ui/vuu-popups": "0.8.60",
-    "@vuu-ui/vuu-table": "0.8.60",
-    "@vuu-ui/vuu-ui-controls": "0.8.60",
-    "@vuu-ui/vuu-utils": "0.8.60",
+    "@vuu-ui/vuu-data-remote": "0.8.62",
+    "@vuu-ui/vuu-icons": "0.8.62",
+    "@vuu-ui/vuu-layout": "0.8.62",
+    "@vuu-ui/vuu-popups": "0.8.62",
+    "@vuu-ui/vuu-table": "0.8.62",
+    "@vuu-ui/vuu-ui-controls": "0.8.62",
+    "@vuu-ui/vuu-utils": "0.8.62",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {

package/types/feature/Feature.d.ts

@@ -1,11 +1,11 @@
-import { ViewProps } from "@vuu-ui/vuu-layout";
+import { ViewConfig } from "@vuu-ui/vuu-utils";
 import React from "react";
-export interface FeatureProps<P extends object | undefined = any> {
+export interface FeatureProps<P extends object | undefined = object> {
     /**
       props that will be passed to the lazily loaded component.
      */
     ComponentProps?: P;
-    ViewProps?: Partial<Pick<ViewProps, "closeable" | "header">>;
+    ViewProps?: ViewConfig;
     css?: string;
     height?: number;
     title?: string;

package/types/feature-list/FeatureList.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from "react";
 import { FeatureProps } from "../feature/Feature";
-export interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {
-    features: FeatureProps[];
+export type GroupedFeatureProps<P extends object | undefined = object> = Record<string, FeatureProps<P>[]>;
+export interface FeatureListProps<P extends object | undefined = object> extends HTMLAttributes<HTMLDivElement> {
+    features: FeatureProps<P>[] | GroupedFeatureProps<P>;
 }
 export declare const FeatureList: ({ features, title, ...htmlAttributes }: FeatureListProps) => JSX.Element;

package/types/index.d.ts

@@ -9,7 +9,6 @@ export * from "./session-editing-form";
 export * from "./shell";
 export * from "./shell-layouts/context-panel";
 export * from "./shell-layouts/side-panel";
-export * from "./shellTypes";
 export * from "./ShellContextProvider";
 export * from "./feature-list";
 export * from "./theme-switch";

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

@@ -1,2 +1,2 @@
 import { HTMLAttributes } from "react";
-export declare const LayoutList: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const LayoutList: ({ className, title, ...htmlAttributes }: HTMLAttributes<HTMLDivElement>) => JSX.Element;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
+import { HTMLAttributes } from "react";
 import { LayoutMetadata } from "./layoutTypes";
-type LayoutTileProps = {
+export interface LayoutTileProps extends HTMLAttributes<HTMLDivElement> {
     metadata: LayoutMetadata;
-    handleLoadLayout: (layoutId?: string) => void;
-};
-export declare const LayoutTile: (props: LayoutTileProps) => JSX.Element;
-export {};
+    onLoadLayout: (layoutId?: string) => void;
+}
+export declare const LayoutTile: ({ metadata, onLoadLayout, ...htmlAttributes }: LayoutTileProps) => JSX.Element;

package/types/left-nav/LeftNav.d.ts

@@ -1,3 +1,4 @@
+import { FilterTableFeatureProps } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes } from "react";
 import { FeatureProps } from "../feature";
 export type NavDisplayStatus = "menu-full" | "menu-icons" | "menu-full-content" | "menu-icons-content";
@@ -12,6 +13,6 @@ export interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {
     sizeCollapsed?: number;
     sizeContent?: number;
     sizeExpanded?: number;
-    tableFeatures: FeatureProps[];
+    tableFeatures: FeatureProps<FilterTableFeatureProps>[];
 }
 export declare const LeftNav: (props: LeftNavProps) => JSX.Element;

package/types/persistence-management/StaticPersistenceManager.d.ts

@@ -0,0 +1,14 @@
+import { LayoutJSON, ApplicationJSON } from "@vuu-ui/vuu-layout";
+import { PersistenceManager } from "./PersistenceManager";
+import { LayoutMetadata } from "../layout-management";
+export declare class StaticPersistenceManager implements PersistenceManager {
+    #private;
+    constructor(layoutMetadata: LayoutMetadata[]);
+    createLayout(): Promise<LayoutMetadata>;
+    updateLayout(): Promise<void>;
+    deleteLayout(): Promise<void>;
+    loadLayout(id: string): Promise<LayoutJSON>;
+    loadMetadata(): Promise<LayoutMetadata[]>;
+    loadApplicationJSON(): Promise<ApplicationJSON>;
+    saveApplicationJSON(): Promise<void>;
+}

package/types/persistence-management/index.d.ts

@@ -2,3 +2,4 @@ export * from "./defaultApplicationJson";
 export * from "./PersistenceManager";
 export * from "./LocalPersistenceManager";
 export * from "./RemotePersistenceManager";
+export * from "./StaticPersistenceManager";

package/types/shell.d.ts

@@ -2,7 +2,6 @@ import { LayoutProviderProps } from "@vuu-ui/vuu-layout";
 import { VuuUser } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes, ReactNode } from "react";
 import { SidePanelProps } from "./shell-layouts";
-import { SaveLocation } from "./shellTypes";
 export type LayoutTemplateName = "full-height" | "inlay";
 export interface ShellProps extends HTMLAttributes<HTMLDivElement> {
     LayoutProps?: Pick<LayoutProviderProps, "createNewChild" | "pathToDropTarget">;
@@ -10,9 +9,8 @@ export interface ShellProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     leftSidePanelLayout?: "full-height" | "inlay";
     loginUrl?: string;
-    saveLocation?: SaveLocation;
     saveUrl?: string;
     serverUrl?: string;
     user: VuuUser;
 }
-export declare const Shell: ({ LayoutProps, LeftSidePanelProps, children, className: classNameProp, leftSidePanelLayout, loginUrl, saveLocation: _, saveUrl, serverUrl, user, ...htmlAttributes }: ShellProps) => JSX.Element | null;
+export declare const Shell: ({ LayoutProps, LeftSidePanelProps, children, className: classNameProp, leftSidePanelLayout, loginUrl, saveUrl, serverUrl, user, ...htmlAttributes }: ShellProps) => JSX.Element | null;

package/cjs/shellTypes.js

@@ -1,8 +0,0 @@
-'use strict';
-
-const isWildcardSchema = (schema) => schema === "*";
-const isTableSchema = (schema) => typeof schema === "object" && typeof schema.module === "string" && typeof schema.table === "string";
-
-exports.isTableSchema = isTableSchema;
-exports.isWildcardSchema = isWildcardSchema;
-//# sourceMappingURL=shellTypes.js.map

package/cjs/shellTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shellTypes.js","sources":["../src/shellTypes.ts"],"sourcesContent":["import type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ViewProps } from \"@vuu-ui/vuu-layout\";\n\ndeclare global {\n  const vuuConfig: Promise<VuuConfig>;\n}\n\nexport type SaveLocation = \"local\" | \"remote\";\n\nexport interface FeatureConfig {\n  name: string;\n  title: string;\n  url: string;\n  css?: string;\n  leftNavLocation: \"vuu-features\" | \"vuu-tables\";\n  featureProps?: {\n    schema?: \"*\" | VuuTable;\n    schemas?: VuuTable[];\n    ViewProps?: Partial<ViewProps>;\n  };\n}\n\nexport type Features = {\n  [key: string]: FeatureConfig;\n};\nexport interface VuuConfig {\n  features: Features;\n  authUrl?: string;\n  websocketUrl: string;\n  ssl: boolean;\n}\n\nexport const isWildcardSchema = (schema?: \"*\" | VuuTable): schema is \"*\" =>\n  schema === \"*\";\nexport const isTableSchema = (schema?: \"*\" | VuuTable): schema is VuuTable =>\n  typeof schema === \"object\" &&\n  typeof schema.module === \"string\" &&\n  typeof schema.table === \"string\";\n"],"names":[],"mappings":";;AAgCa,MAAA,gBAAA,GAAmB,CAAC,MAAA,KAC/B,MAAW,KAAA,IAAA;AACN,MAAM,aAAgB,GAAA,CAAC,MAC5B,KAAA,OAAO,MAAW,KAAA,QAAA,IAClB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,IACzB,OAAO,MAAA,CAAO,KAAU,KAAA;;;;;"}

package/esm/shellTypes.js

@@ -1,5 +0,0 @@
-const isWildcardSchema = (schema) => schema === "*";
-const isTableSchema = (schema) => typeof schema === "object" && typeof schema.module === "string" && typeof schema.table === "string";
-
-export { isTableSchema, isWildcardSchema };
-//# sourceMappingURL=shellTypes.js.map

package/esm/shellTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shellTypes.js","sources":["../src/shellTypes.ts"],"sourcesContent":["import type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ViewProps } from \"@vuu-ui/vuu-layout\";\n\ndeclare global {\n  const vuuConfig: Promise<VuuConfig>;\n}\n\nexport type SaveLocation = \"local\" | \"remote\";\n\nexport interface FeatureConfig {\n  name: string;\n  title: string;\n  url: string;\n  css?: string;\n  leftNavLocation: \"vuu-features\" | \"vuu-tables\";\n  featureProps?: {\n    schema?: \"*\" | VuuTable;\n    schemas?: VuuTable[];\n    ViewProps?: Partial<ViewProps>;\n  };\n}\n\nexport type Features = {\n  [key: string]: FeatureConfig;\n};\nexport interface VuuConfig {\n  features: Features;\n  authUrl?: string;\n  websocketUrl: string;\n  ssl: boolean;\n}\n\nexport const isWildcardSchema = (schema?: \"*\" | VuuTable): schema is \"*\" =>\n  schema === \"*\";\nexport const isTableSchema = (schema?: \"*\" | VuuTable): schema is VuuTable =>\n  typeof schema === \"object\" &&\n  typeof schema.module === \"string\" &&\n  typeof schema.table === \"string\";\n"],"names":[],"mappings":"AAgCa,MAAA,gBAAA,GAAmB,CAAC,MAAA,KAC/B,MAAW,KAAA,IAAA;AACN,MAAM,aAAgB,GAAA,CAAC,MAC5B,KAAA,OAAO,MAAW,KAAA,QAAA,IAClB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,IACzB,OAAO,MAAA,CAAO,KAAU,KAAA;;;;"}