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

package/cjs/ShellContextProvider.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.ShellContext.Provider, { value: mergedContext, children });
+};
+const ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsxRuntime.jsx(Provider, { context: value, inheritedContext: context, children }) });
+};
+
+exports.ShellContextProvider = ShellContextProvider;
+//# sourceMappingURL=ShellContextProvider.js.map

package/cjs/ShellContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellContextProvider.js","sources":["../../../packages/vuu-shell/src/ShellContextProvider.tsx"],"sourcesContent":["import { ShellContext, ShellContextProps } from \"@vuu-ui/vuu-utils\";\nimport { ReactElement, ReactNode } from \"react\";\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n"],"names":["ShellContext","jsx"],"mappings":";;;;;AAQA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG;AAAA,GACL;AACA,EAAA,sCACGA,qBAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGC,cAAA,CAAAD,qBAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACCC,cAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA;AAEJ;;;;"}

package/cjs/app-header/AppHeader.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var appHeaderCss = ".vuuAppHeader {\n  --saltButton-borderRadius: 6px;\n  --saltButton-text-color: var(--vuu-color-gray-50);\n  --saltButton-padding: 12px;\n  --vuuToolbarItem-height: 26px;\n  --vuuOverflowContainer-gap: 8px;\n  --vuuOverflowContainer-height: var(--vuuAppHeader-height, 42px);\n  --vuu-icon-color: var(--vuu-color-gray-45);\n  --vuu-icon-size: 16px;\n  --vuuToolbar-borderWidth: 1px;\n  --vuuToolbar-borderStyle: solid;\n  --vuuToolbar-borderColor: var(--salt-separable-primary-borderColor);\n\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n}\n\n";
+
+module.exports = appHeaderCss;
+//# sourceMappingURL=AppHeader.css.js.map

package/cjs/app-header/AppHeader.css.js.map

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

