@elliemae/ds-app-picker 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/AppPickerImpl.js

@@ -1,131 +1,174 @@
-import * as React from "react";
-import React2, { useEffect, useCallback, useRef } from "react";
-import { getDataProps } from "@elliemae/ds-props-helpers";
-import { chunk } from "lodash";
-import { keys } from "./utils";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import {
-  StyledWrapper,
-  StyledChip,
-  StyledChipLabel,
-  StyledTitle,
-  StyledGrid,
-  StyledRow,
-  StyledSeparator
-} from "./styles";
-const AppPickerImpl = ({
-  apps = [],
-  customApps = [],
-  sectionTitle = "APPLICATIONS",
-  customSectionTitle = "CUSTOM APPLICATIONS",
-  close = () => null,
-  wrapperRef,
-  onKeyDown,
-  triggerRef,
-  isOverflow
-}) => {
+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(() => {
-    wrapperRef?.current?.querySelectorAll("button").forEach((e, index) => {
-      if (!e.hasAttribute("disabled")) {
-        allFocusableButtons?.current?.push(e);
+    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") {
+
+      if (e.getAttribute('aria-selected') === 'true') {
         selectedButton.current = index;
       }
     });
+
     if (selectedButton.current) {
-      wrapperRef?.current?.querySelectorAll("button")[selectedButton.current].focus();
+      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 {
-      allFocusableButtons?.current[0]?.focus();
+      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]);
-  const handleKeyDown = (e) => {
+  }, [wrapperRef]); // eslint-disable-next-line max-statements
+
+  const handleKeyDown = e => {
+    var _triggerRef$current;
+
     switch (e.key) {
       case keys.ESC:
-        triggerRef?.current?.focus();
+        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?.current[allFocusableButtons.current.length - 1]?.focus();
+            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?.current[0]?.focus();
+          allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
         }
-        break;
-      default:
+
         break;
     }
   };
+
   const handleOnClick = useCallback((e, app) => {
-    if (app.onClick)
-      app.onClick(e, app);
+    if (app.onClick) app.onClick(e, app);
   }, []);
-  const handleOnKeyDownWrapper = useCallback((e) => {
-    if (onKeyDown)
-      onKeyDown(e);
+  const handleOnKeyDownWrapper = useCallback(e => {
+    if (onKeyDown) onKeyDown(e);
+
     if (!onKeyDown && e.key === keys.ESC) {
       close();
     }
   }, [onKeyDown, close]);
-  const buildRows = (appList, prevIndex = 0) => {
-    const rows = chunk(appList, 3);
-    const formattedRows = rows.map((row, index) => /* @__PURE__ */ React2.createElement(StyledRow, {
-      key: index
-    }, row.map((app, key) => {
-      const { label, disabled, selected, icon: Icon, id, ...otherProps } = app;
-      return /* @__PURE__ */ React2.createElement(StyledChip, {
-        key,
-        onClick: (e) => handleOnClick(e, app),
+
+  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,
-        selected,
+        disabled: disabled,
+        selected: selected,
         "aria-selected": selected,
         "aria-setsize": apps.length + customApps.length,
         "aria-posinset": key + prevIndex,
-        id,
-        ...getDataProps(otherProps)
-      }, /* @__PURE__ */ React2.createElement(Icon, {
-        className: "app-picker__icon",
-        size: "m"
-      }), /* @__PURE__ */ React2.createElement(StyledChipLabel, null, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-        value: label,
-        placement: "bottom"
-      })));
+        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__ */ React2.createElement(React2.Fragment, null, formattedRows);
+    return /*#__PURE__*/jsx(Fragment, {
+      children: formattedRows
+    });
   };
+
   const AppsRows = () => buildRows(apps, 1);
+
   const CustomRows = () => buildRows(customApps, apps.length);
-  return /* @__PURE__ */ React2.createElement(StyledWrapper, {
+
+  return /*#__PURE__*/jsxs(StyledWrapper, {
     role: "listbox",
     ref: wrapperRef,
     onKeyDown: handleOnKeyDownWrapper,
     "data-testid": "app-picker__wrapper",
-    isOverflow
-  }, /* @__PURE__ */ React2.createElement(StyledTitle, {
-    "data-testid": "app-picker__main-title",
-    "aria-hidden": true
-  }, sectionTitle), /* @__PURE__ */ React2.createElement(StyledGrid, {
-    "data-testid": "app-picker__main-grid"
-  }, /* @__PURE__ */ React2.createElement(AppsRows, null)), !!customApps.length && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledSeparator, {
-    "aria-hidden": true
-  }), /* @__PURE__ */ React2.createElement(StyledTitle, {
-    "data-testid": "app-picker__custom-title",
-    "aria-hidden": true
-  }, customSectionTitle), /* @__PURE__ */ React2.createElement(StyledGrid, {
-    "data-testid": "app-picker__custom-grid"
-  }, /* @__PURE__ */ React2.createElement(CustomRows, null))));
-};
-var AppPickerImpl_default = AppPickerImpl;
-export {
-  AppPickerImpl_default as default
+    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, {}))]
+    })]
+  });
 };
