@elliemae/ds-app-picker 1.54.0-next.4 → 1.54.0-rc.1

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;

package/cjs/DSAppPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DSAppPicker.js","sources":["../../src/DSAppPicker.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\nimport DSButton from '@elliemae/ds-button';\nimport DSPopover from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl';\nimport type { DSAppPickerType } from './types/AppPickerTypes';\n\nconst DSAppPicker: DSAppPickerType = ({\n  apps = [],\n  customApps = [],\n  sectionTitle = 'APPLICATIONS',\n  customSectionTitle = 'CUSTOM APPLICATIONS',\n  icon: Icon = () => <MenuPicker fill={['brand-primary', 700]} size=\"m\" />,\n  renderTrigger,\n  isOpen = false,\n  onClose = () => null,\n}) => {\n  const [open, setOpen] = useState(isOpen);\n\n  useEffect(() => setOpen(isOpen), [isOpen]);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose();\n  };\n\n  const AppPickerContent = () => (\n    <AppPickerImpl\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      close={handleOnClose}\n    />\n  );\n\n  const RenderTrigger =\n    renderTrigger ||\n    (({ ref }) => (\n      <DSButton\n        data-testid=\"app-picker__button\"\n        id=\"app-picker__button\"\n        buttonType=\"text\"\n        icon={<Icon />}\n        innerRef={ref}\n        onClick={() => setOpen(true)}\n      />\n    ));\n\n  return (\n    <DSPopover\n      content={<AppPickerContent />}\n      isOpen={open}\n      onClickOutside={handleOnClose}\n      placement=\"bottom\"\n      interactionType=\"click\"\n      renderTrigger={RenderTrigger}\n      showArrow\n      style={{\n        padding: '0',\n        width: 'fit-content',\n      }}\n    />\n  );\n};\n\nconst appPickerProps = {\n  apps: PropTypes.array.description(\n    'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool }]',\n  ).isRequired,\n  customApps: PropTypes.array.description(\n    'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool }]',\n  ),\n  sectionTitle: PropTypes.string\n    .description('main section title')\n    .defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string\n    .description('custom section title')\n    .defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func\n    .description('trigger button s icon')\n    .defaultValue(MenuPicker),\n};\n\nDSAppPicker.propTypes = appPickerProps;\n\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = appPickerProps;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n"],"names":["DSAppPicker","apps","customApps","sectionTitle","customSectionTitle","icon","Icon","React","MenuPicker","renderTrigger","isOpen","onClose","useState","open","setOpen","useEffect","handleOnClose","AppPickerContent","RenderTrigger","ref","DSButton","DSPopover","padding","width","appPickerProps","PropTypes","array","description","isRequired","string","defaultValue","func","propTypes","AppPickerWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"DSAppPicker.js","sources":["../../src/DSAppPicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\nimport DSButton from '@elliemae/ds-button';\nimport DSPopover from '@elliemae/ds-popover';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport AppPickerImpl from './AppPickerImpl';\nimport { propTypes } from './propTypes';\nimport type { DSAppPickerType } from './types/AppPickerTypes';\n\nconst DSAppPicker: DSAppPickerType = ({\n  apps = [],\n  customApps = [],\n  sectionTitle = 'APPLICATIONS',\n  customSectionTitle = 'CUSTOM APPLICATIONS',\n  icon: Icon = () => <MenuPicker fill={['brand-primary', 700]} size=\"m\" />,\n  renderTrigger,\n  isOpen,\n  onClose = () => null,\n  actionRef,\n  onKeyDown,\n  onClick = () => null,\n  onClickOutside = () => null,\n  triggerRef,\n}) => {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef(null);\n  const defaultTriggerRef = useRef(null);\n\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.focusToIndex = (index) => {\n        if (wrapperRef.current) {\n          const parent = wrapperRef.current;\n          const buttons = [...parent.querySelectorAll('button')];\n          buttons[index].focus();\n        }\n      };\n    }\n  }, [actionRef, apps, customApps]);\n\n  const handleOnClose = () => {\n    if (typeof isOpen === 'boolean') {\n      setOpen(isOpen);\n    } else {\n      setOpen(false);\n    }\n    onClose();\n  };\n\n  const handleOnClickOutside = (e: MouseEvent) => {\n    setOpen(false);\n    onClose();\n    onClickOutside(e);\n  };\n\n  const AppPickerContent = () => (\n    <AppPickerImpl\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      close={handleOnClose}\n      wrapperRef={wrapperRef}\n      onKeyDown={onKeyDown}\n      triggerRef={triggerRef || defaultTriggerRef}\n    />\n  );\n\n  const RenderTrigger =\n    renderTrigger ||\n    (({ ref }) => (\n      <DSButton\n        data-testid=\"app-picker__button\"\n        id=\"app-picker__button\"\n        buttonType=\"text\"\n        icon={<Icon />}\n        innerRef={mergeRefs(ref, defaultTriggerRef)}\n        onClick={(e) => {\n          onClick(e);\n          setOpen(true);\n        }}\n      />\n    ));\n\n  return (\n    <DSPopover\n      content={<AppPickerContent />}\n      isOpen={typeof isOpen === 'boolean' ? isOpen : open}\n      onClickOutside={handleOnClickOutside}\n      placement=\"bottom\"\n      interactionType=\"click\"\n      renderTrigger={RenderTrigger}\n      showArrow\n      style={{\n        padding: '0',\n        width: 'fit-content',\n      }}\n    />\n  );\n};\n\nDSAppPicker.propTypes = propTypes;\n\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = propTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n"],"names":["DSAppPicker","apps","customApps","sectionTitle","customSectionTitle","icon","Icon","React","MenuPicker","renderTrigger","isOpen","onClose","actionRef","onKeyDown","onClick","onClickOutside","triggerRef","useState","open","setOpen","wrapperRef","useRef","defaultTriggerRef","useEffect","current","focusToIndex","index","parent","buttons","querySelectorAll","focus","handleOnClose","handleOnClickOutside","e","AppPickerContent","RenderTrigger","ref","DSButton","mergeRefs","DSPopover","padding","width","propTypes","AppPickerWithSchema","describe"],"mappings":"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"}

