@elliemae/ds-app-picker 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/AppPickerImpl.js

@@ -1,163 +1,155 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var react = require('react');
 var lodash = require('lodash');
-var dsClassnames = require('@elliemae/ds-classnames');
 var utils = require('./utils.js');
+var styles = require('./styles.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _Separator;
-const blockName = 'app-picker';
-const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
-const Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
-const Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
-const Chip = dsClassnames.aggregatedClasses('div')(blockName, 'chip', ({
-  disabled
-}) => ({
-  [disabled]: disabled
-}));
-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
-}) => {
-  const wrapperRef = react.useRef();
+var _StyledSeparator;
+
+const AppPickerImpl = _ref => {
+  let {
+    apps = [],
+    customApps = [],
+    sectionTitle = 'APPLICATIONS',
+    customSectionTitle = 'CUSTOM APPLICATIONS',
+    close = () => null,
+    wrapperRef,
+    onKeyDown,
+    triggerRef
+  } = _ref;
+  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.focus();
-  }, []);
+    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$;
 
-  const handleKeyDown = ({
-    target: element,
-    which: key
-  }) => {
-    var _upRow$children$index, _downRow$children$ind;
-
-    const parent = element.parentElement;
-    const index = [...parent.children].indexOf(element);
-    const {
-      previousElementSibling,
-      nextElementSibling
-    } = element;
-    const {
-      previousElementSibling: upRow,
-      nextElementSibling: downRow
-    } = parent;
-
-    switch (key) {
-      case utils.keys.LEFT:
-        if (previousElementSibling) {
-          previousElementSibling.focus();
-        } else if (upRow) {
-          upRow.lastChild.focus();
-        }
+        allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$ = allFocusableButtons.current) === null || _allFocusableButtons$ === void 0 ? void 0 : _allFocusableButtons$.push(e);
+      }
 
-        break;
-
-      case utils.keys.RIGHT:
-        if (nextElementSibling) {
-          nextElementSibling.focus();
-        } else if (downRow) {
-          downRow.firstChild.focus();
-        }
+      if (e.getAttribute('aria-selected') === 'true') {
+        selectedButton.current = index;
+      }
+    });
 
-        break;
+    if (selectedButton.current) {
+      var _wrapperRef$current2;
 
-      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();
-        break;
+      wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button')[selectedButton.current].focus();
+    } else {
+      var _allFocusableButtons$2;
 
-      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;
+      allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
+    }
+  }, [wrapperRef]); // eslint-disable-next-line max-statements
 
-      case utils.keys.ENTER:
-      case utils.keys.SPACE:
-        element.click();
-        break;
+  const handleKeyDown = e => {
+    var _triggerRef$current;
 
+    switch (e.key) {
       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;
-    }
-  };
 
-  const handleOnClick = (e, app) => {
-    if (!app.disabled) {
-      close();
-      app.onClick(e);
+      case utils.keys.TAB:
+        if (e.shiftKey) {
+          if (e.target === allFocusableButtons.current[0]) {
+            var _allFocusableButtons$3;
+
+            e.preventDefault();
+            allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
+          }
+        } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
+          var _allFocusableButtons$4;
+
+          e.preventDefault();
+          allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
+        }
+
+        break;
     }
   };
 
-  const handleOnHover = ({
-    target
-  }) => target.focus();
+  const handleOnClick = react.useCallback((e, app) => {
+    if (app.onClick) app.onClick(e, app);
+  }, []);
+  const handleOnKeyDownWrapper = react.useCallback(e => {
+    if (onKeyDown) onKeyDown(e);
 
-  const handleOnKeyDownWrapper = ({
-    key
-  }) => {
-    if (key === utils.keys.ESC) {
+    if (!onKeyDown && e.key === utils.keys.ESC) {
       close();
     }
-  };
+  }, [onKeyDown, close]);
 
-  const buildRows = appList => {
+  const buildRows = function (appList) {
+    let prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](styles.StyledRow, {}, index, row.map((app, key) => {
       const {
         label,
         disabled,
+        selected,
         icon: Icon
       } = app;
-      return /*#__PURE__*/_jsx__default['default'](Chip, {
-        classProps: {
-          disabled
-        },
+      return /*#__PURE__*/_jsx__default["default"](styles.StyledChip, {
         onClick: e => handleOnClick(e, app),
         onKeyDown: handleKeyDown,
-        onMouseEnter: handleOnHover,
-        tabIndex: 0,
-        "data-testid": "app-picker__chip"
-      }, key, /*#__PURE__*/_jsx__default['default'](Icon, {
+        "data-testid": "app-picker__chip",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        selected: selected,
+        "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));
+      }), /*#__PURE__*/_jsx__default["default"](styles.StyledChipLabel, {}, void 0, label));
     })));
-    return formattedRows;
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: formattedRows
+    });
   };
 
