npm - @elliemae/ds-data-table - Versions diffs - 3.1.0-next.2 → 3.1.0-next.20 - Mend

@elliemae/ds-data-table 3.1.0-next.2 → 3.1.0-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/dist/esm/parts/Cells/Cell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/Cell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n  <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n    {children}\n  </StyledCell>\n));\n\ninterface CellProps {\n  cell: any;\n  column: TypescriptColumn;\n  row: TypescriptRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { cellRendererProps, disabledRows },\n  } = ctx;\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      ctx,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n  );\n\n  const CellComponent = cell.render;\n\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n          <CellComponent {...cellProps} />\n        </Grid>\n      );\n    }\n    return <CellComponent {...cellProps} />;\n  }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent>\n        {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n      </StyledCellContent>\n    ),\n    [appliedTextWrap, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n      if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\nexport default Cell;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,KAAuD,CAAC,EAAE,WAAW,UAAU,aACtG,qCAAC;AAAA,EAAW;AAAA,EAAgB,OAAO;AAAA,EAAW,MAAK;AAAA,EAAO,eAAa,YAAY;AAAA,GAChF,QACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,MAC/B;AACJ,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,aAAa,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY,QAChB,MAAO,iCACF,oBADE;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,MAAM,CACrG;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qCAAC;AAAA,QAAK,MAAM,CAAC,eAAe,MAAM;AAAA,QAAG,YAAW;AAAA,QAAS,QAAO;AAAA,SAC7D,uBAAuB,qCAAC,gBAAgB,MAAhB,mBAAyB,UAAW,GAC7D,qCAAC,kCAAkB,UAAW,CAChC;AAAA,IAEJ;AACA,WAAO,qCAAC,kCAAkB,UAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AAElD,QAAM,wBAAwB,QAC5B,MACE,qCAAC,yBACE,oBAAoB,aAAa,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,IAAK,eAC7F,GAEF,CAAC,iBAAiB,eAAe,CACnC;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,sBAAsB,uBAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,qCAAC,oDAAsB,YAAtB;AAAA,UAAiC,mBAAmB;AAAA,UAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,SAChB,UACJ;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,qCAAC,qCAAqB,YACnB,OAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,qBACpE;AAEJ;AAGA,IAAO,eAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n  <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n    {children}\n  </StyledCell>\n));\n\ninterface CellProps {\n  cell: any;\n  column: TypescriptColumn;\n  row: TypescriptRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { cellRendererProps, disabledRows },\n  } = ctx;\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      ctx,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n  );\n\n  const CellComponent = cell.render;\n\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n          <CellComponent {...cellProps} />\n        </Grid>\n      );\n    }\n    return <CellComponent {...cellProps} />;\n  }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent>\n        {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n      </StyledCellContent>\n    ),\n    [appliedTextWrap, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n      if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\nexport default Cell;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,KAAuD,CAAC,EAAE,WAAW,UAAU,aACtG,qCAAC;AAAA,EAAW;AAAA,EAAgB,OAAO;AAAA,EAAW,MAAK;AAAA,EAAO,eAAa,YAAY;AAAA,GAChF,QACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,MAC/B;AACJ,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,aAAa,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY,QAChB,MAAO,iCACF,oBADE;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,MAAM,CACrG;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qCAAC;AAAA,QAAK,MAAM,CAAC,eAAe,MAAM;AAAA,QAAG,YAAW;AAAA,QAAS,QAAO;AAAA,SAC7D,uBAAuB,qCAAC,gBAAgB,MAAhB,mBAAyB,UAAW,GAC7D,qCAAC,kCAAkB,UAAW,CAChC;AAAA,IAEJ;AACA,WAAO,qCAAC,kCAAkB,UAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AAElD,QAAM,wBAAwB,QAC5B,MACE,qCAAC,yBACE,oBAAoB,aAAa,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,IAAK,eAC7F,GAEF,CAAC,iBAAiB,eAAe,CACnC;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,sBAAsB,uBAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,qCAAC,oDAAsB,YAAtB;AAAA,UAAiC,mBAAmB;AAAA,UAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,SAChB,UACJ;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,qCAAC,qCAAqB,YACnB,OAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,qBACpE;AAEJ;AAGA,IAAO,eAAQ;",
   "names": []
 }

