@elliemae/ds-shuttle 2.0.0-alpha.8 → 2.0.0-next.11

package/esm/ShuttleRenderer.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useContext, useCallback } from 'react';
@@ -79,7 +84,8 @@ function ShuttleRenderer(_ref) {
         onMoveItemToTarget(item);
         removeAnimationState();
       },
-      onNavigateTo: (item, direction = 'down') => {
+      onNavigateTo: function (item) {
+        let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
         const indexInHierarchy = hierarchy.findIndex(hItem => hItem.id === item.id);
         setIsDrillingDown(indexInHierarchy === -1);
         onNavigateOnSourceTo(item, direction);
@@ -110,7 +116,8 @@ function ShuttleRenderer(_ref) {
         removeAnimationState();
         onMoveItemToSource(item);
       },
-      onNavigateTo: (item, direction = 'down') => {
+      onNavigateTo: function (item) {
+        let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
         const indexInHierarchy = hierarchyDest.findIndex(hItem => hItem.id === item.id);
         setIsDrillingDown(indexInHierarchy === -1);
         onNavigateOnTargetTo(item, direction);

package/esm/ShuttleState.js

@@ -1,3 +1,6 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useState } from 'react';
 import createContainer from 'constate';
 import { getItemsById, pipe } from './helper.js';
@@ -19,7 +22,9 @@ function useShuttleState() {
 
   const setState = state => setShuttleState(state(shuttleState));
 
-  function setMovedItems(itemsIds = [], items = []) {
+  function setMovedItems() {
+    let itemsIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     const itemsToMove = getItemsById(itemsIds, items);
     const pipeActions = itemsToMove.map(item => moveItem(item));
     setState(pipe([resetMovedItems(), ...pipeActions]));
@@ -47,7 +52,7 @@ function useShuttleState() {
     setState(toggleItemSelection(item.id));
   }
 
-  function moveCheckedItems(items, dest = true) {
+  function moveCheckedItems(items) {
     const pipeActions = items.map(item => moveItem$1(item));
     setState(pipe([...pipeActions, resetCheckedItems$1()]));
   }

package/esm/animation/animationConfig.js

@@ -11,7 +11,7 @@ const animationConfig = {
       transform: 'translate3d(0,0,0)'
     },
     to: {
-      transform: `translate3d(${xPosMovement}px,0,0)`
+      transform: "translate3d(".concat(xPosMovement, "px,0,0)")
     }
   },
   slideLeft: {
@@ -19,7 +19,7 @@ const animationConfig = {
       transform: 'translate3d(0,0,0)'
     },
     to: {
-      transform: `translate3d(${-xPosMovement}px,0,0)`
+      transform: "translate3d(".concat(-xPosMovement, "px,0,0)")
     }
   },
   moveItem: isMovingLeft => ({
@@ -28,14 +28,14 @@ const animationConfig = {
     },
     enter: {
       opacity: 1,
-      transform: `translate3d(${0}px,0,0)`
+      transform: "translate3d(".concat(0, "px,0,0)")
     },
     from: {
       opacity: 1,
-      transform: `translate3d(${isMovingLeft ? -xPosMovement : xPosMovement}px,0,0)`
+      transform: "translate3d(".concat(isMovingLeft ? -xPosMovement : xPosMovement, "px,0,0)")
     },
     leave: {
-      transform: `translate3d(${isMovingLeft ? -xPosMovement : xPosMovement}px,0,0)`
+      transform: "translate3d(".concat(isMovingLeft ? -xPosMovement : xPosMovement, "px,0,0)")
     }
   }),
   moveList: isDrillingDown => ({
@@ -48,11 +48,11 @@ const animationConfig = {
     },
     from: {
       opacity: 0,
-      transform: `translate3d(0px,${isDrillingDown ? xPosMovement : -xPosMovement}px,0)`
+      transform: "translate3d(0px,".concat(isDrillingDown ? xPosMovement : -xPosMovement, "px,0)")
     },
     leave: {
       opacity: 0,
-      transform: `translate3d(0,${isDrillingDown ? -xPosMovement : xPosMovement}px,0)`
+      transform: "translate3d(0,".concat(isDrillingDown ? -xPosMovement : xPosMovement, "px,0)")
     }
   }),
   breadcrumb: () => ({
@@ -61,15 +61,15 @@ const animationConfig = {
     },
     enter: {
       opacity: 1,
-      transform: `translate3d(${0}px,0,0)`
+      transform: "translate3d(".concat(0, "px,0,0)")
     },
     from: {
       opacity: 0,
-      transform: `translate3d(${xBreadcrumbPos}px,0px,0)`
+      transform: "translate3d(".concat(xBreadcrumbPos, "px,0px,0)")
     },
     leave: {
       opacity: 0,
-      transform: `translate3d(${xBreadcrumbPos}px,0,0)`
+      transform: "translate3d(".concat(xBreadcrumbPos, "px,0,0)")
     }
   })
 };

package/esm/classedComponents.js

@@ -1,37 +1,46 @@
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import ShuttleBreadcrumb from './components/ShuttleBreadcrumb.js';
 import OverflowList from './components/OverflowList.js';
 
 const blockName = 'shuttle';
-const headerBlockName = `${blockName}-header`;
-const listBlockName = `${blockName}-list`;
-const footerBlockName = `${blockName}-footer`;
+const headerBlockName = "".concat(blockName, "-header");
+const listBlockName = "".concat(blockName, "-list");
+const footerBlockName = "".concat(blockName, "-footer");
 const ShuttleContainer = aggregatedClasses('div')(blockName); // wrapper
 
-const ShuttleWrapper = aggregatedClasses('div')(`${blockName}-wrapper`); // header
+const ShuttleWrapper = aggregatedClasses('div')("".concat(blockName, "-wrapper")); // header
 
 const ShuttleHeader = aggregatedClasses('div')(headerBlockName);
 const ShuttleHeaderBreadcrumb = aggregatedClasses(ShuttleBreadcrumb)(headerBlockName, 'breadcrumb');
 const ShuttleHeaderSearchToggle = aggregatedClasses(DSButton)(headerBlockName, 'search-toggle'); // list
 
-const ShuttleList = aggregatedClasses('div')(listBlockName, null, ({
-  showPulse
-}) => ({
-  'show-pulse': showPulse
-}));
-const ShuttleListPanel = aggregatedClasses('div')(listBlockName, 'panel', ({
-  open
-}) => ({
-  open
-}));
-const Overflow = aggregatedClasses(OverflowList)(listBlockName, 'overflow', ({
-  empty,
-  searching
-}) => ({
-  empty,
-  searching
-}));
+const ShuttleList = aggregatedClasses('div')(listBlockName, null, _ref => {
+  let {
+    showPulse
+  } = _ref;
+  return {
+    'show-pulse': showPulse
+  };
+});
+const ShuttleListPanel = aggregatedClasses('div')(listBlockName, 'panel', _ref2 => {
+  let {
+    open
+  } = _ref2;
+  return {
+    open
+  };
+});
+const Overflow = aggregatedClasses(OverflowList)(listBlockName, 'overflow', _ref3 => {
+  let {
+    empty,
+    searching
+  } = _ref3;
+  return {
+    empty,
+    searching
+  };
+});
 const EmptyMessage = aggregatedClasses('span')(listBlockName, 'empty-message');
 const LoadingList = aggregatedClasses('div')(listBlockName, 'loading-list'); // footer
 

package/esm/components/LoadingIndicator.js

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import { DSCircularProgressIndicator } from '@elliemae/ds-basic/CircularProgressIndicator';
+import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
 import styled from 'styled-components';
 
 var _Wrapper;

package/esm/components/OverflowList.js

@@ -1,5 +1,12 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useContext } from 'react';
 import { useTransition, animated } from 'react-spring/web';
 import { animationConfig } from '../animation/animationConfig.js';
@@ -9,11 +16,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function OverflowList({
-  className = '',
-  activeHierarchy = '',
-  children
-}) {
+function OverflowList(_ref) {
+  let {
+    className = '',
+    activeHierarchy = '',
+    children
+  } = _ref;
   const {
     state: {
       isDrillingDown = false
@@ -23,13 +31,16 @@ function OverflowList({
   const overflowTransition = useTransition(activeHierarchy, null, _objectSpread(_objectSpread({}, animationConfig.moveList(isDrillingDown)), {}, {
     onDestroyed: () => setIsDrillingDown(false)
   }));
-  return overflowTransition.map(({
-    props,
-    key
-  }) => /*#__PURE__*/_jsx(animated.div, {
-    className: className,
-    style: props
-  }, key, children));
+  return overflowTransition.map(_ref2 => {
+    let {
+      props,
+      key
+    } = _ref2;
+    return /*#__PURE__*/_jsx(animated.div, {
+      className: className,
+      style: props
+    }, key, children);
+  });
 }
 
 export { OverflowList as default };

package/esm/components/ShuttleBreadcrumb.js

@@ -1,29 +1,35 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'react';
 import { useTransition, animated } from 'react-spring/web';
 import DSBreadcrumb from '@elliemae/ds-basic/Breadcrumb';
 import { animationConfig } from '../animation/animationConfig.js';
 
-function ShuttleBreadcrumb({
-  className = '',
-  hierarchy = [],
-  onNavigateTo = () => null
-}) {
+function ShuttleBreadcrumb(_ref) {
+  let {
+    className = '',
+    hierarchy = [],
+    onNavigateTo = () => null
+  } = _ref;
   const animatedCrumbs = useTransition(hierarchy, item => item.id, animationConfig.breadcrumb());
   return /*#__PURE__*/_jsx("div", {
     className: className
   }, void 0, /*#__PURE__*/_jsx(DSBreadcrumb, {
     isTitle: true
-  }, void 0, animatedCrumbs.map(({
-    item,
-    props,
-    key
-  }) => /*#__PURE__*/_jsx(DSBreadcrumb.Item, {
-    containerComponent: animated.li,
-    label: item.name,
-    onClick: () => onNavigateTo(item, 'up'),
-    style: props
-  }, key))));
+  }, void 0, animatedCrumbs.map(_ref2 => {
+    let {
+      item,
+      props,
+      key
+    } = _ref2;
+    return /*#__PURE__*/_jsx(DSBreadcrumb.Item, {
+      containerComponent: animated.li,
+      label: item.name,
+      onClick: () => onNavigateTo(item, 'up'),
+      style: props
+    }, key);
+  })));
 }
 
 export { ShuttleBreadcrumb as default };

package/esm/components/ShuttleInfiniteScrollIndicator.js

@@ -1,26 +1,32 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';
+import DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';
 
 var _DSIndeterminateProgr;
 const blockName = 'shuttle-infinite-scroll-indicator';
-const InfiniteScrollBarContainer = aggregatedClasses('div')(blockName, null, ({
-  isOpen
-}) => ({
-  opened: isOpen
-}));
+const InfiniteScrollBarContainer = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return {
+    opened: isOpen
+  };
+});
 
-const ShuttleInfiniteScrollIndicator = ({
-  isOpen
-}) => /*#__PURE__*/_jsx(InfiniteScrollBarContainer, {
-  classProps: {
+const ShuttleInfiniteScrollIndicator = _ref2 => {
+  let {
     isOpen
-  },
-  "data-testid": blockName
-}, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
-  processing: true,
-  title: "Loading"
-})));
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InfiniteScrollBarContainer, {
+    classProps: {
+      isOpen
+    },
+    "data-testid": blockName
+  }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
+    processing: true,
+    title: "Loading"
+  })));
+};
 
 export { ShuttleInfiniteScrollIndicator as default };

