@vuu-ui/vuu-shell 2.1.19-beta.2 → 2.1.19-beta.3

package/src/shell-layout-templates/index.js

@@ -1,3 +0,0 @@
-export * from "./context-panel/index.js";
-export * from "./useShellLayout.js";
-export * from "./side-panel/index.js";

package/src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js

@@ -1,68 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { DockLayout, Drawer, Flexbox, LayoutContainer, View } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef, useState } from "react";
-const useInlayLeftPanel = ({ SidePanelProps: LeftSidePanelProps, appHeader, htmlAttributes })=>{
-    const paletteView = useRef(null);
-    const [open, setOpen] = useState(true);
-    const handleDrawerClick = useCallback((e)=>{
-        const target = e.target;
-        if (!paletteView.current?.contains(target)) setOpen(!open);
-    }, [
-        open
-    ]);
-    return useMemo(()=>{
-        const getDrawers = (leftSidePanel)=>{
-            const drawers = [];
-            drawers.push(/*#__PURE__*/ jsx(Drawer, {
-                onClick: handleDrawerClick,
-                open: open,
-                position: "left",
-                inline: true,
-                peekaboo: true,
-                sizeOpen: 200,
-                toggleButton: "end",
-                children: /*#__PURE__*/ jsx(View, {
-                    className: "vuuShell-palette",
-                    id: "vw-app-palette",
-                    ref: paletteView,
-                    style: {
-                        height: "100%"
-                    },
-                    children: leftSidePanel
-                }, "app-palette")
-            }, "left-panel"));
-            return drawers;
-        };
-        return /*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "column"
-            },
-            children: [
-                appHeader,
-                /*#__PURE__*/ jsx(DockLayout, {
-                    style: {
-                        flex: 1
-                    },
-                    children: getDrawers(LeftSidePanelProps?.children).concat(/*#__PURE__*/ jsx(LayoutContainer, {
-                        dropTarget: true,
-                        id: VuuShellLocation.WorkspaceContainer,
-                        style: {
-                            width: "100%",
-                            height: "100%"
-                        }
-                    }, "main-content"))
-                })
-            ]
-        });
-    }, [
-        LeftSidePanelProps,
-        appHeader,
-        handleDrawerClick,
-        htmlAttributes,
-        open
-    ]);
-};
-export { useInlayLeftPanel };

package/src/shell-layout-templates/left-main-tabs/useLeftMainTabs.js

@@ -1,32 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, StackLayout } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { useMemo } from "react";
-const useLeftMainTabs = ({ appHeader, htmlAttributes, ToolbarProps })=>{
-    if (void 0 === ToolbarProps) throw Error("LeftMainTabs layout requires ToolbarProps");
-    return useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "column"
-            },
-            children: [
-                appHeader,
-                /*#__PURE__*/ jsx(StackLayout, {
-                    TabstripProps: {
-                        className: `${VuuShellLocation.MultiWorkspaceContainer}-tabs`
-                    },
-                    active: 0,
-                    showTabs: "left",
-                    style: {
-                        flex: 1
-                    },
-                    id: VuuShellLocation.MultiWorkspaceContainer
-                })
-            ]
-        }), [
-        appHeader,
-        htmlAttributes
-    ]);
-};
-export { useLeftMainTabs };

package/src/shell-layout-templates/side-panel/SidePanel.css.js

@@ -1,9 +0,0 @@
-const css = `
-.vuuShellSidePanel {
-  width: var(--shell-left-nav-size);
-  transition: width .2s ease-out;
-}
-
-
-`;
-export default css;

package/src/shell-layout-templates/side-panel/SidePanel.js

@@ -1,31 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import SidePanel from "./SidePanel.css";
-const classBase = "vuuShellSidePanel";
-const SidePanel_SidePanel = ({ children, open = true, sizeClosed = 90, sizeOpen = 200, style: styleProp, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-side-panel",
-        css: SidePanel,
-        window: targetWindow
-    });
-    const style = useMemo(()=>({
-            ...styleProp,
-            "--shell-left-nav-size": open ? `${sizeOpen}px` : `${sizeClosed}px`
-        }), [
-        open,
-        sizeClosed,
-        sizeOpen,
-        styleProp
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(classBase),
-        style: style,
-        children: children
-    });
-};
-export { SidePanel_SidePanel as SidePanel };

package/src/shell-layout-templates/side-panel/index.js