package/dist/esm/parts/Cells/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { StyledActionCell } from '../../styled';\nimport { TypescriptRow } from '../../types/props';\nimport { Cell } from './Cell';\nimport { DataTableContext } from '../../DataTableContext';\n\nconst Cells: React.ComponentType<{\n  row: TypescriptRow;\n  isRowSelected: boolean;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, isRowSelected, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  // we won't print sub-rows more nested than the first level\n  if (row.depth <= 1) {\n    let shouldAddExpandCell = false;\n    let userCellsProcessed = 0;\n    return (\n      <>\n        {row.cells.map((cell: any) => {\n          const { column } = cell;\n\n          const isUserCell = !INTERNAL_COLUMNS.includes(column.id);\n\n          let jsx = null;\n\n          if (column.id === 'rowActions') {\n            const ActionComponent = cell.render;\n            jsx = (\n              <StyledActionCell role=\"cell\" key={cell.id}>\n                <ActionComponent row={row} cell={cell} column={column} isRowSelected={isRowSelected} ctx={ctx} />\n              </StyledActionCell>\n            );\n          } else if (column.id === 'expander') {\n            // Next user's cell will have the expand cell\n            shouldAddExpandCell = !isDragOverlay; // Don't add it on drag overlay\n          } else {\n            jsx = (\n              <Cell\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell={isUserCell && shouldAddExpandCell}\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          }\n\n          // Drag overlay only need to print the DnD handle and the first user's cell\n          if (isDragOverlay) {\n            if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;\n          }\n\n          // Reset expand cell\n          if (isUserCell) {\n            shouldAddExpandCell = false;\n            userCellsProcessed += 1;\n          }\n          return jsx;\n        })}\n      </>\n    );\n  }\n\n  return null;\n};\n\nexport { Cells };\nexport default Cells;\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AAEA,MAAM,QAID,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,eAAe,kBAAkB;AAC9C,QAAM,MAAM,WAAW,gBAAgB;AAEvC,MAAI,IAAI,SAAS,GAAG;AAClB,QAAI,sBAAsB;AAC1B,QAAI,qBAAqB;AACzB,WACE,4DACG,IAAI,MAAM,IAAI,CAAC,SAAc;AAC5B,YAAM,EAAE,WAAW;AAEnB,YAAM,aAAa,CAAC,iBAAiB,SAAS,OAAO,EAAE;AAEvD,UAAI,MAAM;AAEV,UAAI,OAAO,OAAO,cAAc;AAC9B,cAAM,kBAAkB,KAAK;AAC7B,cACE,qCAAC;AAAA,UAAiB,MAAK;AAAA,UAAO,KAAK,KAAK;AAAA,WACtC,qCAAC;AAAA,UAAgB;AAAA,UAAU;AAAA,UAAY;AAAA,UAAgB;AAAA,UAA8B;AAAA,SAAU,CACjG;AAAA,MAEJ,WAAW,OAAO,OAAO,YAAY;AAEnC,8BAAsB,CAAC;AAAA,MACzB,OAAO;AACL,cACE,qCAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAqB,cAAc;AAAA,UACnC;AAAA,UACA,KAAK,KAAK;AAAA,SACZ;AAAA,MAEJ;AAGA,UAAI,eAAe;AACjB,YAAI,OAAO,OAAO,sBAAuB,EAAC,cAAc,uBAAuB;AAAI,gBAAM;AAAA,MAC3F;AAGA,UAAI,YAAY;AACd,8BAAsB;AACtB,8BAAsB;AAAA,MACxB;AACA,aAAO;AAAA,IACT,CAAC,CACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAGA,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { StyledActionCell } from '../../styled';\nimport { TypescriptRow } from '../../types/props';\nimport { Cell } from './Cell';\nimport { DataTableContext } from '../../DataTableContext';\n\nconst Cells: React.ComponentType<{\n  row: TypescriptRow;\n  isRowSelected: boolean;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, isRowSelected, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  // we won't print sub-rows more nested than the first level\n  if (row.depth <= 1) {\n    let shouldAddExpandCell = false;\n    let userCellsProcessed = 0;\n    return (\n      <>\n        {row.cells.map((cell: any) => {\n          const { column } = cell;\n\n          const isUserCell = !INTERNAL_COLUMNS.includes(column.id);\n\n          let jsx = null;\n\n          if (column.id === 'rowActions') {\n            const ActionComponent = cell.render;\n            jsx = (\n              <StyledActionCell role=\"cell\" key={cell.id}>\n                <ActionComponent row={row} cell={cell} column={column} isRowSelected={isRowSelected} ctx={ctx} />\n              </StyledActionCell>\n            );\n          } else if (column.id === 'expander') {\n            // Next user's cell will have the expand cell\n            shouldAddExpandCell = !isDragOverlay; // Don't add it on drag overlay\n          } else {\n            jsx = (\n              <Cell\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell={isUserCell && shouldAddExpandCell}\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          }\n\n          // Drag overlay only need to print the DnD handle and the first user's cell\n          if (isDragOverlay) {\n            if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;\n          }\n\n          // Reset expand cell\n          if (isUserCell) {\n            shouldAddExpandCell = false;\n            userCellsProcessed += 1;\n          }\n          return jsx;\n        })}\n      </>\n    );\n  }\n\n  return null;\n};\n\nexport { Cells };\nexport default Cells;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AACA;AAEA,MAAM,QAID,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,eAAe,kBAAkB;AAC9C,QAAM,MAAM,WAAW,gBAAgB;AAEvC,MAAI,IAAI,SAAS,GAAG;AAClB,QAAI,sBAAsB;AAC1B,QAAI,qBAAqB;AACzB,WACE,4DACG,IAAI,MAAM,IAAI,CAAC,SAAc;AAC5B,YAAM,EAAE,WAAW;AAEnB,YAAM,aAAa,CAAC,iBAAiB,SAAS,OAAO,EAAE;AAEvD,UAAI,MAAM;AAEV,UAAI,OAAO,OAAO,cAAc;AAC9B,cAAM,kBAAkB,KAAK;AAC7B,cACE,qCAAC;AAAA,UAAiB,MAAK;AAAA,UAAO,KAAK,KAAK;AAAA,WACtC,qCAAC;AAAA,UAAgB;AAAA,UAAU;AAAA,UAAY;AAAA,UAAgB;AAAA,UAA8B;AAAA,SAAU,CACjG;AAAA,MAEJ,WAAW,OAAO,OAAO,YAAY;AAEnC,8BAAsB,CAAC;AAAA,MACzB,OAAO;AACL,cACE,qCAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAqB,cAAc;AAAA,UACnC;AAAA,UACA,KAAK,KAAK;AAAA,SACZ;AAAA,MAEJ;AAGA,UAAI,eAAe;AACjB,YAAI,OAAO,OAAO,sBAAuB,EAAC,cAAc,uBAAuB;AAAI,gBAAM;AAAA,MAC3F;AAGA,UAAI,YAAY;AACd,8BAAsB;AACtB,8BAAsB;AAAA,MACxB;AACA,aAAO;AAAA,IACT,CAAC,CACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAGA,IAAO,gBAAQ;",
   "names": []
 }

package/dist/esm/parts/Cells/useCellStyle.js CHANGED Viewed

@@ -15,8 +15,8 @@ const useCellStyle = (column, shouldAddExpandCell) => {
       case "truncate":
         newStyle.whiteSpace = "nowrap";
         break;
-      default:
       case "wrap":
+      default:
         newStyle.whiteSpace = "normal";
         break;
     }