-  const AppsRows = () => buildRows(apps);
+  const AppsRows = () => buildRows(apps, 1);
 
-  const CustomRows = () => buildRows(customApps);
+  const CustomRows = () => buildRows(customApps, apps.length);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledWrapper, {
+    role: "listbox",
     ref: wrapperRef,
-    tabIndex: 0,
     onKeyDown: handleOnKeyDownWrapper,
     "data-testid": "app-picker__wrapper",
-    children: [/*#__PURE__*/_jsx__default['default'](SectionTitle, {
-      "data-testid": "app-picker__main-title"
-    }, void 0, sectionTitle), /*#__PURE__*/_jsx__default['default'](Grid, {
+    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
+      "data-testid": "app-picker__main-title",
+      "aria-hidden": true
+    }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
       "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, {})), /*#__PURE__*/_jsx__default['default'](SectionTitle, {
-        "data-testid": "app-picker__custom-title"
-      }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default['default'](Grid, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styles.StyledSeparator, {
+        "aria-hidden": true
+      })), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
+        "data-testid": "app-picker__custom-title",
+        "aria-hidden": true
+      }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
         "data-testid": "app-picker__custom-grid"
-      }, void 0, /*#__PURE__*/_jsx__default['default'](CustomRows, {}))]
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CustomRows, {}))]
     })]
   });
 };

package/cjs/DSAppPicker.js

@@ -3,66 +3,106 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 MenuPicker = require('@elliemae/ds-icons/MenuPicker');
+var dsIcons = require('@elliemae/ds-icons');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DSPopover__default = /*#__PURE__*/_interopDefaultLegacy(DSPopover);
 
-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 = false,
-  onClose = () => null
-}) => {
-  var _AppPickerImpl, _Icon;
+const DSAppPicker = _ref => {
+  var _Icon;
 
-  const [open, setOpen] = react.useState(isOpen);
-  react.useEffect(() => setOpen(isOpen), [isOpen]);
+  let {
+    apps = [],
+    customApps = [],
+    sectionTitle = 'APPLICATIONS',
+    customSectionTitle = 'CUSTOM APPLICATIONS',
+    icon: Icon = () => /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
+      fill: ['brand-primary', 700],
+      size: "m"
+    }),
+    renderTrigger,
+    isOpen,
+    onClose = () => null,
+    actionRef,
+    onKeyDown,
+    onClick = () => null,
+    onClickOutside = () => null,
+    triggerRef
+  } = _ref;
+  const [open, setOpen] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  const defaultTriggerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToIndex = index => {
+        if (wrapperRef.current) {
+          const parent = wrapperRef.current;
+          const buttons = [...parent.querySelectorAll('button')];
+          buttons[index].focus();
+        }
+      };
+    }
+  }, [actionRef, apps, customApps]);
 
   const handleOnClose = () => {
+    if (typeof isOpen === 'boolean') {
+      setOpen(isOpen);
+    } else {
+      setOpen(false);
+    }
+
+    onClose();
+  };
+
+  const handleOnClickOutside = e => {
     setOpen(false);
     onClose();
+    onClickOutside(e);
   };
 
-  const AppPickerContent = () => _AppPickerImpl || (_AppPickerImpl = /*#__PURE__*/_jsx__default['default'](AppPickerImpl, {
+  const AppPickerContent = () => /*#__PURE__*/_jsx__default["default"](AppPickerImpl, {
     apps: apps,
     customApps: customApps,
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
-    close: handleOnClose
-  }));
+    close: handleOnClose,
+    wrapperRef: wrapperRef,
+    onKeyDown: onKeyDown,
+    triggerRef: triggerRef || defaultTriggerRef
+  });
 