@@ -1 +0,0 @@
-export * from "./SidePanel.js";

package/src/shell-layout-templates/simple-content-pane/useSimpleContentPane.js

@@ -1,38 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, LayoutContainer } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { ContextPanel } from "../context-panel/index.js";
-import { useMemo } from "react";
-const useSimpleContentPane = ({ appHeader, htmlAttributes })=>useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "row"
-            },
-            children: [
-                /*#__PURE__*/ jsxs(Flexbox, {
-                    className: "vuuShell-content",
-                    style: {
-                        flex: 1,
-                        flexDirection: "column"
-                    },
-                    children: [
-                        appHeader,
-                        /*#__PURE__*/ jsx(LayoutContainer, {
-                            id: VuuShellLocation.WorkspaceContainer,
-                            style: {
-                                flex: 1
-                            }
-                        }, "main-content")
-                    ]
-                }),
-                /*#__PURE__*/ jsx(ContextPanel, {
-                    id: VuuShellLocation.ContextPanel,
-                    overlay: true
-                })
-            ]
-        }), [
-        appHeader,
-        htmlAttributes
-    ]);
-export { useSimpleContentPane };

package/src/shell-layout-templates/useShellLayout.js

@@ -1,15 +0,0 @@
-import { useFullHeightLeftPanel } from "./full-height-left-panel/useFullHeightLeftPanel.js";
-import { useInlayLeftPanel } from "./inlay-left-panel/useInlayLeftPanel.js";
-import { useLeftMainTabs } from "./left-main-tabs/useLeftMainTabs.js";
-import { useSimpleContentPane } from "./simple-content-pane/useSimpleContentPane.js";
-const LayoutHook = {
-    "full-height": useFullHeightLeftPanel,
-    inlay: useInlayLeftPanel,
-    "left-main-tabs": useLeftMainTabs,
-    "simple-content-pane": useSimpleContentPane
-};
-const useShellLayout = ({ layoutTemplateId = "simple-content-pane", ...props })=>{
-    const useLayoutHook = LayoutHook[layoutTemplateId];
-    return useLayoutHook(props);
-};
-export { useShellLayout };

package/src/shell.css.js

@@ -1,59 +0,0 @@
-const css = `
-.vuuShell {
-  background-color: var(--vuuShell-background, var(--salt-container-primary-background));
-  height: var(--vuuShell-height, 100vh);
-  width: var(--vuuShell-width, 100vw);
-
-  & .left-main-tabs {
-    --vuuOverflowContainer-width: 48px;
-  }
-}
-
-.vuu-workspace-tabs {
-  background: var(--vuuWorkspace-background, var(--salt-container-primary-background));
-}
-
-.vuuShell-palette {
-  --vuuView-border: none;
-  --vuuView-margin: 0;
-}
-
-.vuuShell-warningPlaceholder {
-  background-color: var(--salt-container-background-high);
-  height: 100%;
-}
-
-.vuuToolbarProxy {
-  background: var(--salt-container-primary-background);
-}
-
-.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {
-  background: var(--vuuShell-background, var(--salt-container-primary-background));
-}
-
-.vuu-workspace-tabs {
-  --vuuTab-height: 28px;
-  border: solid 1px var(--salt-separable-primary-borderColor);
-  border-radius: 6px;
-  width: 100%;
-  height: 100%;
-  padding: 36px 8px 8px;
-  position: relative;
-  border-top: none !important;
-}
-
-.vuu-workspace-tabs > .vuuTabstrip {
-  padding-bottom: 7px;
-  top: 0;
-  left: 0;
-  right: 0;
-  position: absolute !important;
-}
-
-.vuuShell-content {
-  padding: var(--vuuShell-content-padding, 8px);
-}
-
-
-`;
-export default css;

package/src/shell.js