package/dist/esm/parts/Cells/useCellStyle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/useCellStyle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport * as CSS from 'csstype';\nimport { TypescriptColumn } from '../../types/props';\nimport { DataTableContext } from '../../DataTableContext';\n\nexport const useCellStyle = (column: TypescriptColumn, shouldAddExpandCell: boolean): [string, CSS.Properties] => {\n  const {\n    tableProps: { textWrap },\n  } = useContext(DataTableContext);\n\n  const appliedTextWrap = column.textWrap || textWrap;\n\n  const cellStyle = useMemo(() => {\n    const newStyle: CSS.Properties = {};\n    switch (appliedTextWrap) {\n      case 'wrap-all':\n        newStyle.wordBreak = 'break-all';\n        break;\n      case 'truncate':\n        newStyle.whiteSpace = 'nowrap';\n        break;\n      default:\n      case 'wrap':\n        newStyle.whiteSpace = 'normal';\n        break;\n    }\n    if (shouldAddExpandCell) {\n      newStyle.gridColumn = `span 2`;\n      newStyle.padding = `0 16px 0 2px`;\n    }\n    return newStyle;\n  }, [appliedTextWrap, shouldAddExpandCell]);\n\n  return [appliedTextWrap, cellStyle];\n};\n"],
-  "mappings": "AAAA;ACAA;AAGA;AAEO,MAAM,eAAe,CAAC,QAA0B,wBAA2D;AAChH,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,MACZ,WAAW,gBAAgB;AAE/B,QAAM,kBAAkB,OAAO,YAAY;AAE3C,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,WAA2B,CAAC;AAClC,YAAQ;AAAA,WACD;AACH,iBAAS,YAAY;AACrB;AAAA,WACG;AACH,iBAAS,aAAa;AACtB;AAAA;AAAA,WAEG;AACH,iBAAS,aAAa;AACtB;AAAA;AAEJ,QAAI,qBAAqB;AACvB,eAAS,aAAa;AACtB,eAAS,UAAU;AAAA,IACrB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,mBAAmB,CAAC;AAEzC,SAAO,CAAC,iBAAiB,SAAS;AACpC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo, type CSSProperties } from 'react';\nimport { TypescriptColumn } from '../../types/props';\nimport { DataTableContext } from '../../DataTableContext';\n\nexport const useCellStyle = (column: TypescriptColumn, shouldAddExpandCell: boolean): [string, CSS.Properties] => {\n  const {\n    tableProps: { textWrap },\n  } = useContext(DataTableContext);\n\n  const appliedTextWrap = column.textWrap || textWrap;\n\n  const cellStyle = useMemo(() => {\n    const newStyle: CSSProperties = {};\n    switch (appliedTextWrap) {\n      case 'wrap-all':\n        newStyle.wordBreak = 'break-all';\n        break;\n      case 'truncate':\n        newStyle.whiteSpace = 'nowrap';\n        break;\n      case 'wrap':\n      default:\n        newStyle.whiteSpace = 'normal';\n        break;\n    }\n    if (shouldAddExpandCell) {\n      newStyle.gridColumn = `span 2`;\n      newStyle.padding = `0 16px 0 2px`;\n    }\n    return newStyle;\n  }, [appliedTextWrap, shouldAddExpandCell]);\n\n  return [appliedTextWrap, cellStyle];\n};\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEO,MAAM,eAAe,CAAC,QAA0B,wBAA2D;AAChH,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,MACZ,WAAW,gBAAgB;AAE/B,QAAM,kBAAkB,OAAO,YAAY;AAE3C,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,WAA0B,CAAC;AACjC,YAAQ;AAAA,WACD;AACH,iBAAS,YAAY;AACrB;AAAA,WACG;AACH,iBAAS,aAAa;AACtB;AAAA,WACG;AAAA;AAEH,iBAAS,aAAa;AACtB;AAAA;AAEJ,QAAI,qBAAqB;AACvB,eAAS,aAAa;AACtB,eAAS,UAAU;AAAA,IACrB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,mBAAmB,CAAC;AAEzC,SAAO,CAAC,iBAAiB,SAAS;AACpC;",
   "names": []
 }

package/dist/esm/parts/DnDHandle.js CHANGED Viewed

@@ -20,7 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useContext } from "react";
 import { GripperVertical } from "@elliemae/ds-icons";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { SortableItemContext } from "./HoC/SortableItemContext";
 import { DATA_TESTID } from "../configs/constants";
 const StyledGripperButton = styled.div`

package/dist/esm/parts/DnDHandle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { DATA_TESTID } from '../configs/constants';\n\nconst StyledGripperButton = styled.div<{\n  isActive: boolean;\n  isDragOverlay: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay }) => (isActive || isDragOverlay ? 'grabbing' : 'grab')};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n`;\n\nconst DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      ref={innerRef}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n    >\n      <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n    </StyledGripperButton>\n  );\n};\nexport default DragHandle;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,sBAAsB,OAAO;AAAA,YAIvB,CAAC,EAAE,UAAU,oBAAqB,YAAY,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,aAKD,CAAC,EAAE,IAAI,aAAa,eAAe,eAAe;AACrD,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AACzD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,qCAAC;AAAA,IACC,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJrB;AAAA,IAMC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU,cAAc,IAAI;AAAA,IAC5B,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,MAER,qCAAC;AAAA,IAAgB,MAAK;AAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAC/F;AAEJ;AACA,IAAO,oBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { DATA_TESTID } from '../configs/constants';\n\nconst StyledGripperButton = styled.div<{\n  isActive: boolean;\n  isDragOverlay: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay }) => (isActive || isDragOverlay ? 'grabbing' : 'grab')};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n`;\n\nconst DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      ref={innerRef}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n    >\n      <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n    </StyledGripperButton>\n  );\n};\nexport default DragHandle;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,sBAAsB,OAAO;AAAA,YAIvB,CAAC,EAAE,UAAU,oBAAqB,YAAY,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,aAKD,CAAC,EAAE,IAAI,aAAa,eAAe,eAAe;AACrD,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AACzD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,qCAAC;AAAA,IACC,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJrB;AAAA,IAMC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU,cAAc,IAAI;AAAA,IAC5B,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,MAER,qCAAC;AAAA,IAAgB,MAAK;AAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAC/F;AAEJ;AACA,IAAO,oBAAQ;",
   "names": []
 }

package/dist/esm/parts/DropIndicator.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { ZIndexDataTable } from "../configs/zIndexInternalConfig";
 import { DropIndicatorPosition } from "./HoC/SortableItemContext";
 const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {

package/dist/esm/parts/DropIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig';\nimport { DropIndicatorPosition } from './HoC/SortableItemContext';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: DropIndicatorPosition;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${(props) => props.theme.colors.brand[600]};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill=\"#1E79C2\" />\n  </svg>\n);\n\nconst DropIndicator = ({ vertical, dropIndicatorPosition, isLast }: DropIndicatorProps): JSX.Element => {\n  if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ vertical, dropIndicatorPosition: safeDropIndicatorPosition }))}\n      <StyledIndicator vertical={vertical} dropIndicatorPosition={safeDropIndicatorPosition} />\n    </>\n  );\n};\n\nexport { DropIndicator };\nexport default DropIndicator;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig';\nimport { DropIndicatorPosition } from './HoC/SortableItemContext';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: DropIndicatorPosition;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${(props) => props.theme.colors.brand[600]};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill=\"#1E79C2\" />\n  </svg>\n);\n\nconst DropIndicator = ({ vertical, dropIndicatorPosition, isLast }: DropIndicatorProps): JSX.Element => {\n  if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ vertical, dropIndicatorPosition: safeDropIndicatorPosition }))}\n      <StyledIndicator vertical={vertical} dropIndicatorPosition={safeDropIndicatorPosition} />\n    </>\n  );\n};\n\nexport { DropIndicator };\nexport default DropIndicator;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAQA,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,eAAmC;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,eAC9D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,eAAoC;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,gBAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,gBAAgB;AAAA;AAG7B,MAAM,kBAAkB,CAAC,UACvB,qCAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,GACxB,qCAAC;AAAA,EAAO,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,aAAY;AAAA,EAAI,MAAK;AAAA,CAAU,CAC7D;AAGF,MAAM,gBAAgB,CAAC,EAAE,UAAU,uBAAuB,aAA8C;AACtG,MAAI,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE,SAAS,qBAAqB;AAAG,WAAO;AAEzG,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE,4DACG,gBAAgB,gBAAgB,EAAE,UAAU,uBAAuB,0BAA0B,CAAC,CAAC,GAChG,qCAAC;AAAA,IAAgB;AAAA,IAAoB,uBAAuB;AAAA,GAA2B,CACzF;AAEJ;AAGA,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/parts/EmptyContent.js CHANGED Viewed

@@ -4,8 +4,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { WarningTriangle } from "@elliemae/ds-icons";
 import { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from "@elliemae/ds-system";
 import { DSButton } from "@elliemae/ds-button";
-import styled from "styled-components";
-import PropTypes from "prop-types";
+import { styled } from "@elliemae/ds-system";
 import { DataTableContext } from "../DataTableContext";
 const EmptyStateWrapper = styled(Grid)`
   position: sticky;
