@elliemae/ds-shuttle 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/DSShuttle.js

@@ -1,141 +1,213 @@
-import * as React from "react";
-import React2 from "react";
-import { debounce } from "lodash";
-import { describe, PropTypes } from "react-desc";
-import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
-import { ShuttleImpl } from "./ShuttleImpl";
-import utils from "./utils";
-const noop = () => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import { debounce } from 'lodash';
+import { PropTypes, describe } from 'react-desc';
+import { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
+import ShuttleImpl from './ShuttleImpl.js';
+export { default as utils } from './utils.js';
+
+const noop = () => {};
+
+const DSShuttle = _ref => {
+  let {
+    containerProps = {},
+    idField = 'id',
+    parentIdField = 'parent',
+    showIcons = true,
+    items = [],
+    selectedItems = undefined,
+    // if defined it becomes controlled (v1)
+    // TODO make `nonSelectedItems` the default controlled behavior (v2)
+    nonSelectedItems = undefined,
+    onSearch = noop,
+    onSearchOpen = noop,
+    onSearchClose = noop,
+    onDrillDown = noop,
+    onDrillDownTarget = noop,
+    onTargetSortEnd = noop,
+    setGetStatus = noop,
+    targetSortable = true,
+    sourceEmptyMessage = 'No Items Found',
+    sourceRootTitle = 'Category',
+    targetEmptyMessage = 'No Items Selected',
+    targetRootTitle = 'Selected Items',
+    composeSourceItemProps = () => ({}),
+    composeTargetItemProps = () => ({}),
+    onAddToTarget = noop,
+    onAddCheckedItems = noop,
+    onRemoveFromTarget = noop,
+    onRemoveAllFromTarget = noop,
+    onChange = noop,
+    renderSourceCounter = noop,
+    renderTargetCounter = noop,
+    sourceClearItemsText = 'CLEAR ALL',
+    targetClearItemsText = 'CLEAR ALL',
+    searchPlaceholder = 'Search field ID, name, etc.',
+    loadingSource = false,
+    loadingTarget = false,
+    onGetMoreItems = () => null,
+    hasNextPage = false,
+    moreItemsLoading
+  } = _ref;
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx(ShuttleImpl, {
+    composeSourceItemProps: composeSourceItemProps,
+    composeTargetItemProps: composeTargetItemProps,
+    containerProps: containerProps,
+    idField: idField,
+    items: items,
+    onAddCheckedItems: onAddCheckedItems,
+    onAddToTarget: onAddToTarget,
+    onChange: onChange,
+    onDrillDown: onDrillDown,
+    nonSelectedItems: nonSelectedItems,
+    onDrillDownTarget: onDrillDownTarget,
+    onRemoveAllFromTarget: onRemoveAllFromTarget,
+    onRemoveFromTarget: onRemoveFromTarget,
+    onSearch: onSearch,
+    onSearchClose: onSearchClose,
+    onSearchOpen: onSearchOpen,
+    onTargetSortEnd: onTargetSortEnd,
+    parentIdField: parentIdField,
+    renderSourceCounter: renderSourceCounter,
+    renderTargetCounter: renderTargetCounter,
+    searchPlaceholder: searchPlaceholder,
+    selectedItems: selectedItems,
+    setGetStatus: setGetStatus,
+    showIcons: showIcons,
+    sourceClearItemsText: sourceClearItemsText,
+    sourceEmptyMessage: sourceEmptyMessage,
+    sourceRootTitle: sourceRootTitle,
+    targetClearItemsText: targetClearItemsText,
+    targetEmptyMessage: targetEmptyMessage,
+    targetRootTitle: targetRootTitle,
+    targetSortable: targetSortable,
+    loadingSource: loadingSource,
+    loadingTarget: loadingTarget,
+    onGetMoreItems: debounce(function () {
+      onGetMoreItems(...arguments);
+    }, 500),
+    moreItemsLoading: moreItemsLoading,
+    hasNextPage: hasNextPage
+  }));
 };
