@elliemae/ds-shuttle 2.3.0-alpha.6 → 2.3.0-next.0

package/cjs/ShuttleImpl.js

@@ -0,0 +1,311 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.some.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var react = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var withProviders = require('./withProviders.js');
+var Shuttle_actions = require('./Shuttle.actions.js');
+var helper = require('./helper.js');
+var ShuttleRenderer = require('./ShuttleRenderer.js');
+var SearchState = require('./SearchState.js');
+var updateShuttleStateFromProps = require('./updateShuttleStateFromProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["idField", "nonSelectedItems", "moreItemsLoading"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+class ShuttleImpl extends react.Component {
+  constructor(props) {
+    super(props);
+
+    this.getState = () => {
+      const {
+        movedItems
+      } = this.state;
+      return Object.keys(movedItems);
+    };
+
+    this.state = {
+      prevProps: {},
+      preparedItems: [],
+      checkedItems: [],
+      // left breadcrumb
+      hierarchy: [{
+        name: props.sourceRootTitle,
+        id: null
+      }],
+      // right breadcrumb
+      hierarchyDest: [{
+        name: props.targetRootTitle,
+        id: null
+      }],
+      movedItems: [],
+      sourceItems: [],
+      targetItems: []
+    };
+    this.toggleItemSelection = this.toggleItemSelection.bind(this);
+    this.resetCheckedItems = this.resetCheckedItems.bind(this);
+    this.resetMovedItems = this.resetMovedItems.bind(this);
+    this.moveCheckedItems = this.moveCheckedItems.bind(this);
+    this.handleTargetSortEnd = this.handleTargetSortEnd.bind(this);
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    return updateShuttleStateFromProps(nextProps, prevState);
+  }
+
+  componentDidMount() {
+    const {
+      setGetStatus
+    } = this.props;
+    setGetStatus(this.getState);
+  }
+
+  handleChange() {
+    const {
+      onChange
+    } = this.props;
+    const {
+      movedItems
+    } = this.state;
+    onChange(Object.keys(movedItems));
+  }
+
+  navigate(item, dest, direction) {
+    const {
+      onDrillDown,
+      onDrillDownTarget
+    } = this.props;
+    if (!dest) onDrillDown(item, direction);
+    if (dest) onDrillDownTarget(item, direction);
+    const {
+      reset: resetSearchState
+    } = this.context;
+    resetSearchState();
+    this.setState(helper.pipe([Shuttle_actions.navigateTo(item, dest), Shuttle_actions.resetCheckedItems()]));
+  }
+
+  resetCheckedItems() {
+    this.setState(Shuttle_actions.resetCheckedItems());
+  }
+
+  resetMovedItems() {
+    const {
+      selectedItems,
+      onRemoveAllFromTarget
+    } = this.props;
+
+    if (!selectedItems) {
+      this.setState(helper.pipe([Shuttle_actions.navigateTo({
+        id: null
+      }, true), Shuttle_actions.resetMovedItems()]), () => {
+        this.handleChange();
+      });
+    } else {
+      this.setState(helper.pipe([Shuttle_actions.navigateTo({
+        id: null
+      }, true)]));
+    }
+
+    onRemoveAllFromTarget();
+  }
+
+  addToTarget(item) {
+    const {
+      selectedItems,
+      onAddToTarget
+    } = this.props;
+
+    if (!selectedItems) {
+      this.setState(helper.pipe([Shuttle_actions.addToTarget(item), Shuttle_actions.resetCheckedItems()]), () => {
+        this.handleChange();
+      });
+    }
+
+    onAddToTarget(item);
+  }
+
+  removeFromTarget(item) {
+    const {
+      selectedItems,
+      onRemoveFromTarget
+    } = this.props;
+
+    if (!selectedItems) {
+      this.setState(helper.pipe([Shuttle_actions.removeFromTarget(item)]), () => {
+        this.handleChange();
+      });
+    }
+
+    onRemoveFromTarget(item);
+  }
+
+  toggleItemSelection(item) {
+    this.setState(Shuttle_actions.toggleItemSelection(item.id));
+  }
+
+  moveCheckedItems() {
+    const {
+      onAddCheckedItems,
+      selectedItems,
+      nonSelectedItems
+    } = this.props;
+    const {
+      checkedItems,
+      preparedItems
+    } = this.state;
+    const isControlledV2 = !!selectedItems && !!nonSelectedItems;
+    const checked = isControlledV2 ? nonSelectedItems.filter(item => checkedItems.some(check => check === item)) : checkedItems;
+    const items = helper.getItemsById(checked, preparedItems);
+    const actions = !selectedItems ? items.map(item => Shuttle_actions.addToTarget(item)) : [];
+    this.setState(helper.pipe([...actions, Shuttle_actions.resetCheckedItems()]), () => {
+      this.handleChange();
+    });
+    onAddCheckedItems(items);
+  }
+
+  handleTargetSortEnd(_ref) {
+    let {
+      sourceItem,
+      targetItem
+    } = _ref;
+    const {
+      idField,
+      onTargetSortEnd
+    } = this.props;
+    const {
+      targetItems,
+      hierarchyDest,
+      movedItems
+    } = this.state;
+    const hierarchyId = helper.getActiveIdFromHierarchy(hierarchyDest).id;
+    const collection = !hierarchyId ? movedItems : targetItems;
+    const oldIndex = collection.findIndex(tItem => tItem[idField] === sourceItem[idField]);
+    const newIndex = collection.findIndex(tItem => tItem[idField] === targetItem[idField]);
+    const sortedMovedItems = !hierarchyId ? dsUtilities.arrayMove(movedItems, oldIndex, newIndex) : movedItems;
+    const sortedItems = hierarchyId ? dsUtilities.arrayMove(targetItems, oldIndex, newIndex) : targetItems;
+    this.setState({
+      targetItems: sortedItems,
+      movedItems: sortedMovedItems
+    });
+    onTargetSortEnd({
+      sourceItem,
+      targetItem
+    });
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      idField,
+      nonSelectedItems,
+      moreItemsLoading
+    } = _this$props,
+          rest = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    const {
+      hierarchy,
+      hierarchyDest,
+      checkedItems,
+      movedItems,
+      preparedItems: items,
+      targetItems
+    } = this.state;
+    const {
+      state: {
+        searchTerm,
+        searching
+      }
+    } = this.context;
+
+    const handleControlledSourceItms = () => {
+      const {
+        id
+      } = helper.getActiveIdFromHierarchy(hierarchy);
+
+      if (id) {
+        return helper.filterBySearch(searchTerm, searching)(helper.getChildrenFromParent(id)(nonSelectedItems.map(it => items.find(itt => itt.id === it))));
+      }
+
+      return helper.filterBySearch(searchTerm, searching)(items.filter(it => nonSelectedItems.some(itt => itt === it.id && !nonSelectedItems.some(ittt => ittt === it.parent))));
+    };
+
+    let composedSourceItems; // controlled V2 TODO make it default controlled behavior
+
+    if (nonSelectedItems) {
+      composedSourceItems = handleControlledSourceItms();
+    } else {
+      composedSourceItems = dsUtilities.compose(helper.filterBySearch(searchTerm, searching), helper.filterMovedItems(movedItems), helper.getChildrenFromParent(helper.getActiveIdFromHierarchy(hierarchy).id))(items);
+    }
+
+    const handleControlledTargetItms = () => {
+      const {
+        id
+      } = helper.getActiveIdFromHierarchy(hierarchyDest);
+
+      if (id) {
+        return helper.getChildrenFromParent(helper.getActiveIdFromHierarchy(hierarchyDest).id)(this.props.selectedItems.map(it => items.find(itt => itt.id === it)));
+      }
+
+      return targetItems.filter(it => this.props.selectedItems.some(itt => itt === it.id && !this.props.selectedItems.some(ittt => ittt === it.parent)));
+    };
+
+    let composedTargetItems; // controlled V2 TODO make it default controlled behavior
+
+    if (nonSelectedItems) {
+      composedTargetItems = handleControlledTargetItms();
+    } else {
+      composedTargetItems = dsUtilities.compose(tItems => {
+        const hierarchyId = helper.getActiveIdFromHierarchy(hierarchyDest).id;
+        return hierarchyId ? dsUtilities.compose(helper.filterMovedItems(movedItems), helper.getChildrenFromParent(hierarchyId))(tItems) : movedItems;
+      })(targetItems);
+    }
+
+    return /*#__PURE__*/jsxRuntime.jsx(ShuttleRenderer, _objectSpread(_objectSpread({}, rest), {}, {
+      moreItemsLoading: moreItemsLoading,
+      checkedItems: checkedItems,
+      hierarchy: hierarchy,
+      hierarchyDest: hierarchyDest,
+      onCheckItem: this.toggleItemSelection,
+      onClearCheckedItems: this.resetCheckedItems,
+      onClearMovedItems: this.resetMovedItems,
+      onItemCheck: this.toggleItemSelection,
+      onMoveCheckedItems: this.moveCheckedItems,
+      onMoveItemToSource: item => this.removeFromTarget(item, false),
+      onMoveItemToTarget: item => this.addToTarget(item, true),
+      onNavigateOnSourceTo: (item, direction) => this.navigate(item, false, direction),
+      onNavigateOnTargetTo: (item, direction) => this.navigate(item, true, direction),
+      onSourceSortEnd: () => null,
+      onTargetSortEnd: this.handleTargetSortEnd,
+      sourceItems: composedSourceItems,
+      targetItems: composedTargetItems
+    }));
+  }
+
+}
+
+ShuttleImpl.contextType = SearchState.Context;
+var ShuttleImpl$1 = withProviders(ShuttleImpl);
+
+module.exports = ShuttleImpl$1;