@@ -50,9 +49,9 @@ const EmptyContent = ({ width }) => {
       noResultsMessage,
       noResultsSecondaryMessage,
       noResultsButtonLabel,
-      onNoResultsButtonClick,
-      width: tableWidth
-    }
+      onNoResultsButtonClick
+    },
+    virtualListRef
   } = useContext(DataTableContext);
   if (React2.isValidElement(noResultsPlaceholder))
     return /* @__PURE__ */ React2.createElement(CenterContentFlexWrapper, {
@@ -63,7 +62,7 @@ const EmptyContent = ({ width }) => {
     "aria-live": "assertive",
     role: "status"
   }, /* @__PURE__ */ React2.createElement(EmptyStateWrapper, {
-    width: tableWidth,
+    width: virtualListRef.current?.clientWidth,
     justifyContent: "center"
   }, /* @__PURE__ */ React2.createElement(Icon, {
     size: "xxl"
@@ -73,9 +72,6 @@ const EmptyContent = ({ width }) => {
     onClick: onNoResultsButtonClick
   }) : null));
 };
-EmptyContent.propTypes = {
-  width: PropTypes.number
-};
 var EmptyContent_default = EmptyContent;
 export {
   EmptyContent,

package/dist/esm/parts/EmptyContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/EmptyContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\n\nconst EmptyStateWrapper = styled(Grid)`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled.p`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled.p`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButton)`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled.div<{ width: number | string }>`\n  width: ${({ width }) => width}px;\n  height: calc(100% - 48px);\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n  const {\n    tableProps: {\n      noResultsPlaceholder,\n      noResultsMessage,\n      noResultsSecondaryMessage,\n      noResultsButtonLabel,\n      onNoResultsButtonClick,\n      width: tableWidth,\n    },\n  } = useContext(DataTableContext);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n  return (\n    <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n      <EmptyStateWrapper width={tableWidth} justifyContent=\"center\">\n        <Icon size=\"xxl\" />\n        <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nEmptyContent.propTypes = {\n  width: PropTypes.number,\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,OAAO,eAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,OAAO,QAAQ;AAAA,gBACd,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,OAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,MAEP,WAAW,gBAAgB;AAE/B,MAAI,OAAM,eAAe,oBAAoB;AAC3C,WAAO,qCAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,qCAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,qCAAC;AAAA,IAAkB,OAAO;AAAA,IAAY,gBAAe;AAAA,KACnD,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,qCAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,qCAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,qCAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,UAAU;AACnB;AAGA,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\n\nimport { DataTableContext } from '../DataTableContext';\n\nconst EmptyStateWrapper = styled(Grid)`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled.p`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled.p`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButton)`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled.div<{ width: number | string }>`\n  width: ${({ width }) => width}px;\n  height: calc(100% - 48px);\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n  const {\n    tableProps: {\n      noResultsPlaceholder,\n      noResultsMessage,\n      noResultsSecondaryMessage,\n      noResultsButtonLabel,\n      onNoResultsButtonClick,\n    },\n    virtualListRef,\n  } = useContext(DataTableContext);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n  return (\n    <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n      <EmptyStateWrapper width={virtualListRef.current?.clientWidth} justifyContent=\"center\">\n        <Icon size=\"xxl\" />\n        <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,OAAO,eAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,OAAO,QAAQ;AAAA,gBACd,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,OAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,MACE,WAAW,gBAAgB;AAE/B,MAAI,OAAM,eAAe,oBAAoB;AAC3C,WAAO,qCAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,qCAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,qCAAC;AAAA,IAAkB,OAAO,eAAe,SAAS;AAAA,IAAa,gBAAe;AAAA,KAC5E,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,qCAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,qCAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,qCAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAGA,IAAO,uBAAQ;",
   "names": []
 }

package/dist/esm/parts/FilterBar/FiltersBar.js CHANGED Viewed

@@ -39,9 +39,11 @@ const FiltersBar = () => {
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
     filterBarProps?.onClearAllFiltersClick?.();
+    setIsOpen(false);
   }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
   const onFilterBarClose = useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, "onClose");