-//# sourceMappingURL=AppPickerImpl.js.map
+
+export { AppPickerImpl as default };

package/esm/DSAppPicker.js

@@ -1,40 +1,45 @@
-import * as React from "react";
-import React2, { useState, useEffect, useRef } 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";
-import { propTypes } from "./propTypes";
-const DSAppPicker = ({
-  apps = [],
-  customApps = [],
-  sectionTitle = "APPLICATIONS",
-  customSectionTitle = "CUSTOM APPLICATIONS",
-  icon: Icon = () => /* @__PURE__ */ React2.createElement(MenuPicker, {
-    fill: ["brand-primary", 700],
-    size: "m"
-  }),
-  renderTrigger,
-  isOpen,
-  onClose = () => null,
-  actionRef,
-  onKeyDown,
-  onClick = () => null,
-  onClickOutside = () => null,
-  triggerRef
-}) => {
+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) => {
+      actionRef.current.focusToIndex = index => {
         if (wrapperRef.current) {
           const parent = wrapperRef.current;
-          const buttons = [...parent.querySelectorAll("button")];
+          const buttons = [...parent.querySelectorAll('button')];
           buttons[index].focus();
         }
       };
@@ -43,70 +48,79 @@ const DSAppPicker = ({
   useEffect(() => {
     setTimeout(() => {
       if (wrapperRef.current) {
-        const { scrollHeight, clientHeight } = wrapperRef.current;
-        if (scrollHeight > clientHeight)
-          return setIsOverflow(true);
+        const {
+          scrollHeight,
+          clientHeight
+        } = wrapperRef.current;
+        if (scrollHeight > clientHeight) return setIsOverflow(true);
       }
+
       return setIsOverflow(false);
     });
   }, [isOpen, open]);
+
   const handleOnClose = () => {
-    if (typeof isOpen === "boolean") {
+    if (typeof isOpen === 'boolean') {
       setOpen(isOpen);
     } else {
       setOpen(false);
     }
+
     onClose();
   };
-  const handleOnClickOutside = (e) => {
+
+  const handleOnClickOutside = e => {
     setOpen(false);
     onClose();
     onClickOutside(e);
   };
-  const AppPickerContent = () => /* @__PURE__ */ React2.createElement(AppPickerImpl, {
-    apps,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
+
+  const AppPickerContent = () => /*#__PURE__*/_jsx(AppPickerImpl, {
+    apps: apps,
+    customApps: customApps,
+    sectionTitle: sectionTitle,
+    customSectionTitle: customSectionTitle,
     close: handleOnClose,
-    wrapperRef,
-    onKeyDown,
+    wrapperRef: wrapperRef,
+    onKeyDown: onKeyDown,
     triggerRef: triggerRef || defaultTriggerRef,
-    isOverflow
+    isOverflow: isOverflow
   });
-  const RenderTrigger = renderTrigger || (({ ref }) => /* @__PURE__ */ React2.createElement(DSButton, {
-    "data-testid": "app-picker__button",
-    id: "app-picker__button",
-    buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(Icon, null),
-    innerRef: mergeRefs(ref, defaultTriggerRef),
-    onClick: (e) => {
-      onClick(e);
-      setOpen(true);
-    }
-  }));
-  return /* @__PURE__ */ React2.createElement(DSPopover, {
-    content: /* @__PURE__ */ React2.createElement(AppPickerContent, null),
-    isOpen: typeof isOpen === "boolean" ? isOpen : open,
+
+  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"
+      padding: '0',
+      maxWidth: '1000px',
+      width: 'fit-content'
     }
   });
 };
-DSAppPicker.propTypes = propTypes;
+
 const AppPickerWithSchema = describe(DSAppPicker);
 AppPickerWithSchema.propTypes = propTypes;
-var DSAppPicker_default = DSAppPicker;
-export {
-  AppPickerWithSchema,
-  DSAppPicker,
-  DSAppPicker_default as default
-};
-//# sourceMappingURL=DSAppPicker.js.map
+
+export { AppPickerWithSchema, DSAppPicker, DSAppPicker as default };

package/esm/index.js

@@ -1,7 +1 @@
-import * as React from "react";
-export * from "./DSAppPicker";
-import { default as default2 } from "./DSAppPicker";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { AppPickerWithSchema, DSAppPicker, DSAppPicker as default } from './DSAppPicker.js';

package/esm/propTypes.js

@@ -1,21 +1,21 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { MenuPicker } from "@elliemae/ds-icons";
+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.")
+  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
-};
-//# sourceMappingURL=propTypes.js.map
+
+export { propTypes };