@vuu-ui/vuu-utils 2.0.0 → 2.1.0-alpha.10

package/cjs/packages/vuu-utils/src/ThemeProvider.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var cx = require('clsx');
+var clsx = require('clsx');
 
 const DEFAULT_DENSITY = "medium";
 const DEFAULT_THEME = "salt-theme";
@@ -37,7 +37,7 @@ const useThemeAttributes = (themeAttributes) => {
 const createThemedChildren = (children, theme, themeMode, density) => {
   if (React.isValidElement(children)) {
     return React.cloneElement(children, {
-      className: cx(
+      className: clsx(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         children.props?.className,
         `${theme}-theme`,

package/cjs/packages/vuu-utils/src/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../../../../packages/vuu-utils/src/ThemeProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n  cloneElement,\n  useContext,\n} from \"react\";\nimport cx from \"clsx\";\n\nexport const DEFAULT_DENSITY: Density = \"medium\";\nexport const DEFAULT_THEME = \"salt-theme\";\nexport const DEFAULT_THEME_MODE: ThemeMode = \"light\";\n\nexport type Density = \"high\" | \"medium\" | \"low\" | \"touch\";\nexport type ThemeMode = \"light\" | \"dark\";\nexport type TargetElement = \"root\" | \"scope\" | \"child\";\n\nexport interface ThemeContextProps {\n  density: Density;\n  theme: string;\n  themeMode: ThemeMode;\n}\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  density: \"high\",\n  theme: \"vuu\",\n  themeMode: \"light\",\n});\n\nexport type ThemeClasses = [string, string, ThemeMode];\n\nconst DEFAULT_THEME_ATTRIBUTES: ThemeClasses = [\n  \"vuu\",\n  \"salt-density-high\",\n  \"light\" as ThemeMode,\n];\n\nexport type ThemeAttributes = {\n  themeClass: string;\n  densityClass: string;\n  dataMode: ThemeMode;\n};\n\nexport const useThemeAttributes = (\n  themeAttributes?: ThemeAttributes\n): [string, string, ThemeMode] => {\n  const context = useContext(ThemeContext);\n  if (themeAttributes) {\n    return [\n      themeAttributes.themeClass,\n      themeAttributes.densityClass,\n      themeAttributes.dataMode,\n    ];\n  } else if (context) {\n    return [\n      `${context.theme}-theme`,\n      `salt-density-${context.density}`,\n      context.themeMode,\n    ];\n  }\n  return DEFAULT_THEME_ATTRIBUTES;\n};\n\nconst createThemedChildren = (\n  children: ReactNode,\n  theme: string,\n  themeMode: ThemeMode,\n  density: Density\n) => {\n  if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n    return cloneElement(children, {\n      className: cx(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        children.props?.className,\n        `${theme}-theme`,\n        `salt-density-${density}`\n      ),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      \"data-mode\": themeMode,\n    });\n  } else {\n    console.warn(\n      `\\nThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.\n            Wrap elements with a single container`\n    );\n    return children;\n  }\n};\n\ninterface ThemeProviderProps {\n  applyThemeClasses?: boolean;\n  children: ReactNode;\n  density?: Density;\n  theme?: string;\n  themeMode?: ThemeMode;\n}\n\nexport const ThemeProvider = ({\n  applyThemeClasses = false,\n  children,\n  theme: themeProp,\n  themeMode: themeModeProp,\n  density: densityProp,\n}: ThemeProviderProps) => {\n  const {\n    density: inheritedDensity,\n    themeMode: inheritedThemeMode,\n    theme: inheritedTheme,\n  } = useContext(ThemeContext);\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeMode = themeModeProp ?? inheritedThemeMode ?? DEFAULT_THEME_MODE;\n  const theme = themeProp ?? inheritedTheme ?? DEFAULT_THEME;\n  const themedChildren = applyThemeClasses\n    ? createThemedChildren(children, theme, themeMode, density)\n    : children;\n\n  return (\n    <ThemeContext.Provider value={{ themeMode, density, theme }}>\n      {themedChildren}\n    </ThemeContext.Provider>\n  );\n};\n\nThemeProvider.displayName = \"ThemeProvider\";\n"],"names":["createContext","useContext","isValidElement","cloneElement","jsx"],"mappings":";;;;;;AAUO,MAAM,eAA2B,GAAA;AACjC,MAAM,aAAgB,GAAA;AACtB,MAAM,kBAAgC,GAAA;AAYtC,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,OAAS,EAAA,MAAA;AAAA,EACT,KAAO,EAAA,KAAA;AAAA,EACP,SAAW,EAAA;AACb,CAAC;AAID,MAAM,wBAAyC,GAAA;AAAA,EAC7C,KAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA;AAQa,MAAA,kBAAA,GAAqB,CAChC,eACgC,KAAA;AAChC,EAAM,MAAA,OAAA,GAAUC,iBAAW,YAAY,CAAA;AACvC,EAAA,IAAI,eAAiB,EAAA;AACnB,IAAO,OAAA;AAAA,MACL,eAAgB,CAAA,UAAA;AAAA,MAChB,eAAgB,CAAA,YAAA;AAAA,MAChB,eAAgB,CAAA;AAAA,KAClB;AAAA,aACS,OAAS,EAAA;AAClB,IAAO,OAAA;AAAA,MACL,CAAA,EAAG,QAAQ,KAAK,CAAA,MAAA,CAAA;AAAA,MAChB,CAAA,aAAA,EAAgB,QAAQ,OAAO,CAAA,CAAA;AAAA,MAC/B,OAAQ,CAAA;AAAA,KACV;AAAA;AAEF,EAAO,OAAA,wBAAA;AACT;AAEA,MAAM,oBAAuB,GAAA,CAC3B,QACA,EAAA,KAAA,EACA,WACA,OACG,KAAA;AACH,EAAI,IAAAC,oBAAA,CAA4C,QAAQ,CAAG,EAAA;AACzD,IAAA,OAAOC,mBAAa,QAAU,EAAA;AAAA,MAC5B,SAAW,EAAA,EAAA;AAAA;AAAA,QAET,SAAS,KAAO,EAAA,SAAA;AAAA,QAChB,GAAG,KAAK,CAAA,MAAA,CAAA;AAAA,QACR,gBAAgB,OAAO,CAAA;AAAA,OACzB;AAAA;AAAA;AAAA,MAGA,WAAa,EAAA;AAAA,KACd,CAAA;AAAA,GACI,MAAA;AACL,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA;AAAA,iDAAA;AAAA,KAEF;AACA,IAAO,OAAA,QAAA;AAAA;AAEX,CAAA;AAUO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,iBAAoB,GAAA,KAAA;AAAA,EACpB,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,SAAW,EAAA,aAAA;AAAA,EACX,OAAS,EAAA;AACX,CAA0B,KAAA;AACxB,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,gBAAA;AAAA,IACT,SAAW,EAAA,kBAAA;AAAA,IACX,KAAO,EAAA;AAAA,GACT,GAAIF,iBAAW,YAAY,CAAA;AAC3B,EAAM,MAAA,OAAA,GAAU,eAAe,gBAAoB,IAAA,eAAA;AACnD,EAAM,MAAA,SAAA,GAAY,iBAAiB,kBAAsB,IAAA,kBAAA;AACzD,EAAM,MAAA,KAAA,GAAQ,aAAa,cAAkB,IAAA,aAAA;AAC7C,EAAA,MAAM,iBAAiB,iBACnB,GAAA,oBAAA,CAAqB,UAAU,KAAO,EAAA,SAAA,EAAW,OAAO,CACxD,GAAA,QAAA;AAEJ,EACE,uBAAAG,cAAA,CAAC,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,EAAE,SAAW,EAAA,OAAA,EAAS,KAAM,EAAA,EACvD,QACH,EAAA,cAAA,EAAA,CAAA;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;;;;;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../../../packages/vuu-utils/src/ThemeProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n  cloneElement,\n  useContext,\n} from \"react\";\nimport cx from \"clsx\";\n\nexport const DEFAULT_DENSITY: Density = \"medium\";\nexport const DEFAULT_THEME = \"salt-theme\";\nexport const DEFAULT_THEME_MODE: ThemeMode = \"light\";\n\nexport type Density = \"high\" | \"medium\" | \"low\" | \"touch\";\nexport type ThemeMode = \"light\" | \"dark\";\nexport type TargetElement = \"root\" | \"scope\" | \"child\";\n\nexport interface ThemeContextProps {\n  density: Density;\n  theme: string;\n  themeMode: ThemeMode;\n}\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  density: \"high\",\n  theme: \"vuu\",\n  themeMode: \"light\",\n});\n\nexport type ThemeClasses = [string, string, ThemeMode];\n\nconst DEFAULT_THEME_ATTRIBUTES: ThemeClasses = [\n  \"vuu\",\n  \"salt-density-high\",\n  \"light\" as ThemeMode,\n];\n\nexport type ThemeAttributes = {\n  themeClass: string;\n  densityClass: string;\n  dataMode: ThemeMode;\n};\n\nexport const useThemeAttributes = (\n  themeAttributes?: ThemeAttributes\n): [string, string, ThemeMode] => {\n  const context = useContext(ThemeContext);\n  if (themeAttributes) {\n    return [\n      themeAttributes.themeClass,\n      themeAttributes.densityClass,\n      themeAttributes.dataMode,\n    ];\n  } else if (context) {\n    return [\n      `${context.theme}-theme`,\n      `salt-density-${context.density}`,\n      context.themeMode,\n    ];\n  }\n  return DEFAULT_THEME_ATTRIBUTES;\n};\n\nconst createThemedChildren = (\n  children: ReactNode,\n  theme: string,\n  themeMode: ThemeMode,\n  density: Density\n) => {\n  if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n    return cloneElement(children, {\n      className: cx(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        children.props?.className,\n        `${theme}-theme`,\n        `salt-density-${density}`\n      ),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      \"data-mode\": themeMode,\n    });\n  } else {\n    console.warn(\n      `\\nThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.\n            Wrap elements with a single container`\n    );\n    return children;\n  }\n};\n\ninterface ThemeProviderProps {\n  applyThemeClasses?: boolean;\n  children: ReactNode;\n  density?: Density;\n  theme?: string;\n  themeMode?: ThemeMode;\n}\n\nexport const ThemeProvider = ({\n  applyThemeClasses = false,\n  children,\n  theme: themeProp,\n  themeMode: themeModeProp,\n  density: densityProp,\n}: ThemeProviderProps) => {\n  const {\n    density: inheritedDensity,\n    themeMode: inheritedThemeMode,\n    theme: inheritedTheme,\n  } = useContext(ThemeContext);\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeMode = themeModeProp ?? inheritedThemeMode ?? DEFAULT_THEME_MODE;\n  const theme = themeProp ?? inheritedTheme ?? DEFAULT_THEME;\n  const themedChildren = applyThemeClasses\n    ? createThemedChildren(children, theme, themeMode, density)\n    : children;\n\n  return (\n    <ThemeContext.Provider value={{ themeMode, density, theme }}>\n      {themedChildren}\n    </ThemeContext.Provider>\n  );\n};\n\nThemeProvider.displayName = \"ThemeProvider\";\n"],"names":["createContext","useContext","isValidElement","cloneElement","cx","jsx"],"mappings":";;;;;;AAUO,MAAM,eAA2B,GAAA;AACjC,MAAM,aAAgB,GAAA;AACtB,MAAM,kBAAgC,GAAA;AAYtC,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,OAAS,EAAA,MAAA;AAAA,EACT,KAAO,EAAA,KAAA;AAAA,EACP,SAAW,EAAA;AACb,CAAC;AAID,MAAM,wBAAyC,GAAA;AAAA,EAC7C,KAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA;AAQa,MAAA,kBAAA,GAAqB,CAChC,eACgC,KAAA;AAChC,EAAM,MAAA,OAAA,GAAUC,iBAAW,YAAY,CAAA;AACvC,EAAA,IAAI,eAAiB,EAAA;AACnB,IAAO,OAAA;AAAA,MACL,eAAgB,CAAA,UAAA;AAAA,MAChB,eAAgB,CAAA,YAAA;AAAA,MAChB,eAAgB,CAAA;AAAA,KAClB;AAAA,aACS,OAAS,EAAA;AAClB,IAAO,OAAA;AAAA,MACL,CAAA,EAAG,QAAQ,KAAK,CAAA,MAAA,CAAA;AAAA,MAChB,CAAA,aAAA,EAAgB,QAAQ,OAAO,CAAA,CAAA;AAAA,MAC/B,OAAQ,CAAA;AAAA,KACV;AAAA;AAEF,EAAO,OAAA,wBAAA;AACT;AAEA,MAAM,oBAAuB,GAAA,CAC3B,QACA,EAAA,KAAA,EACA,WACA,OACG,KAAA;AACH,EAAI,IAAAC,oBAAA,CAA4C,QAAQ,CAAG,EAAA;AACzD,IAAA,OAAOC,mBAAa,QAAU,EAAA;AAAA,MAC5B,SAAW,EAAAC,IAAA;AAAA;AAAA,QAET,SAAS,KAAO,EAAA,SAAA;AAAA,QAChB,GAAG,KAAK,CAAA,MAAA,CAAA;AAAA,QACR,gBAAgB,OAAO,CAAA;AAAA,OACzB;AAAA;AAAA;AAAA,MAGA,WAAa,EAAA;AAAA,KACd,CAAA;AAAA,GACI,MAAA;AACL,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA;AAAA,iDAAA;AAAA,KAEF;AACA,IAAO,OAAA,QAAA;AAAA;AAEX,CAAA;AAUO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,iBAAoB,GAAA,KAAA;AAAA,EACpB,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,SAAW,EAAA,aAAA;AAAA,EACX,OAAS,EAAA;AACX,CAA0B,KAAA;AACxB,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,gBAAA;AAAA,IACT,SAAW,EAAA,kBAAA;AAAA,IACX,KAAO,EAAA;AAAA,GACT,GAAIH,iBAAW,YAAY,CAAA;AAC3B,EAAM,MAAA,OAAA,GAAU,eAAe,gBAAoB,IAAA,eAAA;AACnD,EAAM,MAAA,SAAA,GAAY,iBAAiB,kBAAsB,IAAA,kBAAA;AACzD,EAAM,MAAA,KAAA,GAAQ,aAAa,cAAkB,IAAA,aAAA;AAC7C,EAAA,MAAM,iBAAiB,iBACnB,GAAA,oBAAA,CAAqB,UAAU,KAAO,EAAA,SAAA,EAAW,OAAO,CACxD,GAAA,QAAA;AAEJ,EACE,uBAAAI,cAAA,CAAC,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,EAAE,SAAW,EAAA,OAAA,EAAS,KAAM,EAAA,EACvD,QACH,EAAA,cAAA,EAAA,CAAA;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;;;;;;"}

package/cjs/packages/vuu-utils/src/data-editing/DataEditingProvider.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const DataEditingContext = React.createContext(void 0);
+const DataEditingProvider = ({
+  children,
+  editTracker
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataEditingContext.Provider, { value: editTracker, children });
+};
+const useEditTracker = () => {
+  const editTracker = React.useContext(DataEditingContext);
+  if (editTracker === void 0) {
+    console.warn(
+      "[useEditTracker] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider"
+    );
+  }
+  return editTracker;
+};
+
+exports.DataEditingProvider = DataEditingProvider;
+exports.useEditTracker = useEditTracker;
+//# sourceMappingURL=DataEditingProvider.js.map

package/cjs/packages/vuu-utils/src/data-editing/DataEditingProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataEditingProvider.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/DataEditingProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from \"react\";\nimport { EditTracker } from \"./EditTracker\";\n\nconst DataEditingContext = createContext<EditTracker | undefined>(undefined);\n\nexport const DataEditingProvider = ({\n  children,\n  editTracker,\n}: {\n  children: ReactNode;\n  editTracker: EditTracker;\n}) => {\n  return (\n    <DataEditingContext.Provider value={editTracker}>\n      {children}\n    </DataEditingContext.Provider>\n  );\n};\n\nexport const useEditTracker = () => {\n  const editTracker = useContext(DataEditingContext);\n  if (editTracker === undefined) {\n    console.warn(\n      \"[useEditTracker] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider\",\n    );\n  }\n  return editTracker;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;AAGA,MAAM,kBAAA,GAAqBA,oBAAuC,KAAS,CAAA,CAAA;AAEpE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,sCACG,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,aACjC,QACH,EAAA,CAAA;AAEJ;AAEO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,WAAA,GAAcC,iBAAW,kBAAkB,CAAA;AACjD,EAAA,IAAI,gBAAgB,KAAW,CAAA,EAAA;AAC7B,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,WAAA;AACT;;;;;"}

package/cjs/packages/vuu-utils/src/data-editing/EditButtons.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Button = require('../../../../node_modules/@salt-ds/core/dist-es/button/Button.js');
+
+const EditButtons = ({
+  editTracker,
+  onCancel,
+  onSave
+}) => {
+  const [editState, setEditState] = React.useState("clean");
+  React.useMemo(() => {
+    editTracker?.on("editState", setEditState);
+  }, [editTracker]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        disabled: editState === "clean",
+        onClick: onSave,
+        sentiment: "accented",
+        children: "Save"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: onCancel, children: "Cancel" })
+  ] });
+};
+
+exports.EditButtons = EditButtons;
+//# sourceMappingURL=EditButtons.js.map