+    dropdownMenuRef.current.focus();
     setIsOpen(false);
   }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOpen = useCallback(() => {
@@ -96,7 +98,11 @@ const FiltersBar = () => {
       {
         id: "__internal__option__clear__filters",
         label: "Clear Filters",
-        onClick: removeAllFilters
+        onClick: removeAllFilters,
+        onKeyDown: (e) => {
+          if (["Enter", "Space"].includes(e.code))
+            removeAllFilters();
+        }
       },
       ...filterBarProps?.extraOptions || []
     ],

package/dist/esm/parts/FilterBar/FiltersBar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/FiltersBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { FILTER_TYPES } from '../../exported-related';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n} from './components';\nimport { DataTableContext } from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n  const {\n    tableProps: { width, filterBarProps, onFiltersChange, filters },\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef(null);\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    filterBarProps?.onClearAllFiltersClick?.();\n  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');\n    filterBarProps?.onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);\n\n  const onTriggerClick = useCallback(() => {\n    filterBarProps?.onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [filterBarProps?.onDropdownMenuTriggerClick]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;\n    return isOpen;\n  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component: FilterPillComponent<unknown> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            value={value}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      <StyledDropdownMenu\n        preventOverflow=\"scrollParent\"\n        isOpen={finalIsOpen}\n        onClose={onFilterBarClose}\n        onClickOutsideMenu={onFilterBarOnClickOutside}\n        options={[\n          {\n            id: '__internal__option__clear__filters',\n            label: 'Clear Filters',\n            onClick: removeAllFilters,\n          },\n          ...(filterBarProps?.extraOptions || []),\n        ]}\n        triggerComponent={\n          <DSButtonV2\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n            buttonType=\"icon\"\n            innerRef={dropdownMenuRef}\n            onClick={onTriggerClick}\n          >\n            <MoreOptionsVert />\n          </DSButtonV2>\n        }\n      />\n    </StyledWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { FILTER_TYPES } from '../../exported-related';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n} from './components';\nimport { DataTableContext } from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n  const {\n    tableProps: { width, filterBarProps, onFiltersChange, filters },\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef(null);\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    filterBarProps?.onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current.focus();\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');\n    filterBarProps?.onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);\n\n  const onTriggerClick = useCallback(() => {\n    filterBarProps?.onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [filterBarProps?.onDropdownMenuTriggerClick]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;\n    return isOpen;\n  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component: FilterPillComponent<unknown> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            value={value}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      <StyledDropdownMenu\n        preventOverflow=\"scrollParent\"\n        isOpen={finalIsOpen}\n        onClose={onFilterBarClose}\n        onClickOutsideMenu={onFilterBarOnClickOutside}\n        options={[\n          {\n            id: '__internal__option__clear__filters',\n            label: 'Clear Filters',\n            onClick: removeAllFilters,\n            onKeyDown: (e: React.KeyboardEvent) => {\n              if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n            },\n          },\n          ...(filterBarProps?.extraOptions || []),\n        ]}\n        triggerComponent={\n          <DSButtonV2\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n            buttonType=\"icon\"\n            innerRef={dropdownMenuRef}\n            onClick={onTriggerClick}\n          >\n            <MoreOptionsVert />\n          </DSButtonV2>\n        }\n      />\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/DateRangePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/DateRangePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: FilterPillComponent<{ startDate: string; endDate: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={`${format(value.startDate)} - ${format(value.endDate)}`}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAGA,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,gBAA6E,CAAC;AAAA,EACzF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,OAAO,GAAG,OAAO,MAAM,SAAS,OAAO,OAAO,MAAM,OAAO;AAAA,IAC3D,UAAU;AAAA,IACV;AAAA,GACF,CACF,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: FilterPillComponent<{ startDate: string; endDate: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={`${format(value.startDate)} - ${format(value.endDate)}`}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,gBAA6E,CAAC;AAAA,EACzF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,OAAO,GAAG,OAAO,MAAM,SAAS,OAAO,OAAO,MAAM,OAAO;AAAA,IAC3D,UAAU;AAAA,IACV;AAAA,GACF,CACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/DateSwitcherPill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/DateSwitcherPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateSwitcherPill: FilterPillComponent<{ startDate: string; endDate: string; isDateRange: boolean }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value.isDateRange ? `${format(value.startDate)} - ${format(value.endDate)}` : format(value.startDate)}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAGA,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,mBAAsG,CAAC;AAAA,EAClH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,OAAO,MAAM,cAAc,GAAG,OAAO,MAAM,SAAS,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS;AAAA,IAC3G,UAAU;AAAA,IACV;AAAA,GACF,CACF,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateSwitcherPill: FilterPillComponent<{ startDate: string; endDate: string; isDateRange: boolean }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value.isDateRange ? `${format(value.startDate)} - ${format(value.endDate)}` : format(value.startDate)}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,mBAAsG,CAAC;AAAA,EAClH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,OAAO,MAAM,cAAc,GAAG,OAAO,MAAM,SAAS,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS;AAAA,IAC3G,UAAU;AAAA,IACV;AAAA,GACF,CACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/MultiSelectPill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent, FilterOptionT } from '../types';\n\nexport const MultiSelectPill: FilterPillComponent<FilterOptionT[]> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const multiSelectedValue = value as FilterOptionT[];\n  const handleOnRemove = useCallback(\n    (valToRemove) => {\n      const newFilters = [...filters];\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n      newFilters[filterIndex].value = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n      if (newFilters[filterIndex].value.length === 0) {\n        if (prevRef?.current) prevRef.current.focus();\n        else nextRef.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : {}}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAGO,MAAM,kBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,qBAAqB;AAC3B,QAAM,iBAAiB,YACrB,CAAC,gBAAgB;AACf,UAAM,aAAa,CAAC,GAAG,OAAO;AAC9B,UAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AACzE,eAAW,aAAa,QAAQ,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAChG,QAAI,WAAW,aAAa,MAAM,WAAW,GAAG;AAC9C,UAAI,SAAS;AAAS,gBAAQ,QAAQ,MAAM;AAAA;AACvC,gBAAQ,SAAS,MAAM;AAC5B,iBAAW,OAAO,aAAa,CAAC;AAAA,IAClC;AACA,oBAAgB,UAAU;AAAA,EAC5B,GACA,CAAC,SAAS,oBAAoB,iBAAiB,QAAQ,SAAS,OAAO,CACzE;AACA,SAAO,oBAAoB,SACzB,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B,qCAAC;AAAA,IACC,KAAK,IAAI;AAAA,IACT,MAAK;AAAA,IACL,OAAO,IAAI;AAAA,IACX,UAAU,MAAM,eAAe,GAAG;AAAA,IAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW,CAAC;AAAA,GAClE,CACD,CACH,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent, FilterOptionT } from '../types';\n\nexport const MultiSelectPill: FilterPillComponent<FilterOptionT[]> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const multiSelectedValue = value as FilterOptionT[];\n  const handleOnRemove = useCallback(\n    (valToRemove) => {\n      const newFilters = [...filters];\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n      newFilters[filterIndex].value = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n      if (newFilters[filterIndex].value.length === 0) {\n        if (prevRef?.current) prevRef.current.focus();\n        else nextRef.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : {}}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,kBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,qBAAqB;AAC3B,QAAM,iBAAiB,YACrB,CAAC,gBAAgB;AACf,UAAM,aAAa,CAAC,GAAG,OAAO;AAC9B,UAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AACzE,eAAW,aAAa,QAAQ,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAChG,QAAI,WAAW,aAAa,MAAM,WAAW,GAAG;AAC9C,UAAI,SAAS;AAAS,gBAAQ,QAAQ,MAAM;AAAA;AACvC,gBAAQ,SAAS,MAAM;AAC5B,iBAAW,OAAO,aAAa,CAAC;AAAA,IAClC;AACA,oBAAgB,UAAU;AAAA,EAC5B,GACA,CAAC,SAAS,oBAAoB,iBAAiB,QAAQ,SAAS,OAAO,CACzE;AACA,SAAO,oBAAoB,SACzB,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B,qCAAC;AAAA,IACC,KAAK,IAAI;AAAA,IACT,MAAK;AAAA,IACL,OAAO,IAAI;AAAA,IACX,UAAU,MAAM,eAAe,GAAG;AAAA,IAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW,CAAC;AAAA,GAClE,CACD,CACH,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/NumberRangePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/NumberRangePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const NumberRangePill: FilterPillComponent<{ from: string; to: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column, prevRef, nextRef]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAGO,MAAM,kBAAqE,CAAC;AAAA,EACjF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,QAAQ,SAAS,OAAO,CAAC;AAEvD,SAAQ,QAAO,QAAQ,QAAQ,MAAO,QAAO,MAAM,QAAQ,KACzD,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAY,OAAO,GAAG,MAAM,UAAU,MAAM;AAAA,IAAM,UAAU;AAAA,IAAgB;AAAA,GAAoB,CACjH,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const NumberRangePill: FilterPillComponent<{ from: string; to: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column, prevRef, nextRef]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,kBAAqE,CAAC;AAAA,EACjF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,QAAQ,SAAS,OAAO,CAAC;AAEvD,SAAQ,QAAO,QAAQ,QAAQ,MAAO,QAAO,MAAM,QAAQ,KACzD,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAY,OAAO,GAAG,MAAM,UAAU,MAAM;AAAA,IAAM,UAAU;AAAA,IAAgB;AAAA,GAAoB,CACjH,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/SelectPill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/SelectPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterOptionT, FilterPillComponent } from '../types';\n\nexport const SelectPill: FilterPillComponent<FilterOptionT> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.label} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAGO,MAAM,aAAiD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAY,OAAO,MAAM;AAAA,IAAO,UAAU;AAAA,IAAgB;AAAA,GAAoB,CAC/F,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterOptionT, FilterPillComponent } from '../types';\n\nexport const SelectPill: FilterPillComponent<FilterOptionT> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.label} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,aAAiD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAY,OAAO,MAAM;AAAA,IAAO,UAAU;AAAA,IAAgB;AAAA,GAAoB,CAC/F,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/SingleDatePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/SingleDatePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const SingleDatePill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.replace(/-/g, '/')} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAGO,MAAM,iBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAY,OAAO,MAAM,QAAQ,MAAM,GAAG;AAAA,IAAG,UAAU;AAAA,IAAgB;AAAA,GAAoB,CAC5G,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const SingleDatePill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.replace(/-/g, '/')} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,iBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qCAAC,qBACC,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAQ,OAAO;AAAA,GAAc,GAC5C,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAY,OAAO,MAAM,QAAQ,MAAM,GAAG;AAAA,IAAG,UAAU;AAAA,IAAgB;AAAA,GAAoB,CAC5G,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/styled.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
 import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const StyledWrapper = styled(Grid)`
   display: flex;
   flex-wrap: wrap;

package/dist/esm/parts/FilterBar/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\n\nexport const StyledWrapper = styled(Grid)`\n  display: flex;\n  flex-wrap: wrap;\n  width: ${(props) => props.width};\n  align-items: center;\n  min-height: 33px; // height of the pills\n  padding: 0 ${(props) => props.theme.space.xxxs};\n`;\n\nexport const StyledDropdownMenu = styled(DSDropdownMenu)`\n  margin-left: auto;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nexport const StyledWrapper = styled(Grid)`\n  display: flex;\n  flex-wrap: wrap;\n  width: ${(props) => props.width};\n  align-items: center;\n  min-height: 33px; // height of the pills\n  padding: 0 ${(props) => props.theme.space.xxxs};\n`;\n\nexport const StyledDropdownMenu = styled(DSDropdownMenu)`\n  margin-left: auto;\n`;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA;AAAA,WAG7B,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA,eAGb,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,qBAAqB,OAAO,cAAc;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/Filters/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Filters/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext } from 'react';\nimport {\n  DateRangeFilter,\n  DateSwitcherFilter,\n  NumberRangeFilter,\n  MultiSelectFilter,\n  SingleSelectFilter,\n  SingleDateFilter,\n  CurrencyRangeFilter,\n} from '../../addons/Filters';\nimport { FILTER_TYPES } from '../../exported-related';\nimport DataTableContext from '../../DataTableContext';\nimport { FilterProps } from '../../types/props';\n\nconst FilterMapper: Record<string, React.ComponentType<FilterProps>> = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n};\nexport const FilterMapItem: React.ComponentType<\n  Omit<FilterProps, 'patchHeaderFilterButtonAndMenu' | 'patchHeader' | 'onValueChange'>\n> = (props) => {\n  const { column, filterValue: filters, onFiltersChange } = props;\n\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n\n  const filterValue = filters.find((filter) => filter.id === column.id);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: any) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...filters, { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = [...filters];\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    filterValue: filterValue?.value,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);\n    }\n    const FilterComp = FilterMapper[column.filter];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    if (typeof column.Filter !== 'function') {\n      throw new Error(`column.Filter must be a component`);\n    }\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AAGA,MAAM,eAAiE;AAAA,GACpE,aAAa,SAAS;AAAA,GACtB,aAAa,eAAe;AAAA,GAC5B,aAAa,cAAc;AAAA,GAC3B,aAAa,aAAa;AAAA,GAC1B,aAAa,gBAAgB;AAAA,GAC7B,aAAa,eAAe;AAAA,GAC5B,aAAa,iBAAiB;AACjC;AACO,MAAM,gBAET,CAAC,UAAU;AACb,QAAM,EAAE,QAAQ,aAAa,SAAS,oBAAoB;AAE1D,QAAM,EAAE,gCAAgC,gBAAgB,WAAW,gBAAgB;AAEnF,QAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AAEpE,QAAM,gBAAgB,YACpB,CAAC,MAAc,aAAkB;AAC/B,UAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,QAAI,aAAa,QAAW;AAC1B,YAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,sBAAgB,UAAU;AAAA,IAC5B,WAAW,gBAAgB,IAAI;AAC7B,sBAAgB,CAAC,GAAG,SAAS,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,IACxE,OAAO;AACL,YAAM,aAAa,CAAC,GAAG,OAAO;AAC9B,iBAAW,aAAa,OAAO;AAC/B,iBAAW,aAAa,QAAQ;AAChC,sBAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GACA,CAAC,OAAO,IAAI,SAAS,eAAe,CACtC;AAEA,QAAM,cAAc,iCACf,QADe;AAAA,IAElB,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,CAAE,QAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,QAAQ;AAAA,IACxF;AACA,UAAM,aAAa,aAAa,OAAO;AACvC,WAAO,qCAAC,+BAAe,YAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,QAAI,OAAO,OAAO,WAAW,YAAY;AACvC,YAAM,IAAI,MAAM,mCAAmC;AAAA,IACrD;AACA,UAAM,aAAa,OAAO;AAC1B,WAAO,qCAAC,+BAAe,YAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\nimport React, { useCallback, useContext } from 'react';\nimport {\n  DateRangeFilter,\n  DateSwitcherFilter,\n  NumberRangeFilter,\n  MultiSelectFilter,\n  SingleSelectFilter,\n  SingleDateFilter,\n  CurrencyRangeFilter,\n} from '../../addons/Filters';\nimport { FILTER_TYPES } from '../../exported-related';\nimport DataTableContext from '../../DataTableContext';\nimport { FilterProps } from '../../types/props';\n\nconst FilterMapper: Record<string, React.ComponentType<FilterProps>> = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n};\nexport const FilterMapItem: React.ComponentType<\n  Omit<FilterProps, 'patchHeaderFilterButtonAndMenu' | 'patchHeader' | 'onValueChange'>\n> = (props) => {\n  const { column, filterValue: filters, onFiltersChange } = props;\n\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n\n  const filterValue = filters.find((filter) => filter.id === column.id);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: any) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...filters, { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = [...filters];\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    filterValue: filterValue?.value,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);\n    }\n    const FilterComp = FilterMapper[column.filter];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    if (typeof column.Filter !== 'function') {\n      throw new Error(`column.Filter must be a component`);\n    }\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AAGA,MAAM,eAAiE;AAAA,EACrE,CAAC,aAAa,SAAS;AAAA,EACvB,CAAC,aAAa,eAAe;AAAA,EAC7B,CAAC,aAAa,cAAc;AAAA,EAC5B,CAAC,aAAa,aAAa;AAAA,EAC3B,CAAC,aAAa,gBAAgB;AAAA,EAC9B,CAAC,aAAa,eAAe;AAAA,EAC7B,CAAC,aAAa,iBAAiB;AACjC;AACO,MAAM,gBAET,CAAC,UAAU;AACb,QAAM,EAAE,QAAQ,aAAa,SAAS,oBAAoB;AAE1D,QAAM,EAAE,gCAAgC,gBAAgB,WAAW,gBAAgB;AAEnF,QAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AAEpE,QAAM,gBAAgB,YACpB,CAAC,MAAc,aAAkB;AAC/B,UAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,QAAI,aAAa,QAAW;AAC1B,YAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,sBAAgB,UAAU;AAAA,IAC5B,WAAW,gBAAgB,IAAI;AAC7B,sBAAgB,CAAC,GAAG,SAAS,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,IACxE,OAAO;AACL,YAAM,aAAa,CAAC,GAAG,OAAO;AAC9B,iBAAW,aAAa,OAAO;AAC/B,iBAAW,aAAa,QAAQ;AAChC,sBAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GACA,CAAC,OAAO,IAAI,SAAS,eAAe,CACtC;AAEA,QAAM,cAAc,iCACf,QADe;AAAA,IAElB,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,CAAE,QAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,QAAQ;AAAA,IACxF;AACA,UAAM,aAAa,aAAa,OAAO;AACvC,WAAO,qCAAC,+BAAe,YAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,QAAI,OAAO,OAAO,WAAW,YAAY;AACvC,YAAM,IAAI,MAAM,mCAAmC;AAAA,IACrD;AACA,UAAM,aAAa,OAAO;AAC1B,WAAO,qCAAC,+BAAe,YAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/parts/Footer.js CHANGED Viewed

@@ -1,10 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import PropTypes from "prop-types";
 const Footer = ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
-Footer.propTypes = {
-  children: PropTypes.node
-};
 var Footer_default = Footer;
 export {
   Footer,

package/dist/esm/parts/Footer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Footer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Footer: React.ComponentType = ({ children }) => <>{children}</>;\n\nFooter.propTypes = {\n  children: PropTypes.node,\n};\n\nexport { Footer };\nexport default Footer;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,SAA8B,CAAC,EAAE,eAAe,4DAAG,QAAS;AAElE,OAAO,YAAY;AAAA,EACjB,UAAU,UAAU;AACtB;AAGA,IAAO,iBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nconst Footer: React.ComponentType = ({ children }) => <>{children}</>;\n\nexport { Footer };\nexport default Footer;\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,SAA8B,CAAC,EAAE,eAAe,4DAAG,QAAS;AAGlE,IAAO,iBAAQ;",
   "names": []
 }

package/dist/esm/parts/Headers/EmptyChildrenGroup.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const StyledBox = styled.div`
   height: 24px;
   margin: 0 ${(props) => props.theme.space.xxs};

package/dist/esm/parts/Headers/EmptyChildrenGroup.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/EmptyChildrenGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\n\nconst StyledBox = styled.div`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => <StyledBox />;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledBox = styled.div`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => <StyledBox />;\n"],
   "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA,cAEX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,qBAAiE,MAAM,qCAAC,eAAU;",
   "names": []
 }

package/dist/esm/parts/Headers/HeaderCell.js CHANGED Viewed

@@ -125,7 +125,7 @@ const HeaderCell = (props) => {
     ctx,
     draggableProps,
     textWrap
-  }), rightIcons, isResizeable && column.canResize !== false && /* @__PURE__ */ React2.createElement(HeaderResizer, {
+  }), rightIcons, isResizeable && column.canResize !== false && !column.columns && /* @__PURE__ */ React2.createElement(HeaderResizer, {
     column
   })), /* @__PURE__ */ React2.createElement("span", {
     id: `${column.id}-instructions`,

package/dist/esm/parts/Headers/HeaderCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n    patchHeader,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  useRecoverFocusCol(isDragging, dragHandleRef);\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n    patchHeader,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  useRecoverFocusCol(isDragging, dragHandleRef);\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && !column.columns && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,MAAM,gCAAgC,CAAC,SAAiB,WAAoB,YAAqB,aAAsB;AACrH,QAAM,UAAU,YAAY,IAAI,KAAK;AACrC,MAAI,CAAC,aAAa,CAAC,cAAc,CAAC;AAAU,WAAO;AAEnD,MAAI,UAAU,WACV,0GACA;AACJ,MAAI,aAAa,YAAY;AAC3B,cAAU,8FAA8F;AAAA,EAC1G,WAAW,aAAa,YAAY;AAClC,cAAU,kBACR,YAAY,cAAc,iEACyB;AAAA,EACvD;AACA,SAAO,GAAG,UAAU;AACtB;AAQO,MAAM,aAAuD,CAAC,UAAU;AAC7E,QAAM,EAAE,QAAQ,eAAe,YAAY;AAC3C,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,oBAAoB,oBAAoB,iBAAiB,SAAS;AAAA,IAC9F;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,cAAc,QAAQ,MAAM,aAAa,OAAO,KAAK,CAAC,cAAc,MAAM,CAAC;AACjF,QAAM,gBAAgB,OAAuB,IAAI;AACjD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,EAAE,WAAW,QAAQ,iBAAiB,eAAe,eAAe,OAAO,eAAe,oBAAoB;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,qBAAmB,YAAY,aAAa;AAE5C,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC;AAAe,aAAO;AAC3B,WACE,qCAAC,qCACC,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,UAAU;AAAA,KACZ,GACC,mBAAmB,qCAAC;AAAA,MAAY,cAAc,OAAO;AAAA,KAAc,CACtE;AAAA,EAEJ,GAAG,CAAC,eAAe,QAAQ,KAAK,iBAAiB,aAAa,SAAS,eAAe,CAAC;AAEvF,QAAM,qBAAqB,QACzB,MACE,qCAAC;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAAS,OAAO,EAAE,UAAU,WAAW;AAAA,KAC/D,qCAAC;AAAA,IAAkB,WAAW;AAAA,KAC5B,qCAAC;AAAA,IACC,KAAK,OAAO;AAAA,IACZ,UAAU;AAAA,IACV,aAAa,aAAa;AAAA,IAC1B,IAAI,OAAO;AAAA,IACX;AAAA,GACF,CACF,CACF,GAEF,CAAC,OAAO,IAAI,eAAe,YAAY,aAAa,YAAY,CAClE;AAEA,QAAM,WAAW,sBAAsB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,OAAO;AAAA,EACpB,CAAC;AAED,SACE,qCAAC;AAAA,IACC;AAAA,KACI,WAFL;AAAA,IAGC,MAAM,YAAY,IAAI,iBAAiB;AAAA,IACvC;AAAA,IACA,oBAAkB,GAAG,OAAO;AAAA,IAE5B,aAAW,kBAAmB,OAAO,eAAe,eAAe,cAAe;AAAA,IAClF,eAAa,YAAY;AAAA,IACzB,iBAAiB,CAAC,CAAC,cAAc,IAAI,UAAU;AAAA,IAC/C,UAAU,OAAO,iBAAiB,QAAQ,KAAK;AAAA,IAC/C;AAAA,IACA,kBAAkB,kBAAkB,eAAe;AAAA,IACnD;AAAA,IACA,KAAK,OAAO;AAAA,MAEZ,qCAAC;AAAA,IAAK,OAAM;AAAA,IAAO,MAAM;AAAA,KACtB,iBAAiB,oBAClB,qCAAC;AAAA,IAAgB;AAAA,IAAgB;AAAA,IAAU;AAAA,IAAgC;AAAA,GAAoB,GAC9F,YACA,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO,WAAW,qCAAC;AAAA,IAAc;AAAA,GAAgB,CACnG,GACA,qCAAC;AAAA,IAAK,IAAI,GAAG,OAAO;AAAA,IAAmB,OAAO,EAAE,SAAS,OAAO;AAAA,IAAG,eAAY;AAAA,KAC5E,8BACC,SACA,sBAAsB,OAAO,eAAe,MAC5C,WACA,OAAO,OACT,CACF,CACF;AAEJ;",
   "names": []
 }