package/esm/components/ShuttleListItem/ActionButtons.js

@@ -1,11 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import DSButton from '@elliemae/ds-basic/Button';
-import CloseCircle from '@elliemae/ds-icons/CloseCircle';
-import ArrowShortRight from '@elliemae/ds-icons/ArrowShortRight';
-import ArrowShortReturn from '@elliemae/ds-icons/ArrowShortReturn';
+import DSButton from '@elliemae/ds-button';
+import { ArrowShortRight, ArrowShortReturn, CloseCircle } from '@elliemae/ds-icons';
 import { jsx } from 'react/jsx-runtime';
 
 var _CloseCircle, _ArrowShortRight, _ArrowShortReturn;

package/esm/components/ShuttleListItem/ShuttleListItem.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
@@ -6,7 +11,7 @@ import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { animated } from 'react-spring/web';
 import TruncatedTooltipText from '@elliemae/ds-basic/TruncatedTooltipText';
 import { sortableHandle } from 'react-sortable-hoc';
-import GripperVertical from '@elliemae/ds-icons/GripperVertical';
+import { GripperVertical } from '@elliemae/ds-icons';
 import { isMovable } from '../../helper.js';
 import { jsxs } from 'react/jsx-runtime';
 
@@ -21,20 +26,23 @@ const blockName = 'shuttle-list-item';
 const Wrapper = aggregatedClasses(animated.li)(blockName);
 const ActionsGroup = aggregatedClasses('div')(blockName, 'actions');
 const IconWrapper = aggregatedClasses('div')(blockName, 'icon-wrapper');
