@vuu-ui/vuu-table 0.0.26

package/esm/cell-renderers/toggle-cell/ToggleCell.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { CycleStateButton, WarnCommit } from '@vuu-ui/vuu-ui-controls';
+import { dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent, isTypeDescriptor, isValueListRenderer } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { memo, useCallback } from 'react';
+import toggleCellCss from './ToggleCell.css.js';
+
+const classBase = "vuuTableToggleCell";
+const getValueList = ({ name, type }) => {
+  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {
+    return type.renderer.values;
+  } else {
+    throw Error(
+      `useLookupValues column ${name} has not been configured with a values list`
+    );
+  }
+};
+const ToggleCell = memo(
+  function ToggleCell2({
+    column,
+    columnMap,
+    onCommit = WarnCommit,
+    row
+  }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-toggle-cell",
+      css: toggleCellCss,
+      window: targetWindow
+    });
+    const values = getValueList(column);
+    const dataIdx = columnMap[column.name];
+    const value = row[dataIdx];
+    const handleCommit = useCallback(
+      (evt, value2) => {
+        return onCommit(value2).then((response) => {
+          if (response === true) {
+            dispatchCustomEvent(evt.target, "vuu-commit");
+          }
+          return response;
+        });
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ jsx(
+      CycleStateButton,
+      {
+        className: cx(classBase, `${classBase}-${column.name}`),
+        onCommit: handleCommit,
+        value,
+        values,
+        variant: "cta",
+        children: value
+      }
+    );
+  },
+  dataColumnAndKeyUnchanged
+);
+registerComponent("toggle-cell", ToggleCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+export { ToggleCell };
+//# sourceMappingURL=ToggleCell.js.map

package/esm/cell-renderers/toggle-cell/ToggleCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { CycleStateCommitHandler, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-cell\",\n    css: toggleCellCss,\n    window: targetWindow,\n  });\n\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CycleStateCommitHandler>(\n    (evt, value) => {\n      return onCommit(value).then((response) => {\n        if (response === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return response;\n      });\n    },\n    [onCommit]\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["ToggleCell","value"],"mappings":";;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,mBAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,UAAa,GAAA,IAAA;AAAA,EAAK,SAASA,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,UAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA,CAAA;AAEzB,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,KAAKC,MAAU,KAAA;AACd,QAAA,OAAO,QAASA,CAAAA,MAAK,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACxC,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,WAC7D;AACA,UAAO,OAAA,QAAA,CAAA;AAAA,SACR,CAAA,CAAA;AAAA,OACH;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,QACtD,QAAU,EAAA,YAAA;AAAA,QACV,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAQ,EAAA,KAAA;AAAA,QAEP,QAAA,EAAA,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAAA,EACA,yBAAA;AAAyB,EAAA;AAEzB,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

package/esm/column-header-pill/ColumnHeaderPill.css.js

@@ -0,0 +1,4 @@
+var columnHeaderPillCss = ".vuuColumnHeaderPill {\n    --vuu-icon-size: 14px;\n    --menu-item-icon-color: black;\n    --vuu-icon-color: var(--salt-actionable-primary-foreground);\n    --vuu-icon-height: 12px;\n    --vuu-icon-width: 12px;\n    align-items: center;\n    background: var(--salt-actionable-primary-background);\n    color: var(--salt-actionable-primary-foreground);\n    border-radius: 4px;\n    flex: var(--vuuColumnHeaderPill-flex, none);\n    font-size: 11px;\n    gap: 4px;\n    height: 16px;\n    display: flex;\n    margin: var(--vuuColumnHeaderPill-margin, 0);\n    padding: 0 6px;\n    position: relative;     \n}\n\n.vuuColumnHeaderPill:hover {\n    --vuu-icon-color: var(--salt-actionable-primary-foreground-hover);\n    background-color: var(--salt-actionable-primary-background-hover);\n    color: var(--salt-actionable-primary-foreground-hover);\n  \n}\n\n.vuuColumnHeaderPill-removeButton {\n    cursor: pointer;\n}";
+
+export { columnHeaderPillCss as default };
+//# sourceMappingURL=ColumnHeaderPill.css.js.map

package/esm/column-header-pill/ColumnHeaderPill.css.js.map

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

package/esm/column-header-pill/ColumnHeaderPill.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useCallback } from 'react';
+import columnHeaderPillCss from './ColumnHeaderPill.css.js';
+
+const classBase = "vuuColumnHeaderPill";
+const ColumnHeaderPill = ({
+  children,
+  className,
+  column,
+  onRemove,
+  removable,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-header-pill",
+    css: columnHeaderPillCss,
+    window: targetWindow
+  });
+  if (removable && typeof onRemove !== "function") {
+    throw Error(
+      "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
+    );
+  }
+  const handleClickRemove = useCallback(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove?.(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    children,
+    removable ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${classBase}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
+
+export { ColumnHeaderPill };
+//# sourceMappingURL=ColumnHeaderPill.js.map

package/esm/column-header-pill/ColumnHeaderPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport columnHeaderPillCss from \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n  column: RuntimeColumnDescriptor;\n  removable?: boolean;\n  onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n  children,\n  className,\n  column,\n  onRemove,\n  removable,\n  ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-header-pill\",\n    css: columnHeaderPillCss,\n    window: targetWindow,\n  });\n\n  if (removable && typeof onRemove !== \"function\") {\n    throw Error(\n      \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\"\n    );\n  }\n\n  const handleClickRemove = useCallback(\n    (evt: MouseEvent<HTMLSpanElement>) => {\n      evt.preventDefault();\n      evt.stopPropagation();\n      onRemove?.(column);\n    },\n    [column, onRemove]\n  );\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {children}\n      {removable ? (\n        <span\n          className={`${classBase}-removeButton`}\n          role=\"button\"\n          data-icon=\"cross\"\n          onClick={handleClickRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA,iBAAA;AAAA,OAAA;AAAA,KAET,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-header-pill/GroupColumnPill.css.js

@@ -0,0 +1,4 @@
+var groupColumnPillCss = "\n.vuuSortPosition {\n  font-size: 11px;\n  font-weight: 700;\n  padding-top: 1px;\n}\n\n";
+
+export { groupColumnPillCss as default };
+//# sourceMappingURL=GroupColumnPill.css.js.map

package/esm/column-header-pill/GroupColumnPill.css.js.map

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

package/esm/column-header-pill/GroupColumnPill.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { ColumnHeaderPill } from './ColumnHeaderPill.js';
+import groupColumnPillCss from './GroupColumnPill.css.js';
+
+const GroupColumnPill = ({
+  column,
+  ...columnHeaderProps
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-group-column-pill",
+    css: groupColumnPillCss,
+    window: targetWindow
+  });
+  const { name, sorted } = column;
+  const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
+  return /* @__PURE__ */ jsxs(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ jsx("span", { className: "vuuGroupColumnPill-label", children: name }),
+    icon !== void 0 ? /* @__PURE__ */ jsx("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ jsx("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
+
+export { GroupColumnPill };
+//# sourceMappingURL=GroupColumnPill.js.map

package/esm/column-header-pill/GroupColumnPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport groupColumnPillCss from \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n  column,\n  ...columnHeaderProps\n}: GroupColumnPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-group-column-pill\",\n    css: groupColumnPillCss,\n    window: targetWindow,\n  });\n\n  const { name, sorted } = column;\n  const icon =\n    typeof sorted === \"number\"\n      ? sorted < 0\n        ? \"arrow-down\"\n        : \"arrow-up\"\n      : sorted === \"A\"\n      ? \"arrow-up\"\n      : sorted === \"D\"\n      ? \"arrow-down\"\n      : undefined;\n\n  return (\n    <ColumnHeaderPill {...columnHeaderProps} column={column}>\n      <span className=\"vuuGroupColumnPill-label\">{name}</span>\n      {icon !== undefined ? <span data-icon={icon} /> : null}\n      {typeof sorted === \"number\" ? (\n        <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n      ) : null}\n    </ColumnHeaderPill>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG,iBAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,IAAM,EAAA,MAAA,EAAW,GAAA,MAAA,CAAA;AACzB,EAAA,MAAM,IACJ,GAAA,OAAO,MAAW,KAAA,QAAA,GACd,MAAS,GAAA,CAAA,GACP,YACA,GAAA,UAAA,GACF,MAAW,KAAA,GAAA,GACX,UACA,GAAA,MAAA,KAAW,MACX,YACA,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,uBACG,IAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MACvC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,0BAAA,EAA4B,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,IAChD,SAAS,KAAY,CAAA,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAW,MAAM,CAAK,GAAA,IAAA;AAAA,IACjD,OAAO,MAAW,KAAA,QAAA,mBAChB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAM,CAAA,EAAE,CACpD,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-header-pill/SortIndicator.css.js

@@ -0,0 +1,4 @@
+var sortIndicatorCss = "\n.vuuSortPosition {\n  font-size: 11px;\n  font-weight: 700;\n  padding-top: 1px;\n}\n\n";
+
+export { sortIndicatorCss as default };
+//# sourceMappingURL=SortIndicator.css.js.map

package/esm/column-header-pill/SortIndicator.css.js.map

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

package/esm/column-header-pill/SortIndicator.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { ColumnHeaderPill } from './ColumnHeaderPill.js';
+import sortIndicatorCss from './SortIndicator.css.js';
+
+const SortIndicator = ({ column }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-sort-indicator",
+    css: sortIndicatorCss,
+    window: targetWindow
+  });
+  if (!column.sorted) {
+    return null;
+  }
+  const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
+  return /* @__PURE__ */ jsxs(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ jsx("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ jsx("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
+
+export { SortIndicator };
+//# sourceMappingURL=SortIndicator.js.map

package/esm/column-header-pill/SortIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport sortIndicatorCss from \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-sort-indicator\",\n    css: sortIndicatorCss,\n    window: targetWindow,\n  });\n\n  if (!column.sorted) {\n    return null;\n  }\n\n  const icon =\n    typeof column.sorted === \"number\"\n      ? column.sorted < 0\n        ? \"arrow-down\"\n        : \"arrow-up\"\n      : column.sorted === \"A\"\n      ? \"arrow-up\"\n      : \"arrow-down\";\n\n  return (\n    <ColumnHeaderPill column={column}>\n      <span data-icon={icon} />\n      {typeof column.sorted === \"number\" ? (\n        <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n      ) : null}\n    </ColumnHeaderPill>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAClB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,IACJ,GAAA,OAAO,MAAO,CAAA,MAAA,KAAW,QACrB,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GACd,YACA,GAAA,UAAA,GACF,MAAO,CAAA,MAAA,KAAW,MAClB,UACA,GAAA,YAAA,CAAA;AAEN,EACE,uBAAA,IAAA,CAAC,oBAAiB,MAChB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAW,IAAM,EAAA,CAAA;AAAA,IACtB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,mBACvB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAO,CAAA,MAAM,GAAE,CAC3D,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-menu/ColumnMenu.css.js

@@ -0,0 +1,4 @@
+var columnMenuCss = ".vuuMenuItem {\n    --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n    --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n    --saltButton-padding: var(--salt-spacing-50);\n    --saltButton-minWidth: var(--menu-button-size);\n    --saltButton-height: var(--menu-button-size);\n    --saltButton-width: var(--menu-button-size);\n\n    --vuu-icon-height: var(--menu-button-size);\n    --vuu-icon-left: 0px;\n    --vuu-icon-top: 0px;\n    --vuu-icon-width: var(--menu-button-size);\n\n    border-radius: 4px;\n    flex: 0 0 var(--menu-button-size);\n    margin: var(--vuuTable-columnMenu-margin, 0);\n}\n\n  ";
+
+export { columnMenuCss as default };
+//# sourceMappingURL=ColumnMenu.css.js.map

package/esm/column-menu/ColumnMenu.css.js.map

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

package/esm/column-menu/ColumnMenu.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { PopupMenu } from '@vuu-ui/vuu-popups';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import columnMenuCss from './ColumnMenu.css.js';
+
+const classBase = "vuuColumnMenu";
+const ColumnMenu = ({ className, column }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-menu",
+    css: columnMenuCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    PopupMenu,
+    {
+      className: cx(classBase, className),
+      "data-embedded": true,
+      menuLocation: "column-menu",
+      menuOptions: { column }
+    }
+  );
+};
+
+export { ColumnMenu };
+//# sourceMappingURL=ColumnMenu.js.map

package/esm/column-menu/ColumnMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  return (\n    <PopupMenu\n      className={cx(classBase, className)}\n      data-embedded\n      menuLocation=\"column-menu\"\n      menuOptions={{ column }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GACxB,CAAA;AAEJ;;;;"}

package/esm/column-resizing/ColumnResizer.css.js

@@ -0,0 +1,4 @@
+var columnResizerCss = ".vuuColumnResizer {\n    cursor: col-resize;\n    height: var(--header-height);\n    margin-left: var(--columnResizer-left, auto);\n    position: absolute;\n    right: -5px;\n    width: 8px;\n    z-index:1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing){\n    .vuuColumnResizer:hover {\n        --columnResizer-color: var(--salt-selectable-background-selected);\n    }\n    \n}\n\n.vuuColumnResizer:after {\n    background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n    bottom:0;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 3px;\n    height: var(--columnResizer-height, 0);\n    width: 2px;\n    z-index: 1;\n}";
+
+export { columnResizerCss as default };
+//# sourceMappingURL=ColumnResizer.css.js.map

package/esm/column-resizing/ColumnResizer.css.js.map

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

package/esm/column-resizing/ColumnResizer.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useRef, useCallback } from 'react';
+import columnResizerCss from './ColumnResizer.css.js';
+
+const NOOP = () => void 0;
+const baseClass = "vuuColumnResizer";
+const ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-resizer",
+    css: columnResizerCss,
+    window: targetWindow
+  });
+  const positionRef = useRef({ start: 0, now: 0 });
+  const onMouseMove = useCallback(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      const { current: position } = positionRef;
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.now;
+      const distanceMoved = position.now - position.start;
+      positionRef.current.now = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy, distanceMoved);
+      }
+    },
+    [onDrag]
+  );
+  const onMouseUp = useCallback(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      const { current: position } = positionRef;
+      const distanceMoved = position.now - position.start;
+      onDragEnd(e, distanceMoved);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      const { current: position } = positionRef;
+      onDragStart(e);
+      position.now = position.start = Math.round(e.clientX);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("mousemove", onMouseMove);
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+    },
+    [onDragStart, onMouseMove, onMouseUp]
+  );
+  return /* @__PURE__ */ jsx("div", { className: baseClass, onMouseDown: handleMouseDown });
+};
+
+export { ColumnResizer };
+//# sourceMappingURL=ColumnResizer.js.map

