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

package/cjs/AppPickerImpl.js

@@ -8,34 +8,17 @@ 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('ul')(blockName, 'wrapper');
-const Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
-const Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
-const Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', _ref => {
-  let {
-    disabled,
-    selected
-  } = _ref;
-  return {
-    disabled,
-    selected
-  };
-});
-const ChipLabel = dsClassnames.aggregatedClasses('p')(blockName, 'chip-label');
-const Separator = dsClassnames.aggregatedClasses('hr')(blockName, 'separator');
-const SectionTitle = dsClassnames.aggregatedClasses('p')(blockName, 'section-title');
+var _StyledSeparator;
 
-const AppPickerImpl = _ref2 => {
+const AppPickerImpl = _ref => {
   let {
     apps = [],
     customApps = [],
@@ -45,7 +28,7 @@ const AppPickerImpl = _ref2 => {
     wrapperRef,
     onKeyDown,
     triggerRef
-  } = _ref2;
+  } = _ref;
   const allFocusableButtons = react.useRef([]);
   const selectedButton = react.useRef(null);
   react.useEffect(() => {
@@ -117,55 +100,54 @@ const AppPickerImpl = _ref2 => {
     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,
-          selected
-        },
+      return /*#__PURE__*/_jsx__default["default"](styles.StyledChip, {
         onClick: e => handleOnClick(e, app),
         onKeyDown: handleKeyDown,
         "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, 1);
 
   const CustomRows = () => buildRows(customApps, apps.length);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledWrapper, {
     role: "listbox",
     ref: wrapperRef,
     onKeyDown: handleOnKeyDownWrapper,
     "data-testid": "app-picker__wrapper",
-    children: [/*#__PURE__*/_jsx__default["default"](SectionTitle, {
+    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
       "data-testid": "app-picker__main-title",
       "aria-hidden": true
-    }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
+    }, 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, {
+      children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styles.StyledSeparator, {
         "aria-hidden": true
-      })), /*#__PURE__*/_jsx__default["default"](SectionTitle, {
+      })), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
         "data-testid": "app-picker__custom-title",
         "aria-hidden": true
-      }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
+      }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
         "data-testid": "app-picker__custom-grid"
       }, void 0, /*#__PURE__*/_jsx__default["default"](CustomRows, {}))]
     })]

package/cjs/DSAppPicker.js