package/cjs/packages/vuu-utils/src/data-editing/EditButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditButtons.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/EditButtons.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { EditState, EditTracker } from \"./EditTracker\";\nimport { useMemo, useState } from \"react\";\n\nexport interface EditButtonProps {\n  editTracker?: EditTracker;\n  onCancel: () => void;\n  onSave: () => void;\n}\n\nexport const EditButtons = ({\n  editTracker,\n  onCancel,\n  onSave,\n}: EditButtonProps) => {\n  const [editState, setEditState] = useState<EditState>(\"clean\");\n\n  useMemo(() => {\n    editTracker?.on(\"editState\", setEditState);\n  }, [editTracker]);\n\n  return (\n    <>\n      <Button\n        disabled={editState === \"clean\"}\n        onClick={onSave}\n        sentiment=\"accented\"\n      >\n        Save\n      </Button>\n      <Button onClick={onCancel}>Cancel</Button>\n    </>\n  );\n};\n"],"names":["useState","useMemo","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;AAUO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAoB,OAAO,CAAA;AAE7D,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAa,WAAA,EAAA,EAAA,CAAG,aAAa,YAAY,CAAA;AAAA,GAC3C,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAU,SAAc,KAAA,OAAA;AAAA,QACxB,OAAS,EAAA,MAAA;AAAA,QACT,SAAU,EAAA,UAAA;AAAA,QACX,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,oBACCD,cAAA,CAAAC,aAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAM,EAAA,QAAA,EAAA;AAAA,GACnC,EAAA,CAAA;AAEJ;;;;"}

