@elliemae/ds-app-picker 1.57.1 → 2.0.0-alpha.11

package/cjs/AppPickerImpl.js

@@ -1,53 +1,48 @@
 'use strict';
 
-var React = require('react');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var react = require('react');
 var lodash = require('lodash');
 var dsClassnames = require('@elliemae/ds-classnames');
 var utils = require('./utils.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/* eslint-disable react/prop-types */
-var blockName = 'app-picker';
-var Wrapper = dsClassnames.aggregatedClasses('ul')(blockName, 'wrapper');
-var Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
-var Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
-var Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', function (_ref) {
-  var disabled = _ref.disabled,
-      selected = _ref.selected;
-  return {
-    disabled: disabled,
-    selected: selected
-  };
-});
-var ChipLabel = dsClassnames.aggregatedClasses('p')(blockName, 'chip-label');
-var Separator = dsClassnames.aggregatedClasses('hr')(blockName, 'separator');
-var SectionTitle = dsClassnames.aggregatedClasses('p')(blockName, 'section-title');
-
-var AppPickerImpl = function AppPickerImpl(_ref2) {
-  var _ref2$apps = _ref2.apps,
-      apps = _ref2$apps === void 0 ? [] : _ref2$apps,
-      _ref2$customApps = _ref2.customApps,
-      customApps = _ref2$customApps === void 0 ? [] : _ref2$customApps,
-      _ref2$sectionTitle = _ref2.sectionTitle,
-      sectionTitle = _ref2$sectionTitle === void 0 ? 'APPLICATIONS' : _ref2$sectionTitle,
-      _ref2$customSectionTi = _ref2.customSectionTitle,
-      customSectionTitle = _ref2$customSectionTi === void 0 ? 'CUSTOM APPLICATIONS' : _ref2$customSectionTi,
-      _ref2$close = _ref2.close,
-      close = _ref2$close === void 0 ? function () {
-    return null;
-  } : _ref2$close,
-      wrapperRef = _ref2.wrapperRef,
-      onKeyDown = _ref2.onKeyDown,
-      triggerRef = _ref2.triggerRef;
-  var allFocusableButtons = React.useRef([]);
-  var selectedButton = React.useRef(null);
-  React.useEffect(function () {
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _Separator;
+const blockName = 'app-picker';
+const Wrapper = dsClassnames.aggregatedClasses('ul')(blockName, 'wrapper');
+const Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
+const Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
+const Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', ({
+  disabled,
+  selected
+}) => ({
+  disabled,
+  selected
+}));
+const ChipLabel = dsClassnames.aggregatedClasses('p')(blockName, 'chip-label');
+const Separator = dsClassnames.aggregatedClasses('hr')(blockName, 'separator');
+const SectionTitle = dsClassnames.aggregatedClasses('p')(blockName, 'section-title');
+
+const AppPickerImpl = ({
+  apps = [],
+  customApps = [],
+  sectionTitle = 'APPLICATIONS',
+  customSectionTitle = 'CUSTOM APPLICATIONS',
+  close = () => null,
+  wrapperRef,
+  onKeyDown,
+  triggerRef
+}) => {
+  const allFocusableButtons = react.useRef([]);
+  const selectedButton = react.useRef(null);
+  react.useEffect(() => {
     var _wrapperRef$current;
 
-    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach(function (e, index) {
+    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach((e, index) => {
       if (!e.hasAttribute('disabled')) {
         var _allFocusableButtons$;
 
@@ -70,7 +65,7 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
     }
   }, [wrapperRef]); // eslint-disable-next-line max-statements
 
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     var _triggerRef$current;
 
     switch (e.key) {
@@ -98,10 +93,10 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
     }
   };
 
-  var handleOnClick = React.useCallback(function (e, app) {
+  const handleOnClick = react.useCallback((e, app) => {
     if (app.onClick) app.onClick(e, app);
   }, []);
-  var handleOnKeyDownWrapper = React.useCallback(function (e) {
+  const handleOnKeyDownWrapper = react.useCallback(e => {
     if (onKeyDown) onKeyDown(e);
 
     if (!onKeyDown && e.key === utils.keys.ESC) {
@@ -109,70 +104,62 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
     }
   }, [onKeyDown, close]);
 
-  var buildRows = function buildRows(appList) {
-    var prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
-
-    var formattedRows = rows.map(function (row, index) {
-      return /*#__PURE__*/React__default['default'].createElement(Row, {
-        key: index
-      }, row.map(function (app, key) {
-        var label = app.label,
-            disabled = app.disabled,
-            selected = app.selected,
-            Icon = app.icon;
-        return /*#__PURE__*/React__default['default'].createElement(Chip, {
-          key: key,
-          classProps: {
-            disabled: disabled,
-            selected: selected
-          },
-          onClick: function onClick(e) {
-            return handleOnClick(e, app);
-          },
-          onKeyDown: handleKeyDown,
-          "data-testid": "app-picker__chip",
-          "aria-disabled": disabled,
-          disabled: disabled,
-          "aria-selected": selected,
-          "aria-setsize": apps.length + customApps.length,
-          "aria-posinset": key + prevIndex
-        }, /*#__PURE__*/React__default['default'].createElement(Icon, {
-          className: "app-picker__icon",
-          size: "m"
-        }), /*#__PURE__*/React__default['default'].createElement(ChipLabel, null, label));
-      }));
-    });
+  const buildRows = (appList, prevIndex = 0) => {
+    const rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
+
+    const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](Row, {}, index, row.map((app, key) => {
+      const {
+        label,
+        disabled,
+        selected,
+        icon: Icon
+      } = app;
+      return /*#__PURE__*/_jsx__default["default"](Chip, {
+        classProps: {
+          disabled,
+          selected
+        },
+        onClick: e => handleOnClick(e, app),
+        onKeyDown: handleKeyDown,
+        "data-testid": "app-picker__chip",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        "aria-selected": selected,
+        "aria-setsize": apps.length + customApps.length,
+        "aria-posinset": key + prevIndex
+      }, key, /*#__PURE__*/_jsx__default["default"](Icon, {
+        className: "app-picker__icon",
+        size: "m"
+      }), /*#__PURE__*/_jsx__default["default"](ChipLabel, {}, void 0, label));
+    })));
     return formattedRows;
   };
 
-  var AppsRows = function AppsRows() {
-    return buildRows(apps, 1);
-  };
+  const AppsRows = () => buildRows(apps, 1);
 
-  var CustomRows = function CustomRows() {
-    return buildRows(customApps, apps.length);
-  };
+  const CustomRows = () => buildRows(customApps, apps.length);
 
-  return /*#__PURE__*/React__default['default'].createElement(Wrapper, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
     role: "listbox",
     ref: wrapperRef,
     onKeyDown: handleOnKeyDownWrapper,
-    "data-testid": "app-picker__wrapper"
-  }, /*#__PURE__*/React__default['default'].createElement(SectionTitle, {
-    "data-testid": "app-picker__main-title",
-    "aria-hidden": true
-  }, sectionTitle), /*#__PURE__*/React__default['default'].createElement(Grid, {
-    "data-testid": "app-picker__main-grid"
-  }, /*#__PURE__*/React__default['default'].createElement(AppsRows, null)), !!customApps.length && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Separator, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React__default['default'].createElement(SectionTitle, {
-    "data-testid": "app-picker__custom-title",
-    "aria-hidden": true
-  }, customSectionTitle), /*#__PURE__*/React__default['default'].createElement(Grid, {
-    "data-testid": "app-picker__custom-grid"
-  }, /*#__PURE__*/React__default['default'].createElement(CustomRows, null))));
+    "data-testid": "app-picker__wrapper",
+    children: [/*#__PURE__*/_jsx__default["default"](SectionTitle, {
+      "data-testid": "app-picker__main-title",
+      "aria-hidden": true
+    }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
+      "data-testid": "app-picker__main-grid"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {
+        "aria-hidden": true
+      })), /*#__PURE__*/_jsx__default["default"](SectionTitle, {
+        "data-testid": "app-picker__custom-title",
+        "aria-hidden": true
+      }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
+        "data-testid": "app-picker__custom-grid"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CustomRows, {}))]
+    })]
+  });
 };
 
 module.exports = AppPickerImpl;
