@elliemae/ds-app-picker 1.53.4-rc.0 → 1.53.4-rc.5

package/cjs/AppPickerImpl.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var lodash = require('lodash');
 var dsClassnames = require('@elliemae/ds-classnames');
@@ -9,113 +7,207 @@ var utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/* eslint-disable react/prop-types */
 var blockName = 'app-picker';
 var Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
 var Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
 var Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
-var Chip = dsClassnames.aggregatedClasses('div')(blockName, 'chip', function (_ref) {
-  var disabled = _ref.disabled;
-  return _defineProperty__default['default']({}, disabled, disabled);
+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(_ref3) {
-  var _ref3$apps = _ref3.apps,
-      apps = _ref3$apps === void 0 ? [] : _ref3$apps,
-      _ref3$customApps = _ref3.customApps,
-      customApps = _ref3$customApps === void 0 ? [] : _ref3$customApps,
-      _ref3$sectionTitle = _ref3.sectionTitle,
-      sectionTitle = _ref3$sectionTitle === void 0 ? 'APPLICATIONS' : _ref3$sectionTitle,
-      _ref3$customSectionTi = _ref3.customSectionTitle,
-      customSectionTitle = _ref3$customSectionTi === void 0 ? 'CUSTOM APPLICATIONS' : _ref3$customSectionTi,
-      _ref3$close = _ref3.close,
-      close = _ref3$close === void 0 ? function () {
+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;
-  } : _ref3$close;
-  var wrapperRef = React.useRef();
+  } : _ref2$close,
+      wrapperRef = _ref2.wrapperRef,
+      onKeyDown = _ref2.onKeyDown,
+      triggerRef = _ref2.triggerRef;
+  var allFocusableButtons = React.useRef([]);
+  var allButtons = React.useRef([]);
+  var selectedButton = React.useRef(null);
   React.useEffect(function () {
-    var _wrapperRef$current;
+    var _wrapperRef$current, _wrapperRef$current2;
+
+    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('.em-ds-app-picker__row').forEach(function (row) {
+      var _allButtons$current2, _allButtons$current4, _allButtons$current6;
+
+      if (row.children[0] && !row.children[0].hasAttribute('disabled')) {
+        var _allButtons$current;
+
+        allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current = allButtons.current) === null || _allButtons$current === void 0 ? void 0 : _allButtons$current.push(row.children[0]);
+      } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current2 = allButtons.current) === null || _allButtons$current2 === void 0 ? void 0 : _allButtons$current2.push(null);
+
+      if (row.children[1] && !row.children[1].hasAttribute('disabled')) {
+        var _allButtons$current3;
+
+        allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current3 = allButtons.current) === null || _allButtons$current3 === void 0 ? void 0 : _allButtons$current3.push(row.children[1]);
+      } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current4 = allButtons.current) === null || _allButtons$current4 === void 0 ? void 0 : _allButtons$current4.push(null);
+
+      if (row.children[2] && !row.children[2].hasAttribute('disabled')) {
+        var _allButtons$current5;
+
+        allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current5 = allButtons.current) === null || _allButtons$current5 === void 0 ? void 0 : _allButtons$current5.push(row.children[2]);
+      } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current6 = allButtons.current) === null || _allButtons$current6 === void 0 ? void 0 : _allButtons$current6.push(null);
+    });
+    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button').forEach(function (e, index) {
+      if (!e.hasAttribute('disabled')) {
+        var _allFocusableButtons$;
+
+        allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$ = allFocusableButtons.current) === null || _allFocusableButtons$ === void 0 ? void 0 : _allFocusableButtons$.push(e);
+      }
+
+      if (e.getAttribute('aria-selected') === 'true') {
+        selectedButton.current = index;
+      }
+    });
+
+    if (selectedButton.current) {
+      var _wrapperRef$current3;
 
-    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.focus();
-  }, []);
+      wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.querySelectorAll('button')[selectedButton.current].focus();
+    } else {
+      var _allFocusableButtons$2;
 
-  var handleKeyDown = function handleKeyDown(_ref4) {
-    var _upRow$children$index, _downRow$children$ind;
+      allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
+    }
+  }, [wrapperRef]);
+  var move = React.useCallback(function (position, offset) {
+    var newPosition = position + offset;
 
-    var element = _ref4.target,
-        key = _ref4.which;
-    var parent = element.parentElement;
+    if (position + offset < 0) {
+      newPosition = allButtons.current.length + position + offset;
+    }
 
-    var index = _toConsumableArray__default['default'](parent.children).indexOf(element);
+    if (position + offset > allButtons.current.length - 1) {
+      newPosition = position - allButtons.current.length;
+    }
 
-    var previousElementSibling = element.previousElementSibling,
-        nextElementSibling = element.nextElementSibling;
-    var upRow = parent.previousElementSibling,
-        downRow = parent.nextElementSibling;
+    var element = allButtons.current[newPosition];
 
-    switch (key) {
+    if (element) {
+      return element.focus();
+    }
+
+    return move(newPosition, offset);
+  }, []); // eslint-disable-next-line max-statements
+
+  var handleKeyDown = function handleKeyDown(e) {
+    var _triggerRef$current, _allFocusableButtons$3, _allFocusableButtons$4;
+
+    switch (e.key) {
       case utils.keys.LEFT:
-        if (previousElementSibling) {
-          previousElementSibling.focus();
-        } else if (upRow) {
-          upRow.lastChild.focus();
+        e.preventDefault();
+
+        for (var index = 0; index < allButtons.current.length; index += 1) {
+          if ((allButtons === null || allButtons === void 0 ? void 0 : allButtons.current[index]) === e.target) {
+            move(index, -1);
+            break;
+          }
         }
 
         break;
 
       case utils.keys.RIGHT:
-        if (nextElementSibling) {
-          nextElementSibling.focus();
-        } else if (downRow) {
-          downRow.firstChild.focus();
+        e.preventDefault();
+
+        for (var _index = 0; _index < allButtons.current.length; _index += 1) {
+          if (allButtons.current[_index] === e.target) {
+            move(_index, 1);
+            break;
+          }
         }
 
         break;
 
       case utils.keys.UP:
-        upRow === null || upRow === void 0 ? void 0 : (_upRow$children$index = upRow.children[index]) === null || _upRow$children$index === void 0 ? void 0 : _upRow$children$index.focus();
+        e.preventDefault();
+
+        for (var _index2 = 0; _index2 < allButtons.current.length; _index2 += 1) {
+          if (allButtons.current[_index2] === e.target) {
+            move(_index2, -3);
+            break;
+          }
+        }
+
         break;
 
       case utils.keys.DOWN:
-        downRow === null || downRow === void 0 ? void 0 : (_downRow$children$ind = downRow.children[index]) === null || _downRow$children$ind === void 0 ? void 0 : _downRow$children$ind.focus();
-        break;
+        e.preventDefault();
+
+        for (var _index3 = 0; _index3 < allButtons.current.length; _index3 += 1) {
+          if (allButtons.current[_index3] === e.target) {
+            move(_index3, 3);
+            break;
+          }
+        }
 
-      case utils.keys.ENTER:
-      case utils.keys.SPACE:
-        element.click();
         break;
 
       case utils.keys.ESC:
+        triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
         close();
         break;
-    }
-  };
 
-  var handleOnClick = function handleOnClick(e, app) {
-    if (!app.disabled) {
-      close();
-      app.onClick(e);
+      case utils.keys.HOME:
+        e.preventDefault();
+        allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[0]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
+        break;
+
+      case utils.keys.END:
+        e.preventDefault();
+        allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
+        break;
+
+      case utils.keys.TAB:
+        if (e.shiftKey) {
+          if (e.target === allFocusableButtons.current[0]) {
+            var _allFocusableButtons$5;
+
+            e.preventDefault();
+            allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$5 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$5 === void 0 ? void 0 : _allFocusableButtons$5.focus();
+          }
+        } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
+          var _allFocusableButtons$6;
+
+          e.preventDefault();
+          allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$6 = allFocusableButtons.current[0]) === null || _allFocusableButtons$6 === void 0 ? void 0 : _allFocusableButtons$6.focus();
+        }
+
+        break;
     }
   };
 
-  var handleOnHover = function handleOnHover(_ref5) {
-    var target = _ref5.target;
-    return target.focus();
+  var handleOnClick = function handleOnClick(e, app) {
+    if (app.onClick) app.onClick(e, app);
   };
 
-  var handleOnKeyDownWrapper = function handleOnKeyDownWrapper(_ref6) {
-    var key = _ref6.key;
+  var handleOnKeyDownWrapper = React.useCallback(function (e) {
+    if (onKeyDown) onKeyDown(e);
 
-    if (key === utils.keys.ESC) {
+    if (!onKeyDown && e.key === utils.keys.ESC) {
       close();
     }
-  };
+  }, [onKeyDown, close]);
 
   var buildRows = function buildRows(appList) {
     var rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
@@ -126,19 +218,22 @@ var AppPickerImpl = function AppPickerImpl(_ref3) {
       }, 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
+            disabled: disabled,
+            selected: selected
           },
           onClick: function onClick(e) {
             return handleOnClick(e, app);
           },
           onKeyDown: handleKeyDown,
-          onMouseEnter: handleOnHover,
-          tabIndex: 0,
-          "data-testid": "app-picker__chip"
+          "data-testid": "app-picker__chip",
+          "aria-disabled": disabled,
+          disabled: disabled,
+          "aria-selected": selected
         }, /*#__PURE__*/React__default['default'].createElement(Icon, {
           className: "app-picker__icon",
           size: "m"
@@ -158,7 +253,6 @@ var AppPickerImpl = function AppPickerImpl(_ref3) {
 
   return /*#__PURE__*/React__default['default'].createElement(Wrapper, {
     ref: wrapperRef,
-    tabIndex: 0,
     onKeyDown: handleOnKeyDownWrapper,
     "data-testid": "app-picker__wrapper"
   }, /*#__PURE__*/React__default['default'].createElement(SectionTitle, {

package/cjs/AppPickerImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppPickerImpl.js","sources":["../../src/AppPickerImpl.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable object-curly-newline */\n/* eslint-disable prefer-template */\nimport React, { useEffect, useRef } from 'react';\nimport { chunk } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { keys } from './utils';\nimport { DSAppPickerImplType } from './types/AppPickerTypes';\n\nconst blockName = 'app-picker';\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst Grid = aggregatedClasses('div')(blockName, 'grid');\nconst Row = aggregatedClasses('div')(blockName, 'row');\nconst Chip = aggregatedClasses('div')(blockName, 'chip', ({ disabled }) => ({\n  [disabled]: disabled,\n}));\nconst ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');\nconst Separator = aggregatedClasses('hr')(blockName, 'separator');\nconst SectionTitle = aggregatedClasses('p')(blockName, 'section-title');\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n  apps = [],\n  customApps = [],\n  sectionTitle = 'APPLICATIONS',\n  customSectionTitle = 'CUSTOM APPLICATIONS',\n  close = () => null,\n}) => {\n  const wrapperRef = useRef();\n\n  useEffect(() => {\n    wrapperRef?.current?.focus();\n  }, []);\n\n  const handleKeyDown = ({ target: element, which: key }) => {\n    const parent = element.parentElement;\n    const index = [...parent.children].indexOf(element);\n    const { previousElementSibling, nextElementSibling } = element;\n    const {\n      previousElementSibling: upRow,\n      nextElementSibling: downRow,\n    } = parent;\n\n    switch (key) {\n      case keys.LEFT:\n        if (previousElementSibling) {\n          previousElementSibling.focus();\n        } else if (upRow) {\n          upRow.lastChild.focus();\n        }\n        break;\n      case keys.RIGHT:\n        if (nextElementSibling) {\n          nextElementSibling.focus();\n        } else if (downRow) {\n          downRow.firstChild.focus();\n        }\n        break;\n      case keys.UP:\n        upRow?.children[index]?.focus();\n        break;\n      case keys.DOWN:\n        downRow?.children[index]?.focus();\n        break;\n      case keys.ENTER:\n      case keys.SPACE:\n        element.click();\n        break;\n      case keys.ESC:\n        close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleOnClick = (e, app) => {\n    if (!app.disabled) {\n      close();\n      app.onClick(e);\n    }\n  };\n\n  const handleOnHover = ({ target }) => target.focus();\n\n  const handleOnKeyDownWrapper = ({ key }) => {\n    if (key === keys.ESC) {\n      close();\n    }\n  };\n\n  const buildRows = (appList) => {\n    const rows = chunk(appList, 3); // divides array in subarrays of 3 items\n    const formattedRows = rows.map((row, index) => (\n      <Row key={index}>\n        {row.map((app, key) => {\n          const { label, disabled, icon: Icon } = app;\n          return (\n            <Chip\n              key={key}\n              classProps={{ disabled }}\n              onClick={(e) => handleOnClick(e, app)}\n              onKeyDown={handleKeyDown}\n              onMouseEnter={handleOnHover}\n              tabIndex={0}\n              data-testid=\"app-picker__chip\"\n            >\n              <Icon className=\"app-picker__icon\" size=\"m\" />\n              <ChipLabel>{label}</ChipLabel>\n            </Chip>\n          );\n        })}\n      </Row>\n    ));\n    return formattedRows;\n  };\n\n  const AppsRows = () => buildRows(apps);\n  const CustomRows = () => buildRows(customApps);\n\n  return (\n    <Wrapper\n      ref={wrapperRef}\n      tabIndex={0}\n      onKeyDown={handleOnKeyDownWrapper}\n      data-testid=\"app-picker__wrapper\"\n    >\n      <SectionTitle data-testid=\"app-picker__main-title\">\n        {sectionTitle}\n      </SectionTitle>\n      <Grid data-testid=\"app-picker__main-grid\">\n        <AppsRows />\n      </Grid>\n      {!!customApps.length && (\n        <>\n          <Separator />\n          <SectionTitle data-testid=\"app-picker__custom-title\">\n            {customSectionTitle}\n          </SectionTitle>\n          <Grid data-testid=\"app-picker__custom-grid\">\n            <CustomRows />\n          </Grid>\n        </>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default AppPickerImpl;\n"],"names":["blockName","Wrapper","aggregatedClasses","Grid","Row","Chip","disabled","ChipLabel","Separator","SectionTitle","AppPickerImpl","apps","customApps","sectionTitle","customSectionTitle","close","wrapperRef","useRef","useEffect","current","focus","handleKeyDown","element","target","key","which","parent","parentElement","index","_toConsumableArray","children","indexOf","previousElementSibling","nextElementSibling","upRow","downRow","keys","LEFT","lastChild","RIGHT","firstChild","UP","DOWN","ENTER","SPACE","click","ESC","handleOnClick","e","app","onClick","handleOnHover","handleOnKeyDownWrapper","buildRows","appList","rows","chunk","formattedRows","map","row","React","label","Icon","icon","AppsRows","CustomRows","length"],"mappings":"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"}
+{"version":3,"file":"AppPickerImpl.js","sources":["../../src/AppPickerImpl.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable object-curly-newline */\n/* eslint-disable prefer-template */\nimport React, { useEffect, useCallback, useRef } from 'react';\nimport { chunk } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { keys } from './utils';\nimport { DSAppPickerImplType } from './types/AppPickerTypes';\n\nconst blockName = 'app-picker';\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst Grid = aggregatedClasses('div')(blockName, 'grid');\nconst Row = aggregatedClasses('div')(blockName, 'row');\nconst Chip = aggregatedClasses('button')(blockName, 'chip', ({ disabled, selected }) => ({\n  disabled,\n  selected,\n}));\nconst ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');\nconst Separator = aggregatedClasses('hr')(blockName, 'separator');\nconst SectionTitle = aggregatedClasses('p')(blockName, 'section-title');\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n  apps = [],\n  customApps = [],\n  sectionTitle = 'APPLICATIONS',\n  customSectionTitle = 'CUSTOM APPLICATIONS',\n  close = () => null,\n  wrapperRef,\n  onKeyDown,\n  triggerRef,\n}) => {\n  const allFocusableButtons = useRef([]);\n  const allButtons = useRef([]);\n  const selectedButton = useRef(null);\n\n  useEffect(() => {\n    wrapperRef?.current?.querySelectorAll('.em-ds-app-picker__row').forEach((row) => {\n      if (row.children[0] && !row.children[0].hasAttribute('disabled')) {\n        allButtons?.current?.push(row.children[0]);\n      } else allButtons?.current?.push(null);\n      if (row.children[1] && !row.children[1].hasAttribute('disabled')) {\n        allButtons?.current?.push(row.children[1]);\n      } else allButtons?.current?.push(null);\n      if (row.children[2] && !row.children[2].hasAttribute('disabled')) {\n        allButtons?.current?.push(row.children[2]);\n      } else allButtons?.current?.push(null);\n    });\n\n    wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n      if (!e.hasAttribute('disabled')) {\n        allFocusableButtons?.current?.push(e);\n      }\n      if (e.getAttribute('aria-selected') === 'true') {\n        selectedButton.current = index;\n      }\n    });\n\n    if (selectedButton.current) {\n      wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n    } else {\n      allFocusableButtons?.current[0]?.focus();\n    }\n  }, [wrapperRef]);\n\n  const move = useCallback((position, offset) => {\n    let newPosition = position + offset;\n    if (position + offset < 0) {\n      newPosition = allButtons.current.length + position + offset;\n    }\n\n    if (position + offset > allButtons.current.length - 1) {\n      newPosition = position - allButtons.current.length;\n    }\n    const element = allButtons.current[newPosition];\n    if (element) {\n      return element.focus();\n    }\n    return move(newPosition, offset);\n  }, []);\n  // eslint-disable-next-line max-statements\n  const handleKeyDown = (e) => {\n    switch (e.key) {\n      case keys.LEFT:\n        e.preventDefault();\n        for (let index = 0; index < allButtons.current.length; index += 1) {\n          if (allButtons?.current[index] === e.target) {\n            move(index, -1);\n            break;\n          }\n        }\n        break;\n      case keys.RIGHT:\n        e.preventDefault();\n        for (let index = 0; index < allButtons.current.length; index += 1) {\n          if (allButtons.current[index] === e.target) {\n            move(index, 1);\n            break;\n          }\n        }\n        break;\n      case keys.UP:\n        e.preventDefault();\n        for (let index = 0; index < allButtons.current.length; index += 1) {\n          if (allButtons.current[index] === e.target) {\n            move(index, -3);\n            break;\n          }\n        }\n        break;\n      case keys.DOWN:\n        e.preventDefault();\n        for (let index = 0; index < allButtons.current.length; index += 1) {\n          if (allButtons.current[index] === e.target) {\n            move(index, 3);\n            break;\n          }\n        }\n        break;\n      case keys.ESC:\n        triggerRef?.current?.focus();\n        close();\n        break;\n      case keys.HOME:\n        e.preventDefault();\n        allFocusableButtons?.current[0]?.focus();\n        break;\n      case keys.END:\n        e.preventDefault();\n        allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n        break;\n      case keys.TAB:\n        if (e.shiftKey) {\n          if (e.target === allFocusableButtons.current[0]) {\n            e.preventDefault();\n            allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n          }\n        } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n          e.preventDefault();\n          allFocusableButtons?.current[0]?.focus();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleOnClick = (e, app) => {\n    if (app.onClick) app.onClick(e, app);\n  };\n\n  const handleOnKeyDownWrapper = useCallback(\n    (e) => {\n      if (onKeyDown) onKeyDown(e);\n      if (!onKeyDown && e.key === keys.ESC) {\n        close();\n      }\n    },\n    [onKeyDown, close],\n  );\n\n  const buildRows = (appList) => {\n    const rows = chunk(appList, 3); // divides array in subarrays of 3 items\n    const formattedRows = rows.map((row, index) => (\n      <Row key={index}>\n        {row.map((app, key) => {\n          const { label, disabled, selected, icon: Icon } = app;\n          return (\n            <Chip\n              key={key}\n              classProps={{ disabled, selected }}\n              onClick={(e) => handleOnClick(e, app)}\n              onKeyDown={handleKeyDown}\n              data-testid=\"app-picker__chip\"\n              aria-disabled={disabled}\n              disabled={disabled}\n              aria-selected={selected}\n            >\n              <Icon className=\"app-picker__icon\" size=\"m\" />\n              <ChipLabel>{label}</ChipLabel>\n            </Chip>\n          );\n        })}\n      </Row>\n    ));\n    return formattedRows;\n  };\n\n  const AppsRows = () => buildRows(apps);\n  const CustomRows = () => buildRows(customApps);\n\n  return (\n    <Wrapper ref={wrapperRef} onKeyDown={handleOnKeyDownWrapper} data-testid=\"app-picker__wrapper\">\n      <SectionTitle data-testid=\"app-picker__main-title\">{sectionTitle}</SectionTitle>\n      <Grid data-testid=\"app-picker__main-grid\">\n        <AppsRows />\n      </Grid>\n      {!!customApps.length && (\n        <>\n          <Separator />\n          <SectionTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</SectionTitle>\n          <Grid data-testid=\"app-picker__custom-grid\">\n            <CustomRows />\n          </Grid>\n        </>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default AppPickerImpl;\n"],"names":["blockName","Wrapper","aggregatedClasses","Grid","Row","Chip","disabled","selected","ChipLabel","Separator","SectionTitle","AppPickerImpl","apps","customApps","sectionTitle","customSectionTitle","close","wrapperRef","onKeyDown","triggerRef","allFocusableButtons","useRef","allButtons","selectedButton","useEffect","current","querySelectorAll","forEach","row","children","hasAttribute","push","e","index","getAttribute","focus","move","useCallback","position","offset","newPosition","length","element","handleKeyDown","key","keys","LEFT","preventDefault","target","RIGHT","UP","DOWN","ESC","HOME","END","TAB","shiftKey","handleOnClick","app","onClick","handleOnKeyDownWrapper","buildRows","appList","rows","chunk","formattedRows","map","React","label","Icon","icon","AppsRows","CustomRows"],"mappings":"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"}

package/cjs/DSAppPicker.js

@@ -2,21 +2,23 @@
 
 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 reactDesc = require('react-desc');
 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');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/defineProperty');
+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 MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
@@ -40,25 +42,58 @@ var DSAppPicker = function DSAppPicker(_ref) {
     });
   } : _ref$icon,
       renderTrigger = _ref.renderTrigger,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      isOpen = _ref.isOpen,
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? function () {
     return null;
-  } : _ref$onClose;
+  } : _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(isOpen),
+  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 () {
-    return setOpen(isOpen);
-  }, [isOpen]);
+    if (actionRef) {
+      actionRef.current.focusToIndex = function (index) {
+        if (wrapperRef.current) {
+          var parent = wrapperRef.current;
+
+          var buttons = _toConsumableArray__default['default'](parent.querySelectorAll('button'));
+
+          buttons[index].focus();
+        }
+      };
+    }
+  }, [actionRef, apps, customApps]);
 
   var handleOnClose = function handleOnClose() {
+    if (typeof isOpen === 'boolean') {
+      setOpen(isOpen);
+    } else {
+      setOpen(false);
+    }
+
+    onClose();
+  };
+
+  var handleOnClickOutside = function handleOnClickOutside(e) {
     setOpen(false);
     onClose();
+    onClickOutside(e);
   };
 
   var AppPickerContent = function AppPickerContent() {
@@ -67,7 +102,10 @@ var DSAppPicker = function DSAppPicker(_ref) {
       customApps: customApps,
       sectionTitle: sectionTitle,
       customSectionTitle: customSectionTitle,
-      close: handleOnClose
+      close: handleOnClose,
+      wrapperRef: wrapperRef,
+      onKeyDown: onKeyDown,
+      triggerRef: triggerRef || defaultTriggerRef
     });
   };
 