package/cjs/packages/vuu-utils/src/data-editing/EditTracker.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var eventEmitter = require('../event-emitter.js');
+var protocolMessageUtils = require('../protocol-message-utils.js');
+
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __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"), member.set(obj, value), value);
+var _active, _rowEdits, _editCount, _dataSource, _inEditMode;
+class EditTracker extends eventEmitter.EventEmitter {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _active, false);
+    /**
+     *  Row key => row edits
+     */
+    __privateAdd(this, _rowEdits, /* @__PURE__ */ new Map());
+    __privateAdd(this, _editCount, 0);
+    __privateAdd(this, _dataSource);
+    __privateAdd(this, _inEditMode, false);
+  }
+  get active() {
+    return __privateGet(this, _active);
+  }
+  set active(isActive) {
+    __privateSet(this, _active, isActive);
+  }
+  get editCount() {
+    return __privateGet(this, _editCount);
+  }
+  set editCount(val) {
+    if (val !== __privateGet(this, _editCount)) {
+      const oldCount = __privateGet(this, _editCount);
+      __privateSet(this, _editCount, val);
+      if (val === 0) {
+        this.emit("editState", "clean");
+      } else if (oldCount === 0) {
+        this.emit("editState", "dirty");
+      }
+    }
+  }
+  set dataSource(ds) {
+    __privateSet(this, _dataSource, ds);
+  }
+  clear() {
+    __privateGet(this, _rowEdits).clear();
+    __privateSet(this, _editCount, 0);
+  }
+  async enterEditMode() {
+    __privateSet(this, _inEditMode, true);
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "ENTER_EDIT_MODE",
+      params: {}
+    });
+    if (protocolMessageUtils.isRpcSuccess(rpcResponse)) {
+      const { table: sessionTable } = rpcResponse.data;
+      return sessionTable;
+    } else {
+      console.log("fail");
+    }
+  }
+  get inEditMode() {
+    return __privateGet(this, _inEditMode);
+  }
+  get editState() {
+    return this.editCount === 0 ? "clean" : "dirty";
+  }
+  async cancelChanges() {
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "EXIT_EDIT_MODE",
+      params: {}
+    });
+    this.clear();
+    return rpcResponse;
+  }
+  async saveChanges() {
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "EXIT_EDIT_MODE",
+      params: { save: true }
+    });
+    this.clear();
+    return rpcResponse;
+  }
+  // TODO how do we deal with the '_edited' pattern
+  edit(key, columnName, originalValue, newValue) {
+    const rowEditDetails = __privateGet(this, _rowEdits).get(key);
+    if (rowEditDetails) {
+      const { cellEdits } = rowEditDetails;
+      const cellEdit = cellEdits.get(columnName);
+      if (cellEdit) {
+        if (newValue === cellEdit.originalValue) {
+          if (cellEdits.size === 1) {
+            __privateGet(this, _rowEdits).delete(key);
+          } else {
+            cellEdits.delete(columnName);
+          }
+          this.editCount = __privateGet(this, _editCount) - 1;
+        } else {
+          cellEdit.editedValue = newValue;
+        }
+      } else {
+        cellEdits.set(columnName, {
+          originalValue,
+          editedValue: newValue
+        });
+        this.editCount = __privateGet(this, _editCount) + 1;
+      }
+    } else {
+      __privateGet(this, _rowEdits).set(key, {
+        cellEdits: /* @__PURE__ */ new Map([
+          [columnName, { originalValue, editedValue: newValue }]
+        ])
+      });
+      this.editCount = __privateGet(this, _editCount) + 1;
+    }
+  }
+  //TODO alow a shortcut commit that allows a value, bypassing need
+  // for edit. Thids caters for boolean values, dropdown list etc
+  // that have no intermediate edit phase
+  async commit(key, columnName) {
+    const rowEditDetails = __privateGet(this, _rowEdits).get(key);
+    if (rowEditDetails) {
+      const { cellEdits } = rowEditDetails;
+      const cellEditValues = cellEdits.get(columnName);
+      if (cellEditValues) {
+        const { editedValue } = cellEditValues;
+        const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+          type: "RPC_REQUEST",
+          rpcName: "editCell",
+          params: {
+            column: columnName,
+            data: editedValue,
+            key
+          }
+        });
+        return rpcResponse;
+      }
+    } else {
+      throw Error(`[EditTracker] commit, key ${key} not found `);
+    }
+  }
+}
+_active = new WeakMap();
+_rowEdits = new WeakMap();
+_editCount = new WeakMap();
+_dataSource = new WeakMap();
+_inEditMode = new WeakMap();
+
+exports.EditTracker = EditTracker;
+//# sourceMappingURL=EditTracker.js.map