package/cjs/app-header/AppHeader.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var cx = require('clsx');
+var React = require('react');
+var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js');
+require('../persistence-manager/LocalPersistenceManager.js');
+require('../persistence-manager/StaticPersistenceManager.js');
+var vuuNotifications = require('@vuu-ui/vuu-notifications');
+var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
+var AppHeader$1 = require('./AppHeader.css.js');
+
+const classBase = "vuuAppHeader";
+const AppHeader = ({
+  className: classNameProp,
+  themeMode: _,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-app-header",
+    css: AppHeader$1,
+    window: targetWindow
+  });
+  const persistenceManager = PersistenceProvider.usePersistenceManager();
+  const settingsButtonRef = React.useRef(null);
+  const className = cx(classBase, classNameProp);
+  const logout = ApplicationProvider.useLogout();
+  const { showComponentInContextPanel } = vuuLayout.useLayoutOperation();
+  const { showNotification } = vuuNotifications.useNotifications();
+  const handleReset = React.useCallback(() => {
+    persistenceManager?.clearUserSettings();
+    showNotification({
+      animationType: "slide-out",
+      renderPostRefresh: true,
+      type: vuuNotifications.NotificationType.Toast,
+      header: "Success",
+      content: "Settings cleared",
+      status: "success"
+    });
+    location.reload();
+  }, [persistenceManager, showNotification]);
+  const handleShowSettings = React.useCallback(() => {
+    showComponentInContextPanel(
+      {
+        type: "ApplicationSettings"
+      },
+      "Settings",
+      () => settingsButtonRef.current?.focus()
+    );
+  }, [showComponentInContextPanel]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuUiControls.Toolbar,
+    {
+      alignItems: "end",
+      className,
+      role: "banner",
+      showSeparators: true,
+      ...htmlAttributes,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Button,
+          {
+            className: `${classBase}-menuItem`,
+            appearance: "transparent",
+            sentiment: "neutral",
+            children: "Help"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.Button,
+          {
+            appearance: "transparent",
+            className: `${classBase}-menuItem`,
+            onClick: handleReset,
+            sentiment: "neutral",
+            children: [
+              "Reset ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "history" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.Button,
+          {
+            appearance: "transparent",
+            className: `${classBase}-menuItem`,
+            onClick: handleShowSettings,
+            ref: settingsButtonRef,
+            sentiment: "neutral",
+            children: [
+              "Settings ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "settings" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Button,
+          {
+            appearance: "transparent",
+            className: `${classBase}-menuItem`,
+            onClick: logout,
+            sentiment: "neutral",
+            children: "Log out"
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.AppHeader = AppHeader;
+//# sourceMappingURL=AppHeader.js.map

package/cjs/app-header/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  themeMode: _,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-app-header\",\n    css: appHeaderCss,\n    window: targetWindow,\n  });\n\n  const persistenceManager = usePersistenceManager();\n  const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n  const className = cx(classBase, classNameProp);\n  const logout = useLogout();\n\n  const { showComponentInContextPanel } = useLayoutOperation();\n  const { showNotification } = useNotifications();\n\n  const handleReset = useCallback(() => {\n    persistenceManager?.clearUserSettings();\n    showNotification({\n      animationType: \"slide-out\",\n      renderPostRefresh: true,\n      type: NotificationType.Toast,\n      header: \"Success\",\n      content: \"Settings cleared\",\n      status: \"success\",\n    });\n    location.reload();\n  }, [persistenceManager, showNotification]);\n\n  const handleShowSettings = useCallback(() => {\n    showComponentInContextPanel(\n      {\n        type: \"ApplicationSettings\",\n      },\n      \"Settings\",\n      () => settingsButtonRef.current?.focus(),\n    );\n  }, [showComponentInContextPanel]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      role=\"banner\"\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button\n        className={`${classBase}-menuItem`}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n      >\n        Help\n      </Button>\n      <Button\n        appearance=\"transparent\"\n        className={`${classBase}-menuItem`}\n        onClick={handleReset}\n        sentiment=\"neutral\"\n      >\n        Reset <span data-icon=\"history\" />\n      </Button>\n      <Button\n        appearance=\"transparent\"\n        className={`${classBase}-menuItem`}\n        onClick={handleShowSettings}\n        ref={settingsButtonRef}\n        sentiment=\"neutral\"\n      >\n        Settings <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        appearance=\"transparent\"\n        className={`${classBase}-menuItem`}\n        onClick={logout}\n        sentiment=\"neutral\"\n      >\n        Log out\n      </Button>\n    </Toolbar>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","usePersistenceManager","useRef","useLogout","useLayoutOperation","useNotifications","useCallback","NotificationType","jsxs","Toolbar","jsx","Button"],"mappings":"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"}

package/cjs/application-provider/ApplicationContext.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+
+const Guest = {
+  username: "unknown"
+};
+const ApplicationContext = React.createContext({
+  onUserSettingChanged: (propertyName) => console.warn(
+    `Cannot change setting '${propertyName}'.
+Did you forget to declare an ApplicationProvider ?`
+  ),
+  user: Guest
+});
+
+exports.ApplicationContext = ApplicationContext;
+//# sourceMappingURL=ApplicationContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationContext.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationContext.tsx"],"sourcesContent":["import type { Settings, VuuUser } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { createContext } from \"react\";\nimport { SettingsSchema } from \"../user-settings\";\n\nconst Guest: VuuUser = {\n  username: \"unknown\",\n};\n\nexport interface ApplicationContextProps {\n  onUserSettingChanged: (\n    propertyName: string,\n    value: VuuRowDataItemType,\n  ) => void;\n  logout?: () => void;\n  userSettings?: Settings;\n  userSettingsSchema?: SettingsSchema;\n  user: VuuUser;\n}\n\nexport const ApplicationContext = createContext<ApplicationContextProps>({\n  onUserSettingChanged: (propertyName: string) =>\n    console.warn(\n      `Cannot change setting '${propertyName}'.\\nDid you forget to declare an ApplicationProvider ?`,\n    ),\n  user: Guest,\n});\n"],"names":["createContext"],"mappings":";;;;AAKA,MAAM,KAAiB,GAAA;AAAA,EACrB,QAAU,EAAA;AACZ,CAAA;AAaO,MAAM,qBAAqBA,mBAAuC,CAAA;AAAA,EACvE,oBAAA,EAAsB,CAAC,YAAA,KACrB,OAAQ,CAAA,IAAA;AAAA,IACN,0BAA0B,YAAY,CAAA;AAAA,kDAAA;AAAA,GACxC;AAAA,EACF,IAAM,EAAA;AACR,CAAC;;;;"}

package/cjs/application-provider/ApplicationProvider.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var React = require('react');
+var ApplicationContext = require('./ApplicationContext.js');
+var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js');
+require('../persistence-manager/LocalPersistenceManager.js');
+require('../persistence-manager/StaticPersistenceManager.js');
+
+const accentPurple = "purple";
+const getThemeMode = (mode = "light", userSettings) => {
+  const themeMode = userSettings?.themeMode;
+  if (themeMode === "light" || themeMode === "dark") {
+    return themeMode;
+  }
+  return mode;
+};
+const ApplicationProvider = ({
+  children,
+  density: densityProp,
+  logout,
+  mode,
+  theme,
+  userSettingsSchema,
+  user
+}) => {
+  const { mode: inheritedMode, theme: inheritedTheme } = core.useTheme();
+  const density = core.useDensity(densityProp);
+  const persistenceManager = PersistenceProvider.usePersistenceManager();
+  const context = React.useContext(ApplicationContext.ApplicationContext);
+  const [userSettings, setSettings] = React.useState();
+  React.useMemo(async () => {
+    if (persistenceManager) {
+      const userSettings2 = await persistenceManager.getUserSettings();
+      setSettings(userSettings2);
+    } else {
+      setSettings({});
+    }
+  }, [persistenceManager]);
+  const onUserSettingChanged = React.useCallback(
+    (propertyName, value) => {
+      setSettings((currentSettings) => {
+        const newSettings = { ...currentSettings, [propertyName]: value };
+        persistenceManager?.saveUserSettings(newSettings);
+        return newSettings;
+      });
+    },
+    [persistenceManager]
+  );
+  return userSettings ? /* @__PURE__ */ jsxRuntime.jsx(
+    ApplicationContext.ApplicationContext.Provider,
+    {
+      value: {
+        ...context,
+        logout,
+        onUserSettingChanged,
+        userSettings,
+        userSettingsSchema,
+        user: user ?? context.user
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        core.SaltProviderNext,
+        {
+          accent: accentPurple,
+          corner: "rounded",
+          theme: theme ?? inheritedTheme ?? "vuu-theme",
+          density,
+          mode: getThemeMode(mode ?? inheritedMode, userSettings),
+          children
+        }
+      )
+    }
+  ) : null;
+};
+const useApplicationUser = () => {
+  const { user } = React.useContext(ApplicationContext.ApplicationContext);
+  return user;
+};
+const useApplicationSettings = () => {
+  const { onUserSettingChanged, userSettings, userSettingsSchema } = React.useContext(ApplicationContext.ApplicationContext);
+  return {
+    onUserSettingChanged,
+    userSettings,
+    userSettingsSchema
+  };
+};
+const useUserSetting = () => {
+  const { userSettings } = React.useContext(ApplicationContext.ApplicationContext);
+  return userSettings;
+};
+const useLogout = () => {
+  const { logout } = React.useContext(ApplicationContext.ApplicationContext);
+  return logout;
+};
+
+exports.ApplicationProvider = ApplicationProvider;
+exports.useApplicationSettings = useApplicationSettings;
+exports.useApplicationUser = useApplicationUser;
+exports.useLogout = useLogout;
+exports.useUserSetting = useUserSetting;
+//# sourceMappingURL=ApplicationProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationProvider.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  Accent,\n  Density,\n  Mode,\n  SaltProviderNext,\n  ThemeContextProps,\n  useDensity,\n  useTheme,\n} from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n    Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n  density?: Density;\n}\n\nconst accentPurple = \"purple\" as Accent;\n\nconst getThemeMode = (\n  mode: Mode = \"light\",\n  userSettings?: Record<string, string | number | boolean>,\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return mode;\n};\n\nexport const ApplicationProvider = ({\n  children,\n  density: densityProp,\n  logout,\n  mode,\n  theme,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n  const density = useDensity(densityProp);\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager],\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        logout,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProviderNext\n        accent={accentPurple}\n        corner=\"rounded\"\n        theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n        density={density}\n        mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n      >\n        {children}\n      </SaltProviderNext>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return userSettings;\n};\n\nexport const useLogout = () => {\n  const { logout } = useContext(ApplicationContext);\n  return logout;\n};\n"],"names":["useTheme","useDensity","usePersistenceManager","useContext","ApplicationContext","useState","useMemo","userSettings","useCallback","jsx","SaltProviderNext"],"mappings":"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"}

package/cjs/feature/Feature.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var FeatureErrorBoundary = require('./FeatureErrorBoundary.js');
+
+const componentsMap = /* @__PURE__ */ new Map();
+const useCachedFeature = (url) => {
+  React.useEffect(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      React.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  const lazyFeature = componentsMap.get(url);
+  if (!lazyFeature) {
+    throw Error(`Unable to load Lazy Feature at url ${url}`);
+  } else {
+    return lazyFeature;
+  }
+};
+function RawFeature({
+  url,
+  css,
+  ComponentProps: params,
+  ...props
+}) {
+  if (css) {
+    vuuUtils.importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ jsxRuntime.jsx(FeatureErrorBoundary.FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsxRuntime.jsx(LazyFeature, { ...props, ...params }) });
+}
+const Feature = React.memo(RawFeature);
+Feature.displayName = "Feature";
+vuuUtils.registerComponent("Feature", Feature, "view");
+
+exports.Feature = Feature;
+//# sourceMappingURL=Feature.js.map

package/cjs/feature/Feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feature.js","sources":["../../../../packages/vuu-shell/src/feature/Feature.tsx"],"sourcesContent":["import {\n  DynamicFeatureProps,\n  importCSS,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\n\n/**\n * Ensure we never lazy load the same component more than once\n */\nconst componentsMap = new Map<string, ReturnType<typeof React.lazy>>();\nconst useCachedFeature = (url: string) => {\n  useEffect(\n    () => () => {\n      componentsMap.delete(url);\n    },\n    [url],\n  );\n\n  if (!componentsMap.has(url)) {\n    componentsMap.set(\n      url,\n      React.lazy(() => import(/* @vite-ignore */ url)),\n    );\n  }\n\n  const lazyFeature = componentsMap.get(url);\n\n  if (!lazyFeature) {\n    throw Error(`Unable to load Lazy Feature at url ${url}`);\n  } else {\n    return lazyFeature;\n  }\n};\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  ComponentProps: params,\n  ...props\n}: DynamicFeatureProps<Params>) {\n  if (css) {\n    //   import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n    //     (cssModule) => {\n    //       console.log(\"%cInject Styles\", \"color: blue;font-weight: bold\");\n    //       document.adoptedStyleSheets = [\n    //         ...document.adoptedStyleSheets,\n    //         cssModule.default,\n    //       ];\n    //     }\n    //   );\n    // Polyfill until cypress build supports import assertions\n    // Note: already fully supported in esbuild and vite\n    importCSS(css).then((styleSheet) => {\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        styleSheet,\n      ];\n    });\n  }\n\n  const LazyFeature = useCachedFeature(url);\n  // Suspense has been removed here - caused components to render twice\n  return (\n    <FeatureErrorBoundary url={url}>\n      <LazyFeature {...props} {...params} />\n    </FeatureErrorBoundary>\n  );\n}\n\n/**\n  Feature is a wrapper around React Lazy Loading. It will load a component\n  from the given url. That url must resolve to a javascript bundle with a\n  single default export. That export must be a React component.\n */\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n"],"names":["useEffect","importCSS","jsx","FeatureErrorBoundary","registerComponent"],"mappings":";;;;;;;AAWA,MAAM,aAAA,uBAAoB,GAA2C,EAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAAA,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG;AAAA,GACN;AAEA,EAAA,IAAI,CAAC,aAAA,CAAc,GAAI,CAAA,GAAG,CAAG,EAAA;AAC3B,IAAc,aAAA,CAAA,GAAA;AAAA,MACZ,GAAA;AAAA,MACA,KAAA,CAAM,KAAK,MAAM;AAAA;AAAA,QAA0B;AAAA,OAAI;AAAA,KACjD;AAAA;AAGF,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA;AAAA;AAEX,CAAA;AAEA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG;AACL,CAAgC,EAAA;AAC9B,EAAA,IAAI,GAAK,EAAA;AAYP,IAAAC,kBAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ;AAAA,OACF;AAAA,KACD,CAAA;AAAA;AAGH,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA;AAExC,EACE,uBAAAC,cAAA,CAACC,6CAAqB,GACpB,EAAA,QAAA,kBAAAD,cAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,CACtC,EAAA,CAAA;AAEJ;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA;AACtBE,0BAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

package/cjs/feature/FeatureErrorBoundary.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+class FeatureErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorMessage: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { errorMessage: error.message };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.log(`error creating component at ${this.props.url}`);
+    console.log(error, errorInfo);
+  }
+  render() {
+    if (this.state.errorMessage) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+
+exports.FeatureErrorBoundary = FeatureErrorBoundary;
+//# sourceMappingURL=FeatureErrorBoundary.js.map

package/cjs/feature/FeatureErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureErrorBoundary.js","sources":["../../../../packages/vuu-shell/src/feature/FeatureErrorBoundary.tsx"],"sourcesContent":["import { DynamicFeatureProps } from \"@vuu-ui/vuu-utils\";\nimport React, { ErrorInfo, ReactNode } from \"react\";\n\nexport interface FeatureErrorBoundaryProps extends DynamicFeatureProps {\n  children: ReactNode;\n}\n\nexport class FeatureErrorBoundary extends React.Component<\n  FeatureErrorBoundaryProps,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  any\n> {\n  constructor(props: FeatureErrorBoundaryProps) {\n    super(props);\n    this.state = { errorMessage: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    // Update state so the next render will show the fallback UI.\n    return { errorMessage: error.message };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    // You can also log the error to an error reporting service\n    console.log(`error creating component at ${this.props.url}`);\n    console.log(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.errorMessage) {\n      return (\n        <>\n          <h1>An error occured while creating component.</h1>\n          <p>{this.state.errorMessage}</p>\n        </>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAOa,MAAA,oBAAA,SAA6B,MAAM,SAI9C,CAAA;AAAA,EACA,YAAY,KAAkC,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,YAAA,EAAc,IAAK,EAAA;AAAA;AACpC,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAE5C,IAAO,OAAA,EAAE,YAAc,EAAA,KAAA,CAAM,OAAQ,EAAA;AAAA;AACvC,EAEA,iBAAA,CAAkB,OAAc,SAAsB,EAAA;AAEpD,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,4BAAA,EAA+B,IAAK,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,SAAS,CAAA;AAAA;AAC9B,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,YAAc,EAAA;AAC3B,MAAA,uBAEIA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,QAAG,QAA0C,EAAA,4CAAA,EAAA,CAAA;AAAA,wBAC7CA,cAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,YAAa,EAAA;AAAA,OAC9B,EAAA,CAAA;AAAA;AAIJ,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA;AAAA;AAEtB;;;;"}

package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+
+const NO_FEATURES = [];
+const NO_STATICFEATURES = [];
+const NO_SYSTEMLAYOUTS = [];
+const NO_FEATURES_VUU = {
+  dynamicFeatures: NO_FEATURES,
+  tableFeatures: NO_FEATURES
+};
+const FeatureContext = React.createContext({
+  dynamicFeatures: NO_FEATURES,
+  tableFeatures: NO_FEATURES,
+  staticFeatures: NO_STATICFEATURES
+});
+const LayoutContext = React.createContext({
+  systemLayouts: NO_SYSTEMLAYOUTS
+});
+const FeatureAndLayoutProvider = ({
+  children,
+  dynamicFeatures: dynamicFeaturesProp = [],
+  staticFeatures,
+  systemLayouts
+}) => {
+  const tableSchemas = vuuDataReact.useVuuTables();
+  const { dynamicFeatures, tableFeatures } = React.useMemo(
+    () => tableSchemas ? vuuUtils.getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas) : NO_FEATURES_VUU,
+    [dynamicFeaturesProp, tableSchemas]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FeatureContext.Provider,
+    {
+      value: {
+        dynamicFeatures,
+        tableFeatures,
+        staticFeatures
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        LayoutContext.Provider,
+        {
+          value: {
+            systemLayouts
+          },
+          children
+        }
+      )
+    }
+  );
+};
+const useFeatures = () => React.useContext(FeatureContext);
+const useLayouts = () => React.useContext(LayoutContext);
+
+exports.FeatureAndLayoutProvider = FeatureAndLayoutProvider;
+exports.useFeatures = useFeatures;
+exports.useLayouts = useLayouts;
+//# sourceMappingURL=FeatureAndLayoutProvider.js.map

package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureAndLayoutProvider.js","sources":["../../../../packages/vuu-shell/src/feature-and-layout-provider/FeatureAndLayoutProvider.tsx"],"sourcesContent":["import {\n  DynamicFeatureDescriptor,\n  DynamicFeatureProps,\n  FilterTableFeatureProps,\n  StaticFeatureDescriptor,\n  SystemLayoutMetadata,\n  getCustomAndTableFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ReactElement,\n  ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { useVuuTables } from \"@vuu-ui/vuu-data-react\";\n\nexport interface FeatureContextProps {\n  dynamicFeatures?: DynamicFeatureProps[];\n  tableFeatures?: DynamicFeatureProps<FilterTableFeatureProps>[];\n  staticFeatures?: StaticFeatureDescriptor[];\n}\n\nexport interface LayoutContextProps {\n  systemLayouts?: SystemLayoutMetadata[];\n}\n\nconst NO_FEATURES: DynamicFeatureDescriptor[] = [];\nconst NO_STATICFEATURES: StaticFeatureDescriptor[] = [];\nconst NO_SYSTEMLAYOUTS: SystemLayoutMetadata[] = [];\n\nconst NO_FEATURES_VUU = {\n  dynamicFeatures: NO_FEATURES,\n  tableFeatures: NO_FEATURES,\n};\n\nconst FeatureContext = createContext<FeatureContextProps>({\n  dynamicFeatures: NO_FEATURES,\n  tableFeatures: NO_FEATURES,\n  staticFeatures: NO_STATICFEATURES,\n});\n\nconst LayoutContext = createContext<LayoutContextProps>({\n  systemLayouts: NO_SYSTEMLAYOUTS,\n});\n\nexport interface FeatureAndLayoutProviderProps\n  extends Partial<FeatureContextProps> {\n  children: ReactNode;\n  dynamicFeatures?: DynamicFeatureDescriptor[];\n  staticFeatures?: StaticFeatureDescriptor[];\n  systemLayouts?: SystemLayoutMetadata[];\n}\n\nexport const FeatureAndLayoutProvider = ({\n  children,\n  dynamicFeatures: dynamicFeaturesProp = [],\n  staticFeatures,\n  systemLayouts,\n}: FeatureAndLayoutProviderProps): ReactElement => {\n  const tableSchemas = useVuuTables();\n\n  const { dynamicFeatures, tableFeatures } = useMemo<{\n    dynamicFeatures: DynamicFeatureProps[];\n    tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];\n  }>(\n    () =>\n      tableSchemas\n        ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas)\n        : NO_FEATURES_VUU,\n    [dynamicFeaturesProp, tableSchemas],\n  );\n\n  return (\n    <FeatureContext.Provider\n      value={{\n        dynamicFeatures,\n        tableFeatures,\n        staticFeatures,\n      }}\n    >\n      <LayoutContext.Provider\n        value={{\n          systemLayouts,\n        }}\n      >\n        {children}\n      </LayoutContext.Provider>\n    </FeatureContext.Provider>\n  );\n};\n\nexport const useFeatures = () => useContext(FeatureContext);\nexport const useLayouts = () => useContext(LayoutContext);\n"],"names":["createContext","useVuuTables","useMemo","getCustomAndTableFeatures","jsx","useContext"],"mappings":";;;;;;;AA2BA,MAAM,cAA0C,EAAC;AACjD,MAAM,oBAA+C,EAAC;AACtD,MAAM,mBAA2C,EAAC;AAElD,MAAM,eAAkB,GAAA;AAAA,EACtB,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA;AACjB,CAAA;AAEA,MAAM,iBAAiBA,mBAAmC,CAAA;AAAA,EACxD,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA,WAAA;AAAA,EACf,cAAgB,EAAA;AAClB,CAAC,CAAA;AAED,MAAM,gBAAgBA,mBAAkC,CAAA;AAAA,EACtD,aAAe,EAAA;AACjB,CAAC,CAAA;AAUM,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA,EAAiB,sBAAsB,EAAC;AAAA,EACxC,cAAA;AAAA,EACA;AACF,CAAmD,KAAA;AACjD,EAAA,MAAM,eAAeC,yBAAa,EAAA;AAElC,EAAM,MAAA,EAAE,eAAiB,EAAA,aAAA,EAAkB,GAAAC,aAAA;AAAA,IAIzC,MACE,YAAA,GACIC,kCAA0B,CAAA,mBAAA,EAAqB,YAAY,CAC3D,GAAA,eAAA;AAAA,IACN,CAAC,qBAAqB,YAAY;AAAA,GACpC;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,cAAe,CAAA,QAAA;AAAA,IAAf;AAAA,MACC,KAAO,EAAA;AAAA,QACL,eAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAA,cAAA;AAAA,QAAC,aAAc,CAAA,QAAA;AAAA,QAAd;AAAA,UACC,KAAO,EAAA;AAAA,YACL;AAAA,WACF;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEa,MAAA,WAAA,GAAc,MAAMC,gBAAA,CAAW,cAAc;AAC7C,MAAA,UAAA,GAAa,MAAMA,gBAAA,CAAW,aAAa;;;;;;"}

package/cjs/feature-list/FeatureList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-standalone {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
+
+module.exports = featureListCss;
+//# sourceMappingURL=FeatureList.css.js.map

package/cjs/feature-list/FeatureList.css.js.map

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

package/cjs/feature-list/FeatureList.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var Feature = require('../feature/Feature.js');
+var FeatureList$1 = require('./FeatureList.css.js');
+
+const classBase = "vuuFeatureList";
+const FeatureList = ({
+  features,
+  title = "VUU TABLES",
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-feature-list",
+    css: FeatureList$1,
+    window: targetWindow
+  });
+  const content = React.useMemo(() => {
+    if (vuuUtils.isStaticFeatures(features)) {
+      return features.map(({ label, type }, idx) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          vuuLayout.PaletteItem,
+          {
+            ViewProps: {
+              closeable: true,
+              header: true,
+              resize: "defer",
+              resizeable: true
+            },
+            component: vuuUtils.featureFromJson({ type }),
+            value: label,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: label })
+            ]
+          },
+          idx
+        );
+      });
+    }
+    if (Array.isArray(features)) {
+      return [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-standalone`, children: /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", children: features.map(({ ViewProps, ...featureProps }, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          vuuLayout.PaletteItem,
+          {
+            ViewProps: {
+              closeable: true,
+              header: true,
+              resize: "defer",
+              resizeable: true,
+              title: featureProps.title,
+              ...ViewProps
+            },
+            component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
+            value: featureProps.title,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
+            ]
+          },
+          i
+        )) }, "0") }, 0)
+      ];
+    } else {
+      return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", children: featureList.map(
+          ({ ViewProps, ...featureProps }, i) => {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              vuuLayout.PaletteItem,
+              {
+                ViewProps: {
+                  closeable: true,
+                  header: true,
+                  resize: "defer",
+                  resizeable: true,
+                  title: featureProps.title,
+                  ...ViewProps
+                },
+                component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
+                value: featureProps.title,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
+                ]
+              },
+              i
+            );
+          }
+        ) })
+      ] }, index));
+    }
+  }, [features]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
+  ] });
+};
+
+exports.FeatureList = FeatureList;
+//# sourceMappingURL=FeatureList.js.map

package/cjs/feature-list/FeatureList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureList.js","sources":["../../../../packages/vuu-shell/src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DynamicFeatureProps,\n  StaticFeatureDescriptor,\n  featureFromJson,\n  isStaticFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, Key, ReactElement, useMemo } from \"react\";\nimport { Feature } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n  string,\n  DynamicFeatureProps<P>[]\n>;\n\nexport interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {\n  features:\n    | DynamicFeatureProps[]\n    | GroupedFeatureProps\n    | StaticFeatureDescriptor[];\n}\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\n  const content = useMemo<ReactElement[]>(() => {\n    if (isStaticFeatures(features)) {\n      return features.map(({ label, type }, idx) => {\n        return (\n          <PaletteItem\n            ViewProps={{\n              closeable: true,\n              header: true,\n              resize: \"defer\",\n              resizeable: true,\n            }}\n            component={featureFromJson({ type })}\n            key={idx}\n            value={label}\n          >\n            <Icon name=\"draggable\" size={18} />\n            <span className={`${classBase}-itemName`}>{label}</span>\n          </PaletteItem>\n        );\n      });\n    }\n    if (Array.isArray(features)) {\n      return [\n        <div className={`${classBase}-standalone`} key={0}>\n          <Palette key=\"0\" orientation=\"vertical\">\n            {features.map(({ ViewProps, ...featureProps }, i) => (\n              <PaletteItem\n                ViewProps={{\n                  closeable: true,\n                  header: true,\n                  resize: \"defer\",\n                  resizeable: true,\n                  title: featureProps.title,\n                  ...ViewProps,\n                }}\n                component={<Feature {...featureProps} />}\n                key={i}\n                value={featureProps.title}\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>,\n      ];\n    } else {\n      return Object.entries(features).map(([heading, featureList], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <Palette orientation=\"vertical\">\n            {featureList.map(\n              (\n                { ViewProps, ...featureProps }: DynamicFeatureProps<object>,\n                i: Key,\n              ) => {\n                return (\n                  <PaletteItem\n                    ViewProps={{\n                      closeable: true,\n                      header: true,\n                      resize: \"defer\",\n                      resizeable: true,\n                      title: featureProps.title,\n                      ...ViewProps,\n                    }}\n                    component={<Feature {...featureProps} />}\n                    key={i}\n                    value={featureProps.title}\n                  >\n                    <Icon name=\"draggable\" size={18} />\n                    <span className={`${classBase}-itemName`}>\n                      {featureProps.title}\n                    </span>\n                  </PaletteItem>\n                );\n              },\n            )}\n          </Palette>\n        </div>\n      ));\n    }\n  }, [features]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","featureListCss","useMemo","isStaticFeatures","jsxs","PaletteItem","featureFromJson","jsx","Icon","Palette","Feature"],"mappings":"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"}