-const DSShuttle = ({
-  containerProps = {},
-  idField = "id",
-  parentIdField = "parent",
-  showIcons = true,
-  items = [],
-  selectedItems = void 0,
-  nonSelectedItems = void 0,
-  onSearch = noop,
-  onSearchOpen = noop,
-  onSearchClose = noop,
-  onDrillDown = noop,
-  onDrillDownTarget = noop,
-  onTargetSortEnd = noop,
-  setGetStatus = noop,
-  targetSortable = true,
-  sourceEmptyMessage = "No Items Found",
-  sourceRootTitle = "Category",
-  targetEmptyMessage = "No Items Selected",
-  targetRootTitle = "Selected Items",
-  composeSourceItemProps = () => ({}),
-  composeTargetItemProps = () => ({}),
-  onAddToTarget = noop,
-  onAddCheckedItems = noop,
-  onRemoveFromTarget = noop,
-  onRemoveAllFromTarget = noop,
-  onChange = noop,
-  renderSourceCounter = noop,
-  renderTargetCounter = noop,
-  sourceClearItemsText = "CLEAR ALL",
-  targetClearItemsText = "CLEAR ALL",
-  searchPlaceholder = "Search field ID, name, etc.",
-  loadingSource = false,
-  loadingTarget = false,
-  onGetMoreItems = () => null,
-  hasNextPage = false,
-  moreItemsLoading
-}) => /* @__PURE__ */ React2.createElement(TooltipTextProvider, null, /* @__PURE__ */ React2.createElement(ShuttleImpl, {
-  composeSourceItemProps,
-  composeTargetItemProps,
-  containerProps,
-  idField,
-  items,
-  onAddCheckedItems,
-  onAddToTarget,
-  onChange,
-  onDrillDown,
-  nonSelectedItems,
-  onDrillDownTarget,
-  onRemoveAllFromTarget,
-  onRemoveFromTarget,
-  onSearch,
-  onSearchClose,
-  onSearchOpen,
-  onTargetSortEnd,
-  parentIdField,
-  renderSourceCounter,
-  renderTargetCounter,
-  searchPlaceholder,
-  selectedItems,
-  setGetStatus,
-  showIcons,
-  sourceClearItemsText,
-  sourceEmptyMessage,
-  sourceRootTitle,
-  targetClearItemsText,
-  targetEmptyMessage,
-  targetRootTitle,
-  targetSortable,
-  loadingSource,
-  loadingTarget,
-  onGetMoreItems: debounce((...args) => {
-    onGetMoreItems(...args);
-  }, 500),
-  moreItemsLoading,
-  hasNextPage
-}));
+
 const props = {
-  containerProps: PropTypes.object.description("inject props to shuttle wrapper"),
-  idField: PropTypes.string.description("The identifier field for the item object"),
-  parentIdField: PropTypes.string.description("The parent identifier field for the item object"),
-  showIcons: PropTypes.string.description("Whether to show the icons or not"),
+  /** inject props to shuttle wrapper */
+  containerProps: PropTypes.object.description('inject props to shuttle wrapper'),
+
+  /** The identifier field for the item object */
+  idField: PropTypes.string.description('The identifier field for the item object'),
+
+  /** The parent identifier field for the item object */
+  parentIdField: PropTypes.string.description('The parent identifier field for the item object'),
+
+  /** Whether to show the icons or not */
+  showIcons: PropTypes.string.description('Whether to show the icons or not'),
+
+  /** List of items */
   items: PropTypes.arrayOf(PropTypes.shape({
     disableDrillDown: PropTypes.bool,
     icon: PropTypes.element,
     name: PropTypes.string,
     readOnly: PropTypes.bool,
     description: PropTypes.string
-  })).description("list of items"),
-  selectedItems: PropTypes.arrayOf(PropTypes.string).description("Array of item ids that are selected. If passed the component behaves as controlled"),
+  })).description('list of items'),
+
+  /** Array of item ids that are selected. If passed the component behaves as controlled */
+  selectedItems: PropTypes.arrayOf(PropTypes.string).description('Array of item ids that are selected. If passed the component behaves as controlled'),
+
+  /** Array of item ids that aren't selected. Should include ALL non selected items, even those not rendered */
   nonSelectedItems: PropTypes.arrayOf(PropTypes.string).description("Array of item ids that aren't selected.. Should include ALL non selected items, even those not rendered"),
-  onSearch: PropTypes.func.description("Handler on search"),
-  onSearchOpen: PropTypes.func.description("Handler when the searchbox is visible"),
-  onSearchClose: PropTypes.func.description("Handler when the searchbox is not visible"),
+
+  /** Handler on search */
+  onSearch: PropTypes.func.description('Handler on search'),
+
+  /** Handler when the searchbox is visible */
+  onSearchOpen: PropTypes.func.description('Handler when the searchbox is visible'),
+
+  /** Handler when the searchbox is not visible */
+  onSearchClose: PropTypes.func.description('Handler when the searchbox is not visible'),
+
+  /** Source handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down")  */
   onDrillDown: PropTypes.func.description('Source handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down")'),