@@ -1,108 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { ContextMenuProvider } from "@vuu-ui/vuu-context-menu";
-import { LayoutProvider, StackLayout } from "@vuu-ui/vuu-layout";
-import { NotificationsProvider } from "@vuu-ui/vuu-notifications";
-import { ModalProvider } from "@vuu-ui/vuu-ui-controls";
-import { logger, registerComponent } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo } from "react";
-import { AppHeader } from "./app-header/index.js";
-import { ApplicationProvider } from "./application-provider/index.js";
-import { LocalPersistenceManager, PersistenceProvider, usePersistenceManager } from "./persistence-manager/index.js";
-import { useShellLayout } from "./shell-layout-templates/index.js";
-import { UserSettingsPanel } from "./user-settings/index.js";
-import { WorkspaceProvider, useWorkspace, useWorkspaceContextMenuItems } from "./workspace-management/index.js";
-import { loadingJSON } from "./workspace-management/defaultWorkspaceJSON.js";
-import { useLostConnection } from "@vuu-ui/vuu-data-react";
-import shell from "./shell.css";
-registerComponent("ApplicationSettings", UserSettingsPanel, "view");
-if ("production" === process.env.NODE_ENV) {
-    if ("function" != typeof StackLayout) console.warn("StackLayout module not loaded, will be unable to deserialize from layout JSON");
-}
-const { error: error } = logger("Shell");
-const defaultAppHeader = /*#__PURE__*/ jsx(AppHeader, {});
-const getAppHeader = (shellLayoutProps)=>shellLayoutProps?.appHeader ?? defaultAppHeader;
-const defaultHTMLAttributes = {
-    className: "vuuShell"
-};
-const getHTMLAttributes = (props)=>{
-    if (props?.htmlAttributes) return {
-        ...defaultHTMLAttributes,
-        ...props.htmlAttributes
-    };
-    return defaultHTMLAttributes;
-};
-const VuuApplication = ({ shellLayoutProps: ShellLayoutProps, children })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-shell",
-        css: shell,
-        window: targetWindow
-    });
-    const { workspaceJSON, saveApplicationLayout } = useWorkspace();
-    const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();
-    const handleLayoutChange = useCallback((layout)=>{
-        try {
-            saveApplicationLayout(layout);
-        } catch  {
-            error?.("Failed to save layout");
-        }
-    }, [
-        saveApplicationLayout
-    ]);
-    const isLayoutLoading = workspaceJSON === loadingJSON;
-    const initialLayout = useShellLayout({
-        ...ShellLayoutProps,
-        appHeader: getAppHeader(ShellLayoutProps),
-        htmlAttributes: getHTMLAttributes(ShellLayoutProps)
-    });
-    useLostConnection();
-    return isLayoutLoading ? null : /*#__PURE__*/ jsxs(ContextMenuProvider, {
-        menuActionHandler: handleMenuAction,
-        menuBuilder: buildMenuOptions,
-        children: [
-            /*#__PURE__*/ jsx(LayoutProvider, {
-                workspaceJSON: workspaceJSON,
-                onLayoutChange: handleLayoutChange,
-                children: initialLayout
-            }),
-            children
-        ]
-    });
-};
-const Shell = ({ logout, user, userSettingsSchema, workspaceProps, ...props })=>{
-    const persistenceManager = usePersistenceManager();
-    const localPersistenceManager = useMemo(()=>{
-        if (persistenceManager) return;
-        console.log(`No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`);
-        return new LocalPersistenceManager(`vuu/${user.username}`);
-    }, [
-        persistenceManager,
-        user.username
-    ]);
-    const shellProviders = /*#__PURE__*/ jsx(ApplicationProvider, {
-        density: "high",
-        logout: logout,
-        theme: "vuu-theme",
-        user: user,
-        userSettingsSchema: userSettingsSchema,
-        children: /*#__PURE__*/ jsx(WorkspaceProvider, {
-            ...workspaceProps,
-            children: /*#__PURE__*/ jsx(ModalProvider, {
-                children: /*#__PURE__*/ jsx(NotificationsProvider, {
-                    children: /*#__PURE__*/ jsx(VuuApplication, {
-                        ...props,
-                        user: user
-                    })
-                })
-            })
-        })
-    });
-    if (persistenceManager) return shellProviders;
-    return /*#__PURE__*/ jsx(PersistenceProvider, {
-        persistenceManager: localPersistenceManager,
-        children: shellProviders
-    });
-};
-export { Shell };

package/src/theme-switch/ThemeSwitch.css.js