package/cjs/packages/vuu-utils/src/data-editing/EditTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditTracker.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/EditTracker.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { EventEmitter } from \"../event-emitter\";\nimport { isRpcSuccess } from \"../protocol-message-utils\";\n\nexport type EditState = \"clean\" | \"dirty\";\n\ntype CellEdit = {\n  originalValue: VuuRowDataItemType;\n  editedValue: VuuRowDataItemType;\n};\n\ntype RowEditDetails = {\n  /**\n   * Column name => cell edit details\n   */\n  cellEdits: Map<string, CellEdit>;\n};\n\ntype EditTrackerEvents = {\n  editState: (editState: EditState) => void;\n};\n\nexport class EditTracker extends EventEmitter<EditTrackerEvents> {\n  #active = false;\n  /**\n   *  Row key => row edits\n   */\n  #rowEdits = new Map<string, RowEditDetails>();\n  #editCount = 0;\n  #dataSource?: DataSource;\n  #inEditMode = false;\n\n  get active() {\n    return this.#active;\n  }\n  set active(isActive: boolean) {\n    this.#active = isActive;\n  }\n  get editCount() {\n    return this.#editCount;\n  }\n\n  set editCount(val: number) {\n    if (val !== this.#editCount) {\n      const oldCount = this.#editCount;\n      this.#editCount = val;\n      if (val === 0) {\n        this.emit(\"editState\", \"clean\");\n      } else if (oldCount === 0) {\n        this.emit(\"editState\", \"dirty\");\n      }\n    }\n  }\n\n  set dataSource(ds: DataSource) {\n    this.#dataSource = ds;\n  }\n\n  clear() {\n    this.#rowEdits.clear();\n    this.#editCount = 0;\n  }\n\n  async enterEditMode() {\n    this.#inEditMode = true;\n\n    const rpcResponse = await this.#dataSource?.rpcRequest?.({\n      type: \"RPC_REQUEST\",\n      rpcName: \"ENTER_EDIT_MODE\",\n      params: {},\n    });\n\n    if (isRpcSuccess(rpcResponse)) {\n      const { table: sessionTable } = rpcResponse.data as { table: VuuTable };\n      return sessionTable;\n    } else {\n      console.log(\"fail\");\n    }\n  }\n\n  get inEditMode() {\n    return this.#inEditMode;\n  }\n\n  get editState(): EditState {\n    return this.editCount === 0 ? \"clean\" : \"dirty\";\n  }\n\n  async cancelChanges() {\n    const rpcResponse = await this.#dataSource?.rpcRequest?.({\n      type: \"RPC_REQUEST\",\n      rpcName: \"EXIT_EDIT_MODE\",\n      params: {},\n    });\n    this.clear();\n    return rpcResponse;\n  }\n\n  async saveChanges() {\n    const rpcResponse = await this.#dataSource?.rpcRequest?.({\n      type: \"RPC_REQUEST\",\n      rpcName: \"EXIT_EDIT_MODE\",\n      params: { save: true },\n    });\n    this.clear();\n    return rpcResponse;\n  }\n\n  // TODO how do we deal with the '_edited' pattern\n  edit(\n    key: string,\n    columnName: string,\n    originalValue: VuuRowDataItemType,\n    newValue: VuuRowDataItemType,\n  ) {\n    const rowEditDetails = this.#rowEdits.get(key);\n    if (rowEditDetails) {\n      const { cellEdits } = rowEditDetails;\n      const cellEdit = cellEdits.get(columnName);\n      if (cellEdit) {\n        if (newValue === cellEdit.originalValue) {\n          if (cellEdits.size === 1) {\n            this.#rowEdits.delete(key);\n          } else {\n            // re-editing a cell had removed the edit\n            cellEdits.delete(columnName);\n          }\n          this.editCount = this.#editCount - 1;\n        } else {\n          cellEdit.editedValue = newValue;\n        }\n      } else {\n        // row has already been edited, but this column has not\n        cellEdits.set(columnName, {\n          originalValue,\n          editedValue: newValue,\n        });\n        this.editCount = this.#editCount + 1;\n      }\n    } else {\n      this.#rowEdits.set(key, {\n        cellEdits: new Map([\n          [columnName, { originalValue, editedValue: newValue }],\n        ]),\n      });\n      this.editCount = this.#editCount + 1;\n    }\n  }\n\n  //TODO alow a shortcut commit that allows a value, bypassing need\n  // for edit. Thids caters for boolean values, dropdown list etc\n  // that have no intermediate edit phase\n  async commit(key: string, columnName: string) {\n    const rowEditDetails = this.#rowEdits.get(key);\n    if (rowEditDetails) {\n      const { cellEdits } = rowEditDetails;\n      const cellEditValues = cellEdits.get(columnName);\n      if (cellEditValues) {\n        const { editedValue } = cellEditValues;\n        const rpcResponse = await this.#dataSource?.rpcRequest?.({\n          type: \"RPC_REQUEST\",\n          rpcName: \"editCell\",\n          params: {\n            column: columnName,\n            data: editedValue,\n            key,\n          },\n        });\n\n        return rpcResponse;\n      }\n    } else {\n      throw Error(`[EditTracker] commit, key ${key} not found `);\n    }\n  }\n}\n"],"names":["EventEmitter","isRpcSuccess"],"mappings":"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"}