@@ -44,7 +44,7 @@ const DSAppPicker = _ref => {
   const wrapperRef = react.useRef(null);
   const defaultTriggerRef = react.useRef(null);
   react.useEffect(() => {
-    if (actionRef) {
+    if (actionRef && actionRef.current) {
       actionRef.current.focusToIndex = index => {
         if (wrapperRef.current) {
           const parent = wrapperRef.current;

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;\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"])));
+const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    content: ' ';\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n\n  &:focus {\n    border: 2px solid transparent;\n    &::after {\n      border: 2px solid ", ";\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  overflow: hidden;\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    border: 2px solid ", ";\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/esm/AppPickerImpl.js

@@ -6,30 +6,13 @@ 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('ul')(blockName, 'wrapper');
-const Grid = aggregatedClasses('div')(blockName, 'grid');
-const Row = aggregatedClasses('div')(blockName, 'row');
-const Chip = aggregatedClasses('button')(blockName, 'chip', _ref => {
-  let {
-    disabled,
-    selected
-  } = _ref;
-  return {
-    disabled,
-    selected
-  };
-});
-const ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');
-const Separator = aggregatedClasses('hr')(blockName, 'separator');
-const SectionTitle = aggregatedClasses('p')(blockName, 'section-title');
+import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-const AppPickerImpl = _ref2 => {
+var _StyledSeparator;
+
+const AppPickerImpl = _ref => {
   let {
     apps = [],
     customApps = [],
@@ -39,7 +22,7 @@ const AppPickerImpl = _ref2 => {
     wrapperRef,
     onKeyDown,
     triggerRef
-  } = _ref2;
+  } = _ref;
   const allFocusableButtons = useRef([]);
   const selectedButton = useRef(null);
   useEffect(() => {
@@ -111,55 +94,54 @@ const AppPickerImpl = _ref2 => {
     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,
-          selected
-        },
+      return /*#__PURE__*/_jsx(StyledChip, {
         onClick: e => handleOnClick(e, app),
         onKeyDown: handleKeyDown,
         "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, 1);
 
   const CustomRows = () => buildRows(customApps, apps.length);
 
-  return /*#__PURE__*/jsxs(Wrapper, {
+  return /*#__PURE__*/jsxs(StyledWrapper, {
     role: "listbox",
     ref: wrapperRef,
     onKeyDown: handleOnKeyDownWrapper,
     "data-testid": "app-picker__wrapper",
-    children: [/*#__PURE__*/_jsx(SectionTitle, {
+    children: [/*#__PURE__*/_jsx(StyledTitle, {
       "data-testid": "app-picker__main-title",
       "aria-hidden": true
-    }, void 0, sectionTitle), /*#__PURE__*/_jsx(Grid, {
+    }, 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, {
+      children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
         "aria-hidden": true
-      })), /*#__PURE__*/_jsx(SectionTitle, {
+      })), /*#__PURE__*/_jsx(StyledTitle, {
         "data-testid": "app-picker__custom-title",
         "aria-hidden": true
-      }, void 0, customSectionTitle), /*#__PURE__*/_jsx(Grid, {
+      }, void 0, customSectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
         "data-testid": "app-picker__custom-grid"
       }, void 0, /*#__PURE__*/_jsx(CustomRows, {}))]
     })]

package/esm/DSAppPicker.js

@@ -34,7 +34,7 @@ const DSAppPicker = _ref => {
   const wrapperRef = useRef(null);
   const defaultTriggerRef = useRef(null);
   useEffect(() => {
-    if (actionRef) {
+    if (actionRef && actionRef.current) {
       actionRef.current.focusToIndex = index => {
         if (wrapperRef.current) {
           const parent = wrapperRef.current;

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;\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"])));
+const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    content: ' ';\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n\n  &:focus {\n    border: 2px solid transparent;\n    &::after {\n      border: 2px solid ", ";\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  overflow: hidden;\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    border: 2px solid ", ";\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-app-picker",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - App Picker",
   "module": "./esm/index.js",
@@ -19,6 +19,10 @@
       "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"
@@ -52,17 +56,23 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-classnames": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
-    "@elliemae/ds-popover": "2.0.0-rc.1",
-    "@elliemae/ds-utilities": "2.0.0-rc.1",
+    "@elliemae/ds-button": "2.0.0-rc.13",
+    "@elliemae/ds-icons": "2.0.0-rc.13",
+    "@elliemae/ds-popover": "2.0.0-rc.13",
+    "@elliemae/ds-system": "2.0.0-rc.13",
+    "@elliemae/ds-utilities": "2.0.0-rc.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

@@ -1,14 +1,61 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 export declare const propTypes: {
-    apps: any;
-    customApps: any;
-    sectionTitle: any;
-    customSectionTitle: any;
-    icon: any;
-    renderTrigger: any;
-    actionRef: any;
-    isOpen: any;
-    onClose: any;
-    onKeyDown: any;
-    onClick: any;
-    onClickOutside: any;
+    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,7 +2,10 @@
 import type { SvgIconType } from '@elliemae/ds-icons';
 export interface AppItemType {
     label: string;
-    icon: React.Component;
+    icon: React.ComponentType<{
+        className: string;
+        size: string;
+    }>;
     onClick: () => void | null;
     disabled?: boolean;
     selected?: boolean;
@@ -13,15 +16,16 @@ export interface AppPickerPropsType {
     sectionTitle: string;
     customSectionTitle: string;
     icon: SvgIconType;
-    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
     actionRef?: React.RefObject<{
         focusToIndex: (index: number) => void;
     }>;
     onClick?: (e: MouseEvent) => void;
-    onClickOutside?: (e: MouseEvent) => void;
-    renderTrigger?: JSX.Element;
+    onClickOutside?: (e: React.MouseEvent) => void;
+    renderTrigger?: React.ComponentType<any>;
     isOpen?: boolean;
     onClose?: () => void;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 }
 export interface AppPickerImplProps {
     apps: AppItemType[];
@@ -30,7 +34,7 @@ export interface AppPickerImplProps {
     customSectionTitle: string;
     close?: () => void;
     onKeyDown: (e: KeyboardEvent) => void;
-    wrapperRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLUListElement>;
     triggerRef: React.RefObject<HTMLElement>;
 }
 export declare type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;