@elliemae/ds-pills 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js

@@ -0,0 +1,154 @@
+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, useShouldRecalculate, isFunction, isString } from '@elliemae/ds-utilities';
+import { DropdownPill } from '../DropdownPill.js';
+import { InputPill } from '../InputPill.js';
+import { Pill } from '../Pill.js';
+import { RemovablePill } from '../RemovablePill.js';
+import { hasOptionChanged } from './utils.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var _Pill;
+
+const _excluded = ["label", "labelIsValue", "options", "value", "onSelect", "onChange", "maxWidth", "minWidth", "fixed"],
+      _excluded2 = ["input", "onChangeInput"];
+
+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; }
+function LabeledDropdownSinglePill(_ref) {
+  let {
+    label,
+    labelIsValue = false,
+    options,
+    value,
+    onSelect = () => null,
+    onChange,
+    maxWidth,
+    minWidth,
+    fixed = false
+  } = _ref,
+      menuProps = _objectWithoutProperties(_ref, _excluded);
+
+  const [optionValue, setOptionValue] = useState(value);
+  const prevOptions = usePrevious(options);
+  const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));
+  useEffect(() => setOptionValue(value), [value]);
+  useEffect(() => {
+    const selectedValue = options.find(option => option.selected);
+
+    if (selectedValue) {
+      setOptionValue(selectedValue);
+    } else if (!selectedValue) {
+      setOptionValue(options[0]);
+    }
+  }, [areOptionsEqual]);
+  useLayoutEffect(() => {
+    if (optionValue) {
+      const selectedValue = options.find(option => option.id === optionValue.id);
+      setOptionValue(selectedValue);
+    }
+  }, [options]);
+  const selectOption = useCallback(option => {
+    if (isFunction(onChange)) {
+      onChange(option);
+    }
+
+    setOptionValue(option);
+    onSelect(option);
+  }, [onChange, onSelect]);
+  const onChangeInputValue = useCallback(_ref2 => {
+    let {
+      target: {
+        value: inputValue
+      }
+    } = _ref2;
+    const {
+      onChangeInput
+    } = optionValue;
+    onChangeInput && onChangeInput(inputValue);
+  }, [optionValue]);
+
+  const removeOption = removedOption => {
+    const {
+      onRemove
+    } = menuProps;
+    const {
+      onChangeInput
+    } = optionValue;
+    setOptionValue(null);
+    onChangeInput && onChangeInput('');
+
+    const newOption = _objectSpread(_objectSpread({}, removedOption), {}, {
+      input: ''
+    });
+
+    onRemove && onRemove(newOption, removedOption);
+  };
+
+  const renderPill = (option, fixed) => {
+    const {
+      input,
+      onChangeInput
+    } = option,
+          otherProps = _objectWithoutProperties(option, _excluded2);
+
+    let SelectedPill;
+
+    if (isString(input)) {
+      SelectedPill = InputPill;
+    } else if (fixed) {
+      SelectedPill = Pill;
+    } else {
+      SelectedPill = RemovablePill;
+    }
+
+    return /*#__PURE__*/jsx(SelectedPill, _objectSpread({
+      label: option.label,
+      onChange: onChangeInputValue,
+      onRemove: e => removeOption(option),
+      value: input
+    }, otherProps), option.id);
+  };
+
+  const renderSelection = () => {
+    if (!labelIsValue) {
+      if (optionValue) return renderPill(optionValue, fixed);
+      return _Pill || (_Pill = /*#__PURE__*/_jsx(Pill, {
+        label: "-"
+      }));
+    }
+  };
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
+      label: !labelIsValue ? label : optionValue === null || optionValue === void 0 ? void 0 : optionValue.label,
+      maxWidth: maxWidth,
+      minWidth: minWidth,
+      onSelectMenuItem: selectOption,
+      options: [_objectSpread(_objectSpread({}, menuProps), {}, {
+        type: 'SelectionGroup',
+        id: 'multi-selection-views',
+        multi: false,
+        items: options,
+        closeOnClick: true
+      })],
+      selection: {
+        'multi-selection-views': optionValue ? [optionValue === null || optionValue === void 0 ? void 0 : optionValue.id] : ''
+      },
+      variant: "title"
+    })), renderSelection()]
+  });
+}
+
+export { LabeledDropdownSinglePill as default };

package/esm/deprecated/LabeledDropdownPillsTypes/utils.js

