@elliemae/ds-app-picker 2.3.0-alpha.9 → 2.3.0-next.11

package/esm/AppPickerImpl.js

@@ -0,0 +1,174 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useRef, useEffect, useCallback } from 'react';
+import { getDataProps } from '@elliemae/ds-props-helpers';
+import { chunk } from 'lodash';
+import { keys } from './utils.js';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var _StyledSeparator;
+
+const _excluded = ["label", "disabled", "selected", "icon", "id"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const AppPickerImpl = _ref => {
+  let {
+    apps = [],
+    customApps = [],
+    sectionTitle = 'APPLICATIONS',
+    customSectionTitle = 'CUSTOM APPLICATIONS',
+    close = () => null,
+    wrapperRef,
+    onKeyDown,
+    triggerRef,
+    isOverflow
+  } = _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.querySelectorAll('button').forEach((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$current2;
+
+      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;
+
+      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
+
+  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;
+
+      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 handleOnClick = useCallback((e, app) => {
+    if (app.onClick) app.onClick(e, app);
+  }, []);
+  const handleOnKeyDownWrapper = useCallback(e => {
+    if (onKeyDown) onKeyDown(e);
+
+    if (!onKeyDown && e.key === keys.ESC) {
+      close();
+    }
+  }, [onKeyDown, close]);
+
+  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(StyledRow, {}, index, row.map((app, key) => {
+      const {
+        label,
+        disabled,
+        selected,
+        icon: Icon,
+        id
+      } = app,
+            otherProps = _objectWithoutProperties(app, _excluded);
+
+      return /*#__PURE__*/jsxs(StyledChip, _objectSpread(_objectSpread({
+        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,
+        id: id
+      }, getDataProps(otherProps)), {}, {
+        children: [/*#__PURE__*/_jsx(Icon, {
+          className: "app-picker__icon",
+          size: "m"
+        }), /*#__PURE__*/_jsx(StyledChipLabel, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+          value: label,
+          placement: "bottom"
+        }))]
+      }), key);
+    })));
+    return /*#__PURE__*/jsx(Fragment, {
+      children: formattedRows
+    });
+  };
+
+  const AppsRows = () => buildRows(apps, 1);
+
+  const CustomRows = () => buildRows(customApps, apps.length);
+
+  return /*#__PURE__*/jsxs(StyledWrapper, {
+    role: "listbox",
+    ref: wrapperRef,
+    onKeyDown: handleOnKeyDownWrapper,
+    "data-testid": "app-picker__wrapper",
+    isOverflow: isOverflow,
+    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: [_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, {}))]
+    })]
+  });
+};
+
+export { AppPickerImpl as default };

package/esm/DSAppPicker.js

@@ -0,0 +1,126 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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 = _ref => {
+  var _Icon;
+
+  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 [isOverflow, setIsOverflow] = 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]);
+  useEffect(() => {
+    setTimeout(() => {
+      if (wrapperRef.current) {
+        const {
+          scrollHeight,
+          clientHeight
+        } = wrapperRef.current;
+        if (scrollHeight > clientHeight) return setIsOverflow(true);
+      }
+
+      return setIsOverflow(false);
+    });
+  }, [isOpen, open]);
+
+  const handleOnClose = () => {
+    if (typeof isOpen === 'boolean') {
+      setOpen(isOpen);
+    } else {
+      setOpen(false);
+    }
+
+    onClose();
+  };
+
+  const handleOnClickOutside = e => {
+    setOpen(false);
+    onClose();
+    onClickOutside(e);
+  };
+
+  const AppPickerContent = () => /*#__PURE__*/_jsx(AppPickerImpl, {
+    apps: apps,
+    customApps: customApps,
+    sectionTitle: sectionTitle,
+    customSectionTitle: customSectionTitle,
+    close: handleOnClose,
+    wrapperRef: wrapperRef,
+    onKeyDown: onKeyDown,
+    triggerRef: triggerRef || defaultTriggerRef,
+    isOverflow: isOverflow
+  });
+
+  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: typeof isOpen === 'boolean' ? isOpen : open,
+    onClickOutside: handleOnClickOutside,
+    placement: "bottom",
+    interactionType: "click",
+    renderTrigger: RenderTrigger,
+    showArrow: true,
+    style: {
+      padding: '0',
+      maxWidth: '1000px',
+      width: 'fit-content'
+    }
+  });
+};
+
+const AppPickerWithSchema = describe(DSAppPicker);
+AppPickerWithSchema.propTypes = propTypes;
+
+export { AppPickerWithSchema, DSAppPicker, DSAppPicker as default };

package/esm/index.js