@@ -78,17 +116,19 @@ var DSAppPicker = function DSAppPicker(_ref) {
       id: "app-picker__button",
       buttonType: "text",
       icon: /*#__PURE__*/React__default['default'].createElement(Icon, null),
-      innerRef: ref,
-      onClick: function onClick() {
-        return setOpen(true);
+      innerRef: dsUtilities.mergeRefs(ref, defaultTriggerRef),
+      onClick: function onClick(e) {
+        _onClick(e);
+
+        setOpen(true);
       }
     });
   };
 
   return /*#__PURE__*/React__default['default'].createElement(DSPopover__default['default'], {
     content: /*#__PURE__*/React__default['default'].createElement(AppPickerContent, null),
-    isOpen: open,
-    onClickOutside: handleOnClose,
+    isOpen: typeof isOpen === 'boolean' ? isOpen : open,
+    onClickOutside: handleOnClickOutside,
     placement: "bottom",
     interactionType: "click",
     renderTrigger: RenderTrigger,
@@ -100,16 +140,9 @@ var DSAppPicker = function DSAppPicker(_ref) {
   });
 };
 
-var appPickerProps = {
-  apps: reactDesc.PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool }]').isRequired,
-  customApps: reactDesc.PropTypes.array.description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled: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(MenuPicker__default['default'])
-};
-DSAppPicker.propTypes = appPickerProps;
+DSAppPicker.propTypes = propTypes.propTypes;
 var AppPickerWithSchema = reactDesc.describe(DSAppPicker);
-AppPickerWithSchema.propTypes = appPickerProps;
+AppPickerWithSchema.propTypes = propTypes.propTypes;
 
 exports.AppPickerWithSchema = AppPickerWithSchema;
 exports.DSAppPicker = DSAppPicker;