@elliemae/ds-data-table 2.3.1 → 3.0.0-alpha.3

package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport * as CSS from 'csstype';\nimport styled from 'styled-components';\nimport { TypescriptColumn } from '../../../types/props';\nimport { StyledFocusWithin } from '../../../styled';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst StyledSpan = styled.span`\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const expandRowColumn: TypescriptColumn = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { expandedRows, onRowExpand },\n      allDataFlattened,\n    } = ctx;\n\n    const allExpandable = useMemo(() => {\n      const expandable = {};\n      allDataFlattened.forEach((row) => {\n        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)\n          expandable[row.uid] = true;\n      });\n      return expandable;\n    }, [allDataFlattened]);\n\n    const isAllRowsExpanded = useMemo(\n      () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n      [allExpandable, expandedRows],\n    );\n\n    const onExpandedAllHandler = useCallback(() => {\n      if (isAllRowsExpanded) onRowExpand({}, 'All');\n      else onRowExpand({ ...allExpandable }, 'All');\n    }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n    const GlobalExpandIcon = useMemo(() => {\n      if (isAllRowsExpanded)\n        return (\n          <ArrowheadDown\n            size=\"s\"\n            color={['brand-primary', '600']}\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n          />\n        );\n\n      // Mixed\n      if (Object.keys(expandedRows).length) {\n        return (\n          <ArrowheadRight\n            size=\"s\"\n            color={['brand-primary', '600']}\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n            style={{ transform: 'rotate(45deg)' }}\n          />\n        );\n      }\n      return (\n        <ArrowheadRight\n          size=\"s\"\n          color={['brand-primary', '600']}\n          data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n        />\n      );\n    }, [expandedRows, isAllRowsExpanded]);\n\n    return (\n      <StyledFocusWithin>\n        <StyledSpan\n          role=\"button\"\n          tabIndex={0}\n          title=\"Toggle All Rows Expanded\"\n          onClick={onExpandedAllHandler}\n          onKeyDown={(e) => {\n            if (['Enter', 'Space'].includes(e.code)) {\n              onExpandedAllHandler();\n              e.preventDefault();\n            }\n          }}\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n          aria-expanded={isAllRowsExpanded}\n          style={{ width: '24px', height: '24px' }}\n        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n    const {\n      tableProps: { dragAndDropRows, expandedRows, onRowExpand },\n    } = ctx;\n\n    const uniqueId = row.uid;\n\n    const isExpanded = expandedRows[uniqueId];\n\n    const shouldPrintCaret =\n      (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n      row.original.tableRowDetails ||\n      row.original.dimsumHeaderValue;\n\n    const onRowExpandHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        if (expandedRows[uniqueId]) {\n          delete expandedRows[uniqueId];\n        } else {\n          expandedRows[uniqueId] = true;\n        }\n        onRowExpand({ ...expandedRows }, uniqueId);\n      },\n      [expandedRows, uniqueId, onRowExpand],\n    );\n\n    const isDragging = draggableProps ? draggableProps.isDragging : false;\n    const isDragOverlay = dragAndDropRows && !draggableProps;\n\n    const indentStyle: CSS.Properties = useMemo(\n      () => ({\n        marginLeft: `${row.depth * 32}px`,\n        marginRight: '18px',\n        paddingLeft: '2px',\n        paddingRight: '2px',\n        position: 'relative',\n        height: '100%',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n      [row.depth],\n    );\n\n    const rowProps = useMemo(\n      () => ({\n        role: 'button',\n        key: `${row.uid}-expand-button`,\n        title: 'Toggle Row Expanded',\n        onClick: onRowExpandHandler,\n        onKeyDown: (e) => {\n          if (['Enter', 'Space'].includes(e.code)) {\n            e.preventDefault();\n            onRowExpandHandler(e);\n          }\n        },\n        ref: cell.ref,\n        tabIndex: isRowSelected ? 0 : -1,\n        'data-testid': 'data-table-row-expand-cell',\n        'aria-expanded': isExpanded,\n        isRightArrow: !isExpanded || isDragging || isDragOverlay,\n      }),\n      [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay],\n    );\n\n    const PureCaretIcon = useMemo(\n      () =>\n        isExpanded && !isDragging && !isDragOverlay ? (\n          <ArrowheadDown\n            data-is-col-expanded={isExpanded}\n            data-role=\"row-expander-col\"\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n          />\n        ) : (\n          <ArrowheadRight\n            data-is-col-expanded={isExpanded}\n            data-role=\"row-expander-col\"\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n          />\n        ),\n      [isExpanded, isDragging, isDragOverlay],\n    );\n\n    const ChildIcon = useMemo(\n      () => (\n        <ArrowShortReturn\n          size=\"s\"\n          data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n          style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n          color={['brand-primary', '600']}\n        />\n      ),\n      [],\n    );\n\n    if (shouldPrintCaret)\n      return (\n        <StyledFocusWithin style={indentStyle}>\n          <StyledSpan {...rowProps}>{PureCaretIcon}</StyledSpan>\n        </StyledFocusWithin>\n      );\n    if (row.depth !== 0) return <span style={indentStyle}>{ChildIcon}</span>;\n\n    return <div style={{ width: '36px' }} />;\n  },\n  textWrap: 'wrap',\n  canResize: false,\n  width: 25,\n  padding: 0,\n  isFocuseable: false,\n  disableDnD: true,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -0,0 +1,98 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useMemo, useCallback } from "react";
+import { DSCheckbox } from "@elliemae/ds-form";
+import { DATA_TESTID } from "../../../configs/constants";
+const multiSelectColumn = {
+  id: "multiSelecter",
+  Header: ({ ctx }) => {
+    const {
+      tableProps: { onSelectionChange, selection, data, disabledRows },
+      allDataFlattened
+    } = ctx;
+    const selectionKeyCount = Object.keys(selection).length;
+    const currentGlobalState = useMemo(() => selectionKeyCount > 0 && selectionKeyCount < data.length ? "mixed" : selectionKeyCount > 0, [selectionKeyCount, data]);
+    const newGlobalStateAfterToggle = useMemo(() => {
+      let newState = false;
+      if (currentGlobalState === false || currentGlobalState === "mixed")
+        newState = true;
+      return newState;
+    }, [currentGlobalState]);
+    const newSelection = useMemo(() => {
+      if (newGlobalStateAfterToggle) {
+        const nextSelection = {};
+        allDataFlattened.forEach((datum) => {
+          nextSelection[datum.uid] = !disabledRows[datum.uid];
+        });
+        return nextSelection;
+      }
+      return {};
+    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
+    const onChangeHandler = useCallback((e) => {
+      onSelectionChange(newSelection, "All", e);
+    }, [newSelection, onSelectionChange]);
+    const PureHeaderCheckbox = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
+      "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
+      title: "Toggle All Rows Selected",
+      checked: currentGlobalState,
+      onChange: onChangeHandler,
+      tabIndex: "0",
+      style: { cursor: "pointer" }
+    }), [currentGlobalState, onChangeHandler]);
+    return PureHeaderCheckbox;
+  },
+  Cell: ({ cell, row, isRowSelected, ctx }) => {
+    const {
+      tableProps: { onSelectionChange, selection, disabledRows }
+    } = ctx;
+    const { uid } = row;
+    const selectedState = selection?.[uid];
+    const PureCheckboxCell = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
+      "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
+      title: "Toggle Row Selected",
+      "aria-checked": selectedState,
+      "aria-disabled": false,
+      checked: selectedState,
+      onChange: (e) => {
+        const newState = !selectedState;
+        const newSelection = __spreadProps(__spreadValues({}, selection), { [uid]: newState });
+        if (!newState)
+          delete newSelection[uid];
+        onSelectionChange(newSelection, uid, e);
+      },
+      disabled: disabledRows[row.uid],
+      innerRef: cell.ref,
+      tabIndex: isRowSelected ? 0 : -1,
+      style: { cursor: "pointer" }
+    }), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
+    return PureCheckboxCell;
+  },
+  textWrap: "wrap",
+  width: 32,
+  padding: 7,
+  canResize: false,
+  isFocuseable: false,
+  disableDnD: true
+};
+export {
+  multiSelectColumn
+};
+//# sourceMappingURL=ColumnSelectMultiple.js.map

package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, data, disabledRows },\n      allDataFlattened,\n    } = ctx;\n\n    const selectionKeyCount = Object.keys(selection).length;\n\n    const currentGlobalState = useMemo(\n      () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n      [selectionKeyCount, data],\n    );\n\n    const newGlobalStateAfterToggle = useMemo(() => {\n      // false -- toggles into --> true\n      // mixed  -- toggles into --> true\n      // true  -- toggles into --> false\n      let newState = false;\n      if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;\n      return newState;\n    }, [currentGlobalState]);\n\n    const newSelection = useMemo(() => {\n      if (newGlobalStateAfterToggle) {\n        const nextSelection = {};\n        allDataFlattened.forEach((datum) => {\n          nextSelection[datum.uid] = !disabledRows[datum.uid];\n        });\n        return nextSelection;\n      }\n      return {};\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (e) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const PureHeaderCheckbox = useMemo(\n      () => (\n        <DSCheckbox\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n          title=\"Toggle All Rows Selected\"\n          checked={currentGlobalState}\n          onChange={onChangeHandler}\n          tabIndex=\"0\"\n          style={{ cursor: 'pointer' }}\n        />\n      ),\n      [currentGlobalState, onChangeHandler],\n    );\n    return PureHeaderCheckbox;\n  },\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\n    const { uid } = row;\n    const selectedState = selection?.[uid];\n    const PureCheckboxCell = useMemo(\n      () => (\n        <DSCheckbox\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          title=\"Toggle Row Selected\"\n          aria-checked={selectedState}\n          aria-disabled={false}\n          checked={selectedState}\n          onChange={(e) => {\n            const newState = !selectedState;\n            const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n            if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n            onSelectionChange(newSelection, uid, e);\n          }}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          style={{ cursor: 'pointer' }}\n        />\n      ),\n      [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange],\n    );\n    return PureCheckboxCell;\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEO,MAAM,oBAAsC;AAAA,EAEjD,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAEJ,UAAM,oBAAoB,OAAO,KAAK,WAAW;AAEjD,UAAM,qBAAqB,QACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB;AAGtB,UAAM,4BAA4B,QAAQ,MAAM;AAI9C,UAAI,WAAW;AACf,UAAI,uBAAuB,SAAS,uBAAuB;AAAS,mBAAW;AAC/E,aAAO;AAAA,OACN,CAAC;AAEJ,UAAM,eAAe,QAAQ,MAAM;AACjC,UAAI,2BAA2B;AAC7B,cAAM,gBAAgB;AACtB,yBAAiB,QAAQ,CAAC,UAAU;AAClC,wBAAc,MAAM,OAAO,CAAC,aAAa,MAAM;AAAA;AAEjD,eAAO;AAAA;AAET,aAAO;AAAA,OACN,CAAC,2BAA2B,kBAAkB;AAEjD,UAAM,kBAAkB,YACtB,CAAC,MAAM;AACL,wBAAkB,cAAc,OAAO;AAAA,OAEzC,CAAC,cAAc;AAGjB,UAAM,qBAAqB,QACzB,MACE,qCAAC,YAAD;AAAA,MACE,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ;AAAA,QAGrB,CAAC,oBAAoB;AAEvB,WAAO;AAAA;AAAA,EAET,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY;AAClC,UAAM,mBAAmB,QACvB,MACE,qCAAC,YAAD;AAAA,MACE,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU,CAAC,MAAM;AACf,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,iCAAK,YAAL,GAAiB,MAAM;AAC5C,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK;AAAA;AAAA,MAEvC,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ;AAAA,QAGrB,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,WAAW,KAAK;AAElF,WAAO;AAAA;AAAA,EAET,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { DSRadio } from "@elliemae/ds-form";
+import styled from "styled-components";
+import { DATA_TESTID } from "../../../configs/constants";
+const CenteredContent = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledDSRadio = styled(DSRadio)`
+  padding-bottom: 0;
+  cursor: pointer;
+`;
+const singleSelectColumn = {
+  id: "singleSelecter",
+  Header: () => /* @__PURE__ */ React2.createElement("div", null),
+  Cell: ({ cell, row, isRowSelected, ctx }) => {
+    const {
+      tableProps: { onSelectionChange, selection, disabledRows }
+    } = ctx;
+    const { uid } = row;
+    const selectedState = selection?.[uid];
+    const PureCheckBox = useMemo(() => /* @__PURE__ */ React2.createElement(CenteredContent, null, /* @__PURE__ */ React2.createElement(StyledDSRadio, {
+      containerProps: {
+        "aria-checked": selectedState,
+        "aria-disabled": false,
+        title: "Toggle Row Selected"
+      },
+      checked: selectedState,
+      onChange: () => {
+        onSelectionChange(!selectedState ? { [uid]: !selectedState } : {});
+      },
+      "data-testid": DATA_TESTID.DATA_TABLE_RADIO,
+      disabled: disabledRows[row.uid],
+      innerRef: cell.ref,
+      value: "",
+      tabIndex: isRowSelected ? 0 : -1
+    })), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid]);
+    return PureCheckBox;
+  },
+  textWrap: "wrap",
+  width: 32,
+  padding: 4,
+  canResize: false,
+  isFocuseable: false,
+  disableDnD: true
+};
+export {
+  singleSelectColumn
+};
+//# sourceMappingURL=ColumnSelectSingle.js.map

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport styled from 'styled-components';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\nconst StyledDSRadio = styled(DSRadio)`\n  padding-bottom: 0;\n  cursor: pointer;\n`;\n\nexport const singleSelectColumn: TypescriptColumn = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <div />,\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\n    const { uid } = row;\n    const selectedState = selection?.[uid];\n\n    const PureCheckBox = useMemo(\n      () => (\n        <CenteredContent>\n          <StyledDSRadio\n            // eslint-disable-next-line react/prop-types\n            containerProps={{\n              'aria-checked': selectedState,\n              'aria-disabled': false,\n              title: 'Toggle Row Selected',\n            }}\n            checked={selectedState}\n            onChange={() => {\n              // in single select we only allow one item to be selected\n              onSelectionChange(!selectedState ? { [uid]: !selectedState } : {});\n            }}\n            data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n            disabled={disabledRows[row.uid]}\n            innerRef={cell.ref}\n            value=\"\"\n            tabIndex={isRowSelected ? 0 : -1}\n          />\n        </CenteredContent>\n      ),\n      [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid],\n    );\n    return PureCheckBox;\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAM,qBAAuC;AAAA,EAElD,IAAI;AAAA,EAEJ,QAAQ,MAAM,qCAAC,OAAD;AAAA,EACd,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY;AAElC,UAAM,eAAe,QACnB,MACE,qCAAC,iBAAD,MACE,qCAAC,eAAD;AAAA,MAEE,gBAAgB;AAAA,QACd,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,OAAO;AAAA;AAAA,MAET,SAAS;AAAA,MACT,UAAU,MAAM;AAEd,0BAAkB,CAAC,gBAAgB,GAAG,MAAM,CAAC,kBAAkB;AAAA;AAAA,MAEjE,eAAa,YAAY;AAAA,MACzB,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,OAAM;AAAA,MACN,UAAU,gBAAgB,IAAI;AAAA,SAIpC,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,mBAAmB;AAErF,WAAO;AAAA;AAAA,EAET,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Columns/index.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { actionColumn } from "./ColumnAction/ColumnAction";
+import { expandRowColumn } from "./ColumnExpand/ColumnExpand";
+import { multiSelectColumn } from "./ColumnSelectMultiple/ColumnSelectMultiple";
+import { singleSelectColumn } from "./ColumnSelectSingle/ColumnSelectSingle";
+import { dragHandleColumn } from "./ColumnDragHandle/ColumnDragHandle";
+const INTERNAL_COLUMNS = [
+  "rowActions",
+  "expander",
+  "multiSelecter",
+  "singleSelecter",
+  "dragHandleColumn"
+];
+export {
+  INTERNAL_COLUMNS,
+  actionColumn,
+  dragHandleColumn,
+  expandRowColumn,
+  multiSelectColumn,
+  singleSelectColumn
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/addons/Columns/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Columns/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { actionColumn } from './ColumnAction/ColumnAction';\nexport { expandRowColumn } from './ColumnExpand/ColumnExpand';\nexport { multiSelectColumn } from './ColumnSelectMultiple/ColumnSelectMultiple';\nexport { singleSelectColumn } from './ColumnSelectSingle/ColumnSelectSingle';\nexport { dragHandleColumn } from './ColumnDragHandle/ColumnDragHandle';\n\nexport const INTERNAL_COLUMNS = [\n  'rowActions',\n  'expander',\n  'multiSelecter',\n  'singleSelecter',\n  'dragHandleColumn',\n];\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import React2, { useContext, useState, useCallback, useMemo } from "react";
+import { DSComboBox } from "@elliemae/ds-controlled-form";
+import { EditableCell } from "../../../exported-related";
+import { DataTableContext } from "../../../DataTableContext";
+import { editableCellPropType } from "../../../prop-types";
+const ComboboxEditableCell = (props) => {
+  const { cell, DefaultCellRender, isRowSelected } = props;
+  const {
+    tableProps: { onCellValueChange },
+    flattenedData
+  } = useContext(DataTableContext);
+  const cellValue = useMemo(() => cell.value, [cell.value]);
+  const columnId = useMemo(() => cell.column.id, [cell.column.id]);
+  const [value, setValue] = useState({
+    dsId: cellValue,
+    type: "option",
+    value: cellValue,
+    label: cellValue
+  });
+  const uniqueOptions = useMemo(() => {
+    const uniqueValuesMap = {};
+    return flattenedData.reduce((optionsSoFar, currRow) => {
+      const currValue = currRow.original[columnId];
+      if (!uniqueValuesMap[currValue]) {
+        optionsSoFar.push({ dsId: currValue, type: "option", value: currValue, label: currValue });
+        uniqueValuesMap[currValue] = true;
+      }
+      return optionsSoFar;
+    }, []);
+  }, [flattenedData, columnId]);
+  const filterOptions = (newFilter) => uniqueOptions.filter((option) => option.type === "separator" || option.label.toLowerCase().includes(newFilter.toLowerCase()));
+  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);
+  const handleOnBlur = useCallback(() => {
+    const property = columnId;
+    onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });
+  }, [columnId, onCellValueChange, value?.value, cell]);
+  return /* @__PURE__ */ React2.createElement(EditableCell, {
+    StandardRender: DefaultCellRender,
+    EditableRenderer: /* @__PURE__ */ React2.createElement(DSComboBox, {
+      selectedValues: value,
+      autoFocus: true,
+      withoutPortal: false,
+      onBlur: handleOnBlur,
+      onChange: setValue,
+      onFilter: (newFilter) => setCurrentOptions(filterOptions(newFilter)),
+      options: currentOptions
+    }),
+    cell,
+    isRowSelected
+  });
+};
+ComboboxEditableCell.propTypes = editableCellPropType;
+export {
+  ComboboxEditableCell
+};
+//# sourceMappingURL=ComboboxEditableCell.js.map

package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\nimport { editableCellPropType } from '../../../prop-types';\n\nexport const ComboboxEditableCell: React.ComponentType<any> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const {\n    tableProps: { onCellValueChange },\n    flattenedData,\n  } = useContext(DataTableContext);\n  const cellValue = useMemo(() => cell.value, [cell.value]);\n  const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n  const [value, setValue] = useState({\n    dsId: cellValue,\n    type: 'option',\n    value: cellValue,\n    label: cellValue,\n  });\n\n  const uniqueOptions = useMemo(() => {\n    const uniqueValuesMap = {};\n    return flattenedData.reduce((optionsSoFar, currRow) => {\n      const currValue = currRow.original[columnId];\n      if (!uniqueValuesMap[currValue]) {\n        optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n        uniqueValuesMap[currValue] = true;\n      }\n      return optionsSoFar;\n    }, []);\n  }, [flattenedData, columnId]);\n\n  const filterOptions = (newFilter: string) =>\n    uniqueOptions.filter(\n      (option) => option.type === 'separator' || option.label.toLowerCase().includes(newFilter.toLowerCase()),\n    );\n\n  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n  const handleOnBlur = useCallback(() => {\n    const property = columnId;\n    onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n  }, [columnId, onCellValueChange, value?.value, cell]);\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <DSComboBox\n          selectedValues={value}\n          autoFocus\n          withoutPortal={false}\n          onBlur={handleOnBlur}\n          onChange={setValue}\n          onFilter={(newFilter: string) => setCurrentOptions(filterOptions(newFilter))}\n          options={currentOptions}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\nComboboxEditableCell.propTypes = editableCellPropType;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEO,MAAM,uBAAiD,CAAC,UAAU;AACvE,QAAM,EAAE,MAAM,mBAAmB,kBAAkB;AAEnD,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,IACd;AAAA,MACE,WAAW;AACf,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAO,CAAC,KAAK;AAClD,QAAM,WAAW,QAAQ,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO;AAE5D,QAAM,CAAC,OAAO,YAAY,SAAS;AAAA,IACjC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAGT,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,kBAAkB;AACxB,WAAO,cAAc,OAAO,CAAC,cAAc,YAAY;AACrD,YAAM,YAAY,QAAQ,SAAS;AACnC,UAAI,CAAC,gBAAgB,YAAY;AAC/B,qBAAa,KAAK,EAAE,MAAM,WAAW,MAAM,UAAU,OAAO,WAAW,OAAO;AAC9E,wBAAgB,aAAa;AAAA;AAE/B,aAAO;AAAA,OACN;AAAA,KACF,CAAC,eAAe;AAEnB,QAAM,gBAAgB,CAAC,cACrB,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,UAAU;AAG7F,QAAM,CAAC,gBAAgB,qBAAqB,SAAS;AAErD,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW;AACjB,sBAAkB,EAAE,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI;AAAA,KACrE,CAAC,UAAU,mBAAmB,OAAO,OAAO;AAC/C,SACE,qCAAC,cAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,kBACE,qCAAC,YAAD;AAAA,MACE,gBAAgB;AAAA,MAChB,WAAS;AAAA,MACT,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU,CAAC,cAAsB,kBAAkB,cAAc;AAAA,MACjE,SAAS;AAAA;AAAA,IAGb;AAAA,IACA;AAAA;AAAA;AAIN,qBAAqB,YAAY;",
+  "names": []
+}

package/dist/esm/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import React2, { useContext, useState, useCallback } from "react";
+import { EditableCell } from "../../../exported-related";
+import { DataTableContext } from "../../../DataTableContext";
+import { editableCellPropType } from "../../../prop-types";
+function DateEditableCell(props) {
+  const { cell, DefaultCellRender } = props;
+  const {
+    tableProps: { onCellValueChange }
+  } = useContext(DataTableContext);
+  const [value, setValue] = useState(cell.value);
+  const handleOnChange = useCallback((e) => {
+    const {
+      target: { value: tValue }
+    } = e;
+    setValue(tValue);
+  }, [onCellValueChange, value]);
+  const handleOnBlur = useCallback(() => {
+    const property = cell.column.id;
+    const rowIndex = cell.row.index;
+    onCellValueChange({ value, property, rowIndex });
+  }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  return /* @__PURE__ */ React2.createElement(EditableCell, {
+    StandardRender: DefaultCellRender,
+    EditableRenderer: /* @__PURE__ */ React2.createElement("input", {
+      value,
+      onChange: handleOnChange,
+      onBlur: handleOnBlur,
+      autoFocus: true
+    }),
+    cell
+  });
+}
+DateEditableCell.propTypes = editableCellPropType;
+export {
+  DateEditableCell
+};
+//# sourceMappingURL=DateEditableCell.js.map

package/dist/esm/addons/Editables/DateEditableCell/DateEditableCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/DateEditableCell/DateEditableCell.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useCallback } from 'react';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\nimport { editableCellPropType } from '../../../prop-types';\n\nexport function DateEditableCell(props) {\n  const { cell, DefaultCellRender } = props;\n\n  const {\n    tableProps: { onCellValueChange },\n  } = useContext(DataTableContext);\n\n  const [value, setValue] = useState(cell.value);\n\n  const handleOnChange = useCallback(\n    (e) => {\n      const {\n        target: { value: tValue },\n      } = e;\n      setValue(tValue);\n    },\n    [onCellValueChange, value],\n  );\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <input\n          value={value}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n        />\n      }\n      cell={cell}\n    />\n  );\n}\nDateEditableCell.propTypes = editableCellPropType;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEO,0BAA0B,OAAO;AACtC,QAAM,EAAE,MAAM,sBAAsB;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,MACZ,WAAW;AAEf,QAAM,CAAC,OAAO,YAAY,SAAS,KAAK;AAExC,QAAM,iBAAiB,YACrB,CAAC,MAAM;AACL,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO;AAAA,QACf;AACJ,aAAS;AAAA,KAEX,CAAC,mBAAmB;AAEtB,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU;AAAA,KACpC,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI;AAEvD,SACE,qCAAC,cAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,kBACE,qCAAC,SAAD;AAAA,MACE;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAS;AAAA;AAAA,IAGb;AAAA;AAAA;AAIN,iBAAiB,YAAY;",
+  "names": []
+}

package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import React2, { useContext, useState, useCallback } from "react";
+import styled from "styled-components";
+import { EditableCell } from "../../../exported-related";
+import { DataTableContext } from "../../../DataTableContext";
+import { editableCellPropType } from "../../../prop-types";
+const StyledInput = styled.input`
+  outline: none;
+  :focus {
+    border: 2px solid ${(props) => props.theme.colors.brand[700]};
+  }
+  max-width: 100%;
+`;
+const TextEditableCell = (props) => {
+  const { cell, DefaultCellRender, isRowSelected } = props;
+  const {
+    tableProps: { onCellValueChange }
+  } = useContext(DataTableContext);
+  const [value, setValue] = useState(cell.value);
+  const handleOnChange = useCallback((e) => {
+    const {
+      target: { value: tValue }
+    } = e;
+    setValue(tValue);
+  }, []);
+  const handleOnBlur = useCallback(() => {
+    const property = cell.column.id;
+    const rowIndex = cell.row.index;
+    onCellValueChange({ value, property, rowIndex });
+  }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.code === "Enter") {
+      cell.ref.current.focus();
+    }
+    if (e.code === "Escape") {
+      setValue(cell.value);
+      const auxRef = cell.ref.current;
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
+  return /* @__PURE__ */ React2.createElement(EditableCell, {
+    StandardRender: DefaultCellRender,
+    EditableRenderer: /* @__PURE__ */ React2.createElement(StyledInput, {
+      value,
+      onKeyDown: handleOnKeyDown,
+      onChange: handleOnChange,
+      onBlur: handleOnBlur,
+      autoFocus: true
+    }),
+    cell,
+    setValue,
+    isRowSelected
+  });
+};
+TextEditableCell.propTypes = editableCellPropType;
+export {
+  TextEditableCell
+};
+//# sourceMappingURL=TextEditableCell.js.map

package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useRef, useCallback } from 'react';\nimport styled from 'styled-components';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\nimport { editableCellPropType } from '../../../prop-types';\n\nconst StyledInput = styled.input`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<any> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n  const {\n    tableProps: { onCellValueChange },\n  } = useContext(DataTableContext);\n\n  const [value, setValue] = useState<string>(cell.value);\n\n  const handleOnChange = useCallback((e) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n        />\n      }\n      cell={cell}\n      setValue={setValue}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\nTextEditableCell.propTypes = editableCellPropType;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA,wBAGH,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrD,MAAM,mBAA6C,CAAC,UAAU;AACnE,QAAM,EAAE,MAAM,mBAAmB,kBAAkB;AACnD,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,MACZ,WAAW;AAEf,QAAM,CAAC,OAAO,YAAY,SAAiB,KAAK;AAEhD,QAAM,iBAAiB,YAAY,CAAC,MAAM;AACxC,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO;AAAA,QACf;AACJ,aAAS;AAAA,KACR;AAEH,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU;AAAA,KACpC,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI;AAEvD,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,SAAS;AACtB,WAAK,IAAI,QAAQ;AAAA;AAGnB,QAAI,EAAE,SAAS,UAAU;AACvB,eAAS,KAAK;AACd,YAAM,SAAS,KAAK,IAAI;AAExB,iBAAW,MAAM;AACf,eAAO;AAAA;AAAA;AAAA,KAIb,CAAC;AAEH,SACE,qCAAC,cAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,kBACE,qCAAC,aAAD;AAAA,MACE;AAAA,MACA,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAS;AAAA;AAAA,IAGb;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIN,iBAAiB,YAAY;",
+  "names": []
+}

