@elliemae/ds-pills 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/{LabeledDropdownPillsTypes → deprecated/LabeledDropdownPillsTypes}/LabeledDropdownMultiPill.js

@@ -1,9 +1,17 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useEffect, useCallback } from 'react';
 import { find } from 'lodash';
-import { isFunction, addOrRemove } from '@elliemae/ds-utilities/utils';
+import { isFunction, addOrRemove } from '@elliemae/ds-utilities';
 import { RemovablePill } from '../RemovablePill.js';
 import { Pill } from '../Pill.js';
 import { OverflowPill } from '../OverflowPill.js';
@@ -128,7 +136,7 @@ function LabeledDropdownMultiPills(_ref) {
 
       return null;
     }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx(OverflowPill, {
-      label: `+ ${selectedOptions.length - overflowQuantity}`,
+      label: "+ ".concat(selectedOptions.length - overflowQuantity),
       options: overflowOptions
     })]
   });

package/esm/{LabeledDropdownPillsTypes → deprecated/LabeledDropdownPillsTypes}/LabeledDropdownSinglePill.js

@@ -1,10 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useEffect, useLayoutEffect, useCallback } from 'react';
-import usePrevious from '@elliemae/ds-utilities/hooks/usePrevious';
-import useShouldRecalculate from '@elliemae/ds-utilities/hooks/useShouldRecalculate';
-import { isFunction, isString } from '@elliemae/ds-utilities/utils';
+import { usePrevious, useShouldRecalculate, isFunction, isString } from '@elliemae/ds-utilities';
 import { DropdownPill } from '../DropdownPill.js';
 import { InputPill } from '../InputPill.js';
 import { Pill } from '../Pill.js';
@@ -61,11 +67,12 @@ function LabeledDropdownSinglePill(_ref) {
     setOptionValue(option);
     onSelect(option);
   }, [onChange, onSelect]);