package/cjs/index.js

@@ -3,18 +3,19 @@
 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/MenuPicker');
 require('@elliemae/ds-button');
 require('@elliemae/ds-popover');
+require('@elliemae/ds-utilities');
 require('./AppPickerImpl.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/defineProperty');
 require('lodash');
 require('@elliemae/ds-classnames');
 require('./utils.js');
+require('./propTypes.js');
 
 
 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/propTypes.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
+
+var 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(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
+  })]).description('Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.'),
+  isOpen: reactDesc.PropTypes.bool.description('Wether the AppPicker should be open or not.'),
+  onClose: reactDesc.PropTypes.func.description('Callback function when the AppPicker closes'),
+  onKeyDown: reactDesc.PropTypes.func.description('OnKeyDown handler callback.'),
+  onClick: reactDesc.PropTypes.func.description('Custom onClick for Trigger component.'),
+  onClickOutside: reactDesc.PropTypes.func.description('Callback event when the user clicks outside the App Picker.')
+};
+
+exports.propTypes = propTypes;
+//# sourceMappingURL=propTypes.js.map

package/cjs/propTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\n\nexport const propTypes = {\n  apps: PropTypes.array.description(\n    'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ).isRequired,\n  customApps: PropTypes.array.description(\n    'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n};\n"],"names":["propTypes","apps","PropTypes","array","description","isRequired","customApps","sectionTitle","string","defaultValue","customSectionTitle","icon","func","MenuPicker","renderTrigger","actionRef","oneOfType","shape","current","any","isOpen","bool","onClose","onKeyDown","onClick","onClickOutside"],"mappings":";;;;;;;;;;;IAGaA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAEC,mBAAS,CAACC,KAAV,CAAgBC,WAAhB,CACJ,oGADI,EAEJC,UAHqB;AAIvBC,EAAAA,UAAU,EAAEJ,mBAAS,CAACC,KAAV,CAAgBC,WAAhB,CACV,sGADU,CAJW;AAOvBG,EAAAA,YAAY,EAAEL,mBAAS,CAACM,MAAV,CAAiBJ,WAAjB,CAA6B,oBAA7B,EAAmDK,YAAnD,CAAgE,cAAhE,CAPS;AAQvBC,EAAAA,kBAAkB,EAAER,mBAAS,CAACM,MAAV,CAAiBJ,WAAjB,CAA6B,sBAA7B,EAAqDK,YAArD,CAAkE,qBAAlE,CARG;AASvBE,EAAAA,IAAI,EAAET,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,uBAA3B,EAAoDK,YAApD,CAAiEI,8BAAjE,CATiB;AAUvBC,EAAAA,aAAa,EAAEZ,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,2BAA3B,CAVQ;AAWvBW,EAAAA,SAAS,EAAEb,mBAAS,CAACc,SAAV,CAAoB,CAACd,mBAAS,CAACU,IAAX,EAAiBV,mBAAS,CAACe,KAAV,CAAgB;AAAEC,IAAAA,OAAO,EAAEhB,mBAAS,CAACiB;AAArB,GAAhB,CAAjB,CAApB,EAAmFf,WAAnF,CACT,qGADS,CAXY;AAcvBgB,EAAAA,MAAM,EAAElB,mBAAS,CAACmB,IAAV,CAAejB,WAAf,CAA2B,6CAA3B,CAde;AAevBkB,EAAAA,OAAO,EAAEpB,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,6CAA3B,CAfc;AAgBvBmB,EAAAA,SAAS,EAAErB,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,6BAA3B,CAhBY;AAiBvBoB,EAAAA,OAAO,EAAEtB,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,uCAA3B,CAjBc;AAkBvBqB,EAAAA,cAAc,EAAEvB,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,6DAA3B;AAlBO;;;;"}