package/esm/column-resizing/ColumnResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\n\nimport columnResizerCss from \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n  onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n  onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n  onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n  onDrag,\n  onDragEnd = NOOP,\n  onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-resizer\",\n    css: columnResizerCss,\n    window: targetWindow,\n  });\n\n  const positionRef = useRef({ start: 0, now: 0 });\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (e.stopPropagation) {\n        e.stopPropagation();\n      }\n\n      if (e.preventDefault) {\n        e.preventDefault();\n      }\n\n      const { current: position } = positionRef;\n\n      const x = Math.round(e.clientX);\n      const moveBy = x - position.now;\n      const distanceMoved = position.now - position.start;\n\n      positionRef.current.now = x;\n\n      if (moveBy !== 0) {\n        onDrag(e, moveBy, distanceMoved);\n      }\n    },\n    [onDrag]\n  );\n\n  const onMouseUp = useCallback(\n    (e: MouseEvent) => {\n      window.removeEventListener(\"mouseup\", onMouseUp);\n      window.removeEventListener(\"mousemove\", onMouseMove);\n\n      const { current: position } = positionRef;\n      const distanceMoved = position.now - position.start;\n      onDragEnd(e, distanceMoved);\n    },\n    [onDragEnd, onMouseMove]\n  );\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const { current: position } = positionRef;\n      onDragStart(e);\n      position.now = position.start = Math.round(e.clientX);\n\n      window.addEventListener(\"mouseup\", onMouseUp);\n      window.addEventListener(\"mousemove\", onMouseMove);\n\n      if (e.stopPropagation) {\n        e.stopPropagation();\n      }\n\n      if (e.preventDefault) {\n        e.preventDefault();\n      }\n    },\n    [onDragStart, onMouseMove, onMouseUp]\n  );\n\n  return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":[],"mappings":"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"}