package/cjs/packages/vuu-utils/src/data-editing/useEditableTable.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var EditTracker = require('./EditTracker.js');
+var DataProvider = require('../context-definitions/DataProvider.js');
+var protocolMessageUtils = require('../protocol-message-utils.js');
+
+const useEditableTable = ({
+  columns,
+  dataSource: dataSourceProp,
+  isEditMode,
+  onCancel,
+  onSave,
+  table
+}) => {
+  const { VuuDataSource } = DataProvider.useData();
+  const [sessionDataSource, setSessionDataSource] = React.useState(void 0);
+  const dataSource = React.useMemo(() => {
+    return dataSourceProp ?? new VuuDataSource({ columns, table });
+  }, [VuuDataSource, columns, dataSourceProp, table]);
+  const editTracker = React.useMemo(() => new EditTracker.EditTracker(), []);
+  React.useMemo(() => {
+    if (dataSource) {
+      editTracker.dataSource = dataSource;
+    }
+  }, [dataSource, editTracker]);
+  const handleCancel = React.useCallback(() => {
+    editTracker.cancelChanges();
+    onCancel();
+    setSessionDataSource(void 0);
+    dataSource.resume?.();
+  }, [dataSource, editTracker, onCancel]);
+  const handleSave = React.useCallback(async () => {
+    const response = await editTracker.saveChanges();
+    if (protocolMessageUtils.isRpcSuccess(response)) {
+      onSave();
+      setSessionDataSource(void 0);
+      dataSource.resume?.();
+    }
+  }, [dataSource, editTracker, onSave]);
+  React.useMemo(async () => {
+    if (isEditMode) {
+      const sessionTable = await editTracker.enterEditMode();
+      if (sessionTable && dataSource.tableSchema) {
+        dataSource.suspend?.(false);
+        const sessionDataSource2 = new VuuDataSource({
+          columns: dataSource.columns,
+          table: sessionTable,
+          viewport: sessionTable.table
+        });
+        setSessionDataSource(sessionDataSource2);
+        editTracker.dataSource = sessionDataSource2;
+      }
+    }
+  }, [VuuDataSource, dataSource, editTracker, isEditMode]);
+  return {
+    dataSource: sessionDataSource ?? dataSource,
+    editTracker,
+    onCancel: handleCancel,
+    onSave: handleSave
+  };
+};
+
+exports.useEditableTable = useEditableTable;
+//# sourceMappingURL=useEditableTable.js.map