@@ -1,34 +0,0 @@
-const css = `
-.vuuThemeSwitch {
-  --saltButton-minWidth: 22px;
-  --svg-light: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>");
-  --svg-dark: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>");
-  padding: 2px;
-}
-
-.salt-density-high .vuuThemeSwitch {
-  --saltButton-minWidth: 16px;
-  --saltButton-width: 18px;
-  --vuuThemeSwitch-iconSize: 16px;
-}
-
-.vuuThemeSwitch [data-icon] {
-  --vuu-icon-size: var(--vuuThemeSwitch-iconSize, 18px);
-}
-
-.vuuThemeSwitch [data-icon="light"] {
-  --vuu-icon-svg: var(--svg-light);
-}
-
-.vuuThemeSwitch [data-icon="dark"] {
-  --vuu-icon-svg: var(--svg-dark);
-}
-
-.vuuThemeSwitch .saltToggleButton {
-  width: 20px;
-  height: 20px;
-}
-
-
-`;
-export default css;

package/src/theme-switch/ThemeSwitch.js

@@ -1,50 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { ToggleButton, ToggleButtonGroup, useControlled } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { useCallback } from "react";
-import ThemeSwitch from "./ThemeSwitch.css";
-const classBase = "vuuThemeSwitch";
-const ThemeSwitch_ThemeSwitch = ({ className: classNameProp, defaultMode: defaultModeProp, mode: modeProp, onChange, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-theme-switch",
-        css: ThemeSwitch,
-        window: targetWindow
-    });
-    const [mode, setMode] = useControlled({
-        controlled: modeProp,
-        default: defaultModeProp ?? "light",
-        name: "ThemeSwitch",
-        state: "mode"
-    });
-    const handleChangeSecondary = useCallback((evt)=>{
-        const { value } = evt.target;
-        setMode(value);
-        onChange(value);
-    }, [
-        onChange,
-        setMode
-    ]);
-    const className = clsx(classBase, classNameProp);
-    return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
-        className: className,
-        ...htmlAttributes,
-        onChange: handleChangeSecondary,
-        value: mode,
-        children: [
-            /*#__PURE__*/ jsx(ToggleButton, {
-                "aria-label": "alert",
-                "data-icon": "light",
-                value: "light"
-            }),
-            /*#__PURE__*/ jsx(ToggleButton, {
-                "aria-label": "home",
-                "data-icon": "dark",
-                value: "dark"
-            })
-        ]
-    });
-};
-export { ThemeSwitch_ThemeSwitch as ThemeSwitch };

package/src/theme-switch/index.js

@@ -1 +0,0 @@
-export * from "./ThemeSwitch.js";

package/src/user-settings/SettingsForm.css.js

@@ -1,10 +0,0 @@
-const css = `
-.vuuSettingsForm {
-  gap: var(--salt-spacing-200);
-  flex-direction: column;
-  display: flex;
-}
-
-
-`;
-export default css;

package/src/user-settings/SettingsForm.js