package/cjs/ShuttleRenderer.js

@@ -0,0 +1,139 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var ShuttleSource = require('./components/ShuttleSource.js');
+var ShuttleTarget = require('./components/ShuttleTarget.js');
+var classedComponents = require('./classedComponents.js');
+var AnimationState = require('./AnimationState.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["containerProps", "onNavigateOnTargetTo", "onNavigateOnSourceTo", "onMoveItemToSource", "onMoveItemToTarget", "onClearMovedItems", "onMoveCheckedItems", "onClearCheckedItems", "onToggleSearch", "onSearch", "onSearchClose", "onSearchOpen", "searching", "onCheckItem", "hierarchy", "hierarchyDest", "checkedItems", "sourceItems", "targetItems", "sourceEmptyMessage", "targetEmptyMessage", "composeTargetItemProps", "composeSourceItemProps", "targetSortable", "sourceSortable", "onSourceSortEnd", "onTargetSortEnd", "loadingSource", "loadingTarget", "onGetMoreItems", "moreItemsLoading", "hasNextPage"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const noop = () => {};
+
+function ShuttleRenderer(_ref) {
+  let {
+    containerProps,
+    onNavigateOnTargetTo = noop,
+    onNavigateOnSourceTo = noop,
+    onMoveItemToSource = noop,
+    onMoveItemToTarget = noop,
+    onClearMovedItems = noop,
+    onMoveCheckedItems = noop,
+    onClearCheckedItems = noop,
+    onToggleSearch = noop,
+    onSearch = noop,
+    onSearchClose = noop,
+    onSearchOpen = noop,
+    searching = false,
+    onCheckItem = noop,
+    hierarchy = [],
+    hierarchyDest = [],
+    checkedItems = [],
+    sourceItems = [],
+    targetItems = [],
+    sourceEmptyMessage,
+    targetEmptyMessage,
+    composeTargetItemProps,
+    composeSourceItemProps,
+    targetSortable,
+    sourceSortable,
+    onSourceSortEnd,
+    onTargetSortEnd,
+    loadingSource = false,
+    loadingTarget = false,
+    onGetMoreItems = () => {},
+    moreItemsLoading = false,
+    hasNextPage = false
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const {
+    setIsMoving,
+    setIsDrillingDown,
+    setIsMovingBack,
+    reset
+  } = react.useContext(AnimationState.Context);
+  const removeAnimationState = react.useCallback(() => setTimeout(() => reset(), 500));
+  return /*#__PURE__*/jsxRuntime.jsxs(classedComponents.ShuttleContainer, _objectSpread(_objectSpread({
+    "data-testid": "em-ds-shuttle"
+  }, containerProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ShuttleSource, _objectSpread(_objectSpread({}, otherProps), {}, {
+      checkedItems: checkedItems,
+      composeSourceItemProps: composeSourceItemProps,
+      emptyMessage: sourceEmptyMessage,
+      hierarchy: hierarchy,
+      items: sourceItems,
+      onCheckItem: onCheckItem,
+      onClearCheckedItems: onClearCheckedItems,
+      onMoveCheckedItems: item => {
+        setIsMoving(true);
+        onMoveCheckedItems(item);
+      },
+      onMoveItem: item => {
+        setIsMoving(true);
+        onMoveItemToTarget(item);
+        removeAnimationState();
+      },
+      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);
+      },
+      onSearch: onSearch,
+      onSearchClose: onSearchClose,
+      onSearchOpen: onSearchOpen,
+      onSortEnd: onSourceSortEnd,
+      onToggleSearch: onToggleSearch,
+      searching: searching,
+      sourceSortable: sourceSortable,
+      loading: loadingSource,
+      onGetMoreItems: onGetMoreItems,
+      moreItemsLoading: moreItemsLoading,
+      hasNextPage: hasNextPage
+    })), /*#__PURE__*/jsxRuntime.jsx(ShuttleTarget, _objectSpread(_objectSpread({}, otherProps), {}, {
+      composeTargetItemProps: composeTargetItemProps,
+      emptyMessage: targetEmptyMessage,
+      hierarchy: hierarchyDest,
+      items: targetItems,
+      onClearMovedItems: () => {
+        setIsMovingBack(true);
+        removeAnimationState();
+        onClearMovedItems();
+      },
+      onMoveItem: item => {
+        setIsMovingBack(true);
+        removeAnimationState();
+        onMoveItemToSource(item);
+      },
+      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);
+      },
+      onSortEnd: onTargetSortEnd,
+      targetSortable: targetSortable,
+      loading: loadingTarget
+    }))]
+  }));
+}
+
+module.exports = ShuttleRenderer;