package/dist/esm/addons/Editables/index.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { TextEditableCell } from "./TextEditableCell/TextEditableCell";
+import { ComboboxEditableCell } from "./ComboboxEditableCell/ComboboxEditableCell";
+const outOfTheBoxEditables = {
+  "ds-edit-text": { EditableComponent: TextEditableCell },
+  "ds-edit-combobox": {
+    EditableComponent: ComboboxEditableCell
+  }
+};
+export {
+  outOfTheBoxEditables
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/addons/Editables/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Editables/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell';\n\nexport const outOfTheBoxEditables: Record<string, { EditableComponent: React.ComponentType<any> }> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,uBAAwF;AAAA,EACnG,gBAAgB,EAAE,mBAAmB;AAAA,EACrC,oBAAoB;AAAA,IAClB,mBAAmB;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -0,0 +1,107 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
+import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { FilterPopover, FILTER_TYPES } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+import { useDispatchHeadersActions } from "../../../../redux/reducers/headersReducers";
+const opts = {
+  prefix: "",
+  suffix: "",
+  allowDecimal: true,
+  decimalLimit: 2,
+  includeThousandsSeparator: false,
+  requireDecimal: true,
+  allowNegative: true
+};
+const CurrencyRangeFilter = (props) => {
+  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;
+  const handleFromChange = (e) => {
+    const nextValue = __spreadProps(__spreadValues({}, filterValue), {
+      from: e.target.value
+    });
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
+  };
+  const handleToChange = (e) => {
+    const nextValue = __spreadProps(__spreadValues({}, filterValue), {
+      to: e.target.value
+    });
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
+  };
+  const { patchHeader } = useDispatchHeadersActions();
+  const closePopover = (e) => {
+    if (e.code === "Escape") {
+      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+      innerRef.current.focus();
+    }
+  };
+  const idPreffix = "datatable-currency-range";
+  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+    reduxHeader,
+    column,
+    columnId: column.id,
+    menuContent: /* @__PURE__ */ React2.createElement(Grid, {
+      "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
+      gutter: "xxxs",
+      padding: "xxs",
+      cols: ["auto", "auto"],
+      style: { background: "white" }
+    }, /* @__PURE__ */ React2.createElement(DSFormLayoutBlockItem, {
+      label: "Min",
+      inputID: `${idPreffix}-min-${column.id}`
+    }, /* @__PURE__ */ React2.createElement(DSInputMask, {
+      containerProps: { style: { textAlign: "right" } },
+      id: `${idPreffix}-min-${column.id}`,
+      value: `${filterValue?.from ?? ""}`,
+      onChange: handleFromChange,
+      placeholder: "0.00",
+      mask: (number) => MASK_TYPES.NUMBER(opts)(number),
+      autoFocus: true,
+      onKeyDown: (e) => {
+        closePopover(e);
+      }
+    })), /* @__PURE__ */ React2.createElement(DSFormLayoutBlockItem, {
+      label: "Max",
+      inputID: `${idPreffix}-max-${column.id}`
+    }, /* @__PURE__ */ React2.createElement(DSInputMask, {
+      containerProps: { style: { textAlign: "right" } },
+      id: `${idPreffix}-max-${column.id}`,
+      value: `${filterValue?.to ?? ""}`,
+      onChange: handleToChange,
+      placeholder: "0.00",
+      mask: (number) => MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: (e) => {
+        closePopover(e);
+      }
+    }))),
+    triggerIcon: /* @__PURE__ */ React2.createElement(SearchXsmall, null),
+    customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
+    innerRef,
+    ariaLabel: "Open Currency Range Filter"
+  });
+};
+export {
+  CurrencyRangeFilter
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\nimport { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: true,\n  decimalLimit: 2,\n  includeThousandsSeparator: false,\n  requireDecimal: true,\n  allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;\n  const handleFromChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      from: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      to: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const { patchHeader } = useDispatchHeadersActions();\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n\n  const idPreffix = 'datatable-currency-range';\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-min-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              autoFocus\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-max-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AAAA;AAGV,MAAM,sBAAwD,CAAC,UAAU;AAC9E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,QAAQ,aAAa,eAAe,aAAa;AACjG,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB,MAAM,EAAE,OAAO;AAAA;AAEjB,kBAAc,aAAa,gBAAgB;AAAA;AAE7C,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB,IAAI,EAAE,OAAO;AAAA;AAEf,kBAAc,aAAa,gBAAgB;AAAA;AAE7C,QAAM,EAAE,gBAAgB;AAGxB,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB;AACjE,eAAS,QAAQ;AAAA;AAAA;AAIrB,QAAM,YAAY;AAClB,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC,MAAD;AAAA,MACE,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ;AAAA,MACf,OAAO,EAAE,YAAY;AAAA,OAErB,qCAAC,uBAAD;AAAA,MAAuB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC,aAAD;AAAA,MACE,gBAAgB,EAAE,OAAO,EAAE,WAAW;AAAA,MACtC,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,QAAQ;AAAA,MAC/B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,MAAM;AAAA,MAC1C,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa;AAAA;AAAA,SAInB,qCAAC,uBAAD;AAAA,MAAuB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC,aAAD;AAAA,MACE,gBAAgB,EAAE,OAAO,EAAE,WAAW;AAAA,MACtC,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,MAAM;AAAA,MAC1C,WAAW,CAAC,MAAM;AAChB,qBAAa;AAAA;AAAA;AAAA,IAMvB,aAAa,qCAAC,cAAD;AAAA,IACb,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA,IAC3D;AAAA,IACA,WAAU;AAAA;AAAA;",
+  "names": []
+}