@elliemae/ds-datagrids 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/esm/plugins/column-sizing/columnMeasurerTransformer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/column-sizing/columnMeasurerTransformer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useLayoutEffect, useRef } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\n\nexport const columnMeasurerTransformer =\n  (columnSizeService) =>\n  (value, { column, grid }, props = {}) => {\n    const { registerColumn } = columnSizeService;\n    const cellRef = useRef();\n\n    useLayoutEffect(() => {\n      const { columns, expandedToContentColumns } = columnSizeService;\n      const {\n        props: { minColumnWidth },\n        resizedColumns,\n      } = grid.getInstance();\n      if (cellRef.current) {\n        // FIX: merge\n        // if (column.width && column.width !== 'string' && !initialUsedSpace[column.property]) {\n        //   increaseUsedSpace(getColumnWidthSize(column.width, minColumnWidth, column), column.property)\n        // }\n        if (column.expandWidthToContent && !expandedToContentColumns[column.uuid]) {\n          // measure the content and reset to flex\n          const originalWidth = cellRef.current.offsetWidth;\n          cellRef.current.style.flex = 'initial';\n          cellRef.current.style.minWidth = 'initial';\n          const calcWidth = cellRef.current.offsetWidth + 20;\n          if (originalWidth + 20 <= calcWidth) {\n            resizedColumns.current[column.uuid] = calcWidth;\n            columns[column.uuid].minWidth = calcWidth;\n          } else {\n            columns[column.uuid].minWidth = originalWidth;\n          }\n          expandedToContentColumns[column.uuid] = true;\n          cellRef.current.style.minWidth = null;\n          cellRef.current.style.flex = 1;\n          column.node = cellRef.current;\n        }\n      }\n    });\n\n    return {\n      ...props,\n      innerRef: mergeRefs(cellRef, props.innerRef, registerColumn(column)),\n    };\n  };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,4BACX,CAAC,sBACD,CAAC,OAAO,EAAE,QAAQ,QAAQ,QAAQ,OAAO;AACvC,QAAM,EAAE,mBAAmB;AAC3B,QAAM,UAAU;AAEhB,kBAAgB,MAAM;AACpB,UAAM,EAAE,SAAS,6BAA6B;AAC9C,UAAM;AAAA,MACJ,OAAO,EAAE;AAAA,MACT;AAAA,QACE,KAAK;AACT,QAAI,QAAQ,SAAS;AAKnB,UAAI,OAAO,wBAAwB,CAAC,yBAAyB,OAAO,OAAO;AAEzE,cAAM,gBAAgB,QAAQ,QAAQ;AACtC,gBAAQ,QAAQ,MAAM,OAAO;AAC7B,gBAAQ,QAAQ,MAAM,WAAW;AACjC,cAAM,YAAY,QAAQ,QAAQ,cAAc;AAChD,YAAI,gBAAgB,MAAM,WAAW;AACnC,yBAAe,QAAQ,OAAO,QAAQ;AACtC,kBAAQ,OAAO,MAAM,WAAW;AAAA,eAC3B;AACL,kBAAQ,OAAO,MAAM,WAAW;AAAA;AAElC,iCAAyB,OAAO,QAAQ;AACxC,gBAAQ,QAAQ,MAAM,WAAW;AACjC,gBAAQ,QAAQ,MAAM,OAAO;AAC7B,eAAO,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK5B,SAAO;AAAA,OACF;AAAA,IACH,UAAU,UAAU,SAAS,MAAM,UAAU,eAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/ext-points/decorateColumn.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { get, set } from "@elliemae/ds-utilities";
+import { columnMeasurerTransformer } from "../columnMeasurerTransformer";
+function decorateColumn(column, grid, index) {
+  const transformsPath = ["header", "transforms"];
+  const transforms = get(column, transformsPath, []);
+  transforms.push(columnMeasurerTransformer(grid.columnSizeService, grid));
+  column.index = index;
+  set(column, transformsPath, transforms);
+  return column;
+}
+export {
+  decorateColumn
+};
+//# sourceMappingURL=decorateColumn.js.map

package/dist/esm/plugins/column-sizing/ext-points/decorateColumn.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/column-sizing/ext-points/decorateColumn.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get, set } from '@elliemae/ds-utilities';\nimport { columnMeasurerTransformer } from '../columnMeasurerTransformer';\n\nexport function decorateColumn(column, grid, index) {\n  const transformsPath = ['header', 'transforms'];\n  const transforms = get(column, transformsPath, []);\n  transforms.push(columnMeasurerTransformer(grid.columnSizeService, grid));\n  column.index = index;\n  set(column, transformsPath, transforms);\n\n  return column;\n}\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,wBAAwB,QAAQ,MAAM,OAAO;AAClD,QAAM,iBAAiB,CAAC,UAAU;AAClC,QAAM,aAAa,IAAI,QAAQ,gBAAgB;AAC/C,aAAW,KAAK,0BAA0B,KAAK,mBAAmB;AAClE,SAAO,QAAQ;AACf,MAAI,QAAQ,gBAAgB;AAE5B,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/ext-points/getTableProps.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { useResizeObserver, mergeRefs } from "@elliemae/ds-utilities";
+import { getScrollbarSizeFromHeaderAndBody } from "../utils";
+function getTableProps(tableProps, { refs, tableRef, bodyWidth, scrollbarWidth, isDragging, columnSizeService, updateRowWidth, columns }) {
+  const [tableNode, tableRefCallback] = useState();
+  useResizeObserver(({ width }) => {
+    if (!refs.header.current)
+      return;
+    if (typeof scrollbarWidth.current !== "number")
+      scrollbarWidth.current = getScrollbarSizeFromHeaderAndBody(refs, width);
+    if (typeof bodyWidth.current !== "number")
+      bodyWidth.current = refs.body.offsetWidth;
+    if (isDragging.current)
+      return;
+    columnSizeService.updateMissingWidths(width);
+    updateRowWidth(width);
+  }, tableNode);
+  useEffect(() => {
+    if (tableNode) {
+      columnSizeService.updateMissingWidths(tableNode.clientWidth);
+      updateRowWidth(tableNode.clientWidth);
+    }
+    if (typeof bodyWidth.current !== "number")
+      bodyWidth.current = refs.body.clientWidth;
+  }, [columns, tableNode]);
+  return {
+    ...tableProps,
+    innerRef: mergeRefs(tableRefCallback, tableProps.innerRef, tableRef)
+  };
+}
+export {
+  getTableProps
+};
+//# sourceMappingURL=getTableProps.js.map

package/dist/esm/plugins/column-sizing/ext-points/getTableProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/column-sizing/ext-points/getTableProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useState } from 'react';\nimport { useResizeObserver, mergeRefs } from '@elliemae/ds-utilities';\nimport { getScrollbarSizeFromHeaderAndBody } from '../utils';\n\nexport function getTableProps(\n  tableProps,\n  { refs, tableRef, bodyWidth, scrollbarWidth, isDragging, columnSizeService, updateRowWidth, columns },\n) {\n  const [tableNode, tableRefCallback] = useState();\n\n  useResizeObserver(({ width }) => {\n    if (!refs.header.current) return;\n    if (typeof scrollbarWidth.current !== 'number')\n      scrollbarWidth.current = getScrollbarSizeFromHeaderAndBody(refs, width);\n    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.offsetWidth;\n    // DataGrid: header with width 0 after redirect from details page (https://jira.elliemae.io/browse/PUI-2162)\n    // if (scrollbarWidth.current !== 0 && width - scrollbarWidth.current > 0) {\n    //   refs.header.current.style.width = `${width - scrollbarWidth.current}px`\n    // }\n\n    if (isDragging.current) return;\n    columnSizeService.updateMissingWidths(width);\n    updateRowWidth(width);\n  }, tableNode);\n\n  useEffect(() => {\n    if (tableNode) {\n      columnSizeService.updateMissingWidths(tableNode.clientWidth);\n      updateRowWidth(tableNode.clientWidth);\n    }\n    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.clientWidth;\n  }, [columns, tableNode]);\n\n  return {\n    ...tableProps,\n    innerRef: mergeRefs(tableRefCallback, tableProps.innerRef, tableRef),\n  };\n}\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,uBACL,YACA,EAAE,MAAM,UAAU,WAAW,gBAAgB,YAAY,mBAAmB,gBAAgB,WAC5F;AACA,QAAM,CAAC,WAAW,oBAAoB;AAEtC,oBAAkB,CAAC,EAAE,YAAY;AAC/B,QAAI,CAAC,KAAK,OAAO;AAAS;AAC1B,QAAI,OAAO,eAAe,YAAY;AACpC,qBAAe,UAAU,kCAAkC,MAAM;AACnE,QAAI,OAAO,UAAU,YAAY;AAAU,gBAAU,UAAU,KAAK,KAAK;AAMzE,QAAI,WAAW;AAAS;AACxB,sBAAkB,oBAAoB;AACtC,mBAAe;AAAA,KACd;AAEH,YAAU,MAAM;AACd,QAAI,WAAW;AACb,wBAAkB,oBAAoB,UAAU;AAChD,qBAAe,UAAU;AAAA;AAE3B,QAAI,OAAO,UAAU,YAAY;AAAU,gBAAU,UAAU,KAAK,KAAK;AAAA,KACxE,CAAC,SAAS;AAEb,SAAO;AAAA,OACF;AAAA,IACH,UAAU,UAAU,kBAAkB,WAAW,UAAU;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/getColumnNameFromProperty.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+const getColumnNameFromProperty = (property) => property && property.replace(/\./g, "-");
+var getColumnNameFromProperty_default = getColumnNameFromProperty;
+export {
+  getColumnNameFromProperty_default as default,
+  getColumnNameFromProperty
+};
+//# sourceMappingURL=getColumnNameFromProperty.js.map

package/dist/esm/plugins/column-sizing/getColumnNameFromProperty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/column-sizing/getColumnNameFromProperty.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const getColumnNameFromProperty = (property) => property && property.replace(/\\./g, '-');\n\nexport default getColumnNameFromProperty;\n"],
+  "mappings": "AAAA;ACAO,MAAM,4BAA4B,CAAC,aAAa,YAAY,SAAS,QAAQ,OAAO;AAE3F,IAAO,oCAAQ;",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/index.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { ColumnSizingPlugin } from "./ColumnSizingPlugin";
+export {
+  ColumnSizingPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/column-sizing/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/column-sizing/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ColumnSizingPlugin } from './ColumnSizingPlugin';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/useColumnSizeService.js

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { useRef, useState, useLayoutEffect } from "react";
+import { getColumnWidthSize, getPercentageValue } from "./utils";
+const useColumnSizeService = (instance) => {
+  const columns = useRef({});
+  const [expandableGridDetailWidth, setExpandableGridDetailWidth] = useState(0);
+  const [expandableColumnWidth, setExpandableColumnWidth] = useState(0);
+  const expandedToContentColumns = useRef({});
+  const previousTotalWidth = useRef(0);
+  const initialUsedSpace = useRef({
+    space: 0,
+    amount: 0,
+    percentage: 0
+  });
+  const increaseUsedSpace = (space, columnUuid) => {
+    if (typeof space === "number") {
+      initialUsedSpace.current.space += space;
+    } else if (space && space.endsWith("%")) {
+      initialUsedSpace.current.percentage += Number(space.slice(0, -1));
+    }
+    initialUsedSpace.current.amount += 1;
+    initialUsedSpace.current[columnUuid] = true;
+  };
+  const registerColumn = (column) => (node) => columns.current[column.uuid] = { ...column, node };
+  const unregisterColumn = (column) => {
+    delete columns.current[column.property];
+  };
+  const setActualColumnsSizesFixed = () => {
+    const columnsArray = Object.values(columns.current);
+    columnsArray.forEach((column) => {
+      const columnOffsetWidth = column.node.offsetWidth;
+      column.updateBodyHeaderWidth(`${columnOffsetWidth}px`, `${columnOffsetWidth}px`);
+    });
+  };
+  const updateMissingWidths = (totalWidth) => {
+    if (totalWidth) {
+      previousTotalWidth.current = totalWidth;
+    }
+    const gridWidth = previousTotalWidth.current - 4;
+    const {
+      props: { minColumnWidth, expandable },
+      resizedColumns,
+      decoratedColumns: columnDefinitions
+    } = instance.getInstance();
+    if (!initialUsedSpace.current)
+      return;
+    const columnUuids = columnDefinitions.map((c) => c.uuid);
+    const columnsArray = Object.values(columns.current).filter((c) => columnUuids.includes(c.uuid));
+    initialUsedSpace.current = { space: 0, amount: 0, percentage: 0 };
+    columnsArray.forEach((column) => {
+      if (column.width && column.width !== "string" && !initialUsedSpace[column.uuid]) {
+        increaseUsedSpace(getColumnWidthSize(column.width, minColumnWidth, column), column.uuid);
+      }
+    });
+    const nextColumnDict = {};
+    columnsArray.forEach((column) => {
+      if (typeof column.width === "number") {
+        nextColumnDict[column.uuid] = column;
+        return;
+      }
+      if (resizedColumns.current[column.uuid]) {
+        nextColumnDict[column.uuid] = column;
+        return;
+      }
+      const {
+        space: usedSpace,
+        amount: usedAmount,
+        percentage: usedPercentage
+      } = initialUsedSpace.current;
+      const percentValue = getPercentageValue(column.width);
+      if (percentValue) {
+        const pxs = gridWidth * percentValue / 100;
+        const pxWidths = `${getColumnWidthSize(pxs, minColumnWidth, column)}px`;
+        column.updateBodyHeaderWidth(pxWidths, pxWidths);
+        columns.current[column.uuid].computedWidth = pxs;
+        if (expandable && column.expandableColumn) {
+          setExpandableColumnWidth(pxs);
+        }
+      } else {
+        const columnFixWidth = (gridWidth * (1 - usedPercentage / 100) - usedSpace) / (columnsArray.length - usedAmount);
+        const percentWidth = columnFixWidth / gridWidth * 100;
+        const pxs = gridWidth * percentWidth / 100;
+        const actualWidthAfterChecks = getColumnWidthSize(pxs, minColumnWidth, column);
+        column.updateBodyHeaderWidth(`${actualWidthAfterChecks}px`, column.minWidth || minColumnWidth ? `${column.minWidth || minColumnWidth}px` : `${pxs}px`);
+        resizedColumns.current[column.uuid] = actualWidthAfterChecks;
+        columns.current[column.uuid].computedWidth = actualWidthAfterChecks;
+      }
+      nextColumnDict[column.uuid] = column;
+    });
+    columns.current = nextColumnDict;
+  };
+  useLayoutEffect(() => {
+    const totalWidth = computeColumnsTotalSize();
+    setExpandableGridDetailWidth(totalWidth - expandableColumnWidth);
+  }, [expandableColumnWidth]);
+  const computeColumnsTotalSize = () => {
+    const columnsArray = Object.values(columns.current);
+    return columnsArray.reduce((totalSize, column) => totalSize + column.node.offsetWidth, 0);
+  };
+  return {
+    columns: columns.current,
+    expandedToContentColumns: expandedToContentColumns.current,
+    initialUsedSpace: initialUsedSpace.current,
+    increaseUsedSpace,
+    registerColumn,
+    unregisterColumn,
+    updateMissingWidths,
+    computeColumnsTotalSize,
+    setActualColumnsSizesFixed,
+    expandableGridDetailWidth,
+    expandableColumnWidth
+  };
+};
+var useColumnSizeService_default = useColumnSizeService;
+export {
+  useColumnSizeService_default as default,
+  useColumnSizeService
+};
+//# sourceMappingURL=useColumnSizeService.js.map

package/dist/esm/plugins/column-sizing/useColumnSizeService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/column-sizing/useColumnSizeService.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { useRef, useState, useLayoutEffect } from 'react';\nimport { getColumnWidthSize, getPercentageValue } from './utils';\n\nexport const useColumnSizeService = (instance) => {\n  const columns = useRef({});\n  const [expandableGridDetailWidth, setExpandableGridDetailWidth] = useState(0);\n  const [expandableColumnWidth, setExpandableColumnWidth] = useState(0);\n  const expandedToContentColumns = useRef({});\n  const previousTotalWidth = useRef(0);\n  const initialUsedSpace = useRef({\n    space: 0,\n    amount: 0,\n    percentage: 0,\n  });\n\n  const increaseUsedSpace = (space, columnUuid) => {\n    if (typeof space === 'number') {\n      initialUsedSpace.current.space += space;\n    } else if (space && space.endsWith('%')) {\n      initialUsedSpace.current.percentage += Number(space.slice(0, -1));\n    }\n    initialUsedSpace.current.amount += 1;\n    initialUsedSpace.current[columnUuid] = true;\n  };\n\n  // eslint-disable-next-line no-return-assign\n  const registerColumn = (column) => (node) =>\n    (columns.current[column.uuid] = { ...column, node });\n\n  const unregisterColumn = (column) => {\n    delete columns.current[column.property];\n  };\n\n  const setActualColumnsSizesFixed = () => {\n    const columnsArray = Object.values(columns.current);\n\n    columnsArray.forEach((column) => {\n      const columnOffsetWidth = column.node.offsetWidth;\n      column.updateBodyHeaderWidth(\n        `${columnOffsetWidth}px`,\n        `${columnOffsetWidth}px`,\n      );\n    });\n  };\n\n  const updateMissingWidths = (totalWidth) => {\n    if (totalWidth) {\n      previousTotalWidth.current = totalWidth;\n    }\n    const gridWidth = previousTotalWidth.current - 4;\n    const {\n      props: { minColumnWidth, expandable },\n      resizedColumns,\n      decoratedColumns: columnDefinitions,\n    } = instance.getInstance();\n    if (!initialUsedSpace.current) return;\n    const columnUuids = columnDefinitions.map((c) => c.uuid);\n    const columnsArray = Object.values(columns.current).filter((c) =>\n      columnUuids.includes(c.uuid),\n    );\n    // reset the initial space to the last columns\n    initialUsedSpace.current = { space: 0, amount: 0, percentage: 0 };\n    columnsArray.forEach((column) => {\n      if (\n        column.width &&\n        column.width !== 'string' &&\n        !initialUsedSpace[column.uuid]\n      ) {\n        increaseUsedSpace(\n          getColumnWidthSize(column.width, minColumnWidth, column),\n          column.uuid,\n        );\n      }\n    });\n\n    const nextColumnDict = {};\n    // eslint-disable-next-line max-statements\n    columnsArray.forEach((column) => {\n      if (typeof column.width === 'number') {\n        nextColumnDict[column.uuid] = column;\n        return;\n      }\n      if (resizedColumns.current[column.uuid]) {\n        nextColumnDict[column.uuid] = column;\n        return;\n      }\n      const {\n        space: usedSpace,\n        amount: usedAmount,\n        percentage: usedPercentage,\n      } = initialUsedSpace.current;\n\n      const percentValue = getPercentageValue(column.width);\n      // check if is percentage value\n      if (percentValue) {\n        const pxs = (gridWidth * percentValue) / 100;\n        const pxWidths = `${getColumnWidthSize(pxs, minColumnWidth, column)}px`;\n        column.updateBodyHeaderWidth(pxWidths, pxWidths);\n        columns.current[column.uuid].computedWidth = pxs;\n        if (expandable && column.expandableColumn) {\n          setExpandableColumnWidth(pxs);\n        }\n      } else {\n        // otherwise the values are auto calculated from the total size\n        const columnFixWidth =\n          (gridWidth * (1 - usedPercentage / 100) - usedSpace) /\n          (columnsArray.length - usedAmount);\n        const percentWidth = (columnFixWidth / gridWidth) * 100;\n        const pxs = (gridWidth * percentWidth) / 100;\n        const actualWidthAfterChecks = getColumnWidthSize(\n          pxs,\n          minColumnWidth,\n          column,\n        );\n        column.updateBodyHeaderWidth(\n          `${actualWidthAfterChecks}px`,\n          column.minWidth || minColumnWidth\n            ? `${column.minWidth || minColumnWidth}px`\n            : `${pxs}px`,\n        );\n        resizedColumns.current[column.uuid] = actualWidthAfterChecks;\n        columns.current[column.uuid].computedWidth = actualWidthAfterChecks;\n      }\n      nextColumnDict[column.uuid] = column;\n    });\n    columns.current = nextColumnDict;\n  };\n\n  useLayoutEffect(() => {\n    const totalWidth = computeColumnsTotalSize();\n    setExpandableGridDetailWidth(totalWidth - expandableColumnWidth);\n  }, [expandableColumnWidth]);\n\n  // todo: make this incremental\n  const computeColumnsTotalSize = () => {\n    const columnsArray = Object.values(columns.current);\n    return columnsArray.reduce(\n      (totalSize, column) => totalSize + column.node.offsetWidth,\n      0,\n    );\n  };\n\n  return {\n    columns: columns.current,\n    expandedToContentColumns: expandedToContentColumns.current,\n    initialUsedSpace: initialUsedSpace.current,\n    increaseUsedSpace,\n    registerColumn,\n    unregisterColumn,\n    updateMissingWidths,\n    computeColumnsTotalSize,\n    setActualColumnsSizesFixed,\n    expandableGridDetailWidth,\n    expandableColumnWidth,\n  };\n};\n\nexport default useColumnSizeService;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/useStylesheetHelpers.js

@@ -0,0 +1,138 @@
+import * as React from "react";
+import * as stylesheet from "stylesheet-helpers";
+import { useState, useEffect } from "react";
+import { set } from "@elliemae/ds-utilities";
+import { getColumnNameFromProperty } from "./getColumnNameFromProperty";
+import { getScrollbarWidth } from "../../utilities/getScrollbarSize";
+const SCROLLBAR_WIDTH = getScrollbarWidth();
+const RowStylesheetHelper = ({ grid, className }) => {
+  const { styleSheet, styleSheetElement } = stylesheet.create();
+  const update = (width) => {
+    const widths = typeof width === "string" ? width : `${width}px`;
+    stylesheet.updateProperties(window, styleSheet, className, width ? { width: widths, minWidth: widths, maxWidth: widths } : { width: null, minWidth: null, maxWidth: null });
+    const { hasScroll } = grid.getState();
+    const headerWidth = `${width + (hasScroll ? SCROLLBAR_WIDTH : 0)}px`;
+    stylesheet.updateProperties(window, styleSheet, `${className}-header`, width ? { width: headerWidth, minWidth: headerWidth, maxWidth: headerWidth } : { width: null, minWidth: null, maxWidth: null });
+  };
+  const remove = () => styleSheetElement.remove();
+  const getRowClassName = () => className;
+  return {
+    update,
+    remove,
+    getRowClassName
+  };
+};
+const getColumnClassName = ({ globalId, column, isHeader = false, getId }) => `column-${globalId}-${getId(column)}${isHeader ? "-header" : ""}`;
+function setWidth({ styleSheet, className, width, minWidth }) {
+  let widths;
+  if (typeof width === "string")
+    widths = width;
+  if (typeof width === "number")
+    widths = `${width}px`;
+  let minWidths;
+  if (typeof minWidth === "string")
+    minWidths = minWidth;
+  if (typeof minWidth === "number")
+    minWidths = `${minWidth}px`;
+  stylesheet.updateProperties(window, styleSheet, className, {
+    width: `${widths || minWidths}`,
+    minWidth: `${widths || minWidths}`,
+    maxWidth: `${widths || minWidths}`
+  });
+}
+function updateStyle({ styleSheet, className, style }) {
+  stylesheet.updateProperties(window, styleSheet, className, style);
+}
+function columnSizesHelperImpl({ globalId, getId = ({ property }) => getColumnNameFromProperty(property) }) {
+  const { styleSheetElement, styleSheet } = stylesheet.create();
+  const updateBodyHeaderWidth = ({ className, headerClassName, width, minWidth }) => {
+    setWidth({
+      styleSheet,
+      className,
+      width,
+      minWidth
+    });
+    setWidth({
+      styleSheet,
+      className: headerClassName,
+      width,
+      minWidth,
+      isHeader: true
+    });
+  };
+  return {
+    decorateColumns: (columns, grid) => {
+      const {
+        props: { minColumnWidth }
+      } = grid.getInstance();
+      return columns.map((column) => {
+        const cellClassName = getColumnClassName({ globalId, getId, column });
+        const headerClassName = `${cellClassName}-header`;
+        set(column, "header.props.className", headerClassName);
+        set(column, "cell.props.className", cellClassName);
+        column.updateBodyHeaderWidth = (width, minWidth) => {
+          updateBodyHeaderWidth({
+            className: cellClassName,
+            headerClassName,
+            width,
+            minWidth
+          });
+        };
+        column.updateWidth = (width, minWidth) => {
+          setWidth({
+            styleSheet,
+            className: cellClassName,
+            width,
+            minWidth
+          });
+        };
+        column.updateStyle = (style) => updateStyle({
+          styleSheet,
+          className: cellClassName,
+          style
+        });
+        column.headerHookEffects = [
+          () => {
+            useEffect(() => {
+              const { resizedColumns } = grid.getInstance();
+              const resizedWidth = resizedColumns.current[column.uuid];
+              updateBodyHeaderWidth({
+                className: cellClassName,
+                headerClassName,
+                width: resizedWidth || column.width || minColumnWidth,
+                minWidth: resizedWidth || column.minWidth || minColumnWidth || column.width
+              });
+            }, [column.uuid]);
+          }
+        ];
+        return column;
+      });
+    },
+    getColumnCellClassName(column) {
+      return getColumnClassName({ globalId, getId, column });
+    },
+    getColumnHeaderClassName(column) {
+      return `${getColumnClassName({ globalId, getId, column })}-header`;
+    },
+    cleanup() {
+      styleSheetElement.remove();
+    }
+  };
+}
+function useStylesheetHelpers(grid) {
+  const {
+    props: { bindColumnsSizeTo, bindRowSizeTo }
+  } = grid;
+  const [columnsStylesheet] = useState(() => columnSizesHelperImpl({
+    globalId: bindColumnsSizeTo || grid.uuid,
+    getId: ({ uuid }) => getColumnNameFromProperty(uuid)
+  }));
+  const rowClassName = `row-${bindRowSizeTo || grid.uuid}`;
+  const [rowsStylesheet] = useState(() => RowStylesheetHelper({ grid, className: rowClassName }));
+  return { columnsStylesheet, rowsStylesheet, rowClassName };
+}
+export {
+  RowStylesheetHelper,
+  useStylesheetHelpers
+};
+//# sourceMappingURL=useStylesheetHelpers.js.map

package/dist/esm/plugins/column-sizing/useStylesheetHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/column-sizing/useStylesheetHelpers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-param-reassign */\n/* eslint-disable max-lines */\nimport * as stylesheet from 'stylesheet-helpers';\nimport { useState, useEffect } from 'react';\nimport { set } from '@elliemae/ds-utilities';\nimport { getColumnNameFromProperty } from './getColumnNameFromProperty';\nimport { getScrollbarWidth } from '../../utilities/getScrollbarSize';\n\nconst SCROLLBAR_WIDTH = getScrollbarWidth();\n\nexport const RowStylesheetHelper = ({ grid, className }) => {\n  const { styleSheet, styleSheetElement } = stylesheet.create();\n  const update = (width) => {\n    const widths = typeof width === 'string' ? width : `${width}px`;\n    stylesheet.updateProperties(\n      window,\n      styleSheet,\n      className,\n      width ? { width: widths, minWidth: widths, maxWidth: widths } : { width: null, minWidth: null, maxWidth: null },\n    );\n    const { hasScroll } = grid.getState();\n    const headerWidth = `${width + (hasScroll ? SCROLLBAR_WIDTH : 0)}px`;\n    stylesheet.updateProperties(\n      window,\n      styleSheet,\n      `${className}-header`,\n      width\n        ? { width: headerWidth, minWidth: headerWidth, maxWidth: headerWidth }\n        : { width: null, minWidth: null, maxWidth: null },\n    );\n  };\n  const remove = () => styleSheetElement.remove();\n  const getRowClassName = () => className;\n  return {\n    update,\n    remove,\n    getRowClassName,\n  };\n};\n\nconst getColumnClassName = ({ globalId, column, isHeader = false, getId }) =>\n  `column-${globalId}-${getId(column)}${isHeader ? '-header' : ''}`;\n\nfunction setWidth({ styleSheet, className, width, minWidth }) {\n  let widths;\n  if (typeof width === 'string') widths = width;\n  if (typeof width === 'number') widths = `${width}px`;\n\n  let minWidths;\n  if (typeof minWidth === 'string') minWidths = minWidth;\n  if (typeof minWidth === 'number') minWidths = `${minWidth}px`;\n\n  stylesheet.updateProperties(window, styleSheet, className, {\n    width: `${widths || minWidths}`,\n    minWidth: `${widths || minWidths}`,\n    // minWidth: `${minWidths || widths}`,\n    maxWidth: `${widths || minWidths}`,\n  });\n}\n\nfunction updateStyle({ styleSheet, className, style }) {\n  stylesheet.updateProperties(window, styleSheet, className, style);\n}\n\nfunction columnSizesHelperImpl({ globalId, getId = ({ property }) => getColumnNameFromProperty(property) }) {\n  const { styleSheetElement, styleSheet } = stylesheet.create();\n\n  const updateBodyHeaderWidth = ({ className, headerClassName, width, minWidth }) => {\n    setWidth({\n      styleSheet,\n      className,\n      width,\n      minWidth,\n    });\n    setWidth({\n      styleSheet,\n      className: headerClassName,\n      width,\n      minWidth,\n      isHeader: true,\n    });\n  };\n\n  return {\n    decorateColumns: (columns, grid) => {\n      const {\n        props: { minColumnWidth },\n      } = grid.getInstance();\n      return columns.map((column) => {\n        const cellClassName = getColumnClassName({ globalId, getId, column });\n        const headerClassName = `${cellClassName}-header`;\n\n        set(column, 'header.props.className', headerClassName);\n        set(column, 'cell.props.className', cellClassName);\n\n        column.updateBodyHeaderWidth = (width, minWidth) => {\n          updateBodyHeaderWidth({\n            className: cellClassName,\n            headerClassName,\n            width,\n            minWidth,\n          });\n        };\n        column.updateWidth = (width, minWidth) => {\n          setWidth({\n            styleSheet,\n            className: cellClassName,\n            width,\n            minWidth,\n          });\n        };\n        column.updateStyle = (style) =>\n          updateStyle({\n            styleSheet,\n            className: cellClassName,\n            style,\n          });\n\n        column.headerHookEffects = [\n          () => {\n            useEffect(() => {\n              const { resizedColumns } = grid.getInstance();\n              const resizedWidth = resizedColumns.current[column.uuid];\n              updateBodyHeaderWidth({\n                className: cellClassName,\n                headerClassName,\n                width: resizedWidth || column.width || minColumnWidth,\n                minWidth: resizedWidth || column.minWidth || minColumnWidth || column.width,\n              });\n            }, [column.uuid]);\n          },\n        ];\n\n        return column;\n      });\n    },\n    getColumnCellClassName(column) {\n      return getColumnClassName({ globalId, getId, column });\n    },\n    getColumnHeaderClassName(column) {\n      return `${getColumnClassName({ globalId, getId, column })}-header`;\n    },\n    cleanup() {\n      styleSheetElement.remove();\n    },\n  };\n}\n\nexport function useStylesheetHelpers(grid) {\n  const {\n    props: { bindColumnsSizeTo, bindRowSizeTo },\n  } = grid;\n\n  const [columnsStylesheet] = useState(() =>\n    columnSizesHelperImpl({\n      globalId: bindColumnsSizeTo || grid.uuid,\n      getId: ({ uuid }) => getColumnNameFromProperty(uuid),\n    }),\n  );\n  const rowClassName = `row-${bindRowSizeTo || grid.uuid}`;\n  const [rowsStylesheet] = useState(() => RowStylesheetHelper({ grid, className: rowClassName }));\n\n  return { columnsStylesheet, rowsStylesheet, rowClassName };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/plugins/column-sizing/utils.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { get } from "@elliemae/ds-utilities";
+function getScrollbarSizeFromHeaderAndBody(refs) {
+  const innerBodyOffsetWidth = get(refs, ["innerBody", "current", "offsetWidth"]);
+  const headerOffsetWidth = get(refs, ["header", "current", "offsetWidth"]);
+  return headerOffsetWidth - innerBodyOffsetWidth;
+}
+const isScrollbarVisible = (element) => element.scrollHeight > element.clientHeight;
+const getPercentageValue = (percentString) => {
+  if (typeof percentString !== "string")
+    return null;
+  const result = percentString.match(/(\d+|\d*[.,]\d{1,2})/);
+  return result && Number(result[0]);
+};
+const getColumnWidthSize = (width, minWidth, column) => {
+  if (column.special) {
+    return column.width;
+  }
+  if (minWidth && minWidth > width)
+    return minWidth;
+  return width;
+};
+const calculateMinWidthForWrappedText = (columns) => {
+  let longestWord = 0;
+  columns.forEach(({ label }) => {
+    const localLongestWord = label.split(" ").sort((a, b) => b.length - a.length)[0].length;
+    if (localLongestWord > longestWord)
+      longestWord = localLongestWord;
+  });
+  return longestWord * 8.5;
+};
+export {
+  calculateMinWidthForWrappedText,
+  getColumnWidthSize,
+  getPercentageValue,
+  getScrollbarSizeFromHeaderAndBody,
+  isScrollbarVisible
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/plugins/column-sizing/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/column-sizing/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from '@elliemae/ds-utilities';\n\nexport function getScrollbarSizeFromHeaderAndBody(refs) {\n  const innerBodyOffsetWidth = get(refs, ['innerBody', 'current', 'offsetWidth']);\n  const headerOffsetWidth = get(refs, ['header', 'current', 'offsetWidth']);\n\n  return headerOffsetWidth - innerBodyOffsetWidth;\n}\n\nexport const isScrollbarVisible = (element) => element.scrollHeight > element.clientHeight;\n\nexport const getPercentageValue = (percentString) => {\n  if (typeof percentString !== 'string') return null;\n  const result = percentString.match(/(\\d+|\\d*[.,]\\d{1,2})/);\n\n  return result && Number(result[0]);\n};\n\nexport const getColumnWidthSize = (width, minWidth, column) => {\n  if (column.special) {\n    return column.width;\n  }\n  if (minWidth && minWidth > width) return minWidth;\n  return width;\n};\n\nexport const calculateMinWidthForWrappedText = (columns) => {\n  let longestWord = 0;\n\n  columns.forEach(({ label }) => {\n    const localLongestWord = label.split(' ').sort((a, b) => b.length - a.length)[0].length;\n    if (localLongestWord > longestWord) longestWord = localLongestWord;\n  });\n\n  return longestWord * 8.5;\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,2CAA2C,MAAM;AACtD,QAAM,uBAAuB,IAAI,MAAM,CAAC,aAAa,WAAW;AAChE,QAAM,oBAAoB,IAAI,MAAM,CAAC,UAAU,WAAW;AAE1D,SAAO,oBAAoB;AAAA;AAGtB,MAAM,qBAAqB,CAAC,YAAY,QAAQ,eAAe,QAAQ;AAEvE,MAAM,qBAAqB,CAAC,kBAAkB;AACnD,MAAI,OAAO,kBAAkB;AAAU,WAAO;AAC9C,QAAM,SAAS,cAAc,MAAM;AAEnC,SAAO,UAAU,OAAO,OAAO;AAAA;AAG1B,MAAM,qBAAqB,CAAC,OAAO,UAAU,WAAW;AAC7D,MAAI,OAAO,SAAS;AAClB,WAAO,OAAO;AAAA;AAEhB,MAAI,YAAY,WAAW;AAAO,WAAO;AACzC,SAAO;AAAA;AAGF,MAAM,kCAAkC,CAAC,YAAY;AAC1D,MAAI,cAAc;AAElB,UAAQ,QAAQ,CAAC,EAAE,YAAY;AAC7B,UAAM,mBAAmB,MAAM,MAAM,KAAK,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,GAAG;AACjF,QAAI,mBAAmB;AAAa,oBAAc;AAAA;AAGpD,SAAO,cAAc;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/custom-cell-renderer/CustomRendererPlugin.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
+import { addCustomRendererToCell } from "./addCustomRendererToCell";
+const decorateColumn = (column, grid) => addCustomRendererToCell(grid)(column);
+const CustomRendererPlugin = createInstancePlugin("custom-renderer", {
+  decorateColumn
+});
+export {
+  CustomRendererPlugin
+};
+//# sourceMappingURL=CustomRendererPlugin.js.map

package/dist/esm/plugins/custom-cell-renderer/CustomRendererPlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/custom-cell-renderer/CustomRendererPlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { addCustomRendererToCell } from './addCustomRendererToCell';\n\n// todo: this probably needs to go to the core\n\nconst decorateColumn = (column, grid) => addCustomRendererToCell(grid)(column);\n\nexport const CustomRendererPlugin = createInstancePlugin('custom-renderer', {\n  decorateColumn,\n});\n"],
+  "mappings": "AAAA;ACAA;AACA;AAIA,MAAM,iBAAiB,CAAC,QAAQ,SAAS,wBAAwB,MAAM;AAEhE,MAAM,uBAAuB,qBAAqB,mBAAmB;AAAA,EAC1E;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/custom-cell-renderer/addCustomRendererToCell.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { isFunction, get } from "@elliemae/ds-utilities";
+import { appendCellFormatter } from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
+import { getRendererComponent } from "./getRendererComponent";
+const getRenderer = (renderer, grid, column) => (value, metaData) => {
+  const {
+    props: { customHandlers, parentRowData }
+  } = grid.getInstance();
+  if (column && column.formatExpandable && value && value.props && value.props.children && value.props.children.length === 2) {
+    return [
+      value.props.children[0],
+      renderer({
+        value: value.props.children[1],
+        metaData: { ...metaData, parentRowData },
+        customHandlers
+      })
+    ];
+  }
+  return renderer({
+    value,
+    metaData: { ...metaData, parentRowData },
+    customHandlers
+  });
+};
+const addCustomRendererToCell = (grid) => (column) => {
+  const { customRenderer } = column;
+  const customHeaderRenderer = get(column, ["header", "customRenderer"]);
+  if (!customRenderer && !customHeaderRenderer)
+    return column;
+  if (isFunction(customHeaderRenderer)) {
+    column.header.formatters.push(getRenderer(customHeaderRenderer, grid));
+  }
+  if (isFunction(customRenderer)) {
+    column = appendCellFormatter(getRenderer(customRenderer, grid, column), column);
+  } else {
+    if (!customRenderer)
+      return column;
+    column.cell.formatters.push((value, columnData) => getRendererComponent(grid, customRenderer, columnData));
+  }
+  return column;
+};
+var addCustomRendererToCell_default = addCustomRendererToCell;
+export {
+  addCustomRendererToCell,
+  addCustomRendererToCell_default as default,
+  getRenderer
+};
+//# sourceMappingURL=addCustomRendererToCell.js.map

package/dist/esm/plugins/custom-cell-renderer/addCustomRendererToCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/custom-cell-renderer/addCustomRendererToCell.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { isFunction, get } from '@elliemae/ds-utilities';\nimport { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { getRendererComponent } from './getRendererComponent';\n\nexport const getRenderer = (renderer, grid, column) => (value, metaData) => {\n  const {\n    props: { customHandlers, parentRowData },\n  } = grid.getInstance();\n  if (\n    column &&\n    column.formatExpandable &&\n    value &&\n    value.props &&\n    value.props.children &&\n    value.props.children.length === 2\n  ) {\n    return [\n      value.props.children[0],\n      renderer({\n        value: value.props.children[1], // apply custom render only to the original value not the arrow\n        metaData: { ...metaData, parentRowData },\n        customHandlers,\n      }),\n    ];\n  }\n  return renderer({\n    value,\n    metaData: { ...metaData, parentRowData },\n    customHandlers,\n  });\n};\n\nconst addCustomRendererToCell = (grid) => (column) => {\n  const { customRenderer } = column;\n  const customHeaderRenderer = get(column, ['header', 'customRenderer']);\n  if (!customRenderer && !customHeaderRenderer) return column;\n\n  if (isFunction(customHeaderRenderer)) {\n    column.header.formatters.push(getRenderer(customHeaderRenderer, grid));\n  }\n\n  if (isFunction(customRenderer)) {\n    column = appendCellFormatter(getRenderer(customRenderer, grid, column), column);\n  } else {\n    if (!customRenderer) return column;\n    column.cell.formatters.push((value, columnData) => getRendererComponent(grid, customRenderer, columnData));\n  }\n\n  return column;\n};\n\nexport { addCustomRendererToCell };\nexport default addCustomRendererToCell;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEO,MAAM,cAAc,CAAC,UAAU,MAAM,WAAW,CAAC,OAAO,aAAa;AAC1E,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,MACvB,KAAK;AACT,MACE,UACA,OAAO,oBACP,SACA,MAAM,SACN,MAAM,MAAM,YACZ,MAAM,MAAM,SAAS,WAAW,GAChC;AACA,WAAO;AAAA,MACL,MAAM,MAAM,SAAS;AAAA,MACrB,SAAS;AAAA,QACP,OAAO,MAAM,MAAM,SAAS;AAAA,QAC5B,UAAU,KAAK,UAAU;AAAA,QACzB;AAAA;AAAA;AAAA;AAIN,SAAO,SAAS;AAAA,IACd;AAAA,IACA,UAAU,KAAK,UAAU;AAAA,IACzB;AAAA;AAAA;AAIJ,MAAM,0BAA0B,CAAC,SAAS,CAAC,WAAW;AACpD,QAAM,EAAE,mBAAmB;AAC3B,QAAM,uBAAuB,IAAI,QAAQ,CAAC,UAAU;AACpD,MAAI,CAAC,kBAAkB,CAAC;AAAsB,WAAO;AAErD,MAAI,WAAW,uBAAuB;AACpC,WAAO,OAAO,WAAW,KAAK,YAAY,sBAAsB;AAAA;AAGlE,MAAI,WAAW,iBAAiB;AAC9B,aAAS,oBAAoB,YAAY,gBAAgB,MAAM,SAAS;AAAA,SACnE;AACL,QAAI,CAAC;AAAgB,aAAO;AAC5B,WAAO,KAAK,WAAW,KAAK,CAAC,OAAO,eAAe,qBAAqB,MAAM,gBAAgB;AAAA;AAGhG,SAAO;AAAA;AAIT,IAAO,kCAAQ;",
+  "names": []
+}

package/dist/esm/plugins/custom-cell-renderer/getRendererComponent.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import React2 from "react";
+import { DSButton } from "@elliemae/ds-button";
+import { DSCheckbox, DSComboBox, DSRadio, DSTextBox, DSToggle } from "@elliemae/ds-form";
+import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
+import * as renderers from "../../components/renderers";
+const components = {
+  DSButton,
+  DSCheckbox,
+  DSComboBox,
+  DSRadio,
+  DSTextBox,
+  DSToggle,
+  DSDropdownMenu
+};
+const getRendererComponent = ({ props }, { type = "DSTextBox", handlers, ...rest }, { rowData }) => {
+  const Component = components[type] || renderers[type];
+  const { customHandlers, rowKey } = props;
+  const mappedHandlers = {};
+  Object.keys(handlers).forEach((key) => {
+    mappedHandlers[handlers[key]] = () => typeof customHandlers[key] === "function" ? customHandlers[key](rowData, rowData[rowKey]) : null;
+  });
+  return /* @__PURE__ */ React2.createElement(Component, {
+    ...rowData,
+    ...mappedHandlers,
+    ...rest
+  });
+};
+var getRendererComponent_default = getRendererComponent;
+export {
+  getRendererComponent_default as default,
+  getRendererComponent
+};
+//# sourceMappingURL=getRendererComponent.js.map

package/dist/esm/plugins/custom-cell-renderer/getRendererComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/custom-cell-renderer/getRendererComponent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSCheckbox, DSComboBox, DSRadio, DSTextBox, DSToggle } from '@elliemae/ds-form';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport * as renderers from '../../components/renderers';\n\nconst components = {\n  DSButton,\n  DSCheckbox,\n  DSComboBox,\n  DSRadio,\n  DSTextBox,\n  DSToggle,\n  DSDropdownMenu,\n};\n\nconst getRendererComponent = ({ props }, { type = 'DSTextBox', handlers, ...rest }, { rowData }) => {\n  const Component = components[type] || renderers[type];\n  const { customHandlers, rowKey } = props;\n  const mappedHandlers = {};\n\n  Object.keys(handlers).forEach((key) => {\n    mappedHandlers[handlers[key]] = () =>\n      typeof customHandlers[key] === 'function' ? customHandlers[key](rowData, rowData[rowKey]) : null;\n  });\n  return <Component {...rowData} {...mappedHandlers} {...rest} />;\n};\n\nexport { getRendererComponent };\nexport default getRendererComponent;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAGF,MAAM,uBAAuB,CAAC,EAAE,SAAS,EAAE,OAAO,aAAa,aAAa,QAAQ,EAAE,cAAc;AAClG,QAAM,YAAY,WAAW,SAAS,UAAU;AAChD,QAAM,EAAE,gBAAgB,WAAW;AACnC,QAAM,iBAAiB;AAEvB,SAAO,KAAK,UAAU,QAAQ,CAAC,QAAQ;AACrC,mBAAe,SAAS,QAAQ,MAC9B,OAAO,eAAe,SAAS,aAAa,eAAe,KAAK,SAAS,QAAQ,WAAW;AAAA;AAEhG,SAAO,qCAAC,WAAD;AAAA,OAAe;AAAA,OAAa;AAAA,OAAoB;AAAA;AAAA;AAIzD,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/esm/plugins/custom-cell-renderer/index.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { CustomRendererPlugin } from "./CustomRendererPlugin";
+export {
+  CustomRendererPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/custom-cell-renderer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/custom-cell-renderer/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { CustomRendererPlugin } from './CustomRendererPlugin';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}