package/cjs/ShuttleState.js

@@ -0,0 +1,80 @@
+'use strict';
+
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var react = require('react');
+var createContainer = require('constate');
+var helper = require('./helper.js');
+var Shuttle_actions = require('./Shuttle.actions.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var createContainer__default = /*#__PURE__*/_interopDefaultLegacy(createContainer);
+
+function useShuttleState() {
+  const [shuttleState, setShuttleState] = react.useState({
+    checkedItems: [],
+    movedItems: {},
+    hierarchy: [{
+      name: 'Category',
+      id: null
+    }],
+    hierarchyDest: [{
+      name: 'Added users',
+      id: null
+    }]
+  });
+
+  const setState = state => setShuttleState(state(shuttleState));
+
+  function setMovedItems() {
+    let itemsIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    const itemsToMove = helper.getItemsById(itemsIds, items);
+    const pipeActions = itemsToMove.map(item => Shuttle_actions.moveItem(item));
+    setState(helper.pipe([Shuttle_actions.resetMovedItems(), ...pipeActions]));
+  }
+
+  function navigate(item, dest) {
+    setState(helper.pipe([Shuttle_actions.navigateTo(item, dest), Shuttle_actions.resetCheckedItems()]));
+  }
+
+  function resetCheckedItems() {
+    setState(Shuttle_actions.resetCheckedItems());
+  }
+
+  function resetMovedItems() {
+    setState(helper.pipe([Shuttle_actions.navigateTo({
+      id: null
+    }, true), Shuttle_actions.resetMovedItems()]));
+  }
+
+  function moveItem(item, dest) {
+    setState(helper.pipe([Shuttle_actions.moveItem(item), Shuttle_actions.resetCheckedItems()]));
+  }
+
+  function toggleItemSelection(item) {
+    setState(Shuttle_actions.toggleItemSelection(item.id));
+  }
+
+  function moveCheckedItems(items) {
+    const pipeActions = items.map(item => moveItem(item));
+    setState(helper.pipe([...pipeActions, resetCheckedItems()]));
+  }
+
+  return {
+    state: shuttleState,
+    toggleItemSelection,
+    moveCheckedItems,
+    moveItem,
+    resetMovedItems,
+    resetCheckedItems,
+    navigate,
+    setMovedItems
+  };
+}
+
+var useShuttleState$1 = createContainer__default["default"](useShuttleState, value => [value.state]);
+
+module.exports = useShuttleState$1;

package/cjs/animation/animationConfig.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// shuttle list and items constants
+const itemAnimationDuration = 300;
+const listAnimationDuration = 300;
+const xPosMovement = 500; // breadcrumb constants
+
+const breadcrumbDuration = 200;
+const xBreadcrumbPos = 300;
+const animationConfig = {
+  slideRight: {
+    from: {
+      transform: 'translate3d(0,0,0)'
+    },
+    to: {
+      transform: "translate3d(".concat(xPosMovement, "px,0,0)")
+    }
+  },
+  slideLeft: {
+    from: {
+      transform: 'translate3d(0,0,0)'
+    },
+    to: {
+      transform: "translate3d(".concat(-xPosMovement, "px,0,0)")
+    }
+  },
+  moveItem: isMovingLeft => ({
+    config: {
+      duration: itemAnimationDuration
+    },
+    enter: {
+      opacity: 1,
+      transform: "translate3d(".concat(0, "px,0,0)")
+    },
+    from: {
+      opacity: 1,
+      transform: "translate3d(".concat(isMovingLeft ? -xPosMovement : xPosMovement, "px,0,0)")
+    },
+    leave: {
+      transform: "translate3d(".concat(isMovingLeft ? -xPosMovement : xPosMovement, "px,0,0)")
+    }
+  }),
+  moveList: isDrillingDown => ({
+    config: {
+      duration: listAnimationDuration
+    },
+    enter: {
+      opacity: 1,
+      transform: 'translate3d(0,0,0)'
+    },
+    from: {
+      opacity: 0,
+      transform: "translate3d(0px,".concat(isDrillingDown ? xPosMovement : -xPosMovement, "px,0)")
+    },
+    leave: {
+      opacity: 0,
+      transform: "translate3d(0,".concat(isDrillingDown ? -xPosMovement : xPosMovement, "px,0)")
+    }
+  }),
+  breadcrumb: () => ({
+    config: {
+      duration: breadcrumbDuration
+    },
+    enter: {
+      opacity: 1,
+      transform: "translate3d(".concat(0, "px,0,0)")
+    },
+    from: {
+      opacity: 0,
+      transform: "translate3d(".concat(xBreadcrumbPos, "px,0px,0)")
+    },
+    leave: {
+      opacity: 0,
+      transform: "translate3d(".concat(xBreadcrumbPos, "px,0,0)")
+    }
+  })
+};
+
+exports.animationConfig = animationConfig;

package/cjs/classedComponents.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSButton = require('@elliemae/ds-button');
+var dsClassnames = require('@elliemae/ds-classnames');
+var ShuttleBreadcrumb = require('./components/ShuttleBreadcrumb.js');
+var OverflowList = require('./components/OverflowList.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+const blockName = 'shuttle';
+const headerBlockName = "".concat(blockName, "-header");
+const listBlockName = "".concat(blockName, "-list");
+const footerBlockName = "".concat(blockName, "-footer");
+const ShuttleContainer = dsClassnames.aggregatedClasses('div')(blockName); // wrapper
+
+const ShuttleWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-wrapper")); // header
+
+const ShuttleHeader = dsClassnames.aggregatedClasses('div')(headerBlockName);
+const ShuttleHeaderBreadcrumb = dsClassnames.aggregatedClasses(ShuttleBreadcrumb)(headerBlockName, 'breadcrumb');
+const ShuttleHeaderSearchToggle = dsClassnames.aggregatedClasses(DSButton__default["default"])(headerBlockName, 'search-toggle'); // list
+
+const ShuttleList = dsClassnames.aggregatedClasses('div')(listBlockName, null, _ref => {
+  let {
+    showPulse
+  } = _ref;
+  return {
+    'show-pulse': showPulse
+  };
+});
+const ShuttleListPanel = dsClassnames.aggregatedClasses('div')(listBlockName, 'panel', _ref2 => {
+  let {
+    open
+  } = _ref2;
+  return {
+    open
+  };
+});
+const Overflow = dsClassnames.aggregatedClasses(OverflowList)(listBlockName, 'overflow', _ref3 => {
+  let {
+    empty,
+    searching
+  } = _ref3;
+  return {
+    empty,
+    searching
+  };
+});
+const EmptyMessage = dsClassnames.aggregatedClasses('span')(listBlockName, 'empty-message');
+const LoadingList = dsClassnames.aggregatedClasses('div')(listBlockName, 'loading-list'); // footer
+
+const ShuttleFooter = dsClassnames.aggregatedClasses('div')(footerBlockName);
+const ShuttleFooterActions = dsClassnames.aggregatedClasses('div')(footerBlockName, 'actions');
+const ShuttleFooterCounter = dsClassnames.aggregatedClasses('span')(footerBlockName, 'counter');
+
+exports.EmptyMessage = EmptyMessage;
+exports.LoadingList = LoadingList;
+exports.Overflow = Overflow;
+exports.ShuttleContainer = ShuttleContainer;
+exports.ShuttleFooter = ShuttleFooter;
+exports.ShuttleFooterActions = ShuttleFooterActions;
+exports.ShuttleFooterCounter = ShuttleFooterCounter;
+exports.ShuttleHeader = ShuttleHeader;
+exports.ShuttleHeaderBreadcrumb = ShuttleHeaderBreadcrumb;
+exports.ShuttleHeaderSearchToggle = ShuttleHeaderSearchToggle;
+exports.ShuttleList = ShuttleList;
+exports.ShuttleListPanel = ShuttleListPanel;
+exports.ShuttleWrapper = ShuttleWrapper;