-const Content = aggregatedClasses('label')(blockName, 'content', ({
-  isChecked,
-  canMove,
-  isReadonly
-}) => ({
-  checked: isChecked,
-  'can-hover': canMove,
-  'read-only': isReadonly
-}));
+const Content = aggregatedClasses('label')(blockName, 'content', _ref => {
+  let {
+    isChecked,
+    canMove,
+    isReadonly
+  } = _ref;
+  return {
+    checked: isChecked,
+    'can-hover': canMove,
+    'read-only': isReadonly
+  };
+});
 const SortHandler = sortableHandle(() => _GripperVertical || (_GripperVertical = /*#__PURE__*/_jsx(GripperVertical, {
   className: "gripper"
 })));
 
-function ShuttleListItem(_ref) {
+function ShuttleListItem(_ref2) {
   let {
     item = {},
     showIcons = undefined,
@@ -45,8 +53,8 @@ function ShuttleListItem(_ref) {
     showActions = true,
     actions = [],
     showSortHandler = false
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
     role: "listitem",

package/esm/components/ShuttleListItem/ShuttleSourceListItem.js

@@ -1,6 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useCallback, useEffect } from 'react';
 import { isMovable } from '../../helper.js';
 import { DrillDownButton, MoveButton } from './ActionButtons.js';

package/esm/components/ShuttleListItem/ShuttleTargetListItem.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';

package/esm/components/ShuttleListPanel.js

@@ -1,13 +1,14 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { ShuttleListPanel as ShuttleListPanel$1 } from '../classedComponents.js';
 
-function ShuttleListPanel({
-  onClick = () => null,
-  open = false,
-  children
-}) {
+function ShuttleListPanel(_ref) {
+  let {
+    onClick = () => null,
+    open = false,
+    children
+  } = _ref;
   return /*#__PURE__*/_jsx(ShuttleListPanel$1, {
     classProps: {
       open

package/esm/components/ShuttleSearchBox.js

@@ -2,15 +2,18 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { Component } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { debounce } from '@elliemae/ds-utilities/utils';
-import DSTextBox from '@elliemae/ds-basic/form/TextBox';
+import { debounce } from '@elliemae/ds-utilities';
+import { DSTextBox } from '@elliemae/ds-form';
 
 const blockName = 'shuttle-search-box';
-const SearchBoxContainer = aggregatedClasses('div')(blockName, null, ({
-  isOpen
-}) => ({
-  opened: isOpen
-}));
+const SearchBoxContainer = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return {
+    opened: isOpen
+  };
+});
 const filterList = debounce((term, onFilterCallback) => {
   onFilterCallback(term);
 }, 200);
@@ -25,9 +28,10 @@ class ShuttleSearchBox extends Component {
     this.handleKeyPress = this.handleKeyPress.bind(this);
   }
 
-  static getDerivedStateFromProps(nextProps, {
-    prevProps
-  }) {
+  static getDerivedStateFromProps(nextProps, _ref2) {
+    let {
+      prevProps
+    } = _ref2;
     const {
       value
     } = nextProps;

package/esm/components/ShuttleSource.js

@@ -1,11 +1,17 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext, useMemo, useCallback } from 'react';
-import ArrowShortRight from '@elliemae/ds-icons/ArrowShortRight';
-import DSButton from '@elliemae/ds-basic/Button';
-import Search from '@elliemae/ds-icons/Search';
-import { runAll } from '@elliemae/ds-utilities/utils';
+import { Search, ArrowShortRight } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { runAll } from '@elliemae/ds-utilities';
 import ShuttleSearchBox from './ShuttleSearchBox.js';
 import ShuttleInfiniteScrollIndicator from './ShuttleInfiniteScrollIndicator.js';
 import ShuttleSourceListItem from './ShuttleListItem/ShuttleSourceListItem.js';
@@ -29,31 +35,32 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const noop = () => {};
 
-function ShuttleSource({
-  items = [],
-  checkedItems = [],
-  // build Map() and memoize it for better performance
-  hierarchy = [],
-  onMoveItem = noop,
-  onCheckItem = noop,
-  onMoveCheckedItems = noop,
-  onNavigateTo = noop,
-  onClearCheckedItems = noop,
-  emptyMessage = 'No items found',
-  composeSourceItemProps = noop,
-  loading = false,
-  onSearch = noop,
-  onSearchClose = noop,
-  onSearchOpen = noop,
-  sourceSortable = false,
-  onSortEnd = noop,
-  sourceClearItemsText = 'CLEAR ALL',
-  searchPlaceholder,
-  renderSourceCounter = amount => `${amount} items`,
-  onGetMoreItems = () => {},
-  moreItemsLoading = false,
-  hasNextPage = false
-}) {
+function ShuttleSource(_ref) {
+  let {
+    items = [],
+    checkedItems = [],
+    // build Map() and memoize it for better performance
+    hierarchy = [],
+    onMoveItem = noop,
+    onCheckItem = noop,
+    onMoveCheckedItems = noop,
+    onNavigateTo = noop,
+    onClearCheckedItems = noop,
+    emptyMessage = 'No items found',
+    composeSourceItemProps = noop,
+    loading = false,
+    onSearch = noop,
+    onSearchClose = noop,
+    onSearchOpen = noop,
+    sourceSortable = false,
+    onSortEnd = noop,
+    sourceClearItemsText = 'CLEAR ALL',
+    searchPlaceholder,
+    renderSourceCounter = amount => "".concat(amount, " items"),
+    onGetMoreItems = () => {},
+    moreItemsLoading = false,
+    hasNextPage = false
+  } = _ref;
   const {
     state: {
       isMovingBack = false,
@@ -87,10 +94,11 @@ function ShuttleSource({
   }, [searching]);
   const ComponentList = useMemo(() => sourceSortable ? VirtualizedSortableList : VirtualizedList, [sourceSortable]);
 
-  const handleSortEnd = ({
-    oldIndex,
-    newIndex
-  }) => {
+  const handleSortEnd = _ref2 => {
+    let {
+      oldIndex,
+      newIndex
+    } = _ref2;
     onSortEnd({
       sourceItem: items[oldIndex],
       targetItem: items[newIndex]
@@ -131,11 +139,11 @@ function ShuttleSource({
     }
   }, void 0, /*#__PURE__*/_jsx(ComponentList, {
     helperClass: "drag-helper",
-    itemRenderer: _ref => {
+    itemRenderer: _ref3 => {
       let {
         item
-      } = _ref,
-          rest = _objectWithoutProperties(_ref, _excluded);
+      } = _ref3,
+          rest = _objectWithoutProperties(_ref3, _excluded);
 
       return /*#__PURE__*/jsx(ShuttleSourceListItem, _objectSpread(_objectSpread(_objectSpread({
         "data-testid": "source-list-item"