-  const onChangeInputValue = useCallback(({
-    target: {
-      value: inputValue
-    }
-  }) => {
+  const onChangeInputValue = useCallback(_ref2 => {
+    let {
+      target: {
+        value: inputValue
+      }
+    } = _ref2;
     const {
       onChangeInput
     } = optionValue;

package/esm/{LabeledDropdownPillsTypes → deprecated/LabeledDropdownPillsTypes}/utils.js

@@ -1,4 +1,6 @@
-import { isEqual } from '@elliemae/ds-utilities/utils';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { isEqual } from '@elliemae/ds-utilities';
 import { omit } from 'lodash';
 
 const hasOptionChanged = (prevOptions, options) => {

package/esm/{LabeledPills.js → deprecated/LabeledPills.js}

@@ -5,14 +5,15 @@ import { PillGroup } from './PillGroup.js';
 import { RemovablePill } from './RemovablePill.js';
 import { Pill } from './Pill.js';
 
-function LabeledPills({
-  children,
-  label = '',
-  leftAddon,
-  onFocusGroupSet,
-  onFocusNextGroup,
-  onFocusPreviousGroup
-}) {
+function LabeledPills(_ref) {
+  let {
+    children,
+    label = '',
+    leftAddon,
+    onFocusGroupSet,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  } = _ref;
   return /*#__PURE__*/_jsx(PillGroup, {
     onFocusGroupSet: onFocusGroupSet,
     onFocusNextGroup: onFocusNextGroup,

package/esm/{OverflowPill.js → deprecated/OverflowPill.js}

@@ -1,15 +1,20 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useRef, useState, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
 import DSTooltip from '@elliemae/ds-tooltip';
 import { Pill } from './Pill.js';
 
-function OverflowPill({
-  containerProps = {},
-  label = '',
-  options = []
-}) {
+function OverflowPill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    options = []
+  } = _ref;
   const ref = useRef(null);
   const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
   const [tooltipText, setTooltipText] = useState('');
@@ -17,9 +22,9 @@ function OverflowPill({
     let text = '';
     options.forEach(option => {
       if (!tooltipText || option === options[0]) {
-        text = `${option.label}`;
+        text = "".concat(option.label);
       } else {
-        text = text.concat(`, ${option.label}`);
+        text = text.concat(", ".concat(option.label));
       }
     });
     setTooltipText(text);

package/esm/{Pill.js → deprecated/Pill.js}

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -12,17 +17,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const pillBlockName = 'pill';
-const PillWrapper = aggregatedClasses('div')(pillBlockName, null, ({
-  size,
-  variant
-}) => ({
-  [variant]: !!variant,
-  [size]: !!size
-}));
+const PillWrapper = aggregatedClasses('div')(pillBlockName, null, _ref => {
+  let {
+    size,
+    variant
+  } = _ref;
+  return {
+    [variant]: !!variant,
+    [size]: !!size
+  };
+});
 const PillLabel = aggregatedClasses('span')(pillBlockName, 'label');
 const PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');
 
-function Pill(_ref) {
+function Pill(_ref2) {
   let {
     containerProps = {},
     label = '',
@@ -30,8 +38,8 @@ function Pill(_ref) {
     rightAddon,
     variant = 'value',
     size = 'm'
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
     classProps: {

package/esm/{PillGroup.js → deprecated/PillGroup.js}

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
@@ -12,23 +17,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const pillGroupBlockName = 'pill-group';
 const Container = aggregatedClasses('div')(pillGroupBlockName);
 
-const PillGroup = ({
-  containerProps = {},
-  onFocusNextGroup,
-  onFocusPreviousGroup,
-  onFocusGroupSet,
-  children
-}) => /*#__PURE__*/_jsx(FocusGroupProvider, {
-  keyBindings: {
-    Tab: 'next'
-  },
-  onFocusGroupSet: onFocusGroupSet,
-  onFocusNextGroup: onFocusNextGroup,
-  onFocusPreviousGroup: onFocusPreviousGroup,
-  orientation: "horizontal"
-}, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-  children: children
-})));
+const PillGroup = _ref => {
+  let {
+    containerProps = {},
+    onFocusNextGroup,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(FocusGroupProvider, {
+    keyBindings: {
+      Tab: 'next'
+    },
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup,
+    orientation: "horizontal"
+  }, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: children
+  })));
+};
 
 const props = {
   /** props injected to component wrapper */

package/esm/{ReadOnlyPill.js → deprecated/ReadOnlyPill.js}

@@ -1,20 +1,22 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import InfoCircleSmall from '@elliemae/ds-icons/InfoCircleSmall';
+import { InfoCircleSmall } from '@elliemae/ds-icons';
 import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
 import Popover from '@elliemae/ds-popover';
 import { Pill } from './Pill.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
-const ReadOnlyPill = ({
-  containerProps = {},
-  modalContent = '',
-  label = '',
-  leftAddon,
-  modalTitle = '',
-  tooltipText = ''
-}) => {
+const ReadOnlyPill = _ref => {
+  let {
+    containerProps = {},
+    modalContent = '',
+    label = '',
+    leftAddon,
+    modalTitle = '',
+    tooltipText = ''
+  } = _ref;
   const ref = useRef(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -36,18 +38,21 @@ const ReadOnlyPill = ({
         content: tooltipText,
         placement: "top",
         showArrow: true,
-        renderTrigger: ({
-          ref
-        }) => /*#__PURE__*/_jsx(InfoCircleSmall, {
-          role: "button",
-          "data-testid": "read-only-info-btn",
-          className: "remove-pill-button",
-          onClick: toggle,
-          onMouseEnter: () => setIsTooltipOpen(true),
-          onMouseLeave: () => setIsTooltipOpen(false),
-          color: ['brand-primary', '600'],
-          innerRef: ref
-        })
+        renderTrigger: _ref2 => {
+          let {
+            ref
+          } = _ref2;
+          return /*#__PURE__*/_jsx(InfoCircleSmall, {
+            role: "button",
+            "data-testid": "read-only-info-btn",
+            className: "remove-pill-button",
+            onClick: toggle,
+            onMouseEnter: () => setIsTooltipOpen(true),
+            onMouseLeave: () => setIsTooltipOpen(false),
+            color: ['brand-primary', '600'],
+            innerRef: ref
+          });
+        }
       }),
       tabIndex: -1
     }), /*#__PURE__*/_jsx(DSModal, {

package/esm/{RemovablePill.js → deprecated/RemovablePill.js}

@@ -1,18 +1,19 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useRef } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import { isFunction } from '@elliemae/ds-utilities/utils';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
+import { isFunction } from '@elliemae/ds-utilities';
+import { CloseXsmall } from '@elliemae/ds-icons';
 import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
 import { Pill } from './Pill.js';
 
-function RemovablePill({
-  containerProps = {},
-  label = '',
-  onRemove,
-  size = 'm',
-  leftAddon
-}) {
+function RemovablePill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    onRemove,
+    size = 'm',
+    leftAddon
+  } = _ref;
   const ref = useRef(null);
   const {
     focusPrevious

package/esm/deprecated/index.js

@@ -0,0 +1,8 @@
+export { DSPillWithSchema, Pill, Pill as default } from './Pill.js';
+export { Container, DSPillGroupWithSchema, PillGroup } from './PillGroup.js';
+export { DSLabeledDropdownPillsWithSchema, LabeledDropdownPills } from './LabeledDropdownPills.js';
+export { DSLabeledPillsWithSchema, LabeledPills } from './LabeledPills.js';
+export { DSDropdownPillWithSchema, DropdownPill } from './DropdownPill.js';
+export { DSRemovablePillWithSchema, RemovablePill } from './RemovablePill.js';
+export { DSReadOnlyPillWithSchema, ReadOnlyPill } from './ReadOnlyPill.js';
+export { DSOverflowPillWithSchema, OverflowPill } from './OverflowPill.js';

package/esm/index.d.js

@@ -0,0 +1 @@
+

package/esm/index.js

@@ -1,8 +1,11 @@
-export { DSPillWithSchema, Pill, Pill as default } from './Pill.js';
-export { Container, DSPillGroupWithSchema, PillGroup } from './PillGroup.js';
-export { DSLabeledDropdownPillsWithSchema, LabeledDropdownPills } from './LabeledDropdownPills.js';
-export { DSLabeledPillsWithSchema, LabeledPills } from './LabeledPills.js';
-export { DSDropdownPillWithSchema, DropdownPill } from './DropdownPill.js';
-export { DSRemovablePillWithSchema, RemovablePill } from './RemovablePill.js';
-export { DSReadOnlyPillWithSchema, ReadOnlyPill } from './ReadOnlyPill.js';
-export { DSOverflowPillWithSchema, OverflowPill } from './OverflowPill.js';
+export { DSPillWithSchema, Pill, Pill as default } from './deprecated/Pill.js';
+export { Container, DSPillGroupWithSchema, PillGroup } from './deprecated/PillGroup.js';
+export { DSLabeledDropdownPillsWithSchema, LabeledDropdownPills } from './deprecated/LabeledDropdownPills.js';
+export { DSLabeledPillsWithSchema, LabeledPills } from './deprecated/LabeledPills.js';
+export { DSDropdownPillWithSchema, DropdownPill } from './deprecated/DropdownPill.js';
+export { DSRemovablePillWithSchema, RemovablePill } from './deprecated/RemovablePill.js';
+export { DSReadOnlyPillWithSchema, ReadOnlyPill } from './deprecated/ReadOnlyPill.js';
+export { DSOverflowPillWithSchema, OverflowPill } from './deprecated/OverflowPill.js';
+export { DSPillV2, DSPillV2WithSchema } from './components/Pill.js';
+export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema } from './components/PillGroup.js';
+export { DSPillButton, DSPillButtonWithSchema } from './components/PillButton.js';

package/esm/props.js

@@ -0,0 +1,60 @@
+import { PropTypes } from 'react-desc';
+import { DSInput } from '@elliemae/ds-form';
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+const pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);
+const DSPillV2PropTypes = {
+  label: PropTypes.string.description('Label to show in the pill').isRequired,
+  type: pillTypes.description('The type of pill that you want to render').isRequired,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)').defaultValue(() => null),
+  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),
+  ariaLabel: PropTypes.string.description('Aria label for the pill. If not provided we will use the label').defaultValue(''),
+  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),
+  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),
+  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),
+  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),
+  onRemove: PropTypes.func.description('Callback triggered when removing a pill with the close icon').defaultValue(() => null),
+  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),
+  onInputChange: PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
+  onInputClear: PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
+  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
+  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
+  onDropdownClick: PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
+};
+const DSPillButtonPropTypes = {
+  type: PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
+  width: PropTypes.string.description('Width of the button').defaultValue('100%'),
+  height: PropTypes.string.description('Height of the button').defaultValue('100%')
+};
+const DSPillGroupPropTypes = {
+  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the pill group wrapper').defaultValue(() => null)
+};
+const DSPillV2DefaultProps = {
+  innerRef: () => null,
+  ariaLabel: '',
+  size: 'm',
+  labelTruncated: true,
+  tooltipValue: '',
+  iconLeft: null,
+  iconRight: null,
+  onRemove: () => null,
+  inputPlaceholder: '',
+  onInputChange: () => null,
+  onInputClear: () => null,
+  inputWidth: 72,
+  inputRender: DSInput,
+  dropdownProps: {},
+  onDropdownClick: () => null
+};
+const DSPillButtonDefaultProps = {
+  type: 'right',
+  width: '100%',
+  height: '100%'
+};
+const DSPillGroupDefaultProps = {
+  width: 'fit-content',
+  innerRef: () => null
+};
+
+export { DSPillButtonDefaultProps, DSPillButtonPropTypes, DSPillGroupDefaultProps, DSPillGroupPropTypes, DSPillV2DefaultProps, DSPillV2PropTypes };

package/esm/utils.js

@@ -0,0 +1,24 @@
+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';
+
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return _ref => {
+    refs.forEach(ref => {
+      if (!ref || !_ref) return;
+
+      if (typeof ref === 'function') {
+        ref(_ref);
+        return;
+      }
+
+      if (ref) ref.current = _ref;
+    });
+  };
+};
+
+export { setMultipleRefs };