@@ -0,0 +1 @@
+export { AppPickerWithSchema, DSAppPicker, DSAppPicker as default } from './DSAppPicker.js';

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,150 @@
+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 StyledTitle = styled('h3', {
+  name: 'DS-AppPicker',
+  slot: 'title'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin: 12px 0 0 0;\n  line-height: 1.38;\n  text-transform: uppercase;\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral[700];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fontSizes.value[400];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontWeights.semibold;
+});
+const StyledWrapper = styled('ul', {
+  name: 'DS-AppPicker',
+  slot: 'root'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin: 0;\n  padding: ", ";\n  &:focus {\n    outline: none;\n  }\n"])), _ref4 => {
+  let {
+    isOverflow
+  } = _ref4;
+  return isOverflow ? '0 0 0 16px' : '0 16px';
+});
+const StyledGrid = styled('div', {
+  name: 'DS-AppPicker',
+  slot: 'grid'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 8px 0;\n"])));
+const StyledRow = styled('div', {
+  name: 'DS-AppPicker',
+  slot: 'row'
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
+const StyledChipLabel = styled('p', {
+  name: 'DS-AppPicker',
+  slot: 'chipLabel'
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: ", ";\n  word-wrap: break-word;\n  margin: 0 6px;\n  line-height: 1.45;\n  width: 100%;\n  z-index: 120;\n\n  & span {\n    padding-top: 6px;\n  }\n"])), _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.fontSizes.label[200];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.fontWeights.semibold;
+});
+const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:before {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ", ";\n    }\n  }\n"])), _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.brand[800];
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.brand[200];
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.brand[800];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.brand[600];
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.brand[800];
+});
+const StyledChip = styled('button', {
+  name: 'DS-AppPicker',
+  slot: 'chip'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  height: 68px;\n  width: 92px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  outline: none;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    border: 2px solid transparent;\n  }\n\n  & .app-picker__icon {\n    fill: ", ";\n    height: 28px;\n    width: 28px;\n  }\n\n  & .app-picker__icon svg {\n    height: 28px;\n    width: 28px;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ", ";\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      &:before {\n        border-color: transparent;\n      }\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.brand[600];
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.brand[600];
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.brand[800];
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.brand[200];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.brand[800];
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[800];
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.neutral[500];
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.colors.neutral[500];
+}, StyledChipLabel, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.colors.neutral[500];
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.neutral[500];
+}, _ref22 => {
+  let {
+    selected
+  } = _ref22;
+  return !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: 0;\n"])), _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.colors.neutral[100];
+});
+
+export { StyledChip, StyledChipLabel, StyledGrid, StyledRow, StyledSeparator, StyledTitle, StyledWrapper };

package/esm/types/AppPickerTypes.js

@@ -0,0 +1 @@
+

package/esm/utils.js

@@ -0,0 +1,14 @@
+const keys = {
+  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,42 +1,39 @@
 {
   "name": "@elliemae/ds-app-picker",
-  "version": "2.3.0-alpha.9",
+  "version": "2.3.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - App Picker",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./utils": {
-      "import": "./dist/esm/utils.js",
-      "require": "./dist/cjs/utils.js"
+      "import": "./esm/utils.js",
+      "require": "./cjs/utils.js"
     },
     "./types/AppPickerTypes": {
-      "import": "./dist/esm/types/AppPickerTypes.js",
-      "require": "./dist/cjs/types/AppPickerTypes.js"
+      "import": "./esm/types/AppPickerTypes.js",
+      "require": "./cjs/types/AppPickerTypes.js"
     },
     "./styles": {
-      "import": "./dist/esm/styles.js",
-      "require": "./dist/cjs/styles.js"
+      "import": "./esm/styles.js",
+      "require": "./cjs/styles.js"
     },
     "./propTypes": {
-      "import": "./dist/esm/propTypes.js",
-      "require": "./dist/cjs/propTypes.js"
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
     "./DSAppPicker": {
-      "import": "./dist/esm/DSAppPicker.js",
-      "require": "./dist/cjs/DSAppPicker.js"
+      "import": "./esm/DSAppPicker.js",
+      "require": "./cjs/DSAppPicker.js"
     },
     "./AppPickerImpl": {
-      "import": "./dist/esm/AppPickerImpl.js",
-      "require": "./dist/cjs/AppPickerImpl.js"
+      "import": "./esm/AppPickerImpl.js",
+      "require": "./cjs/AppPickerImpl.js"
     }
   },
   "sideEffects": [
@@ -48,22 +45,26 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.9",
-    "@elliemae/ds-icons": "2.3.0-alpha.9",
-    "@elliemae/ds-popover": "2.3.0-alpha.9",
-    "@elliemae/ds-props-helpers": "2.3.0-alpha.9",
-    "@elliemae/ds-system": "2.3.0-alpha.9",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.9",
-    "@elliemae/ds-utilities": "2.3.0-alpha.9",
+    "@elliemae/ds-button": "2.3.0-next.11",
+    "@elliemae/ds-icons": "2.3.0-next.11",
+    "@elliemae/ds-popover": "2.3.0-next.11",
+    "@elliemae/ds-system": "2.3.0-next.11",
+    "@elliemae/ds-utilities": "2.3.0-next.11",
     "react-desc": "^4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.1",
+    "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2"
   },
   "peerDependencies": {
@@ -73,12 +74,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledTitle: any;
+export declare const StyledWrapper: any;
+export declare const StyledGrid: any;
+export declare const StyledRow: any;
+export declare const StyledChipLabel: any;
+export declare const StyledChip: any;
+export declare const StyledSeparator: any;