@elliemae/ds-data-table 3.5.0-rc.0 → 3.5.0-rc.3

package/dist/esm/exported-related/FilterPopover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/FilterPopover.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useCallback, useContext, useEffect, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { DATA_TESTID } from '../configs/constants';\nimport { ReduxHeader, TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n  position: relative;\n  justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n  background-color: #fff;\n`;\ninterface FilterPopoverProps {\n  column: TypescriptColumn;\n  columnId: string;\n  triggerIcon: JSX.Element;\n  menuContent: JSX.Element;\n  onTriggerClick?: (id: string, e: UIEvent) => void;\n  onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n  reduxHeader: ReduxHeader;\n  innerRef: MutableRefObject<HTMLDivElement>;\n  ariaLabel: string;\n  customStyles?: React.CSSProperties;\n}\n\nconst ButtonTrap = ({ cb }) => (\n  <span\n    aria-hidden=\"true\"\n    tabIndex={0}\n    onFocus={(e) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n  column,\n  columnId,\n  triggerIcon,\n  menuContent,\n  onTriggerClick = () => null,\n  onClickOutsideMenu = () => null,\n  reduxHeader,\n  innerRef,\n  ariaLabel,\n  customStyles,\n}) => {\n  const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n    hideFilterButton: true,\n    hideFilterMenu: true,\n  };\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n  const isIconVisible = !hideFilterButton || !hideFilterMenu;\n  const isMenuOpen = !hideFilterMenu;\n\n  const handleClickOutsideMenu = (e) => {\n    onClickOutsideMenu(columnId, e);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  };\n\n  useEffect(() => {\n    const closeMenu = () => {\n      patchHeaderFilterButtonAndMenu(columnId, true);\n    };\n    window.addEventListener('blur', closeMenu);\n\n    return () => {\n      window.removeEventListener('blur', closeMenu);\n    };\n  }, [columnId, patchHeaderFilterButtonAndMenu]);\n\n  const handleTriggerClick = (e) => {\n    onTriggerClick(columnId, e);\n    patchHeader(columnId, { hideFilterMenu: isMenuOpen, hideFilterButton: false });\n    e.stopPropagation();\n  };\n\n  const [referenceElement, setReferenceElement] = useState(null);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    referenceElement?.focus();\n  }, [columnId, patchHeader, referenceElement]);\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={(e) => {\n        e.stopPropagation();\n        if (e.code === 'Escape') {\n          patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n          referenceElement.focus();\n        }\n        // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n        // so we just prevent default behaviour in this case\n        if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n          e.preventDefault();\n        }\n      }}\n      style={{ display: 'flex' }}\n    >\n      <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n        <Button\n          onClick={handleTriggerClick}\n          buttonType=\"text\"\n          aria-label={ariaLabel}\n          aria-hidden=\"true\"\n          size=\"s\"\n          leftIcon={triggerIcon}\n          // implement treeview mergerefs\n          innerRef={(_ref) => {\n            if (isIconVisible) setReferenceElement(_ref);\n            innerRef.current = _ref;\n          }}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n        />\n      </FilterButton>\n      {referenceElement && (\n        <DSPopperJS\n          referenceElement={referenceElement}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end']}\n        >\n          <PopperContent>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useCallback, useContext, useEffect, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { DATA_TESTID } from '../configs/constants';\nimport { ReduxHeader, TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n  position: relative;\n  justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n  background-color: #fff;\n`;\ninterface FilterPopoverProps {\n  column: TypescriptColumn;\n  columnId: string;\n  triggerIcon: JSX.Element;\n  menuContent: JSX.Element;\n  onTriggerClick?: (id: string, e: UIEvent) => void;\n  onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n  reduxHeader: ReduxHeader;\n  innerRef: MutableRefObject<HTMLDivElement>;\n  ariaLabel: string;\n  customStyles?: React.CSSProperties;\n}\n\nconst ButtonTrap = ({ cb }) => (\n  <span\n    aria-hidden=\"true\"\n    tabIndex={0}\n    onFocus={(e) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n  column,\n  columnId,\n  triggerIcon,\n  menuContent,\n  onTriggerClick = () => null,\n  onClickOutsideMenu = () => null,\n  reduxHeader,\n  innerRef,\n  ariaLabel,\n  customStyles,\n}) => {\n  const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n    hideFilterButton: true,\n    hideFilterMenu: true,\n  };\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n  const isIconVisible = !hideFilterButton || !hideFilterMenu;\n  const isMenuOpen = !hideFilterMenu;\n\n  const handleClickOutsideMenu = (e) => {\n    onClickOutsideMenu(columnId, e);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  };\n\n  useEffect(() => {\n    const closeMenu = () => {\n      patchHeaderFilterButtonAndMenu(columnId, true);\n    };\n    window.addEventListener('blur', closeMenu);\n\n    return () => {\n      window.removeEventListener('blur', closeMenu);\n    };\n  }, [columnId, patchHeaderFilterButtonAndMenu]);\n\n  const handleTriggerClick = useCallback(\n    (e) => {\n      onTriggerClick(columnId, e);\n      patchHeader(columnId, { hideFilterMenu: isMenuOpen, hideFilterButton: false });\n      e.stopPropagation();\n    },\n    [columnId, isMenuOpen, onTriggerClick, patchHeader],\n  );\n\n  const [referenceElement, setReferenceElement] = useState(null);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    referenceElement?.focus();\n  }, [columnId, patchHeader, referenceElement]);\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={(e) => {\n        e.stopPropagation();\n        if (e.code === 'Escape') {\n          patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n          referenceElement.focus();\n        }\n        // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n        // so we just prevent default behaviour in this case\n        if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n          e.preventDefault();\n        }\n      }}\n      style={{ display: 'flex' }}\n    >\n      <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n        <Button\n          onClick={handleTriggerClick}\n          buttonType=\"text\"\n          aria-label={ariaLabel}\n          aria-hidden=\"true\"\n          size=\"s\"\n          leftIcon={triggerIcon}\n          // implement treeview mergerefs\n          innerRef={(_ref) => {\n            if (isIconVisible) setReferenceElement(_ref);\n            innerRef.current = _ref;\n          }}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n        />\n      </FilterButton>\n      {referenceElement && (\n        <DSPopperJS\n          referenceElement={referenceElement}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end']}\n        >\n          <PopperContent>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Headers/HeaderResizer.js

@@ -41,10 +41,10 @@ const HeaderResizer = ({ column }) => {
     e.stopPropagation();
   }, [column.id, nextWidth, visibleColumnsCopy]);
   const onResizeEnd = useCallback(() => {
-    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));
+    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
     setIsResizing(false);
     onColumnResize(column.id, nextWidth);