-  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: ref,
-    onClick: () => setOpen(true)
-  }));
+  const RenderTrigger = renderTrigger || (_ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__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__*/_jsx__default['default'](DSPopover__default['default'], {
-    content: /*#__PURE__*/_jsx__default['default'](AppPickerContent, {}),
-    isOpen: open,
-    onClickOutside: handleOnClose,
+  return /*#__PURE__*/_jsx__default["default"](DSPopover__default["default"], {
+    content: /*#__PURE__*/_jsx__default["default"](AppPickerContent, {}),
+    isOpen: typeof isOpen === 'boolean' ? isOpen : open,
+    onClickOutside: handleOnClickOutside,
     placement: "bottom",
     interactionType: "click",
     renderTrigger: RenderTrigger,
@@ -74,16 +114,9 @@ const DSAppPicker = ({
   });
 };
 
-const 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'])
-};
 const AppPickerWithSchema = reactDesc.describe(DSAppPicker);
-AppPickerWithSchema.propTypes = appPickerProps;
+AppPickerWithSchema.propTypes = propTypes.propTypes;
 
 exports.AppPickerWithSchema = AppPickerWithSchema;
 exports.DSAppPicker = DSAppPicker;
-exports['default'] = DSAppPicker;
+exports["default"] = DSAppPicker;

package/cjs/index.js

@@ -8,4 +8,4 @@ var DSAppPicker = require('./DSAppPicker.js');
 
 exports.AppPickerWithSchema = DSAppPicker.AppPickerWithSchema;
 exports.DSAppPicker = DSAppPicker.DSAppPicker;
-exports.default = DSAppPicker.DSAppPicker;
+exports["default"] = DSAppPicker.DSAppPicker;

package/cjs/propTypes.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var dsIcons = require('@elliemae/ds-icons');
+
+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),
+  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;

package/cjs/styles.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const StyledWrapper = dsSystem.styled('ul', {
+  name: 'DS-AppPicker',
+  slot: 'root'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-width: 244px;\n  max-height: 449px;\n  overflow-y: auto;\n  padding: 4px 0;\n  margin: 0 auto;\n\n  &:focus {\n    outline: none;\n  }\n"])));
+const StyledGrid = dsSystem.styled('div', {
+  name: 'DS-AppPicker',
+  slot: 'grid'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 0 8px;\n"])));
+const StyledRow = dsSystem.styled('div', {
+  name: 'DS-AppPicker',
+  slot: 'row'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  width: 100%;\n"])));
+const StyledTitle = dsSystem.styled('p', {
+  name: 'DS-AppPicker',
+  slot: 'title'
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  font-size: 0.8461rem;\n  font-weight: bold;\n  margin: 8px 0 4px 0;\n  line-height: 1;\n  text-transform: uppercase;\n"])), props => props.theme.colors.neutral[700]);
+const StyledChipLabel = dsSystem.styled('p', {
+  name: 'DS-AppPicker',
+  slot: 'chipLabel'
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: 0.8461rem;\n  font-weight: 600;\n  word-wrap: break-word;\n  margin: 4px 0 0 0;\n  line-height: 14px;\n  text-overflow: ellipsis;\n  max-width: 68px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n"])));
+const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    content: ' ';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n\n  &:focus {\n    &::after {\n      position: absolute;\n      content: ' ';\n      top: -2px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 4px);\n      border: 2px solid ", ";\n      border-radius: 2px;\n    }\n  }\n"])), props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800]);
+const StyledChip = dsSystem.styled('button', {
+  name: 'DS-AppPicker',
+  slot: 'chip'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 2%;\n  padding: 8px 0 4px 0;\n  margin: 4px;\n  height: 68px;\n  width: 68px;\n  line-height: 1px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  border: 2px solid transparent;\n  position: relative;\n\n  & .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    outline: none;\n    &::after {\n      position: absolute;\n      content: ' ';\n      top: -2px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 4px);\n      border: 2px solid ", ";\n      border-radius: 2px;\n    }\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      border: 2px solid transparent;\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss);
+const StyledSeparator = dsSystem.styled('hr', {
+  name: 'DS-AppPicker',
+  slot: 'separator'
+})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  border-top: 1px solid ", ";\n  border-bottom: none;\n  width: 99%;\n  margin-bottom: 0;\n"])), props => props.theme.colors.neutral[100]);
+
+exports.StyledChip = StyledChip;
+exports.StyledChipLabel = StyledChipLabel;
+exports.StyledGrid = StyledGrid;
+exports.StyledRow = StyledRow;
+exports.StyledSeparator = StyledSeparator;
+exports.StyledTitle = StyledTitle;
+exports.StyledWrapper = StyledWrapper;

package/cjs/utils.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const keys = {
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  ENTER: 13,
-  SPACE: 32,
-  TAB: 9,
-  ESC: 27
+  LEFT: 'ArrowLeft',
+  UP: 'ArrowUp',
+  RIGHT: 'ArrowRight',
+  DOWN: 'ArrowDown',
+  ENTER: 'Enter',
+  SPACE: '',
+  TAB: 'Tab',
+  ESC: 'Escape',
+  HOME: 'Home',
+  END: 'End'
 };
 
 exports.keys = keys;

package/esm/AppPickerImpl.js

@@ -1,155 +1,147 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useRef, useEffect } from 'react';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useRef, useEffect, useCallback } from 'react';
 import { chunk } from 'lodash';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { keys } from './utils.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _Separator;
-const blockName = 'app-picker';
-const Wrapper = aggregatedClasses('div')(blockName, 'wrapper');
-const Grid = aggregatedClasses('div')(blockName, 'grid');
-const Row = aggregatedClasses('div')(blockName, 'row');
-const Chip = aggregatedClasses('div')(blockName, 'chip', ({
-  disabled
-}) => ({
-  [disabled]: disabled
-}));
-const ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');
-const Separator = aggregatedClasses('hr')(blockName, 'separator');
-const SectionTitle = aggregatedClasses('p')(blockName, 'section-title');
-
-const AppPickerImpl = ({
-  apps = [],
-  customApps = [],
-  sectionTitle = 'APPLICATIONS',
-  customSectionTitle = 'CUSTOM APPLICATIONS',
-  close = () => null
-}) => {
-  const wrapperRef = useRef();
+import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var _StyledSeparator;
+
+const AppPickerImpl = _ref => {
+  let {
+    apps = [],
+    customApps = [],
+    sectionTitle = 'APPLICATIONS',
+    customSectionTitle = 'CUSTOM APPLICATIONS',
+    close = () => null,
+    wrapperRef,
+    onKeyDown,
+    triggerRef
+  } = _ref;
+  const allFocusableButtons = useRef([]);
+  const selectedButton = useRef(null);
   useEffect(() => {
     var _wrapperRef$current;
 
-    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$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach((e, index) => {
+      if (!e.hasAttribute('disabled')) {
+        var _allFocusableButtons$;
 
-  const handleKeyDown = ({
-    target: element,
-    which: key
-  }) => {
-    var _upRow$children$index, _downRow$children$ind;
-
-    const parent = element.parentElement;
-    const index = [...parent.children].indexOf(element);
-    const {
-      previousElementSibling,
-      nextElementSibling
-    } = element;
-    const {
-      previousElementSibling: upRow,
-      nextElementSibling: downRow
-    } = parent;
-
-    switch (key) {
-      case keys.LEFT:
-        if (previousElementSibling) {
-          previousElementSibling.focus();
-        } else if (upRow) {
-          upRow.lastChild.focus();
-        }
+        allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$ = allFocusableButtons.current) === null || _allFocusableButtons$ === void 0 ? void 0 : _allFocusableButtons$.push(e);
+      }
 
-        break;
-
-      case keys.RIGHT:
-        if (nextElementSibling) {
-          nextElementSibling.focus();
-        } else if (downRow) {
-          downRow.firstChild.focus();
-        }
+      if (e.getAttribute('aria-selected') === 'true') {
+        selectedButton.current = index;
+      }
+    });
 
-        break;
+    if (selectedButton.current) {
+      var _wrapperRef$current2;
 
-      case 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();
-        break;
+      wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button')[selectedButton.current].focus();
+    } else {
+      var _allFocusableButtons$2;
 
-      case 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;
+      allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
+    }
+  }, [wrapperRef]); // eslint-disable-next-line max-statements
 
-      case keys.ENTER:
-      case keys.SPACE:
-        element.click();
-        break;
+  const handleKeyDown = e => {
+    var _triggerRef$current;
 
+    switch (e.key) {
       case 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;
-    }
-  };
 
-  const handleOnClick = (e, app) => {
-    if (!app.disabled) {
-      close();
-      app.onClick(e);
+      case keys.TAB:
+        if (e.shiftKey) {
+          if (e.target === allFocusableButtons.current[0]) {
+            var _allFocusableButtons$3;
+
+            e.preventDefault();
+            allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
+          }
+        } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
+          var _allFocusableButtons$4;
+
+          e.preventDefault();
+          allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
+        }
+
+        break;
     }
   };
 
-  const handleOnHover = ({
-    target
-  }) => target.focus();
+  const handleOnClick = useCallback((e, app) => {
+    if (app.onClick) app.onClick(e, app);
+  }, []);
+  const handleOnKeyDownWrapper = useCallback(e => {
+    if (onKeyDown) onKeyDown(e);
 
-  const handleOnKeyDownWrapper = ({
-    key
-  }) => {
-    if (key === keys.ESC) {
+    if (!onKeyDown && e.key === keys.ESC) {
       close();
     }
-  };
+  }, [onKeyDown, close]);
 
-  const buildRows = appList => {
+  const buildRows = function (appList) {
+    let prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     const rows = chunk(appList, 3); // divides array in subarrays of 3 items
 
-    const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(Row, {}, index, row.map((app, key) => {
+    const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(StyledRow, {}, index, row.map((app, key) => {
       const {
         label,
         disabled,
+        selected,
         icon: Icon
       } = app;
-      return /*#__PURE__*/_jsx(Chip, {
-        classProps: {
-          disabled
-        },
+      return /*#__PURE__*/_jsx(StyledChip, {
         onClick: e => handleOnClick(e, app),
         onKeyDown: handleKeyDown,
-        onMouseEnter: handleOnHover,
-        tabIndex: 0,
-        "data-testid": "app-picker__chip"
+        "data-testid": "app-picker__chip",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        selected: selected,
+        "aria-selected": selected,
+        "aria-setsize": apps.length + customApps.length,
+        "aria-posinset": key + prevIndex
       }, key, /*#__PURE__*/_jsx(Icon, {
         className: "app-picker__icon",
         size: "m"
-      }), /*#__PURE__*/_jsx(ChipLabel, {}, void 0, label));
+      }), /*#__PURE__*/_jsx(StyledChipLabel, {}, void 0, label));
     })));
-    return formattedRows;
+    return /*#__PURE__*/jsx(Fragment, {
+      children: formattedRows
+    });
   };
 
-  const AppsRows = () => buildRows(apps);
+  const AppsRows = () => buildRows(apps, 1);
 
-  const CustomRows = () => buildRows(customApps);
+  const CustomRows = () => buildRows(customApps, apps.length);
 
-  return /*#__PURE__*/jsxs(Wrapper, {
+  return /*#__PURE__*/jsxs(StyledWrapper, {
+    role: "listbox",
     ref: wrapperRef,
-    tabIndex: 0,
     onKeyDown: handleOnKeyDownWrapper,
     "data-testid": "app-picker__wrapper",
-    children: [/*#__PURE__*/_jsx(SectionTitle, {
-      "data-testid": "app-picker__main-title"
-    }, void 0, sectionTitle), /*#__PURE__*/_jsx(Grid, {
+    children: [/*#__PURE__*/_jsx(StyledTitle, {
+      "data-testid": "app-picker__main-title",
+      "aria-hidden": true
+    }, void 0, sectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
       "data-testid": "app-picker__main-grid"
     }, void 0, /*#__PURE__*/_jsx(AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxs(Fragment, {
-      children: [_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {})), /*#__PURE__*/_jsx(SectionTitle, {
-        "data-testid": "app-picker__custom-title"
-      }, void 0, customSectionTitle), /*#__PURE__*/_jsx(Grid, {
+      children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+        "aria-hidden": true
+      })), /*#__PURE__*/_jsx(StyledTitle, {
+        "data-testid": "app-picker__custom-title",
+        "aria-hidden": true
+      }, void 0, customSectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
         "data-testid": "app-picker__custom-grid"
       }, void 0, /*#__PURE__*/_jsx(CustomRows, {}))]
     })]

package/esm/DSAppPicker.js

@@ -1,57 +1,98 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useState, useEffect } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import MenuPicker from '@elliemae/ds-icons/MenuPicker';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef, useEffect } from 'react';
+import { describe } from 'react-desc';
+import { MenuPicker } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import DSPopover from '@elliemae/ds-popover';
+import { mergeRefs } from '@elliemae/ds-utilities';
 import AppPickerImpl from './AppPickerImpl.js';
+import { propTypes } from './propTypes.js';
 
-const DSAppPicker = ({
-  apps = [],
-  customApps = [],
-  sectionTitle = 'APPLICATIONS',
-  customSectionTitle = 'CUSTOM APPLICATIONS',
-  icon: Icon = () => /*#__PURE__*/_jsx(MenuPicker, {
-    fill: ['brand-primary', 700],
-    size: "m"
-  }),
-  renderTrigger,
-  isOpen = false,
-  onClose = () => null
-}) => {
-  var _AppPickerImpl, _Icon;
+const DSAppPicker = _ref => {
+  var _Icon;
 
-  const [open, setOpen] = useState(isOpen);
-  useEffect(() => setOpen(isOpen), [isOpen]);
+  let {
+    apps = [],
+    customApps = [],
+    sectionTitle = 'APPLICATIONS',
+    customSectionTitle = 'CUSTOM APPLICATIONS',
+    icon: Icon = () => /*#__PURE__*/_jsx(MenuPicker, {
+      fill: ['brand-primary', 700],
+      size: "m"
+    }),
+    renderTrigger,
+    isOpen,
+    onClose = () => null,
+    actionRef,
+    onKeyDown,
+    onClick = () => null,
+    onClickOutside = () => null,
+    triggerRef
+  } = _ref;
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const defaultTriggerRef = useRef(null);
+  useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToIndex = index => {
+        if (wrapperRef.current) {
+          const parent = wrapperRef.current;
+          const buttons = [...parent.querySelectorAll('button')];
+          buttons[index].focus();
+        }
+      };
+    }
+  }, [actionRef, apps, customApps]);
 
   const handleOnClose = () => {
+    if (typeof isOpen === 'boolean') {
+      setOpen(isOpen);
+    } else {
+      setOpen(false);
+    }
+
+    onClose();
+  };
+
+  const handleOnClickOutside = e => {
     setOpen(false);
     onClose();
+    onClickOutside(e);
   };
 
-  const AppPickerContent = () => _AppPickerImpl || (_AppPickerImpl = /*#__PURE__*/_jsx(AppPickerImpl, {
+  const AppPickerContent = () => /*#__PURE__*/_jsx(AppPickerImpl, {
     apps: apps,
     customApps: customApps,
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
-    close: handleOnClose
-  }));
+    close: handleOnClose,
+    wrapperRef: wrapperRef,
+    onKeyDown: onKeyDown,
+    triggerRef: triggerRef || defaultTriggerRef
+  });
 
-  const RenderTrigger = renderTrigger || (({
-    ref
-  }) => /*#__PURE__*/_jsx(DSButton, {
-    "data-testid": "app-picker__button",
-    id: "app-picker__button",
-    buttonType: "text",
-    icon: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {})),
-    innerRef: ref,
-    onClick: () => setOpen(true)
-  }));
+  const RenderTrigger = renderTrigger || (_ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/_jsx(DSButton, {
+      "data-testid": "app-picker__button",
+      id: "app-picker__button",
+      buttonType: "text",
+      icon: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {})),
+      innerRef: mergeRefs(ref, defaultTriggerRef),
+      onClick: e => {
+        onClick(e);
+        setOpen(true);
+      }
+    });
+  });
 
   return /*#__PURE__*/_jsx(DSPopover, {
     content: /*#__PURE__*/_jsx(AppPickerContent, {}),
-    isOpen: open,
-    onClickOutside: handleOnClose,
+    isOpen: typeof isOpen === 'boolean' ? isOpen : open,
+    onClickOutside: handleOnClickOutside,
     placement: "bottom",
     interactionType: "click",
     renderTrigger: RenderTrigger,
@@ -63,14 +104,7 @@ const DSAppPicker = ({
   });
 };
 
-const appPickerProps = {
-  apps: PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool }]').isRequired,
-  customApps: PropTypes.array.description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool }]'),
-  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),
-  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),
-  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker)
-};
 const AppPickerWithSchema = describe(DSAppPicker);
-AppPickerWithSchema.propTypes = appPickerProps;
+AppPickerWithSchema.propTypes = propTypes;
 
 export { AppPickerWithSchema, DSAppPicker, DSAppPicker as default };

package/esm/propTypes.js

@@ -0,0 +1,21 @@
+import { PropTypes } from 'react-desc';
+import { MenuPicker } from '@elliemae/ds-icons';
+
+const propTypes = {
+  apps: PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]').isRequired,
+  customApps: PropTypes.array.description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]'),
+  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),
+  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),
+  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),
+  renderTrigger: PropTypes.func.description('Custom trigger component.'),
+  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.'),
+  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),
+  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),
+  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),
+  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),
+  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.')
+};
+
+export { propTypes };