package/esm/column-resizing/useTableColumnResize.js

@@ -0,0 +1,53 @@
+import { useRef, useState, useCallback } from 'react';
+
+const useTableColumnResize = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = useRef({ start: 0, now: 0 });
+  const [isResizing, setResizing] = useState(false);
+  const { name } = column;
+  const handleResizeStart = useCallback(() => {
+    if (onResize && rootRef.current) {
+      const { current: width } = widthRef;
+      const { width: measuredWidth } = rootRef.current.getBoundingClientRect();
+      width.start = width.now = Math.round(measuredWidth);
+      setResizing(true);
+      onResize?.("begin", name);
+    }
+  }, [name, onResize, rootRef]);
+  const handleResize = useCallback(
+    (_evt, moveBy, totalDistanceMoved) => {
+      if (rootRef.current) {
+        if (onResize) {
+          const { current: width } = widthRef;
+          const newWidth = width.start + totalDistanceMoved;
+          if (newWidth !== width.now && newWidth > 0) {
+            onResize("resize", name, newWidth);
+            width.now = newWidth;
+          }
+        }
+      }
+    },
+    [name, onResize, rootRef]
+  );
+  const handleResizeEnd = useCallback(() => {
+    if (onResize) {
+      const { current: width } = widthRef;
+      onResize("end", name, width.now);
+      setTimeout(() => {
+        setResizing(false);
+      }, 80);
+    }
+  }, [name, onResize]);
+  return {
+    isResizing,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
+  };
+};
+
+export { useTableColumnResize };
+//# sourceMappingURL=useTableColumnResize.js.map