@@ -1,141 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { VuuInput } from "@vuu-ui/vuu-ui-controls";
-import { getFieldName } from "@vuu-ui/vuu-utils";
-import { Dropdown, FormField, FormFieldLabel, Option, Switch, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { useCallback, useState } from "react";
-import SettingsForm from "./SettingsForm.css";
-const isOption = (value)=>"object" == typeof value && "label" in value && "label" in value;
-const isBooleanProperty = (property)=>"boolean" === property.type;
-const isStringOrNumber = (value)=>"string" == typeof value || "number" == typeof value;
-const getValueAndLabel = (value)=>isOption(value) ? [
-        value.value,
-        value.label
-    ] : [
-        value,
-        value
-    ];
-const defaultPropertyValue = {
-    boolean: false,
-    number: 0,
-    string: ""
-};
-const classBase = "vuuSettingsForm";
-function FormControl({ property, changeHandler, selectHandler, inputHandler, currentValue = property.defaultValue ?? defaultPropertyValue[property.type] }) {
-    const [value, setValue] = useState(currentValue);
-    if (isBooleanProperty(property)) {
-        const checked = "boolean" == typeof currentValue ? currentValue : property.defaultValue ?? false;
-        return /*#__PURE__*/ jsx(Switch, {
-            checked: checked,
-            onChange: changeHandler
-        });
-    }
-    if (Array.isArray(property.values)) {
-        if (property.values.length <= 2) return /*#__PURE__*/ jsx(ToggleButtonGroup, {
-            value: currentValue,
-            onChange: changeHandler,
-            children: property.values.map((valueOrOption)=>{
-                const [value, label] = getValueAndLabel(valueOrOption);
-                return /*#__PURE__*/ jsx(ToggleButton, {
-                    value: value,
-                    children: label
-                }, value);
-            })
-        });
-        else if (property.values.length > 2) return /*#__PURE__*/ jsx(Dropdown, {
-            value: currentValue,
-            onSelectionChange: selectHandler,
-            children: property.values.map((valueOrOption)=>{
-                const [value, label] = getValueAndLabel(valueOrOption);
-                return /*#__PURE__*/ jsx(Option, {
-                    value: label,
-                    "data-field": property.name
-                }, value);
-            })
-        });
-    } else {
-        const valid = isValidInput(currentValue, property.type);
-        const errorMessage = getTooltipContent(property.type, valid);
-        return /*#__PURE__*/ jsx(VuuInput, {
-            errorMessage: errorMessage,
-            onCommit: inputHandler,
-            onChange: (e)=>setValue(e.target.value),
-            value: value
-        }, property.name);
-    }
-    return null;
-}
-const isValidInput = (value, type)=>{
-    if ("" === value) return;
-    if ("string" === type) return "success";
-    if ("number" === type) {
-        if (Number.isNaN(Number(value))) return "error";
-        return "success";
-    }
-};
-function getTooltipContent(type, valid) {
-    if ("error" !== valid) return;
-    if ("number" === type) return /*#__PURE__*/ jsx("p", {
-        children: "Field is expecting a number"
-    });
-    if ("string" === type) return /*#__PURE__*/ jsx("p", {
-        children: "Field is expecting a string"
-    });
-    return /*#__PURE__*/ jsx("p", {
-        children: "Please contact Admin for more information on expected type"
-    });
-}
-const SettingsForm_SettingsForm = ({ className, settingsSchema, settings, onSettingChanged, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-settings-form",
-        css: SettingsForm,
-        window: targetWindow
-    });
-    const changeHandler = useCallback((event)=>{
-        const fieldName = getFieldName(event.target);
-        const { checked, value } = event.target;
-        onSettingChanged(fieldName, checked ?? value);
-    }, [
-        onSettingChanged
-    ]);
-    const selectHandler = useCallback((event, [selected])=>{
-        const fieldName = getFieldName(event.target);
-        onSettingChanged(fieldName, selected);
-    }, [
-        onSettingChanged
-    ]);
-    const inputHandler = useCallback((event)=>{
-        const fieldName = getFieldName(event.target);
-        const { value } = event.target;
-        if (Number.isNaN(Number(value)) || "" == value) onSettingChanged(fieldName, value);
-        else {
-            const numValue = Number(value);
-            onSettingChanged(fieldName, numValue);
-        }
-    }, [
-        onSettingChanged
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, className),
-        children: settingsSchema.properties.map((property)=>/*#__PURE__*/ jsxs(FormField, {
-                "data-field": property.name,
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: property.label
-                    }),
-                    FormControl({
-                        property,
-                        changeHandler,
-                        selectHandler,
-                        inputHandler,
-                        currentValue: settings[property.name]
-                    })
-                ]
-            }, property.name))
-    });
-};
-export { FormControl, SettingsForm_SettingsForm as SettingsForm, isBooleanProperty, isOption, isStringOrNumber };

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

@@ -1,9 +0,0 @@
-const css = `
-.vuuUserSettingsPanel {
-  height: 100%;
-  overflow: auto;
-}
-
-
-`;
-export default css;

package/src/user-settings/UserSettingsPanel.js

@@ -1,29 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { useApplicationSettings } from "../application-provider/index.js";
-import { SettingsForm } from "./SettingsForm.js";
-import clsx from "clsx";
-import UserSettingsPanel from "./UserSettingsPanel.css";
-const classBase = "vuuUserSettingsPanel";
-const UserSettingsPanel_UserSettingsPanel = ({ ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-user-settings-panel",
-        css: UserSettingsPanel,
-        window: targetWindow
-    });
-    const { onUserSettingChanged, userSettings = {}, userSettingsSchema } = useApplicationSettings();
-    if (userSettingsSchema) return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, "vuuScrollable"),
-        children: /*#__PURE__*/ jsx(SettingsForm, {
-            settings: userSettings,
-            settingsSchema: userSettingsSchema,
-            onSettingChanged: onUserSettingChanged
-        })
-    });
-    console.log("no settingsSchema provided to UserSettingsPanel");
-    return null;
-};
-export { UserSettingsPanel_UserSettingsPanel as UserSettingsPanel };

package/src/user-settings/index.js

@@ -1,2 +0,0 @@
-export * from "./UserSettingsPanel.js";
-export * from "./SettingsForm.js";