package/cjs/packages/vuu-utils/src/data-editing/useEditableTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableTable.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/useEditableTable.ts"],"sourcesContent":["import { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport { EditTracker } from \"./EditTracker\";\nimport { useData } from \"../context-definitions/DataProvider\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { isRpcSuccess } from \"../protocol-message-utils\";\n\nexport type EditMode = \"edit\" | \"view\";\n\nexport interface EditableTableHookProps {\n  /**\n   * columns to be included in subscription. If not provided,\n   * default will be '*'. Ignored if dataSource prop present.\n   */\n  columns?: string[];\n  dataSource?: DataSource;\n  isEditMode: boolean;\n  onCancel: () => void;\n  onSave: () => void;\n  /**\n   * If dataSource nor provided, new DataSource\n   * will be created using table and columns\n   */\n  table: VuuTable;\n}\n\nexport const useEditableTable = ({\n  columns,\n  dataSource: dataSourceProp,\n  isEditMode,\n  onCancel,\n  onSave,\n  table,\n}: EditableTableHookProps) => {\n  const { VuuDataSource } = useData();\n  const [sessionDataSource, setSessionDataSource] = useState<\n    DataSource | undefined\n  >(undefined);\n\n  const dataSource = useMemo(() => {\n    return dataSourceProp ?? new VuuDataSource({ columns, table });\n  }, [VuuDataSource, columns, dataSourceProp, table]);\n\n  const editTracker = useMemo(() => new EditTracker(), []);\n\n  useMemo(() => {\n    if (dataSource) {\n      editTracker.dataSource = dataSource;\n    }\n  }, [dataSource, editTracker]);\n\n  const handleCancel = useCallback(() => {\n    // editTracker.dataSource = dataSource;\n    editTracker.cancelChanges();\n    onCancel();\n    setSessionDataSource(undefined);\n    dataSource.resume?.();\n  }, [dataSource, editTracker, onCancel]);\n\n  const handleSave = useCallback(async () => {\n    // editTracker.dataSource = dataSource;\n    const response = await editTracker.saveChanges();\n    if (isRpcSuccess(response)) {\n      onSave();\n      setSessionDataSource(undefined);\n      dataSource.resume?.();\n    }\n  }, [dataSource, editTracker, onSave]);\n\n  useMemo(async () => {\n    if (isEditMode) {\n      const sessionTable = await editTracker.enterEditMode();\n      if (sessionTable && dataSource.tableSchema) {\n        dataSource.suspend?.(false);\n        const sessionDataSource = new VuuDataSource({\n          columns: dataSource.columns,\n          table: sessionTable,\n          viewport: sessionTable.table,\n        });\n        setSessionDataSource(sessionDataSource);\n        editTracker.dataSource = sessionDataSource;\n      }\n    }\n  }, [VuuDataSource, dataSource, editTracker, isEditMode]);\n\n  return {\n    dataSource: sessionDataSource ?? dataSource,\n    editTracker,\n    onCancel: handleCancel,\n    onSave: handleSave,\n  };\n};\n"],"names":["useData","useState","useMemo","EditTracker","useCallback","isRpcSuccess","sessionDataSource"],"mappings":";;;;;;;AA0BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,UAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIA,oBAAQ,EAAA;AAClC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,eAEhD,KAAS,CAAA,CAAA;AAEX,EAAM,MAAA,UAAA,GAAaC,cAAQ,MAAM;AAC/B,IAAA,OAAO,kBAAkB,IAAI,aAAA,CAAc,EAAE,OAAA,EAAS,OAAO,CAAA;AAAA,KAC5D,CAAC,aAAA,EAAe,OAAS,EAAA,cAAA,EAAgB,KAAK,CAAC,CAAA;AAElD,EAAA,MAAM,cAAcA,aAAQ,CAAA,MAAM,IAAIC,uBAAY,EAAA,EAAG,EAAE,CAAA;AAEvD,EAAAD,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AAAA;AAC3B,GACC,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAM,MAAA,YAAA,GAAeE,kBAAY,MAAM;AAErC,IAAA,WAAA,CAAY,aAAc,EAAA;AAC1B,IAAS,QAAA,EAAA;AACT,IAAA,oBAAA,CAAqB,KAAS,CAAA,CAAA;AAC9B,IAAA,UAAA,CAAW,MAAS,IAAA;AAAA,GACnB,EAAA,CAAC,UAAY,EAAA,WAAA,EAAa,QAAQ,CAAC,CAAA;AAEtC,EAAM,MAAA,UAAA,GAAaA,kBAAY,YAAY;AAEzC,IAAM,MAAA,QAAA,GAAW,MAAM,WAAA,CAAY,WAAY,EAAA;AAC/C,IAAI,IAAAC,iCAAA,CAAa,QAAQ,CAAG,EAAA;AAC1B,MAAO,MAAA,EAAA;AACP,MAAA,oBAAA,CAAqB,KAAS,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,MAAS,IAAA;AAAA;AACtB,GACC,EAAA,CAAC,UAAY,EAAA,WAAA,EAAa,MAAM,CAAC,CAAA;AAEpC,EAAAH,aAAA,CAAQ,YAAY;AAClB,IAAA,IAAI,UAAY,EAAA;AACd,MAAM,MAAA,YAAA,GAAe,MAAM,WAAA,CAAY,aAAc,EAAA;AACrD,MAAI,IAAA,YAAA,IAAgB,WAAW,WAAa,EAAA;AAC1C,QAAA,UAAA,CAAW,UAAU,KAAK,CAAA;AAC1B,QAAMI,MAAAA,kBAAAA,GAAoB,IAAI,aAAc,CAAA;AAAA,UAC1C,SAAS,UAAW,CAAA,OAAA;AAAA,UACpB,KAAO,EAAA,YAAA;AAAA,UACP,UAAU,YAAa,CAAA;AAAA,SACxB,CAAA;AACD,QAAA,oBAAA,CAAqBA,kBAAiB,CAAA;AACtC,QAAA,WAAA,CAAY,UAAaA,GAAAA,kBAAAA;AAAA;AAC3B;AACF,KACC,CAAC,aAAA,EAAe,UAAY,EAAA,WAAA,EAAa,UAAU,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,YAAY,iBAAqB,IAAA,UAAA;AAAA,IACjC,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAQ,EAAA;AAAA,GACV;AACF;;;;"}