+
+  /** Target handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down") */
   onDrillDownTarget: PropTypes.func.description('Target handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down")'),
-  onTargetSortEnd: PropTypes.func.description("Target handler when user stops dragging an item"),
-  onGetMoreItems: PropTypes.func.description("Callback function that gets more items for Infinite Scroll"),
-  moreItemsLoading: PropTypes.bool.description("Wheter there are mor items loading for Infinite Scroll"),
-  hasNextPage: PropTypes.bool.description("Wheter there is a next page for Infinite Scroll, controls when to trigger onGetMoreItems"),
-  setGetStatus: PropTypes.func.description("Function that takes as a parameter an internal getter for the state"),
-  targetSortable: PropTypes.bool.description("Whether the target can be sortable with DnD"),
-  sourceRootTitle: PropTypes.string.description("Handler when the searchbox is visible"),
-  sourceEmptyMessage: PropTypes.string.description("Source text when there is no items"),
-  targetEmptyMessage: PropTypes.string.description("Target text when there is no items"),
-  targetRootTitle: PropTypes.string.description("Target text for the first hierarchy item"),
-  composeSourceItemProps: PropTypes.func.description("Function that allow to compose the item props in the source"),
-  composeTargetItemProps: PropTypes.func.description("Function that allow to compose the item props in the target"),
-  onAddToTarget: PropTypes.func.description("Handler when a users moves an item to the target"),
+
+  /** Target handler when user stops dragging an item */
+  onTargetSortEnd: PropTypes.func.description('Target handler when user stops dragging an item'),
+
+  /** Callback function that gets more items for Infinite Scroll */
+  onGetMoreItems: PropTypes.func.description('Callback function that gets more items for Infinite Scroll'),
+
+  /** Wheter there are mor items loading for Infinite Scroll */
+  moreItemsLoading: PropTypes.bool.description('Wheter there are mor items loading for Infinite Scroll'),
+
+  /** Wheter there is a next page for Infinite Scroll, controls when to trigger onGetMoreItems */
+  hasNextPage: PropTypes.bool.description('Wheter there is a next page for Infinite Scroll, controls when to trigger onGetMoreItems'),
+
+  /** Function that takes as a parameter an internal getter for the state */
+  setGetStatus: PropTypes.func.description('Function that takes as a parameter an internal getter for the state'),
+
+  /** Whether the target can be sortable with DnD */
+  targetSortable: PropTypes.bool.description('Whether the target can be sortable with DnD'),
+
+  /** Handler when the searchbox is visible */
+  sourceRootTitle: PropTypes.string.description('Handler when the searchbox is visible'),
+
+  /** Source text when there is no items */
+  sourceEmptyMessage: PropTypes.string.description('Source text when there is no items'),
+
+  /** Target text when there is no items */
+  targetEmptyMessage: PropTypes.string.description('Target text when there is no items'),
+
+  /** Target text for the first hierarchy item */
+  targetRootTitle: PropTypes.string.description('Target text for the first hierarchy item'),
+
+  /** Function that allow to compose the item props in the source */
+  composeSourceItemProps: PropTypes.func.description('Function that allow to compose the item props in the source'),
+
+  /** Function that allow to compose the item props in the target */
+  composeTargetItemProps: PropTypes.func.description('Function that allow to compose the item props in the target'),
+
+  /** Handler when a users moves an item to the target */
+  onAddToTarget: PropTypes.func.description('Handler when a users moves an item to the target'),
+
+  /** Handler when a users moves all the 'checked' items to the target */
   onAddCheckedItems: PropTypes.func.description("Handler when a users moves all the 'checked' items to the target"),
