@vuu-ui/vuu-table-extras 0.8.82 → 0.8.83

package/cjs/cell-renderers/background-cell/BackgroundCell.js

@@ -27,42 +27,39 @@ const getFlashStyle = (colType) => {
   }
   return FlashStyle.BackgroundOnly;
 };
-const BackgroundCell = react.memo(
-  function BackgroundCell2({
-    column,
-    columnMap,
-    row
-  }) {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "vuu-background-cell",
-      css: BackgroundCell$1,
-      window: targetWindow
-    });
-    styles.useComponentCssInjection({
-      testId: "vuu-background-keyframes",
-      css: BackgroundKeyframes,
-      window: targetWindow
-    });
-    const { name, type, valueFormatter } = column;
-    const dataIdx = columnMap[name];
-    const value = row[dataIdx];
-    const flashStyle = getFlashStyle(type);
-    const direction = useDirection.useDirection(row[KEY], value, column);
-    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === vuuUtils.UP1 || direction === vuuUtils.UP2 ? CHAR_ARROW_UP : direction === vuuUtils.DOWN1 || direction === vuuUtils.DOWN2 ? CHAR_ARROW_DOWN : null : null;
-    const dirClass = direction ? ` ` + direction : "";
-    const className = cx(classBase, dirClass, {
-      [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
-      [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
-      [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, tabIndex: -1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-arrow`, children: arrow }),
-      valueFormatter(row[dataIdx])
-    ] });
-  },
-  vuuUtils.dataAndColumnUnchanged
-);
+const BackgroundCell = react.memo(function BackgroundCell2({
+  column,
+  columnMap,
+  row
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-background-cell",
+    css: BackgroundCell$1,
+    window: targetWindow
+  });
+  styles.useComponentCssInjection({
+    testId: "vuu-background-keyframes",
+    css: BackgroundKeyframes,
+    window: targetWindow
+  });
+  const { name, type, valueFormatter } = column;
+  const dataIdx = columnMap[name];
+  const value = row[dataIdx];
+  const flashStyle = getFlashStyle(type);
+  const direction = useDirection.useDirection(row[KEY], value, column);
+  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === vuuUtils.UP1 || direction === vuuUtils.UP2 ? CHAR_ARROW_UP : direction === vuuUtils.DOWN1 || direction === vuuUtils.DOWN2 ? CHAR_ARROW_DOWN : null : null;
+  const dirClass = direction ? ` ` + direction : "";
+  const className = cx(classBase, dirClass, {
+    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
+    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
+    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-arrow`, children: arrow }),
+    valueFormatter(row[dataIdx])
+  ] });
+}, vuuUtils.dataAndColumnUnchanged);
 vuuUtils.registerComponent(
   "vuu.price-move-background",
   BackgroundCell,

package/cjs/cell-renderers/background-cell/BackgroundCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { ColumnType, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataAndColumnUnchanged,\n  DOWN1,\n  DOWN2,\n  isTypeDescriptor,\n  metadataKeys,\n  registerComponent,\n  UP1,\n  UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n  ArrowOnly: \"arrow\",\n  BackgroundOnly: \"bg-only\",\n  ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: ColumnType) => {\n  if (isTypeDescriptor(colType) && colType.renderer) {\n    if (\"flashStyle\" in colType.renderer) {\n      return colType.renderer[\"flashStyle\"];\n    }\n  }\n  return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n  column,\n  columnMap,\n  row,\n}: TableCellProps) {\n  //TODO what about click handling\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell\",\n    css: backgroundCellCss,\n    window: targetWindow,\n  });\n  useComponentCssInjection({\n    testId: \"vuu-background-keyframes\",\n    css: backgroundKeyFramesCss,\n    window: targetWindow,\n  });\n\n  const { name, type, valueFormatter } = column;\n  const dataIdx = columnMap[name];\n  const value = row[dataIdx];\n  const flashStyle = getFlashStyle(type);\n  const direction = useDirection(row[KEY], value, column);\n  const arrow =\n    flashStyle === FlashStyle.ArrowOnly ||\n    flashStyle === FlashStyle.ArrowBackground\n      ? direction === UP1 || direction === UP2\n        ? CHAR_ARROW_UP\n        : direction === DOWN1 || direction === DOWN2\n        ? CHAR_ARROW_DOWN\n        : null\n      : null;\n\n  const dirClass = direction ? ` ` + direction : \"\";\n\n  const className = cx(classBase, dirClass, {\n    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n  });\n\n  return (\n    <div className={className} tabIndex={-1}>\n      <div className={`${classBase}-arrow`}>{arrow}</div>\n      {valueFormatter(row[dataIdx])}\n    </div>\n  );\n},\ndataAndColumnUnchanged);\n\nregisterComponent(\n  \"vuu.price-move-background\",\n  BackgroundCell,\n  \"cell-renderer\",\n  {\n    description: \"Change background color of cell when value changes\",\n    configEditor: \"BackgroundCellConfigurationEditor\",\n    label: \"Background Flash\",\n    serverDataType: [\"long\", \"int\", \"double\"],\n  }\n);\n"],"names":["metadataKeys","isTypeDescriptor","memo","BackgroundCell","useWindow","useComponentCssInjection","backgroundCellCss","backgroundKeyFramesCss","useDirection","UP1","UP2","DOWN1","DOWN2","jsxs","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":"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"}
+{"version":3,"file":"BackgroundCell.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { ColumnType, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataAndColumnUnchanged,\n  DOWN1,\n  DOWN2,\n  isTypeDescriptor,\n  metadataKeys,\n  registerComponent,\n  UP1,\n  UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst { KEY } = metadataKeys;\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n  ArrowOnly: \"arrow\",\n  BackgroundOnly: \"bg-only\",\n  ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: ColumnType) => {\n  if (isTypeDescriptor(colType) && colType.renderer) {\n    if (\"flashStyle\" in colType.renderer) {\n      return colType.renderer[\"flashStyle\"];\n    }\n  }\n  return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n  column,\n  columnMap,\n  row,\n}: TableCellProps) {\n  //TODO what about click handling\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell\",\n    css: backgroundCellCss,\n    window: targetWindow,\n  });\n  useComponentCssInjection({\n    testId: \"vuu-background-keyframes\",\n    css: backgroundKeyFramesCss,\n    window: targetWindow,\n  });\n\n  const { name, type, valueFormatter } = column;\n  const dataIdx = columnMap[name];\n  const value = row[dataIdx];\n  const flashStyle = getFlashStyle(type);\n  const direction = useDirection(row[KEY], value, column);\n  const arrow =\n    flashStyle === FlashStyle.ArrowOnly ||\n    flashStyle === FlashStyle.ArrowBackground\n      ? direction === UP1 || direction === UP2\n        ? CHAR_ARROW_UP\n        : direction === DOWN1 || direction === DOWN2\n          ? CHAR_ARROW_DOWN\n          : null\n      : null;\n\n  const dirClass = direction ? ` ` + direction : \"\";\n\n  const className = cx(classBase, dirClass, {\n    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n  });\n\n  return (\n    <div className={className} tabIndex={-1}>\n      <div className={`${classBase}-arrow`}>{arrow}</div>\n      {valueFormatter(row[dataIdx])}\n    </div>\n  );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n  \"vuu.price-move-background\",\n  BackgroundCell,\n  \"cell-renderer\",\n  {\n    description: \"Change background color of cell when value changes\",\n    configEditor: \"BackgroundCellConfigurationEditor\",\n    label: \"Background Flash\",\n    serverDataType: [\"long\", \"int\", \"double\"],\n  },\n);\n"],"names":["metadataKeys","isTypeDescriptor","memo","BackgroundCell","useWindow","useComponentCssInjection","backgroundCellCss","backgroundKeyFramesCss","useDirection","UP1","UP2","DOWN1","DOWN2","jsxs","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,aAAA,GAAgB,MAAO,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAC/C,MAAM,eAAA,GAAkB,MAAO,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAEjD,MAAM,EAAE,KAAQ,GAAAA,qBAAA,CAAA;AAEhB,MAAM,SAAY,GAAA,mBAAA,CAAA;AAGlB,MAAM,UAAa,GAAA;AAAA,EACjB,SAAW,EAAA,OAAA;AAAA,EACX,cAAgB,EAAA,SAAA;AAAA,EAChB,eAAiB,EAAA,UAAA;AACnB,CAAA,CAAA;AAEA,MAAM,aAAA,GAAgB,CAAC,OAAyB,KAAA;AAC9C,EAAA,IAAIC,yBAAiB,CAAA,OAAO,CAAK,IAAA,OAAA,CAAQ,QAAU,EAAA;AACjD,IAAI,IAAA,YAAA,IAAgB,QAAQ,QAAU,EAAA;AACpC,MAAO,OAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,KACtC;AAAA,GACF;AACA,EAAA,OAAO,UAAW,CAAA,cAAA,CAAA;AACpB,CAAA,CAAA;AAEa,MAAA,cAAA,GAAiBC,UAAK,CAAA,SAASC,eAAe,CAAA;AAAA,EACzD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAAmB,EAAA;AAGjB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAyBD,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAE,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,IAAA,EAAM,IAAM,EAAA,cAAA,EAAmB,GAAA,MAAA,CAAA;AACvC,EAAM,MAAA,OAAA,GAAU,UAAU,IAAI,CAAA,CAAA;AAC9B,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA,CAAA;AACzB,EAAM,MAAA,UAAA,GAAa,cAAc,IAAI,CAAA,CAAA;AACrC,EAAA,MAAM,YAAYC,yBAAa,CAAA,GAAA,CAAI,GAAG,CAAA,EAAG,OAAO,MAAM,CAAA,CAAA;AACtD,EAAA,MAAM,QACJ,UAAe,KAAA,UAAA,CAAW,SAC1B,IAAA,UAAA,KAAe,WAAW,eACtB,GAAA,SAAA,KAAcC,YAAO,IAAA,SAAA,KAAcC,eACjC,aACA,GAAA,SAAA,KAAcC,kBAAS,SAAc,KAAAC,cAAA,GACnC,kBACA,IACJ,GAAA,IAAA,CAAA;AAEN,EAAM,MAAA,QAAA,GAAW,SAAY,GAAA,CAAA,CAAA,CAAA,GAAM,SAAY,GAAA,EAAA,CAAA;AAE/C,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,QAAU,EAAA;AAAA,IACxC,CAAC,CAAG,EAAA,SAAS,CAAiB,eAAA,CAAA,GAAG,eAAe,UAAW,CAAA,cAAA;AAAA,IAC3D,CAAC,CAAG,EAAA,SAAS,CAAY,UAAA,CAAA,GAAG,eAAe,UAAW,CAAA,SAAA;AAAA,IACtD,CAAC,CAAG,EAAA,SAAS,CAAkB,gBAAA,CAAA,GAAG,eAAe,UAAW,CAAA,eAAA;AAAA,GAC7D,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,QAAA,EAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,IAC5C,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AAAA,GAC9B,EAAA,CAAA,CAAA;AAEJ,CAAA,EAAGC,+BAAsB,EAAA;AAEzBC,0BAAA;AAAA,EACE,2BAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,oDAAA;AAAA,IACb,YAAc,EAAA,mCAAA;AAAA,IACd,KAAO,EAAA,kBAAA;AAAA,IACP,cAAgB,EAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,GAC1C;AACF,CAAA;;;;"}

package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ConfigurationEditorProps,\n  registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useState } from \"react\";\n\nimport backgroundCellConfigurationEditorCss from \"./BackgroundCellConfigurationEditor.css\";\n\nconst classBase = \"vuuBackgroundCellConfiguration\";\n\ntype FlashOption = {\n  label: string;\n  value: \"arrow\" | \"bg-only\" | \"arrow-bg\";\n};\n\nconst flashOptions: FlashOption[] = [\n  { label: \"Background Only\", value: \"bg-only\" },\n  { label: \"Background and Arrow\", value: \"arrow-bg\" },\n  { label: \"Arrow Only\", value: \"arrow\" },\n];\n\nconst [defaultFlashOption] = flashOptions;\n\nconst valueFromColumn = (column: ColumnDescriptorCustomRenderer) => {\n  const { flashStyle } = column.type.renderer;\n  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;\n};\n\nexport const BackgroundCellConfigurationEditor = ({\n  column,\n  onChangeRendering,\n}: ConfigurationEditorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell-configuration-editor\",\n    css: backgroundCellConfigurationEditorCss,\n    window: targetWindow,\n  });\n\n  console.log({ type: column.type });\n\n  const [flashStyle, setFlashStyle] = useState<FlashOption | undefined>(\n    valueFromColumn(column)\n  );\n  const handleSelectionChange = useCallback(\n    (_, [flashOption]) => {\n      setFlashStyle(flashOption);\n      const renderProps = column.type.renderer;\n      onChangeRendering({\n        ...renderProps,\n        flashStyle: flashOption?.value ?? defaultFlashOption.value,\n      });\n    },\n    [column.type, onChangeRendering]\n  );\n\n  return (\n    <FormField>\n      <FormFieldLabel>Flash Style</FormFieldLabel>\n      <Dropdown<FlashOption>\n        className={`${classBase}-flashStyle`}\n        onSelectionChange={handleSelectionChange}\n        selected={flashStyle ? [flashStyle] : []}\n        value={flashStyle?.label}\n      >\n        {flashOptions.map((flashOption, i) => (\n          <Option key={i} value={flashOption}>\n            {flashOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    </FormField>\n  );\n};\n\nregisterConfigurationEditor(\n  \"BackgroundCellConfigurationEditor\",\n  BackgroundCellConfigurationEditor\n);\n"],"names":["useWindow","useComponentCssInjection","backgroundCellConfigurationEditorCss","useState","useCallback","FormField","jsx","FormFieldLabel","Dropdown","Option","registerConfigurationEditor"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gCAAA,CAAA;AAOlB,MAAM,YAA8B,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,iBAAmB,EAAA,KAAA,EAAO,SAAU,EAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,sBAAwB,EAAA,KAAA,EAAO,UAAW,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,OAAQ,EAAA;AACxC,CAAA,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA,CAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA,CAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA,CAAA;AAC7D,CAAA,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA,iBAAA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAAC,mCAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAEjC,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAC,cAAA;AAAA,IAClC,gBAAgB,MAAM,CAAA;AAAA,GACxB,CAAA;AACA,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,CAAA,EAAG,CAAC,WAAW,CAAM,KAAA;AACpB,MAAA,aAAA,CAAc,WAAW,CAAA,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA,CAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA,KAAA;AAAA,OACtD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,uCACGC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3BD,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAAA,QACvC,OAAO,UAAY,EAAA,KAAA;AAAA,QAElB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,WAAA,EAAa,CAC9B,qBAAAF,cAAA,CAACG,WAAe,EAAA,EAAA,KAAA,EAAO,WACpB,EAAA,QAAA,EAAA,WAAA,CAAY,KADF,EAAA,EAAA,CAEb,CACD,CAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAC,oCAAA;AAAA,EACE,mCAAA;AAAA,EACA,iCAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ConfigurationEditorProps,\n  registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useState } from \"react\";\n\nimport backgroundCellConfigurationEditorCss from \"./BackgroundCellConfigurationEditor.css\";\n\nconst classBase = \"vuuBackgroundCellConfiguration\";\n\ntype FlashOption = {\n  label: string;\n  value: \"arrow\" | \"bg-only\" | \"arrow-bg\";\n};\n\nconst flashOptions: FlashOption[] = [\n  { label: \"Background Only\", value: \"bg-only\" },\n  { label: \"Background and Arrow\", value: \"arrow-bg\" },\n  { label: \"Arrow Only\", value: \"arrow\" },\n];\n\nconst [defaultFlashOption] = flashOptions;\n\nconst valueFromColumn = (column: ColumnDescriptorCustomRenderer) => {\n  const { flashStyle } = column.type.renderer;\n  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;\n};\n\nexport const BackgroundCellConfigurationEditor = ({\n  column,\n  onChangeRendering,\n}: ConfigurationEditorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell-configuration-editor\",\n    css: backgroundCellConfigurationEditorCss,\n    window: targetWindow,\n  });\n\n  console.log({ type: column.type });\n\n  const [flashStyle, setFlashStyle] = useState<FlashOption | undefined>(\n    valueFromColumn(column),\n  );\n  const handleSelectionChange = useCallback(\n    (_, [flashOption]) => {\n      setFlashStyle(flashOption);\n      const renderProps = column.type.renderer;\n      onChangeRendering({\n        ...renderProps,\n        flashStyle: flashOption?.value ?? defaultFlashOption.value,\n      });\n    },\n    [column.type, onChangeRendering],\n  );\n\n  return (\n    <FormField>\n      <FormFieldLabel>Flash Style</FormFieldLabel>\n      <Dropdown<FlashOption>\n        className={`${classBase}-flashStyle`}\n        onSelectionChange={handleSelectionChange}\n        selected={flashStyle ? [flashStyle] : []}\n        value={flashStyle?.label}\n      >\n        {flashOptions.map((flashOption, i) => (\n          <Option key={i} value={flashOption}>\n            {flashOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    </FormField>\n  );\n};\n\nregisterConfigurationEditor(\n  \"BackgroundCellConfigurationEditor\",\n  BackgroundCellConfigurationEditor,\n);\n"],"names":["useWindow","useComponentCssInjection","backgroundCellConfigurationEditorCss","useState","useCallback","FormField","jsx","FormFieldLabel","Dropdown","Option","registerConfigurationEditor"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gCAAA,CAAA;AAOlB,MAAM,YAA8B,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,iBAAmB,EAAA,KAAA,EAAO,SAAU,EAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,sBAAwB,EAAA,KAAA,EAAO,UAAW,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,OAAQ,EAAA;AACxC,CAAA,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA,CAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA,CAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA,CAAA;AAC7D,CAAA,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA,iBAAA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAAC,mCAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAEjC,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAC,cAAA;AAAA,IAClC,gBAAgB,MAAM,CAAA;AAAA,GACxB,CAAA;AACA,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,CAAA,EAAG,CAAC,WAAW,CAAM,KAAA;AACpB,MAAA,aAAA,CAAc,WAAW,CAAA,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA,CAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA,KAAA;AAAA,OACtD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,uCACGC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3BD,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAAA,QACvC,OAAO,UAAY,EAAA,KAAA;AAAA,QAElB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,WAAA,EAAa,CAC9B,qBAAAF,cAAA,CAACG,WAAe,EAAA,EAAA,KAAA,EAAO,WACpB,EAAA,QAAA,EAAA,WAAA,CAAY,KADF,EAAA,EAAA,CAEb,CACD,CAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAC,oCAAA;AAAA,EACE,mCAAA;AAAA,EACA,iCAAA;AACF,CAAA;;;;"}

package/cjs/cell-renderers/background-cell/useDirection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDirection.js","sources":["../../../src/cell-renderers/background-cell/useDirection.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getMovingValueDirection,\n  isTypeDescriptor,\n  isValidNumber,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { useEffect, useRef } from \"react\";\n\nconst INITIAL_VALUE = [undefined, undefined, undefined, undefined];\n\ntype State = [string, unknown, RuntimeColumnDescriptor, valueChangeDirection];\n\nexport function useDirection(\n  key: string,\n  value: unknown,\n  column: RuntimeColumnDescriptor\n) {\n  const ref = useRef<State>();\n  const [prevKey, prevValue, prevColumn, prevDirection] =\n    ref.current || INITIAL_VALUE;\n\n  const { type: dataType } = column;\n  const decimals = isTypeDescriptor(dataType)\n    ? dataType.formatting?.decimals\n    : undefined;\n\n  const direction =\n    key === prevKey &&\n    isValidNumber(value) &&\n    isValidNumber(prevValue) &&\n    column === prevColumn\n      ? getMovingValueDirection(value, prevDirection, prevValue, decimals)\n      : \"\";\n\n  useEffect(() => {\n    ref.current = [key, value, column, direction];\n  });\n\n  return direction;\n}\n"],"names":["useRef","isTypeDescriptor","isValidNumber","getMovingValueDirection","useEffect"],"mappings":";;;;;AASA,MAAM,aAAgB,GAAA,CAAC,KAAW,CAAA,EAAA,KAAA,CAAA,EAAW,QAAW,KAAS,CAAA,CAAA,CAAA;AAIjD,SAAA,YAAA,CACd,GACA,EAAA,KAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,MAAMA,YAAc,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,OAAS,EAAA,SAAA,EAAW,YAAY,aAAa,CAAA,GAClD,IAAI,OAAW,IAAA,aAAA,CAAA;AAEjB,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,EAAa,GAAA,MAAA,CAAA;AAC3B,EAAA,MAAM,WAAWC,yBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,YACJ,GAAQ,KAAA,OAAA,IACRC,sBAAc,CAAA,KAAK,KACnBA,sBAAc,CAAA,SAAS,CACvB,IAAA,MAAA,KAAW,aACPC,gCAAwB,CAAA,KAAA,EAAO,aAAe,EAAA,SAAA,EAAW,QAAQ,CACjE,GAAA,EAAA,CAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,SAAS,CAAA,CAAA;AAAA,GAC7C,CAAA,CAAA;AAED,EAAO,OAAA,SAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useDirection.js","sources":["../../../src/cell-renderers/background-cell/useDirection.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getMovingValueDirection,\n  isTypeDescriptor,\n  isValidNumber,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { useEffect, useRef } from \"react\";\n\nconst INITIAL_VALUE = [undefined, undefined, undefined, undefined];\n\ntype State = [string, unknown, RuntimeColumnDescriptor, valueChangeDirection];\n\nexport function useDirection(\n  key: string,\n  value: unknown,\n  column: RuntimeColumnDescriptor,\n) {\n  const ref = useRef<State>();\n  const [prevKey, prevValue, prevColumn, prevDirection] =\n    ref.current || INITIAL_VALUE;\n\n  const { type: dataType } = column;\n  const decimals = isTypeDescriptor(dataType)\n    ? dataType.formatting?.decimals\n    : undefined;\n\n  const direction =\n    key === prevKey &&\n    isValidNumber(value) &&\n    isValidNumber(prevValue) &&\n    column === prevColumn\n      ? getMovingValueDirection(value, prevDirection, prevValue, decimals)\n      : \"\";\n\n  useEffect(() => {\n    ref.current = [key, value, column, direction];\n  });\n\n  return direction;\n}\n"],"names":["useRef","isTypeDescriptor","isValidNumber","getMovingValueDirection","useEffect"],"mappings":";;;;;AASA,MAAM,aAAgB,GAAA,CAAC,KAAW,CAAA,EAAA,KAAA,CAAA,EAAW,QAAW,KAAS,CAAA,CAAA,CAAA;AAIjD,SAAA,YAAA,CACd,GACA,EAAA,KAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,MAAMA,YAAc,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,OAAS,EAAA,SAAA,EAAW,YAAY,aAAa,CAAA,GAClD,IAAI,OAAW,IAAA,aAAA,CAAA;AAEjB,EAAM,MAAA,EAAE,IAAM,EAAA,QAAA,EAAa,GAAA,MAAA,CAAA;AAC3B,EAAA,MAAM,WAAWC,yBAAiB,CAAA,QAAQ,CACtC,GAAA,QAAA,CAAS,YAAY,QACrB,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,YACJ,GAAQ,KAAA,OAAA,IACRC,sBAAc,CAAA,KAAK,KACnBA,sBAAc,CAAA,SAAS,CACvB,IAAA,MAAA,KAAW,aACPC,gCAAwB,CAAA,KAAA,EAAO,aAAe,EAAA,SAAA,EAAW,QAAQ,CACjE,GAAA,EAAA,CAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,GAAA,CAAI,OAAU,GAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,SAAS,CAAA,CAAA;AAAA,GAC7C,CAAA,CAAA;AAED,EAAO,OAAA,SAAA,CAAA;AACT;;;;"}