package/cjs/packages/vuu-utils/src/index.js

@@ -12,6 +12,10 @@ var commonTypes = require('./common-types.js');
 var componentRegistry = require('./component-registry.js');
 var cookieUtils = require('./cookie-utils.js');
 var cssUtils = require('./css-utils.js');
+var EditButtons = require('./data-editing/EditButtons.js');
+var DataEditingProvider = require('./data-editing/DataEditingProvider.js');
+var EditTracker = require('./data-editing/EditTracker.js');
+var useEditableTable = require('./data-editing/useEditableTable.js');
 var dataUtils = require('./data-utils.js');
 var BaseDataSource = require('./datasource/BaseDataSource.js');
 var datasourceActionUtils = require('./datasource/datasource-action-utils.js');
@@ -70,6 +74,7 @@ var DataSourceProvider = require('./context-definitions/DataSourceProvider.js');
 var WorkspaceContext = require('./context-definitions/WorkspaceContext.js');
 var PageVisibilityObserver = require('./PageVisibilityObserver.js');
 var ShellContext = require('./ShellContext.js');
+var themeUtils = require('./theme-utils.js');
 
 
 
@@ -198,6 +203,11 @@ exports.registerConfigurationEditor = componentRegistry.registerConfigurationEdi
 exports.getCookieValue = cookieUtils.getCookieValue;
 exports.setCookieValue = cookieUtils.setCookieValue;
 exports.importCSS = cssUtils.importCSS;
+exports.EditButtons = EditButtons.EditButtons;
+exports.DataEditingProvider = DataEditingProvider.DataEditingProvider;
+exports.useEditTracker = DataEditingProvider.useEditTracker;
+exports.EditTracker = EditTracker.EditTracker;
+exports.useEditableTable = useEditableTable.useEditableTable;
 exports.DOWN1 = dataUtils.DOWN1;
 exports.DOWN2 = dataUtils.DOWN2;
 exports.UP1 = dataUtils.UP1;
@@ -449,4 +459,5 @@ exports.usePlaceholderJSON = WorkspaceContext.usePlaceholderJSON;
 exports.PageVisibilityObserver = PageVisibilityObserver.PageVisibilityObserver;
 exports.ShellContext = ShellContext.ShellContext;
 exports.useShellContext = ShellContext.useShellContext;
+exports.ThemeLoadChecker = themeUtils.ThemeLoadChecker;
 //# sourceMappingURL=index.js.map

package/cjs/packages/vuu-utils/src/index.js.map

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

package/cjs/packages/vuu-utils/src/theme-utils.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+
+const checkCssToken = (tokenName) => new Promise((resolve) => {
+  requestAnimationFrame(() => {
+    const saltSpacing100 = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue(tokenName);
+    resolve(saltSpacing100 !== "");
+  });
+});
+const ThemeLoadChecker = ({
+  children,
+  cssToken = "--salt-spacing-100",
+  theme
+}) => {
+  const [ready, setReady] = React.useState(false);
+  React.useMemo(async () => {
+    let ready2 = await checkCssToken(cssToken);
+    while (!ready2) {
+      ready2 = await checkCssToken(cssToken);
+    }
+    setReady(true);
+  }, [cssToken]);
+  if (theme === "no-theme") {
+    return children;
+  }
+  if (ready === false) {
+    return null;
+  }
+  return children;
+};
+
+exports.ThemeLoadChecker = ThemeLoadChecker;
+//# sourceMappingURL=theme-utils.js.map

package/cjs/packages/vuu-utils/src/theme-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-utils.js","sources":["../../../../../../packages/vuu-utils/src/theme-utils.ts"],"sourcesContent":["import { ReactNode, useMemo, useState } from \"react\";\n\nconst checkCssToken = (tokenName: string): Promise<boolean> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const saltSpacing100 = getComputedStyle(\n        document.documentElement,\n      ).getPropertyValue(tokenName);\n      resolve(saltSpacing100 !== \"\");\n    });\n  });\n\n/**\n * Checks that a theme is loaded by making sure a known css variable\n * returns a value. Not normally needed except for cases where a theme\n * is loaded dynamically on startup and there may be components that\n * may fail if theme is not in place (eg component that rely on taking dom\n * measurements).\n * Used by Showcase.\n */\nexport const ThemeLoadChecker = ({\n  children,\n  cssToken = \"--salt-spacing-100\",\n  theme,\n}: {\n  children: ReactNode;\n  cssToken?: string;\n  theme: string;\n}) => {\n  const [ready, setReady] = useState(false);\n\n  useMemo(async () => {\n    let ready = await checkCssToken(cssToken);\n    while (!ready) {\n      ready = await checkCssToken(cssToken);\n    }\n    setReady(true);\n  }, [cssToken]);\n\n  if (theme === \"no-theme\") {\n    return children;\n  }\n\n  if (ready === false) {\n    return null;\n  }\n\n  return children;\n};\n"],"names":["useState","useMemo","ready"],"mappings":";;;;AAEA,MAAM,gBAAgB,CAAC,SAAA,KACrB,IAAI,OAAA,CAAQ,CAAC,OAAY,KAAA;AACvB,EAAA,qBAAA,CAAsB,MAAM;AAC1B,IAAA,MAAM,cAAiB,GAAA,gBAAA;AAAA,MACrB,QAAS,CAAA;AAAA,KACX,CAAE,iBAAiB,SAAS,CAAA;AAC5B,IAAA,OAAA,CAAQ,mBAAmB,EAAE,CAAA;AAAA,GAC9B,CAAA;AACH,CAAC,CAAA;AAUI,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,QAAW,GAAA,oBAAA;AAAA,EACX;AACF,CAIM,KAAA;AACJ,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,KAAK,CAAA;AAExC,EAAAC,aAAA,CAAQ,YAAY;AAClB,IAAIC,IAAAA,MAAAA,GAAQ,MAAM,aAAA,CAAc,QAAQ,CAAA;AACxC,IAAA,OAAO,CAACA,MAAO,EAAA;AACb,MAAAA,MAAAA,GAAQ,MAAM,aAAA,CAAc,QAAQ,CAAA;AAAA;AAEtC,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,UAAU,UAAY,EAAA;AACxB,IAAO,OAAA,QAAA;AAAA;AAGT,EAAA,IAAI,UAAU,KAAO,EAAA;AACnB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,QAAA;AACT;;;;"}