package/esm/column-resizing/useTableColumnResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableColumnResize.js","sources":["../../src/column-resizing/useTableColumnResize.tsx"],"sourcesContent":["import {\n  Heading,\n  ResizePhase,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { RefObject, useCallback, useRef, useState } from \"react\";\n\nexport type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;\nexport interface CellResizeHookProps {\n  column: RuntimeColumnDescriptor | Heading;\n  onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;\n  rootRef: RefObject<HTMLDivElement>;\n}\n\nexport interface CellResizeHookResult {\n  isResizing: boolean;\n  onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n  onDragStart: (evt: React.MouseEvent) => void;\n  onDragEnd: (evt: MouseEvent) => void;\n}\n\nexport const useTableColumnResize = ({\n  column,\n  onResize,\n  rootRef,\n}: CellResizeHookProps): CellResizeHookResult => {\n  const widthRef = useRef({ start: 0, now: 0 });\n\n  const [isResizing, setResizing] = useState(false);\n  const { name } = column;\n\n  const handleResizeStart = useCallback(() => {\n    if (onResize && rootRef.current) {\n      const { current: width } = widthRef;\n      const { width: measuredWidth } = rootRef.current.getBoundingClientRect();\n      width.start = width.now = Math.round(measuredWidth);\n      setResizing(true);\n      onResize?.(\"begin\", name);\n    }\n  }, [name, onResize, rootRef]);\n\n  const handleResize = useCallback(\n    (_evt: MouseEvent, moveBy: number, totalDistanceMoved) => {\n      if (rootRef.current) {\n        if (onResize) {\n          const { current: width } = widthRef;\n          const newWidth = width.start + totalDistanceMoved;\n          if (newWidth !== width.now && newWidth > 0) {\n            onResize(\"resize\", name, newWidth);\n            width.now = newWidth;\n          }\n        }\n      }\n    },\n    [name, onResize, rootRef]\n  );\n\n  const handleResizeEnd = useCallback(() => {\n    if (onResize) {\n      const { current: width } = widthRef;\n      onResize(\"end\", name, width.now);\n      setTimeout(() => {\n        // clickHandler in HeaderCell checks isResizing before firing. Because onMouseUp\n        // fires before click, we need to delay setting isResizing back to false, just\n        // long enough that the click ghandler will have fired.\n        setResizing(false);\n      }, 80);\n    }\n  }, [name, onResize]);\n\n  return {\n    isResizing,\n    onDrag: handleResize,\n    onDragStart: handleResizeStart,\n    onDragEnd: handleResizeEnd,\n  };\n};\n"],"names":[],"mappings":";;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AACF,CAAiD,KAAA;AAC/C,EAAA,MAAM,WAAW,MAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChD,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AAEjB,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAI,IAAA,QAAA,IAAY,QAAQ,OAAS,EAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,MAAA,MAAM,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA,CAAA;AACvE,MAAA,KAAA,CAAM,KAAQ,GAAA,KAAA,CAAM,GAAM,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA,CAAA;AAClD,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,MAAA,QAAA,GAAW,SAAS,IAAI,CAAA,CAAA;AAAA,KAC1B;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAE5B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,IAAkB,EAAA,MAAA,EAAgB,kBAAuB,KAAA;AACxD,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,UAAM,MAAA,QAAA,GAAW,MAAM,KAAQ,GAAA,kBAAA,CAAA;AAC/B,UAAA,IAAI,QAAa,KAAA,KAAA,CAAM,GAAO,IAAA,QAAA,GAAW,CAAG,EAAA;AAC1C,YAAS,QAAA,CAAA,QAAA,EAAU,MAAM,QAAQ,CAAA,CAAA;AACjC,YAAA,KAAA,CAAM,GAAM,GAAA,QAAA,CAAA;AAAA,WACd;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,MAAS,QAAA,CAAA,KAAA,EAAO,IAAM,EAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAC/B,MAAA,UAAA,CAAW,MAAM;AAIf,QAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAChB,EAAE,CAAA,CAAA;AAAA,KACP;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,QAAQ,CAAC,CAAA,CAAA;AAEnB,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,SAAW,EAAA,eAAA;AAAA,GACb,CAAA;AACF;;;;"}