-//# sourceMappingURL=AppPickerImpl.js.map

package/cjs/DSAppPicker.js

@@ -2,84 +2,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
 var reactDesc = require('react-desc');
-var dsIcons = require('@elliemae/ds-icons');
+var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
 var DSButton = require('@elliemae/ds-button');
 var DSPopover = require('@elliemae/ds-popover');
 var dsUtilities = require('@elliemae/ds-utilities');
 var AppPickerImpl = require('./AppPickerImpl.js');
 var propTypes = require('./propTypes.js');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DSPopover__default = /*#__PURE__*/_interopDefaultLegacy(DSPopover);
 
-var DSAppPicker = function DSAppPicker(_ref) {
-  var _ref$apps = _ref.apps,
-      apps = _ref$apps === void 0 ? [] : _ref$apps,
-      _ref$customApps = _ref.customApps,
-      customApps = _ref$customApps === void 0 ? [] : _ref$customApps,
-      _ref$sectionTitle = _ref.sectionTitle,
-      sectionTitle = _ref$sectionTitle === void 0 ? 'APPLICATIONS' : _ref$sectionTitle,
-      _ref$customSectionTit = _ref.customSectionTitle,
-      customSectionTitle = _ref$customSectionTit === void 0 ? 'CUSTOM APPLICATIONS' : _ref$customSectionTit,
-      _ref$icon = _ref.icon,
-      Icon = _ref$icon === void 0 ? function () {
-    return /*#__PURE__*/React__default['default'].createElement(dsIcons.MenuPicker, {
-      fill: ['brand-primary', 700],
-      size: "m"
-    });
-  } : _ref$icon,
-      renderTrigger = _ref.renderTrigger,
-      isOpen = _ref.isOpen,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {
-    return null;
-  } : _ref$onClose,
-      actionRef = _ref.actionRef,
-      onKeyDown = _ref.onKeyDown,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {
-    return null;
-  } : _ref$onClick,
-      _ref$onClickOutside = _ref.onClickOutside,
-      onClickOutside = _ref$onClickOutside === void 0 ? function () {
-    return null;
-  } : _ref$onClickOutside,
-      triggerRef = _ref.triggerRef;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var wrapperRef = React.useRef(null);
-  var defaultTriggerRef = React.useRef(null);
-  React.useEffect(function () {
+const DSAppPicker = ({
+  apps = [],
+  customApps = [],
+  sectionTitle = 'APPLICATIONS',
+  customSectionTitle = 'CUSTOM APPLICATIONS',
+  icon: Icon = () => /*#__PURE__*/_jsx__default["default"](MenuPicker__default["default"], {
+    fill: ['brand-primary', 700],
+    size: "m"
+  }),
+  renderTrigger,
+  isOpen,
+  onClose = () => null,
+  actionRef,
+  onKeyDown,
+  onClick = () => null,
+  onClickOutside = () => null,
+  triggerRef
+}) => {
+  var _Icon;
+
+  const [open, setOpen] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  const defaultTriggerRef = react.useRef(null);
+  react.useEffect(() => {
     if (actionRef) {
-      actionRef.current.focusToIndex = function (index) {
+      actionRef.current.focusToIndex = index => {
         if (wrapperRef.current) {
-          var parent = wrapperRef.current;
-
-          var buttons = _toConsumableArray__default['default'](parent.querySelectorAll('button'));
-
+          const parent = wrapperRef.current;
+          const buttons = [...parent.querySelectorAll('button')];
           buttons[index].focus();
         }
       };
     }
   }, [actionRef, apps, customApps]);
 
-  var handleOnClose = function handleOnClose() {
+  const handleOnClose = () => {
     if (typeof isOpen === 'boolean') {
       setOpen(isOpen);
     } else {
@@ -89,43 +65,39 @@ var DSAppPicker = function DSAppPicker(_ref) {
     onClose();
   };
 
-  var handleOnClickOutside = function handleOnClickOutside(e) {
+  const handleOnClickOutside = e => {
     setOpen(false);
     onClose();
     onClickOutside(e);
   };
 
-  var AppPickerContent = function AppPickerContent() {
-    return /*#__PURE__*/React__default['default'].createElement(AppPickerImpl, {
-      apps: apps,
-      customApps: customApps,
-      sectionTitle: sectionTitle,
-      customSectionTitle: customSectionTitle,
-      close: handleOnClose,
-      wrapperRef: wrapperRef,
-      onKeyDown: onKeyDown,
-      triggerRef: triggerRef || defaultTriggerRef
-    });
-  };
-
-  var RenderTrigger = renderTrigger || function (_ref2) {
-    var ref = _ref2.ref;
-    return /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
-      "data-testid": "app-picker__button",
-      id: "app-picker__button",
-      buttonType: "text",
-      icon: /*#__PURE__*/React__default['default'].createElement(Icon, null),
-      innerRef: dsUtilities.mergeRefs(ref, defaultTriggerRef),
-      onClick: function onClick(e) {
-        _onClick(e);
+  const AppPickerContent = () => /*#__PURE__*/_jsx__default["default"](AppPickerImpl, {
+    apps: apps,
+    customApps: customApps,
+    sectionTitle: sectionTitle,
+    customSectionTitle: customSectionTitle,
+    close: handleOnClose,
+    wrapperRef: wrapperRef,
+    onKeyDown: onKeyDown,
+    triggerRef: triggerRef || defaultTriggerRef
+  });
 
-        setOpen(true);
-      }
-    });
-  };
+  const RenderTrigger = renderTrigger || (({
+    ref
+  }) => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    "data-testid": "app-picker__button",
+    id: "app-picker__button",
+    buttonType: "text",
+    icon: _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {})),
+    innerRef: dsUtilities.mergeRefs(ref, defaultTriggerRef),
+    onClick: e => {
+      onClick(e);
+      setOpen(true);
+    }
+  }));
 
-  return /*#__PURE__*/React__default['default'].createElement(DSPopover__default['default'], {
-    content: /*#__PURE__*/React__default['default'].createElement(AppPickerContent, null),
+  return /*#__PURE__*/_jsx__default["default"](DSPopover__default["default"], {
+    content: /*#__PURE__*/_jsx__default["default"](AppPickerContent, {}),
     isOpen: typeof isOpen === 'boolean' ? isOpen : open,
     onClickOutside: handleOnClickOutside,
     placement: "bottom",
@@ -139,11 +111,9 @@ var DSAppPicker = function DSAppPicker(_ref) {
   });
 };
 
-DSAppPicker.propTypes = propTypes.propTypes;
-var AppPickerWithSchema = reactDesc.describe(DSAppPicker);
+const AppPickerWithSchema = reactDesc.describe(DSAppPicker);
 AppPickerWithSchema.propTypes = propTypes.propTypes;
 
 exports.AppPickerWithSchema = AppPickerWithSchema;
 exports.DSAppPicker = DSAppPicker;
-exports['default'] = DSAppPicker;
-//# sourceMappingURL=DSAppPicker.js.map
+exports["default"] = DSAppPicker;

package/cjs/index.js

@@ -3,23 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSAppPicker = require('./DSAppPicker.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
-require('react-desc');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popover');
-require('@elliemae/ds-utilities');
-require('./AppPickerImpl.js');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('./utils.js');
-require('./propTypes.js');
 
 
 
 exports.AppPickerWithSchema = DSAppPicker.AppPickerWithSchema;
 exports.DSAppPicker = DSAppPicker.DSAppPicker;
-exports.default = DSAppPicker.DSAppPicker;
-//# sourceMappingURL=index.js.map
+exports["default"] = DSAppPicker.DSAppPicker;

package/cjs/propTypes.js

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
-var dsIcons = require('@elliemae/ds-icons');
+var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
 
-var propTypes = {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
+
+const propTypes = {
   apps: reactDesc.PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]').isRequired,
   customApps: reactDesc.PropTypes.array.description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]'),
   sectionTitle: reactDesc.PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),
   customSectionTitle: reactDesc.PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),
-  icon: reactDesc.PropTypes.func.description('trigger button s icon').defaultValue(dsIcons.MenuPicker),
+  icon: reactDesc.PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker__default["default"]),
   renderTrigger: reactDesc.PropTypes.func.description('Custom trigger component.'),
   actionRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
     current: reactDesc.PropTypes.any
@@ -23,4 +27,3 @@ var propTypes = {
 };
 
 exports.propTypes = propTypes;
-//# sourceMappingURL=propTypes.js.map

package/cjs/types/AppPickerTypes.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=AppPickerTypes.js.map

package/cjs/utils.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var keys = {
+const keys = {
   LEFT: 'ArrowLeft',
   UP: 'ArrowUp',
   RIGHT: 'ArrowRight',
@@ -16,4 +16,3 @@ var keys = {
 };
 
 exports.keys = keys;
-//# sourceMappingURL=utils.js.map