package/cjs/cell-renderers/dropdown-cell/DropdownCell.js

@@ -11,79 +11,76 @@ var react = require('react');
 var DropdownCell$1 = require('./DropdownCell.css.js');
 
 const classBase = "vuuTableDropdownCell";
-const DropdownCell = react.memo(
-  function DropdownCell2({
-    column,
-    columnMap,
-    onCommit = vuuUiControls.WarnCommit,
-    row
-  }) {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "vuu-dropdown-cell",
-      css: DropdownCell$1,
-      window: targetWindow
-    });
-    const [open, setOpen] = react.useState(false);
-    const dataIdx = columnMap[column.name];
-    const dataValue = row[dataIdx];
-    const { values } = vuuDataReact.useLookupValues(column, dataValue);
-    const valueRef = react.useRef();
-    react.useMemo(() => {
-      valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
-    }, [dataValue, values]);
-    const handleOpenChange = react.useCallback((isOpen) => {
-      console.log(`handleOpenChange ${isOpen}`);
-      if (isOpen === false) {
-        setOpen(false);
+const DropdownCell = react.memo(function DropdownCell2({
+  column,
+  columnMap,
+  onCommit = vuuUiControls.WarnCommit,
+  row
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-dropdown-cell",
+    css: DropdownCell$1,
+    window: targetWindow
+  });
+  const [open, setOpen] = react.useState(false);
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { values } = vuuDataReact.useLookupValues(column, dataValue);
+  const valueRef = react.useRef();
+  react.useMemo(() => {
+    valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
+  }, [dataValue, values]);
+  const handleOpenChange = react.useCallback((isOpen) => {
+    console.log(`handleOpenChange ${isOpen}`);
+    if (isOpen === false) {
+      setOpen(false);
+    }
+  }, []);
+  const handleSelectionChange = react.useCallback(
+    (evt, [selectedOption2]) => {
+      if (selectedOption2) {
+        onCommit(selectedOption2.value).then((response) => {
+          if (response === true && evt) {
+            vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
+          }
+        });
       }
-    }, []);
-    const handleSelectionChange = react.useCallback(
-      (evt, [selectedOption2]) => {
-        if (selectedOption2) {
-          onCommit(selectedOption2.value).then((response) => {
-            if (response === true && evt) {
-              vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
-            }
-          });
-        }
-      },
-      [onCommit]
-    );
-    const handleClick = react.useCallback(() => {
-      if (!open) {
+    },
+    [onCommit]
+  );
+  const handleClick = react.useCallback(() => {
+    if (!open) {
+      setOpen(true);
+    }
+  }, [open]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !open) {
+        e.preventDefault();
+        e.stopPropagation();
         setOpen(true);
       }
-    }, [open]);
-    const handleKeyDown = react.useCallback(
-      (e) => {
-        if (e.key === "Enter" && !open) {
-          e.preventDefault();
-          e.stopPropagation();
-          setOpen(true);
-        }
-      },
-      [open]
-    );
-    const { current: selectedOption } = valueRef;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      core.Dropdown,
-      {
-        className: classBase,
-        "data-icon": "triangle-down",
-        onClick: handleClick,
-        onKeyDownCapture: handleKeyDown,
-        onOpenChange: handleOpenChange,
-        onSelectionChange: handleSelectionChange,
-        open,
-        selected: selectedOption ? [selectedOption] : [],
-        value: selectedOption?.label,
-        children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
-      }
-    );
-  },
-  vuuUtils.dataColumnAndKeyUnchanged
-);
+    },
+    [open]
+  );
+  const { current: selectedOption } = valueRef;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Dropdown,
+    {
+      className: classBase,
+      "data-icon": "triangle-down",
+      onClick: handleClick,
+      onKeyDownCapture: handleKeyDown,
+      onOpenChange: handleOpenChange,
+      onSelectionChange: handleSelectionChange,
+      open,
+      selected: selectedOption ? [selectedOption] : [],
+      value: selectedOption?.label,
+      children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
+    }
+  );
+}, vuuUtils.dataColumnAndKeyUnchanged);
 vuuUtils.registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
   userCanAssign: false
 });