@@ -0,0 +1,16 @@
+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) => {
+  if (prevOptions && options) {
+    const prevOptionsOmited = prevOptions.map(option => omit(option, ['input', 'onChangeInput', 'mask']));
+    const optionsOmited = options.map(option => omit(option, ['input', 'onChangeInput', 'mask']));
+    return isEqual(prevOptionsOmited, optionsOmited);
+  }
+
+  return false;
+};
+
+export { hasOptionChanged };

package/esm/deprecated/LabeledPills.js

@@ -0,0 +1,53 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { PillGroup } from './PillGroup.js';
+import { RemovablePill } from './RemovablePill.js';
+import { Pill } from './Pill.js';
+
+function LabeledPills(_ref) {
+  let {
+    children,
+    label = '',
+    leftAddon,
+    onFocusGroupSet,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  } = _ref;
+  return /*#__PURE__*/_jsx(PillGroup, {
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup
+  }, void 0, /*#__PURE__*/_jsx(Pill, {
+    label: label,
+    leftAddon: leftAddon,
+    variant: "title",
+    "data-testid": "pill-title"
+  }), children);
+}
+
+const props = {
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** pill to add the label to */
+  children: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)])
+  })).isRequired.description('pill to add the label to'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left'),
+
+  /** focus next group callback */
+  onFocusNextGroup: PropTypes.func.description('focus next group callback'),
+
+  /** focus prev group callback */
+  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),
+
+  /** focus group set callback */
+  onFocusGroupSet: PropTypes.func.description('focus group set callback')
+};
+const DSLabeledPillsWithSchema = describe(LabeledPills);
+DSLabeledPillsWithSchema.propTypes = props;
+
+export { DSLabeledPillsWithSchema, LabeledPills };

package/esm/deprecated/OverflowPill.js

@@ -0,0 +1,62 @@
+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(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    options = []
+  } = _ref;
+  const ref = useRef(null);
+  const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
+  const [tooltipText, setTooltipText] = useState('');
+  useEffect(() => {
+    let text = '';
+    options.forEach(option => {
+      if (!tooltipText || option === options[0]) {
+        text = "".concat(option.label);
+      } else {
+        text = text.concat(", ".concat(option.label));
+      }
+    });
+    setTooltipText(text);
+  }, [options]);
+  useFocusGroupItem(ref);
+  return /*#__PURE__*/_jsx(DSTooltip, {
+    isOpen: tooltipIsOpen,
+    title: tooltipText,
+    zIndex: 11,
+    triggerComponent: /*#__PURE__*/_jsx(Pill, {
+      className: "overflow-pill",
+      containerProps: containerProps,
+      innerRef: ref,
+      label: label,
+      tabIndex: -1,
+      onMouseEnter: () => setTooltipIsOpen(true),
+      onMouseLeave: () => setTooltipIsOpen(false)
+    })
+  });
+}
+
+const props = {
+  /** props to inject to pill wrapper */
+  containerProps: PropTypes.object.description('props to inject to pill wrapper'),
+
+  /** pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** overflow pills options */
+  options: PropTypes.array.description('overflow pills options')
+};
+const DSOverflowPillWithSchema = describe(OverflowPill);
+DSOverflowPillWithSchema.propTypes = props;
+
+export { DSOverflowPillWithSchema, OverflowPill };

package/esm/deprecated/Pill.js

@@ -0,0 +1,76 @@
+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';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { jsxs } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "label", "leftAddon", "rightAddon", "variant", "size"];
+
+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 pillBlockName = 'pill';
+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(_ref2) {
+  let {
+    containerProps = {},
+    label = '',
+    leftAddon,
+    rightAddon,
+    variant = 'value',
+    size = 'm'
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
+    classProps: {
+      variant,
+      size
+    }
+  }, otherProps), {}, {
+    children: [leftAddon && /*#__PURE__*/_jsx(PillAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx(PillLabel, {}, void 0, label), rightAddon && /*#__PURE__*/_jsx(PillAddon, {}, void 0, rightAddon)]
+  }));
+}
+
+const props = {
+  /** props to inject to pill wrapper */
+  containerProps: PropTypes.object.description('props to inject to pill wrapper'),
+
+  /** pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** pill size */
+  size: PropTypes.oneOf(['m', 'l']).description('pill size'),
+
+  /** pill variant */
+  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left'),
+
+  /** addon component to right */
+  rightAddon: PropTypes.node.description('addon component to right')
+};
+const DSPillWithSchema = describe(Pill);
+DSPillWithSchema.propTypes = props;
+
+export { DSPillWithSchema, Pill, Pill as default };