-  onRemoveFromTarget: PropTypes.func.description("Handler when a user removes an item from the target"),
-  onRemoveAllFromTarget: PropTypes.func.description("Handler when a user removes all the items from the target"),
-  onChange: PropTypes.func.description("Handler for every change on the state"),
-  renderSourceCounter: PropTypes.func.description("Function that returns an element for the source counter"),
-  renderTargetCounter: PropTypes.func.description("Function that returns an element for the target counter"),
-  sourceClearItemsText: PropTypes.string.description("Source text for the clear items button"),
-  targetClearItemsText: PropTypes.string.description("Target text for the clear items button"),
-  searchPlaceholder: PropTypes.string.description("Searchbox placeholder"),
-  loadingSource: PropTypes.bool.description("Displays loading indicator on source section"),
-  loadingTarget: PropTypes.bool.description("Displays loading indicator on target section")
+
+  /** Handler when a user removes an item from the target */
+  onRemoveFromTarget: PropTypes.func.description('Handler when a user removes an item from the target'),
+
+  /** Handler when a user removes all the items from the target */
+  onRemoveAllFromTarget: PropTypes.func.description('Handler when a user removes all the items from the target'),
+
+  /** Handler for every change on the state */
+  onChange: PropTypes.func.description('Handler for every change on the state'),
+
+  /** Function that returns an element for the source counter */
+  renderSourceCounter: PropTypes.func.description('Function that returns an element for the source counter'),
+
+  /** Function that returns an element for the target counter */
+  renderTargetCounter: PropTypes.func.description('Function that returns an element for the target counter'),
+
+  /** Source text for the clear items button */
+  sourceClearItemsText: PropTypes.string.description('Source text for the clear items button'),
+
+  /** Target text for the clear items button */
+  targetClearItemsText: PropTypes.string.description('Target text for the clear items button'),
+
+  /** Searchbox placeholder */
+  searchPlaceholder: PropTypes.string.description('Searchbox placeholder'),
+
+  /** Displays loading indicator on source section */
+  loadingSource: PropTypes.bool.description('Displays loading indicator on source section'),
+
+  /** Displays loading indicator on target section */
+  loadingTarget: PropTypes.bool.description('Displays loading indicator on target section')
 };
-DSShuttle.propTypes = props;
 const DSShuttleWithSchema = describe(DSShuttle);
 DSShuttleWithSchema.propTypes = props;
-var DSShuttle_default = DSShuttle;
-export {
-  DSShuttle,
-  DSShuttleWithSchema,
-  DSShuttle_default as default,
-  utils
-};
-//# sourceMappingURL=DSShuttle.js.map
+
+export { DSShuttleWithSchema, DSShuttle as default };

package/esm/SearchState.js

@@ -1,31 +1,35 @@
-import * as React from "react";
-import { useState } from "react";
-import createContainer from "constate";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState } from 'react';
+import createContainer from 'constate';
+
 function useSearchState() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [searching, setSearchBoxVisibility] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searching, setSearchBoxVisibility] = useState(false); // todo: create a hook for Visibility behavior
+
   function toggleSearchBox(userVisible) {
-    if (userVisible !== void 0) {
+    if (userVisible !== undefined) {
       setSearchBoxVisibility(userVisible);
     } else {
       setSearchBoxVisibility(!searching);
     }
   }
+
   function reset() {
-    setSearchTerm("");
+    setSearchTerm('');
     setSearchBoxVisibility(false);
   }
+
   return {
-    state: { searchTerm, searching },
+    state: {
+      searchTerm,
+      searching
+    },
     setSearchTerm,
     toggleSearchBox,
     reset
   };
 }
-const SearchState = createContainer(useSearchState, (value) => [value.state]);
-var SearchState_default = SearchState;
-export {
-  SearchState,
-  SearchState_default as default
-};
-//# sourceMappingURL=SearchState.js.map
+
+var SearchState = createContainer(useSearchState, value => [value.state]);
+
+export { SearchState as default };

package/esm/Shuttle.actions.js