package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  getSelectedOption,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-cell\",\n    css: dropdownCellCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as string | number;\n  const { values } = useLookupValues(column, dataValue);\n  const valueRef = useRef<ListOption>();\n\n  useMemo(() => {\n    valueRef.current = getSelectedOption(values, dataValue);\n  }, [dataValue, values]);\n\n  const handleOpenChange = useCallback((isOpen: boolean) => {\n    console.log(`handleOpenChange ${isOpen}`);\n    if (isOpen === false) {\n      setOpen(false);\n    }\n  }, []);\n\n  const handleSelectionChange = useCallback(\n    (evt, [selectedOption]) => {\n      if (selectedOption) {\n        // Note, we do not setState locally when a selection is made, we just send the update\n        // to the server. We rely on the update coming back in from a server response which\n        // we handle in the useMemo above. If we worry that server repsonses might be too slow\n        // we can extend this logic with some kind of pending update state.\n        onCommit(selectedOption.value as VuuColumnDataType).then((response) => {\n          if (response === true && evt) {\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        });\n      }\n    },\n    [onCommit]\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n    if (!open) {\n      setOpen(true);\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"Enter\" && !open) {\n        e.preventDefault();\n        e.stopPropagation();\n        setOpen(true);\n      }\n    },\n    [open]\n  );\n\n  const { current: selectedOption } = valueRef;\n  return (\n    <Dropdown<ListOption>\n      className={classBase}\n      data-icon=\"triangle-down\"\n      onClick={handleClick}\n      onKeyDownCapture={handleKeyDown}\n      onOpenChange={handleOpenChange}\n      onSelectionChange={handleSelectionChange}\n      open={open}\n      selected={selectedOption ? [selectedOption] : []}\n      value={selectedOption?.label}\n    >\n      {values.map((listOption, i) => (\n        <Option key={i} value={listOption}>\n          {listOption.label}\n        </Option>\n      ))}\n    </Dropdown>\n  );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","WarnCommit","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;;AAyBA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAEX,MAAM,YAAe,GAAAA,UAAA;AAAA,EAAK,SAASC,aAAa,CAAA;AAAA,IACrD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAAC,wBAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,IAAA,MAAM,EAAE,MAAA,EAAW,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACpD,IAAA,MAAM,WAAWC,YAAmB,EAAA,CAAA;AAEpC,IAAAC,aAAA,CAAQ,MAAM;AACZ,MAAS,QAAA,CAAA,OAAA,GAAUC,0BAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA,CAAA;AAAA,KACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA,CAAA;AAEtB,IAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA,CAAA;AACxC,MAAA,IAAI,WAAW,KAAO,EAAA;AACpB,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,OACf;AAAA,KACF,EAAG,EAAE,CAAA,CAAA;AAEL,IAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,MAC5B,CAAC,GAAA,EAAK,CAACC,eAAc,CAAM,KAAA;AACzB,QAAA,IAAIA,eAAgB,EAAA;AAKlB,UAAA,QAAA,CAASA,eAAe,CAAA,KAA0B,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACrE,YAAI,IAAA,QAAA,KAAa,QAAQ,GAAK,EAAA;AAC5B,cAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,aAC7D;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcF,kBAAkD,MAAM;AAC1E,MAAA,IAAI,CAAC,IAAM,EAAA;AACT,QAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,OACd;AAAA,KACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,IAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,MACpB,CAAC,CAAM,KAAA;AACL,QAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAC,IAAM,EAAA;AAC9B,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,UAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,CAAC,IAAI,CAAA;AAAA,KACP,CAAA;AAEA,IAAM,MAAA,EAAE,OAAS,EAAA,cAAA,EAAmB,GAAA,QAAA,CAAA;AACpC,IACE,uBAAAG,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,SAAA;AAAA,QACX,WAAU,EAAA,eAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,gBAAkB,EAAA,aAAA;AAAA,QAClB,YAAc,EAAA,gBAAA;AAAA,QACd,iBAAmB,EAAA,qBAAA;AAAA,QACnB,IAAA;AAAA,QACA,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,QAC/C,OAAO,cAAgB,EAAA,KAAA;AAAA,QAEtB,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CACvB,qBAAAD,cAAA,CAACE,WAAe,EAAA,EAAA,KAAA,EAAO,UACpB,EAAA,QAAA,EAAA,UAAA,CAAW,KADD,EAAA,EAAA,CAEb,CACD,CAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAAA,EACAC,kCAAA;AAAyB,EAAA;AAEzBC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"DropdownCell.js","sources":["../../../src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  getSelectedOption,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-cell\",\n    css: dropdownCellCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as string | number;\n  const { values } = useLookupValues(column, dataValue);\n  const valueRef = useRef<ListOption>();\n\n  useMemo(() => {\n    valueRef.current = getSelectedOption(values, dataValue);\n  }, [dataValue, values]);\n\n  const handleOpenChange = useCallback((isOpen: boolean) => {\n    console.log(`handleOpenChange ${isOpen}`);\n    if (isOpen === false) {\n      setOpen(false);\n    }\n  }, []);\n\n  const handleSelectionChange = useCallback(\n    (evt, [selectedOption]) => {\n      if (selectedOption) {\n        // Note, we do not setState locally when a selection is made, we just send the update\n        // to the server. We rely on the update coming back in from a server response which\n        // we handle in the useMemo above. If we worry that server repsonses might be too slow\n        // we can extend this logic with some kind of pending update state.\n        onCommit(selectedOption.value as VuuColumnDataType).then((response) => {\n          if (response === true && evt) {\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        });\n      }\n    },\n    [onCommit],\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n    if (!open) {\n      setOpen(true);\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"Enter\" && !open) {\n        e.preventDefault();\n        e.stopPropagation();\n        setOpen(true);\n      }\n    },\n    [open],\n  );\n\n  const { current: selectedOption } = valueRef;\n  return (\n    <Dropdown<ListOption>\n      className={classBase}\n      data-icon=\"triangle-down\"\n      onClick={handleClick}\n      onKeyDownCapture={handleKeyDown}\n      onOpenChange={handleOpenChange}\n      onSelectionChange={handleSelectionChange}\n      open={open}\n      selected={selectedOption ? [selectedOption] : []}\n      value={selectedOption?.label}\n    >\n      {values.map((listOption, i) => (\n        <Option key={i} value={listOption}>\n          {listOption.label}\n        </Option>\n      ))}\n    </Dropdown>\n  );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","WarnCommit","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}