-  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
+  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
   useEffect(() => {
     const debouncedResizeHandler = onResizeHandler;
     const debouncedResizeEnd = onResizeEnd;

package/dist/esm/parts/Headers/HeaderResizer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.5.0-rc.0",
+  "version": "3.5.0-rc.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -571,23 +571,23 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.5.0-rc.0",
-    "@elliemae/ds-circular-progress-indicator": "3.5.0-rc.0",
-    "@elliemae/ds-controlled-form": "3.5.0-rc.0",
-    "@elliemae/ds-drag-and-drop": "3.5.0-rc.0",
-    "@elliemae/ds-dropdownmenu": "3.5.0-rc.0",
-    "@elliemae/ds-form": "3.5.0-rc.0",
-    "@elliemae/ds-form-layout-blocks": "3.5.0-rc.0",
-    "@elliemae/ds-grid": "3.5.0-rc.0",
-    "@elliemae/ds-icons": "3.5.0-rc.0",
-    "@elliemae/ds-pagination": "3.5.0-rc.0",
-    "@elliemae/ds-pills": "3.5.0-rc.0",
-    "@elliemae/ds-popperjs": "3.5.0-rc.0",
-    "@elliemae/ds-skeleton": "3.5.0-rc.0",
-    "@elliemae/ds-system": "3.5.0-rc.0",
-    "@elliemae/ds-toolbar": "3.5.0-rc.0",
-    "@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.0",
-    "@elliemae/ds-utilities": "3.5.0-rc.0",
+    "@elliemae/ds-button": "3.5.0-rc.3",
+    "@elliemae/ds-circular-progress-indicator": "3.5.0-rc.3",
+    "@elliemae/ds-controlled-form": "3.5.0-rc.3",
+    "@elliemae/ds-drag-and-drop": "3.5.0-rc.3",
+    "@elliemae/ds-dropdownmenu": "3.5.0-rc.3",
+    "@elliemae/ds-form": "3.5.0-rc.3",
+    "@elliemae/ds-form-layout-blocks": "3.5.0-rc.3",
+    "@elliemae/ds-grid": "3.5.0-rc.3",
+    "@elliemae/ds-icons": "3.5.0-rc.3",
+    "@elliemae/ds-pagination": "3.5.0-rc.3",
+    "@elliemae/ds-pills": "3.5.0-rc.3",
+    "@elliemae/ds-popperjs": "3.5.0-rc.3",
+    "@elliemae/ds-skeleton": "3.5.0-rc.3",
+    "@elliemae/ds-system": "3.5.0-rc.3",
+    "@elliemae/ds-toolbar": "3.5.0-rc.3",
+    "@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.3",
+    "@elliemae/ds-utilities": "3.5.0-rc.3",
     "react-virtual": "~2.10.4",
     "uid": "~2.0.0"
   },