package/esm/deprecated/PillGroup.js

@@ -0,0 +1,60 @@
+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';
+import { PropTypes, describe } from 'react-desc';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import FocusGroupProvider from '@elliemae/ds-shared/FocusGroup/FocusGroupManager';
+import { jsx } from 'react/jsx-runtime';
+
+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 pillGroupBlockName = 'pill-group';
+const Container = aggregatedClasses('div')(pillGroupBlockName);
+
+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 */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** focus next group callback */
+  onFocusNextGroup: PropTypes.func.description('focus next group callback'),
+
+  /** focus prev group callback */
+  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),
+
+  /** focus group set callback */
+  onFocusGroupSet: PropTypes.func.description('focus group set callback'),
+
+  /** pill components */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description('pill components')
+};
+const DSPillGroupWithSchema = describe(PillGroup);
+DSPillGroupWithSchema.propTypes = props;
+
+export { Container, DSPillGroupWithSchema, PillGroup };

package/esm/deprecated/ReadOnlyPill.js

@@ -0,0 +1,90 @@
+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';
+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 = _ref => {
+  let {
+    containerProps = {},
+    modalContent = '',
+    label = '',
+    leftAddon,
+    modalTitle = '',
+    tooltipText = ''
+  } = _ref;
+  const ref = useRef(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  const toggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Pill, {
+      "data-testid": "read-only-pill",
+      className: "removable-pill",
+      containerProps: containerProps,
+      innerRef: ref,
+      label: label,
+      leftAddon: leftAddon,
+      rightAddon: /*#__PURE__*/_jsx(Popover, {
+        isOpen: tooltipText && isTooltipOpen,
+        content: tooltipText,
+        placement: "top",
+        showArrow: true,
+        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, {
+      isOpen: isModalOpen,
+      showClose: true,
+      shouldCloseOnOverlayClick: true,
+      modalTitle: modalTitle,
+      modalType: MODAL_TYPE_V2.INFORMATION,
+      onClose: toggle,
+      version: 2
+    }, void 0, modalContent)]
+  });
+};
+
+const props = {
+  /** props injected to component wrapper */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left'),
+
+  /** read only pill modal content */
+  modalContent: PropTypes.string.description('read only pill modal content'),
+
+  /** read only pill modal title */
+  modalTitle: PropTypes.string.description('read only pill modal title'),
+  tooltipText: PropTypes.string.description('text to display in tooltip')
+};
+const DSReadOnlyPillWithSchema = describe(ReadOnlyPill);
+DSReadOnlyPillWithSchema.propTypes = props;
+
+export { DSReadOnlyPillWithSchema, ReadOnlyPill };

package/esm/deprecated/RemovablePill.js

@@ -0,0 +1,64 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef } from 'react';
+import { PropTypes, describe } from 'react-desc';
+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(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    onRemove,
+    size = 'm',
+    leftAddon
+  } = _ref;
+  const ref = useRef(null);
+  const {
+    focusPrevious
+  } = useFocusGroupItem(ref);
+  return /*#__PURE__*/_jsx(Pill, {
+    className: "removable-pill",
+    "data-testid": "removable-pill",
+    containerProps: containerProps,
+    innerRef: ref,
+    size: size,
+    label: label,
+    leftAddon: leftAddon,
+    onKeyDown: e => {
+      if (e.key === 'Backspace' && isFunction(onRemove)) {
+        onRemove();
+        if (isFunction(focusPrevious)) focusPrevious();
+      }
+    },
+    rightAddon: /*#__PURE__*/_jsx(CloseXsmall, {
+      role: "button",
+      "data-testid": "remove-pill-button",
+      className: "remove-pill-button",
+      onClick: onRemove
+    }),
+    tabIndex: -1
+  });
+}
+
+const props = {
+  /** props injected to component wrapper */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** remove click callback */
+  onRemove: PropTypes.func.description('remove click callback'),
+
+  /** pill size */
+  size: PropTypes.oneOf(['m', 'l']).description('pill size'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left')
+};
+const DSRemovablePillWithSchema = describe(RemovablePill);
+DSRemovablePillWithSchema.propTypes = props;
+
+export { DSRemovablePillWithSchema, RemovablePill };

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

@@ -0,0 +1,11 @@
+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 };