package/esm/context-menu/buildContextMenuDescriptors.js

@@ -0,0 +1,212 @@
+import { isNumericColumn } from '@vuu-ui/vuu-utils';
+
+const buildContextMenuDescriptors = (dataSource) => (location, options) => {
+  const descriptors = [];
+  if (dataSource === void 0) {
+    return descriptors;
+  }
+  if (location === "header" || location === "column-menu") {
+    descriptors.push(
+      ...buildSortMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildGroupMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildAggregationMenuItems(options, dataSource)
+    );
+    descriptors.push(...buildColumnDisplayMenuItems(options));
+    descriptors.push({
+      action: "column-settings",
+      icon: "cog",
+      label: `Column Settings`,
+      options
+    });
+    descriptors.push({
+      action: "table-settings",
+      icon: "cog",
+      label: `DataGrid Settings`,
+      options
+    });
+  }
+  return descriptors;
+};
+function buildSortMenuItems(options, { sort: { sortDefs } }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const hasSort = sortDefs.length > 0;
+  if (column.sorted === "A") {
+    menuItems.push({
+      label: "Reverse Sort (DSC)",
+      action: "sort-dsc",
+      options
+    });
+  } else if (column.sorted === "D") {
+    menuItems.push({
+      label: "Reverse Sort (ASC)",
+      action: "sort-asc",
+      options
+    });
+  } else if (typeof column.sorted === "number") {
+    if (column.sorted > 0) {
+      menuItems.push({
+        label: "Reverse Sort (DSC)",
+        action: "sort-add-dsc",
+        options
+      });
+    } else {
+      menuItems.push({
+        label: "Reverse Sort (ASC)",
+        action: "sort-add-asc",
+        options
+      });
+    }
+    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
+      menuItems.push({
+        label: "Remove from sort",
+        action: "sort-remove",
+        options
+      });
+    }
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else if (hasSort) {
+    menuItems.push({
+      label: "Add to sort",
+      children: [
+        { label: "Ascending", action: "sort-add-asc", options },
+        { label: "Descending", action: "sort-add-dsc", options }
+      ]
+    });
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else {
+    menuItems.push({
+      label: "Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  }
+  return menuItems;
+}
+function buildAggregationMenuItems(options, dataSource) {
+  const { column } = options;
+  if (column === void 0 || dataSource.groupBy.length === 0) {
+    return [];
+  }
+  const { name, label = name } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [
+        { label: "Count", action: "agg-count", options },
+        { label: "Distinct", action: "agg-distinct", options }
+      ].concat(
+        isNumericColumn(column) ? [
+          { label: "Sum", action: "agg-sum", options },
+          { label: "Avg", action: "agg-avg", options },
+          { label: "High", action: "agg-high", options },
+          { label: "Low", action: "agg-low", options }
+        ] : []
+      )
+    }
+  ];
+}
+const pinColumn = (options, pinLocation) => ({
+  label: `Pin ${pinLocation}`,
+  action: `column-pin-${pinLocation}`,
+  options
+});
+const pinLeft = (options) => pinColumn(options, "left");
+const pinFloating = (options) => pinColumn(options, "floating");
+const pinRight = (options) => pinColumn(options, "right");
+function buildColumnDisplayMenuItems(options) {
+  const { column } = options;
+  if (column === void 0) {
+    return [];
+  }
+  const { pin } = column;
+  const menuItems = [
+    {
+      label: `Hide column`,
+      action: "column-hide",
+      options
+    },
+    {
+      label: `Remove column`,
+      action: "column-remove",
+      options
+    }
+  ];
+  if (pin === void 0) {
+    menuItems.push({
+      label: `Pin column`,
+      children: [pinLeft(options), pinFloating(options), pinRight(options)]
+    });
+  } else if (pin === "left") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinFloating(options), pinRight(options)]
+      }
+    );
+  } else if (pin === "right") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinFloating(options)]
+      }
+    );
+  } else if (pin === "floating") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinRight(options)]
+      }
+    );
+  }
+  return menuItems;
+}
+function buildGroupMenuItems(options, { groupBy }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const { name, label = name } = column;
+  if (groupBy.length === 0) {
+    menuItems.push({
+      label: `Group by ${label}`,
+      action: "group",
+      options
+    });
+  } else {
+    menuItems.push({
+      label: `Add ${label} to group by`,
+      action: "group-add",
+      options
+    });
+  }
+  return menuItems;
+}
+
+export { buildContextMenuDescriptors };
+//# sourceMappingURL=buildContextMenuDescriptors.js.map