@@ -1,106 +1,123 @@
-import * as React from "react";
-import {
-  addOrRemove,
-  cloneDeep,
-  hashArray,
-  compose
-} from "@elliemae/ds-utilities";
-import {
-  getHierarchyTypeName,
-  toggleInObject,
-  filterMovedItems
-} from "./helper";
-import utils from "./utils";
+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 '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 { addOrRemove, cloneDeep, compose, hashArray } from '@elliemae/ds-utilities';
+import { toggleInObject, filterMovedItems, getHierarchyTypeName } from './helper.js';
+import utils from './utils.js';
+
+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(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; }
 function toggleItemSelection(itemId) {
-  return (state) => ({
-    ...state,
+  return state => _objectSpread(_objectSpread({}, state), {}, {
     checkedItems: addOrRemove(state.checkedItems, itemId)
   });
 }
 function navigateTo(item, dest) {
   const hierarchyType = getHierarchyTypeName(dest);
-  return (state) => {
-    const indexInHierarchy = state[hierarchyType].findIndex((hItem) => hItem.id === item.id);
+  return state => {
+    const indexInHierarchy = state[hierarchyType].findIndex(hItem => hItem.id === item.id);
     const hierarchy = state[hierarchyType];
-    return {
-      ...state,
+    return _objectSpread(_objectSpread({}, state), {}, {
       [hierarchyType]: indexInHierarchy !== -1 ? hierarchy.slice(0, indexInHierarchy + 1) : [...hierarchy, item]
-    };
+    });
   };
 }
 function moveItem(item) {
-  return (state) => {
+  return state => {
     const movedItems = toggleInObject(state.movedItems, item.id, item);
-    return {
-      ...state,
+    return _objectSpread(_objectSpread({}, state), {}, {
       movedItems
-    };
+    });
   };
 }
 const defaultOptions = {
-  parentField: "parent",
-  idField: "id",
-  op: (hasMoved) => !hasMoved
-};
-function getItemDeep({ collection, id, options }) {
-  const { idField } = { ...defaultOptions, ...options };
-  const itemIndex = collection.findIndex((fItem) => fItem[idField] === id);
+  parentField: 'parent',
+  idField: 'id',
+  op: hasMoved => !hasMoved
+}; // todo: optimize this
+
+function getItemDeep(_ref) {
+  let {
+    collection,
+    id,
+    options
+  } = _ref;
+
+  const {
+    idField
+  } = _objectSpread(_objectSpread({}, defaultOptions), options);
+
+  const itemIndex = collection.findIndex(fItem => fItem[idField] === id); // get item with nested children
+
   const item = collection[itemIndex];
-  const children = item?.hasChildren ? compose(utils.getChildren({ index: itemIndex }))(collection) || [] : [];
-  return { item, children };
+  const children = item !== null && item !== void 0 && item.hasChildren ? compose(utils.getChildren({
+    index: itemIndex
+  }))(collection) || [] : [];
+  return {
+    item,
+    children
+  };
 }
+
 function addToTarget(itemToAdd, collection) {
-  return (state, { idField }) => {
+  return (state, _ref2) => {
+    let {
+      idField
+    } = _ref2;
     const items = collection || state.preparedItems;
-    const { item, children } = getItemDeep({
+    const {
+      item,
+      children
+    } = getItemDeep({
       collection: items,
       id: itemToAdd[idField]
     });
-    return {
-      ...state,
+    return _objectSpread(_objectSpread({}, state), {}, {
       movedItems: [...state.movedItems, item],
       targetItems: [...state.targetItems, item, ...children]
-    };
+    });
   };
-}
+} // todo: optimize this
+
 function removeFromTarget(itemToRemove) {
-  return (state, { idField }) => {
+  return (state, _ref3) => {
+    let {
+      idField
+    } = _ref3;
     let targetItems = cloneDeep(state.targetItems);
-    const itemIndex = targetItems.findIndex((fItem) => fItem.id === itemToRemove.id);
+    const itemIndex = targetItems.findIndex(fItem => fItem.id === itemToRemove.id);
     const item = targetItems[itemIndex];
-    const children = item?.hasChildren ? compose(filterMovedItems(state.movedItems), utils.getChildren({ index: itemIndex }))(targetItems) || [] : [];
+    const children = item !== null && item !== void 0 && item.hasChildren ? compose(filterMovedItems(state.movedItems), utils.getChildren({
+      index: itemIndex
+    }))(targetItems) || [] : [];
     targetItems.splice(itemIndex, 1);
-    if (item?.hasChildren && children.length) {
-      const childrenHash = hashArray(children, "id");
-      targetItems = targetItems.filter((i) => !childrenHash[i.id]);
+
+    if (item !== null && item !== void 0 && item.hasChildren && children.length) {
+      const childrenHash = hashArray(children, 'id');
+      targetItems = targetItems.filter(i => !childrenHash[i.id]);
     }
-    return {
-      ...state,
-      movedItems: state.movedItems.filter((mItem) => mItem[idField] !== itemToRemove[idField]),
+
+    return _objectSpread(_objectSpread({}, state), {}, {
+      movedItems: state.movedItems.filter(mItem => mItem[idField] !== itemToRemove[idField]),
       targetItems
-    };
+    });
   };
 }
 function resetCheckedItems() {
-  return (state) => ({
-    ...state,
+  return state => _objectSpread(_objectSpread({}, state), {}, {
     checkedItems: []
   });
 }
 function resetMovedItems() {
-  return (state) => ({
-    ...state,
+  return state => _objectSpread(_objectSpread({}, state), {}, {
     movedItems: [],
     targetItems: []
   });
 }
-export {
-  addToTarget,
-  moveItem,
-  navigateTo,
-  removeFromTarget,
-  resetCheckedItems,
-  resetMovedItems,
-  toggleItemSelection
-};
-//# sourceMappingURL=Shuttle.actions.js.map
+
+export { addToTarget, moveItem, navigateTo, removeFromTarget, resetCheckedItems, resetMovedItems, toggleItemSelection };