package/esm/styles.js

@@ -0,0 +1,35 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled, css } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const StyledWrapper = styled('ul', {
+  name: 'DS-AppPicker',
+  slot: 'root'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-width: 244px;\n  max-height: 449px;\n  overflow-y: auto;\n  padding: 4px 0;\n  margin: 0 auto;\n\n  &:focus {\n    outline: none;\n  }\n"])));
+const StyledGrid = styled('div', {
+  name: 'DS-AppPicker',
+  slot: 'grid'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 0 8px;\n"])));
+const StyledRow = styled('div', {
+  name: 'DS-AppPicker',
+  slot: 'row'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
+const StyledTitle = styled('p', {
+  name: 'DS-AppPicker',
+  slot: 'title'
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.8461rem;\n  font-weight: bold;\n  margin: 8px 0 4px 0;\n  line-height: 1;\n  text-transform: uppercase;\n"])), props => props.theme.colors.neutral[700]);
+const StyledChipLabel = styled('p', {
+  name: 'DS-AppPicker',
+  slot: 'chipLabel'
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 0.8461rem;\n  font-weight: 600;\n  word-wrap: break-word;\n  margin: 4px 0 0 0;\n  line-height: 14px;\n  text-overflow: ellipsis;\n  max-width: 68px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n"])));
+const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    content: ' ';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n\n  &:focus {\n    &::after {\n      position: absolute;\n      content: ' ';\n      top: -2px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 4px);\n      border: 2px solid ", ";\n      border-radius: 2px;\n    }\n  }\n"])), props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800]);
+const StyledChip = styled('button', {
+  name: 'DS-AppPicker',
+  slot: 'chip'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 2%;\n  padding: 8px 0 4px 0;\n  margin: 4px;\n  height: 68px;\n  width: 68px;\n  line-height: 1px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  border: 2px solid transparent;\n  position: relative;\n\n  & .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    outline: none;\n    &::after {\n      position: absolute;\n      content: ' ';\n      top: -2px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 4px);\n      border: 2px solid ", ";\n      border-radius: 2px;\n    }\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      border: 2px solid transparent;\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss);
+const StyledSeparator = styled('hr', {
+  name: 'DS-AppPicker',
+  slot: 'separator'
+})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  border-bottom: none;\n  width: 99%;\n  margin-bottom: 0;\n"])), props => props.theme.colors.neutral[100]);
+
+export { StyledChip, StyledChipLabel, StyledGrid, StyledRow, StyledSeparator, StyledTitle, StyledWrapper };

package/esm/utils.js

@@ -1,12 +1,14 @@
 const keys = {
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  ENTER: 13,
-  SPACE: 32,
-  TAB: 9,
-  ESC: 27
+  LEFT: 'ArrowLeft',
+  UP: 'ArrowUp',
+  RIGHT: 'ArrowRight',
+  DOWN: 'ArrowDown',
+  ENTER: 'Enter',
+  SPACE: '',
+  TAB: 'Tab',
+  ESC: 'Escape',
+  HOME: 'Home',
+  END: 'End'
 };
 
 export { keys };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-app-picker",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - App Picker",
   "module": "./esm/index.js",
@@ -19,6 +19,14 @@
       "import": "./esm/types/AppPickerTypes.js",
       "require": "./cjs/types/AppPickerTypes.js"
     },
+    "./styles": {
+      "import": "./esm/styles.js",
+      "require": "./cjs/styles.js"
+    },
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
+    },
     "./DSAppPicker": {
       "import": "./esm/DSAppPicker.js",
       "require": "./cjs/DSAppPicker.js"
@@ -48,16 +56,23 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-alpha.1",
-    "@elliemae/ds-classnames": "2.0.0-alpha.1",
-    "@elliemae/ds-icons": "2.0.0-alpha.1",
-    "@elliemae/ds-popover": "2.0.0-alpha.1",
+    "@elliemae/ds-button": "2.0.0-alpha.13",
+    "@elliemae/ds-icons": "2.0.0-alpha.13",
+    "@elliemae/ds-popover": "2.0.0-alpha.13",
+    "@elliemae/ds-system": "2.0.0-alpha.13",
+    "@elliemae/ds-utilities": "2.0.0-alpha.13",
     "react-desc": "^4.1.3"
   },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "styled-components": "~5.3.3"
+  },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSAppPicker.d.ts

@@ -1,5 +1,11 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+import React from 'react';
 import type { DSAppPickerType } from './types/AppPickerTypes';
 declare const DSAppPicker: DSAppPickerType;
-declare const AppPickerWithSchema: any;
+declare const AppPickerWithSchema: {
+    (props?: React.PropsWithChildren<import("./types/AppPickerTypes").AppPickerPropsType> | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSAppPicker, AppPickerWithSchema };
 export default DSAppPicker;

package/types/propTypes.d.ts

@@ -0,0 +1,61 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const propTypes: {
+    apps: import("react-desc").PropTypesDescValidator;
+    customApps: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    sectionTitle: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    customSectionTitle: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    icon: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    renderTrigger: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    actionRef: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    isOpen: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    onClose: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    onKeyDown: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    onClick: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    onClickOutside: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+};

package/types/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledWrapper: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledRow: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledChipLabel: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system/types/styled/types").Theme, {
+    selected: boolean | undefined;
+}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;

package/types/types/AppPickerTypes.d.ts

@@ -2,9 +2,13 @@
 import type { SvgIconType } from '@elliemae/ds-icons';
 export interface AppItemType {
     label: string;
-    icon: React.Component;
-    onClick: () => {};
-    disabled: boolean;
+    icon: React.ComponentType<{
+        className: string;
+        size: string;
+    }>;
+    onClick: () => void | null;
+    disabled?: boolean;
+    selected?: boolean;
 }
 export interface AppPickerPropsType {
     apps: AppItemType[];
@@ -12,14 +16,26 @@ export interface AppPickerPropsType {
     sectionTitle: string;
     customSectionTitle: string;
     icon: SvgIconType;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    actionRef?: React.RefObject<{
+        focusToIndex: (index: number) => void;
+    }>;
+    onClick?: (e: MouseEvent) => void;
+    onClickOutside?: (e: React.MouseEvent) => void;
+    renderTrigger?: React.ComponentType<any>;
+    isOpen?: boolean;
+    onClose?: () => void;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 }
 export interface AppPickerImplProps {
     apps: AppItemType[];
     customApps: AppItemType[];
     sectionTitle: string;
     customSectionTitle: string;
-    close: () => void;
-    isOpen: boolean;
+    close?: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+    wrapperRef: React.RefObject<HTMLUListElement>;
+    triggerRef: React.RefObject<HTMLElement>;
 }
 export declare type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;
 export declare type DSAppPickerType = React.ComponentType<AppPickerPropsType>;

package/types/utils.d.ts

@@ -1,10 +1,12 @@
 export declare const keys: {
-    LEFT: number;
-    UP: number;
-    RIGHT: number;
-    DOWN: number;
-    ENTER: number;
-    SPACE: number;
-    TAB: number;
-    ESC: number;
+    LEFT: string;
+    UP: string;
+    RIGHT: string;
+    DOWN: string;
+    ENTER: string;
+    SPACE: string;
+    TAB: string;
+    ESC: string;
+    HOME: string;
+    END: string;
 };

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}