package/cjs/packages/vuu-utils/src/url-utils.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const getUrlParameter = (paramName, defaultValue) => {
+function getUrlParameter(paramName, defaultValue) {
   const url = new URL(document.location.href);
   const parameter = url.searchParams.get(paramName);
   if (parameter) {
@@ -13,7 +13,7 @@ const getUrlParameter = (paramName, defaultValue) => {
     return result[1];
   }
   return defaultValue;
-};
+}
 const hasUrlParameter = (paramName) => new URL(document.location.href).searchParams.has(paramName);
 
 exports.getUrlParameter = getUrlParameter;

package/cjs/packages/vuu-utils/src/url-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"url-utils.js","sources":["../../../../../../packages/vuu-utils/src/url-utils.ts"],"sourcesContent":["export const getUrlParameter = (paramName: string, defaultValue?: string) => {\n  const url = new URL(document.location.href);\n  const parameter = url.searchParams.get(paramName);\n  if (parameter) {\n    return parameter;\n  }\n  const hashParams = url.hash;\n  const regex = new RegExp(`${paramName}=([a-zA-Z]*)`);\n  const result = regex.exec(hashParams);\n  if (result) {\n    return result[1];\n  }\n  return defaultValue;\n};\n\nexport const hasUrlParameter = (paramName: string) =>\n  new URL(document.location.href).searchParams.has(paramName);\n"],"names":[],"mappings":";;AAAa,MAAA,eAAA,GAAkB,CAAC,SAAA,EAAmB,YAA0B,KAAA;AAC3E,EAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,QAAA,CAAS,SAAS,IAAI,CAAA;AAC1C,EAAA,MAAM,SAAY,GAAA,GAAA,CAAI,YAAa,CAAA,GAAA,CAAI,SAAS,CAAA;AAChD,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA;AAAA;AAET,EAAA,MAAM,aAAa,GAAI,CAAA,IAAA;AACvB,EAAA,MAAM,KAAQ,GAAA,IAAI,MAAO,CAAA,CAAA,EAAG,SAAS,CAAc,YAAA,CAAA,CAAA;AACnD,EAAM,MAAA,MAAA,GAAS,KAAM,CAAA,IAAA,CAAK,UAAU,CAAA;AACpC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAA,OAAO,OAAO,CAAC,CAAA;AAAA;AAEjB,EAAO,OAAA,YAAA;AACT;AAEa,MAAA,eAAA,GAAkB,CAAC,SAAA,KAC9B,IAAI,GAAA,CAAI,QAAS,CAAA,QAAA,CAAS,IAAI,CAAA,CAAE,YAAa,CAAA,GAAA,CAAI,SAAS;;;;;"}
+{"version":3,"file":"url-utils.js","sources":["../../../../../../packages/vuu-utils/src/url-utils.ts"],"sourcesContent":["export function getUrlParameter(paramName: string): string | undefined;\nexport function getUrlParameter(\n  paramName: string,\n  defaultValue: string,\n): string;\nexport function getUrlParameter(paramName: string, defaultValue?: string) {\n  const url = new URL(document.location.href);\n  const parameter = url.searchParams.get(paramName);\n  if (parameter) {\n    return parameter;\n  }\n  const hashParams = url.hash;\n  const regex = new RegExp(`${paramName}=([a-zA-Z]*)`);\n  const result = regex.exec(hashParams);\n  if (result) {\n    return result[1];\n  }\n  return defaultValue;\n}\n\nexport const hasUrlParameter = (paramName: string) =>\n  new URL(document.location.href).searchParams.has(paramName);\n"],"names":[],"mappings":";;AAKgB,SAAA,eAAA,CAAgB,WAAmB,YAAuB,EAAA;AACxE,EAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,QAAA,CAAS,SAAS,IAAI,CAAA;AAC1C,EAAA,MAAM,SAAY,GAAA,GAAA,CAAI,YAAa,CAAA,GAAA,CAAI,SAAS,CAAA;AAChD,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA;AAAA;AAET,EAAA,MAAM,aAAa,GAAI,CAAA,IAAA;AACvB,EAAA,MAAM,KAAQ,GAAA,IAAI,MAAO,CAAA,CAAA,EAAG,SAAS,CAAc,YAAA,CAAA,CAAA;AACnD,EAAM,MAAA,MAAA,GAAS,KAAM,CAAA,IAAA,CAAK,UAAU,CAAA;AACpC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAA,OAAO,OAAO,CAAC,CAAA;AAAA;AAEjB,EAAO,OAAA,YAAA;AACT;AAEa,MAAA,eAAA,GAAkB,CAAC,SAAA,KAC9B,IAAI,GAAA,CAAI,QAAS,CAAA,QAAA,CAAS,IAAI,CAAA,CAAE,YAAa,CAAA,GAAA,CAAI,SAAS;;;;;"}