package/cjs/cell-renderers/lookup-cell/LookupCell.js

@@ -5,19 +5,16 @@ var vuuDataReact = require('@vuu-ui/vuu-data-react');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
 
-const LookupCell = react.memo(
-  function LookupCell2({
-    column,
-    columnMap,
-    row
-  }) {
-    const dataIdx = columnMap[column.name];
-    const dataValue = row[dataIdx];
-    const { initialValue: value } = vuuDataReact.useLookupValues(column, dataValue);
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value?.label });
-  },
-  vuuUtils.dataAndColumnUnchanged
-);
+const LookupCell = react.memo(function LookupCell2({
+  column,
+  columnMap,
+  row
+}) {
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { initialValue: value } = vuuDataReact.useLookupValues(column, dataValue);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value?.label });
+}, vuuUtils.dataAndColumnUnchanged);
 vuuUtils.registerComponent("lookup-cell", LookupCell, "cell-renderer", {
   userCanAssign: false
 });

package/cjs/cell-renderers/lookup-cell/LookupCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"LookupCell.js","sources":["../../../src/cell-renderers/lookup-cell/LookupCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { dataAndColumnUnchanged, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { memo } from \"react\";\n\nexport const LookupCell = memo(function LookupCell({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) {\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as string | number;\n  const { initialValue: value } = useLookupValues(column, dataValue);\n  return <span>{value?.label}</span>;\n},\ndataAndColumnUnchanged);\n\nregisterComponent(\"lookup-cell\", LookupCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","LookupCell","useLookupValues","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":";;;;;;;AAKO,MAAM,UAAa,GAAAA,UAAA;AAAA,EAAK,SAASC,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,GACyB,EAAA;AACzB,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,IAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAU,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACjE,IAAO,uBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,KAAA,EAAO,KAAM,EAAA,CAAA,CAAA;AAAA,GAC7B;AAAA,EACAC,+BAAA;AAAsB,EAAA;AAEtBC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"LookupCell.js","sources":["../../../src/cell-renderers/lookup-cell/LookupCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { dataAndColumnUnchanged, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { memo } from \"react\";\n\nexport const LookupCell = memo(function LookupCell({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) {\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as string | number;\n  const { initialValue: value } = useLookupValues(column, dataValue);\n  return <span>{value?.label}</span>;\n}, dataAndColumnUnchanged);\n\nregisterComponent(\"lookup-cell\", LookupCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["memo","LookupCell","useLookupValues","jsx","dataAndColumnUnchanged","registerComponent"],"mappings":";;;;;;;AAKa,MAAA,UAAA,GAAaA,UAAK,CAAA,SAASC,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAA2B,EAAA;AACzB,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAU,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA,CAAA;AACjE,EAAO,uBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,KAAA,EAAO,KAAM,EAAA,CAAA,CAAA;AAC7B,CAAA,EAAGC,+BAAsB,EAAA;AAEzBC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PctProgressCell.js","sources":["../../../src/cell-renderers/pct-progress-cell/PctProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport pctProgressCellCss from \"./PctProgressCell.css\";\n\nconst classBase = \"vuuPctProgressCell\";\n\nconst getPercentageValue = (value: number) => {\n  if (value >= 0 && value <= 1) {\n    return value * 100;\n  } else if (value > 2) {\n    return 0;\n  } else if (value > 1) {\n    return 100;\n  } else {\n    return 0;\n  }\n};\n\nexport const PctProgressCell = ({ column, columnMap, row }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-pct-progress-cell\",\n    css: pctProgressCellCss,\n    window: targetWindow,\n  });\n\n  const value = row[columnMap[column.name]] as number;\n  const percentageValue = getPercentageValue(value);\n  const className = cx(classBase, {});\n\n  return (\n    <div\n      className={cx(className, {\n        [`${classBase}-zero`]: percentageValue === 0,\n        [`${classBase}-complete`]: percentageValue >= 100,\n      })}\n      tabIndex={-1}\n    >\n      <span\n        className={`${classBase}-progressBar`}\n        style={{ \"--progress-bar-pct\": `${percentageValue}%` } as CSSProperties}\n      />\n      <span className={`${classBase}-text`}>{`${percentageValue.toFixed(\n        2\n      )} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.pct-progress\", PctProgressCell, \"cell-renderer\", {\n  description: \"Percentage formatter\",\n  label: \"Percentage formatter\",\n  serverDataType: \"double\",\n});\n"],"names":["useWindow","useComponentCssInjection","pctProgressCellCss","jsxs","jsx","registerComponent"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,kBAAA,GAAqB,CAAC,KAAkB,KAAA;AAC5C,EAAI,IAAA,KAAA,IAAS,CAAK,IAAA,KAAA,IAAS,CAAG,EAAA;AAC5B,IAAA,OAAO,KAAQ,GAAA,GAAA,CAAA;AAAA,GACjB,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,GAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,kBAAkB,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AAC7E,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,SAAU,CAAA,MAAA,CAAO,IAAI,CAAC,CAAA,CAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,mBAAmB,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,EAAE,CAAA,CAAA;AAElC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO,GAAG,eAAoB,KAAA,CAAA;AAAA,QAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAmB,IAAA,GAAA;AAAA,OAC/C,CAAA;AAAA,MACD,QAAU,EAAA,CAAA,CAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,KAAO,EAAA,EAAE,oBAAsB,EAAA,CAAA,EAAG,eAAe,CAAI,CAAA,CAAA,EAAA;AAAA,WAAA;AAAA,SACvD;AAAA,uCACC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAU,aAAG,eAAgB,CAAA,OAAA;AAAA,UACxD,CAAA;AAAA,SACD,CAAK,EAAA,CAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,kBAAA,EAAoB,iBAAiB,eAAiB,EAAA;AAAA,EACtE,WAAa,EAAA,sBAAA;AAAA,EACb,KAAO,EAAA,sBAAA;AAAA,EACP,cAAgB,EAAA,QAAA;AAClB,CAAC,CAAA;;;;"}
+{"version":3,"file":"PctProgressCell.js","sources":["../../../src/cell-renderers/pct-progress-cell/PctProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport pctProgressCellCss from \"./PctProgressCell.css\";\n\nconst classBase = \"vuuPctProgressCell\";\n\nconst getPercentageValue = (value: number) => {\n  if (value >= 0 && value <= 1) {\n    return value * 100;\n  } else if (value > 2) {\n    return 0;\n  } else if (value > 1) {\n    return 100;\n  } else {\n    return 0;\n  }\n};\n\nexport const PctProgressCell = ({ column, columnMap, row }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-pct-progress-cell\",\n    css: pctProgressCellCss,\n    window: targetWindow,\n  });\n\n  const value = row[columnMap[column.name]] as number;\n  const percentageValue = getPercentageValue(value);\n  const className = cx(classBase, {});\n\n  return (\n    <div\n      className={cx(className, {\n        [`${classBase}-zero`]: percentageValue === 0,\n        [`${classBase}-complete`]: percentageValue >= 100,\n      })}\n      tabIndex={-1}\n    >\n      <span\n        className={`${classBase}-progressBar`}\n        style={{ \"--progress-bar-pct\": `${percentageValue}%` } as CSSProperties}\n      />\n      <span className={`${classBase}-text`}>{`${percentageValue.toFixed(\n        2,\n      )} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.pct-progress\", PctProgressCell, \"cell-renderer\", {\n  description: \"Percentage formatter\",\n  label: \"Percentage formatter\",\n  serverDataType: \"double\",\n});\n"],"names":["useWindow","useComponentCssInjection","pctProgressCellCss","jsxs","jsx","registerComponent"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,kBAAA,GAAqB,CAAC,KAAkB,KAAA;AAC5C,EAAI,IAAA,KAAA,IAAS,CAAK,IAAA,KAAA,IAAS,CAAG,EAAA;AAC5B,IAAA,OAAO,KAAQ,GAAA,GAAA,CAAA;AAAA,GACjB,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,MAAA,IAAW,QAAQ,CAAG,EAAA;AACpB,IAAO,OAAA,GAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,kBAAkB,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AAC7E,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,SAAU,CAAA,MAAA,CAAO,IAAI,CAAC,CAAA,CAAA;AACxC,EAAM,MAAA,eAAA,GAAkB,mBAAmB,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,EAAE,CAAA,CAAA;AAElC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO,GAAG,eAAoB,KAAA,CAAA;AAAA,QAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAmB,IAAA,GAAA;AAAA,OAC/C,CAAA;AAAA,MACD,QAAU,EAAA,CAAA,CAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,KAAO,EAAA,EAAE,oBAAsB,EAAA,CAAA,EAAG,eAAe,CAAI,CAAA,CAAA,EAAA;AAAA,WAAA;AAAA,SACvD;AAAA,uCACC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAU,aAAG,eAAgB,CAAA,OAAA;AAAA,UACxD,CAAA;AAAA,SACD,CAAK,EAAA,CAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,kBAAA,EAAoB,iBAAiB,eAAiB,EAAA;AAAA,EACtE,WAAa,EAAA,sBAAA;AAAA,EACb,KAAO,EAAA,sBAAA;AAAA,EACP,cAAgB,EAAA,QAAA;AAClB,CAAC,CAAA;;;;"}

package/cjs/cell-renderers/progress-cell/ProgressCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCell.js","sources":["../../../src/cell-renderers/progress-cell/ProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n  isValidNumber,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport progressCellCss from \"./ProgressCell.css\";\n\nconst classBase = \"vuuProgressCell\";\n\nconst ProgressCell = ({ column, columnMap, row }: TableCellProps) => {\n  //TODO what about click handling\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-progress-cell\",\n    css: progressCellCss,\n    window: targetWindow,\n  });\n\n  const { name, type } = column;\n  const value = row[columnMap[name]];\n  let showProgress = false;\n  let percentage = 0;\n\n  if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n    const { associatedField } = type.renderer;\n    if (associatedField) {\n      const associatedValue = row[columnMap[associatedField]];\n      if (isValidNumber(value) && isValidNumber(associatedValue)) {\n        percentage = Math.min(Math.round((value / associatedValue) * 100), 100);\n        percentage = Math.min(Math.round((value / associatedValue) * 100), 100);\n        showProgress = isFinite(percentage);\n      } else {\n        // Temp workaround for bug on server that sends aggregated values as strings\n        const floatValue = parseFloat(value as string);\n        if (Number.isFinite(floatValue)) {\n          const floatOtherValue = parseFloat(associatedValue as string);\n          if (Number.isFinite(floatOtherValue)) {\n            percentage = Math.min(\n              Math.round((floatValue / floatOtherValue) * 100),\n              100\n            );\n            showProgress = isFinite(percentage);\n          }\n        }\n      }\n    } else {\n      throw Error(\"ProgressCell associatedField is required to render\");\n    }\n  }\n\n  const className = cx(classBase, {});\n\n  return (\n    <div className={className} tabIndex={-1}>\n      {showProgress ? (\n        <span className={`${classBase}-track`}>\n          <span className={`${classBase}-bg`} />\n          <span\n            className={`${classBase}-bar`}\n            style={\n              { \"--progress-bar-pct\": `-${100 - percentage}%` } as CSSProperties\n            }\n          />\n        </span>\n      ) : null}\n      <span className={`${classBase}-text`}>{`${percentage} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.progress\", ProgressCell, \"cell-renderer\", {\n  description: \"Progress formatter\",\n  label: \"Progress formatter\",\n  serverDataType: [\"long\", \"int\", \"double\"],\n  // Not until we provide settings for associaetd field\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","progressCellCss","isTypeDescriptor","isColumnTypeRenderer","isValidNumber","jsxs","jsx","registerComponent"],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,eAAe,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AAEnE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,IAAM,EAAA,IAAA,EAAS,GAAA,MAAA,CAAA;AACvB,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,SAAU,CAAA,IAAI,CAAC,CAAA,CAAA;AACjC,EAAA,IAAI,YAAe,GAAA,KAAA,CAAA;AACnB,EAAA,IAAI,UAAa,GAAA,CAAA,CAAA;AAEjB,EAAA,IAAIC,0BAAiB,IAAI,CAAA,IAAKC,6BAAqB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AACjE,IAAM,MAAA,EAAE,eAAgB,EAAA,GAAI,IAAK,CAAA,QAAA,CAAA;AACjC,IAAA,IAAI,eAAiB,EAAA;AACnB,MAAA,MAAM,eAAkB,GAAA,GAAA,CAAI,SAAU,CAAA,eAAe,CAAC,CAAA,CAAA;AACtD,MAAA,IAAIC,sBAAc,CAAA,KAAK,CAAK,IAAAA,sBAAA,CAAc,eAAe,CAAG,EAAA;AAC1D,QAAa,UAAA,GAAA,IAAA,CAAK,IAAI,IAAK,CAAA,KAAA,CAAO,QAAQ,eAAmB,GAAA,GAAG,GAAG,GAAG,CAAA,CAAA;AACtE,QAAa,UAAA,GAAA,IAAA,CAAK,IAAI,IAAK,CAAA,KAAA,CAAO,QAAQ,eAAmB,GAAA,GAAG,GAAG,GAAG,CAAA,CAAA;AACtE,QAAA,YAAA,GAAe,SAAS,UAAU,CAAA,CAAA;AAAA,OAC7B,MAAA;AAEL,QAAM,MAAA,UAAA,GAAa,WAAW,KAAe,CAAA,CAAA;AAC7C,QAAI,IAAA,MAAA,CAAO,QAAS,CAAA,UAAU,CAAG,EAAA;AAC/B,UAAM,MAAA,eAAA,GAAkB,WAAW,eAAyB,CAAA,CAAA;AAC5D,UAAI,IAAA,MAAA,CAAO,QAAS,CAAA,eAAe,CAAG,EAAA;AACpC,YAAA,UAAA,GAAa,IAAK,CAAA,GAAA;AAAA,cAChB,IAAK,CAAA,KAAA,CAAO,UAAa,GAAA,eAAA,GAAmB,GAAG,CAAA;AAAA,cAC/C,GAAA;AAAA,aACF,CAAA;AACA,YAAA,YAAA,GAAe,SAAS,UAAU,CAAA,CAAA;AAAA,WACpC;AAAA,SACF;AAAA,OACF;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,oDAAoD,CAAA,CAAA;AAAA,KAClE;AAAA,GACF;AAEA,EAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,EAAE,CAAA,CAAA;AAElC,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,QAAA,EAAU,CAClC,CAAA,EAAA,QAAA,EAAA;AAAA,IAAA,YAAA,mBACEA,eAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC3B,MAAA,CAAA,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAO,GAAA,CAAA,EAAA,CAAA;AAAA,sBACpCA,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,IAAA,CAAA;AAAA,UACvB,OACE,EAAE,oBAAA,EAAsB,CAAI,CAAA,EAAA,GAAA,GAAM,UAAU,CAAI,CAAA,CAAA,EAAA;AAAA,SAAA;AAAA,OAEpD;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJA,cAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,KAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAG,UAAU,CAAK,EAAA,CAAA,EAAA,CAAA;AAAA,GAC3D,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEAC,0BAAkB,CAAA,cAAA,EAAgB,cAAc,eAAiB,EAAA;AAAA,EAC/D,WAAa,EAAA,oBAAA;AAAA,EACb,KAAO,EAAA,oBAAA;AAAA,EACP,cAAgB,EAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,QAAQ,CAAA;AAAA;AAAA,EAExC,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;"}
+{"version":3,"file":"ProgressCell.js","sources":["../../../src/cell-renderers/progress-cell/ProgressCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n  isValidNumber,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties } from \"react\";\n\nimport progressCellCss from \"./ProgressCell.css\";\n\nconst classBase = \"vuuProgressCell\";\n\nconst ProgressCell = ({ column, columnMap, row }: TableCellProps) => {\n  //TODO what about click handling\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-progress-cell\",\n    css: progressCellCss,\n    window: targetWindow,\n  });\n\n  const { name, type } = column;\n  const value = row[columnMap[name]];\n  let showProgress = false;\n  let percentage = 0;\n\n  if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n    const { associatedField } = type.renderer;\n    if (associatedField) {\n      const associatedValue = row[columnMap[associatedField]];\n      if (isValidNumber(value) && isValidNumber(associatedValue)) {\n        percentage = Math.min(Math.round((value / associatedValue) * 100), 100);\n        percentage = Math.min(Math.round((value / associatedValue) * 100), 100);\n        showProgress = isFinite(percentage);\n      } else {\n        // Temp workaround for bug on server that sends aggregated values as strings\n        const floatValue = parseFloat(value as string);\n        if (Number.isFinite(floatValue)) {\n          const floatOtherValue = parseFloat(associatedValue as string);\n          if (Number.isFinite(floatOtherValue)) {\n            percentage = Math.min(\n              Math.round((floatValue / floatOtherValue) * 100),\n              100,\n            );\n            showProgress = isFinite(percentage);\n          }\n        }\n      }\n    } else {\n      throw Error(\"ProgressCell associatedField is required to render\");\n    }\n  }\n\n  const className = cx(classBase, {});\n\n  return (\n    <div className={className} tabIndex={-1}>\n      {showProgress ? (\n        <span className={`${classBase}-track`}>\n          <span className={`${classBase}-bg`} />\n          <span\n            className={`${classBase}-bar`}\n            style={\n              { \"--progress-bar-pct\": `-${100 - percentage}%` } as CSSProperties\n            }\n          />\n        </span>\n      ) : null}\n      <span className={`${classBase}-text`}>{`${percentage} %`}</span>\n    </div>\n  );\n};\n\nregisterComponent(\"vuu.progress\", ProgressCell, \"cell-renderer\", {\n  description: \"Progress formatter\",\n  label: \"Progress formatter\",\n  serverDataType: [\"long\", \"int\", \"double\"],\n  // Not until we provide settings for associaetd field\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","progressCellCss","isTypeDescriptor","isColumnTypeRenderer","isValidNumber","jsxs","jsx","registerComponent"],"mappings":"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"}

package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js

@@ -21,7 +21,6 @@ const columnExpressionLanguage = vuuCodemirror.LRLanguage.define({
 const columnExpressionLanguageSupport = () => {
   return new vuuCodemirror.LanguageSupport(
     columnExpressionLanguage
-    /*, [exampleCompletion]*/
   );
 };
 

package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnExpressionLanguage.js","sources":["../../../src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts"],"sourcesContent":["import {\n  LanguageSupport,\n  LRLanguage,\n  styleTags,\n  tags as tag,\n} from \"@vuu-ui/vuu-codemirror\";\nimport { parser } from \"./generated/column-parser\";\n\nconst columnExpressionLanguage = LRLanguage.define({\n  name: \"VuuColumnExpression\",\n  parser: parser.configure({\n    props: [\n      styleTags({\n        Column: tag.attributeValue,\n        Function: tag.variableName,\n        String: tag.string,\n        Or: tag.emphasis,\n        Operator: tag.operator,\n      }),\n    ],\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  }) as any,\n});\n\nexport const columnExpressionLanguageSupport = () => {\n  return new LanguageSupport(\n    columnExpressionLanguage /*, [exampleCompletion]*/\n  );\n};\n"],"names":["LRLanguage","parser","styleTags","tag","LanguageSupport"],"mappings":";;;;;AAQA,MAAM,wBAAA,GAA2BA,yBAAW,MAAO,CAAA;AAAA,EACjD,IAAM,EAAA,qBAAA;AAAA,EACN,MAAA,EAAQC,oBAAO,SAAU,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACLC,uBAAU,CAAA;AAAA,QACR,QAAQC,kBAAI,CAAA,cAAA;AAAA,QACZ,UAAUA,kBAAI,CAAA,YAAA;AAAA,QACd,QAAQA,kBAAI,CAAA,MAAA;AAAA,QACZ,IAAIA,kBAAI,CAAA,QAAA;AAAA,QACR,UAAUA,kBAAI,CAAA,QAAA;AAAA,OACf,CAAA;AAAA,KACH;AAAA;AAAA,GAED,CAAA;AACH,CAAC,CAAA,CAAA;AAEM,MAAM,kCAAkC,MAAM;AACnD,EAAA,OAAO,IAAIC,6BAAA;AAAA,IACT,wBAAA;AAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"ColumnExpressionLanguage.js","sources":["../../../src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts"],"sourcesContent":["import {\n  LanguageSupport,\n  LRLanguage,\n  styleTags,\n  tags as tag,\n} from \"@vuu-ui/vuu-codemirror\";\nimport { parser } from \"./generated/column-parser\";\n\nconst columnExpressionLanguage = LRLanguage.define({\n  name: \"VuuColumnExpression\",\n  parser: parser.configure({\n    props: [\n      styleTags({\n        Column: tag.attributeValue,\n        Function: tag.variableName,\n        String: tag.string,\n        Or: tag.emphasis,\n        Operator: tag.operator,\n      }),\n    ],\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  }) as any,\n});\n\nexport const columnExpressionLanguageSupport = () => {\n  return new LanguageSupport(\n    columnExpressionLanguage /*, [exampleCompletion]*/,\n  );\n};\n"],"names":["LRLanguage","parser","styleTags","tag","LanguageSupport"],"mappings":";;;;;AAQA,MAAM,wBAAA,GAA2BA,yBAAW,MAAO,CAAA;AAAA,EACjD,IAAM,EAAA,qBAAA;AAAA,EACN,MAAA,EAAQC,oBAAO,SAAU,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACLC,uBAAU,CAAA;AAAA,QACR,QAAQC,kBAAI,CAAA,cAAA;AAAA,QACZ,UAAUA,kBAAI,CAAA,YAAA;AAAA,QACd,QAAQA,kBAAI,CAAA,MAAA;AAAA,QACZ,IAAIA,kBAAI,CAAA,QAAA;AAAA,QACR,UAAUA,kBAAI,CAAA,QAAA;AAAA,OACf,CAAA;AAAA,KACH;AAAA;AAAA,GAED,CAAA;AACH,CAAC,CAAA,CAAA;AAEM,MAAM,kCAAkC,MAAM;AACnD,EAAA,OAAO,IAAIC,6BAAA;AAAA,IACT,wBAAA;AAAA,GACF,CAAA;AACF;;;;"}