@elliemae/ds-pills 2.3.1 → 3.0.0-alpha.3

package/esm/components/PillButton.js

@@ -1,46 +0,0 @@
-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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-import { StyledPillButton } from './styled.js';
-import { DSPillButtonPropTypes, DSPillButtonDefaultProps } from '../props.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["type", "children"];
-
-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 typeToClassName = {
-  only: 'ds-pill-button-only',
-  left: 'ds-pill-button-left',
-  right: 'ds-pill-button-right'
-};
-
-const DSPillButton = props => {
-  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);
-  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);
-
-  const {
-    type,
-    children
-  } = propsWithDefaults,
-        rest = _objectWithoutProperties(propsWithDefaults, _excluded);
-
-  return /*#__PURE__*/jsx(StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
-    buttonType: "raw",
-    className: "".concat(typeToClassName[type], " ").concat(rest.className),
-    children: children
-  }));
-};
-
-const DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');
-DSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;
-
-export { DSPillButton, DSPillButtonWithSchema };

package/esm/components/PillGroup.js

@@ -1,75 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.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.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 React, { createContext, useMemo, useCallback } from 'react';
-import { uid } from 'uid';
-import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
-import { DSPillGroupPropTypes, DSPillGroupDefaultProps } from '../props.js';
-import { StyledPillGroup } from './styled.js';
-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 DSPillGroupV2Context = /*#__PURE__*/createContext({
-  onKeyboardRemove: () => null,
-  onKeyboardNavigation: () => null
-});
-
-const DSPillGroupV2 = props => {
-  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
-  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
-  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
-  const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
-  const {
-    children,
-    width,
-    innerRef
-  } = propsWithDefaults;
-  const onKeyboardRemove = useCallback(pillUid => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
-    const pillIndex = elems.findIndex(elem => elem.id === pillUid);
-
-    if (pillIndex > 0) {
-      elems[pillIndex - 1].focus();
-    } else if (pillIndex + 1 < elems.length) {
-      elems[pillIndex + 1].focus();
-    }
-  }, [pillGroupUid]);
-  const onKeyboardNavigation = useCallback((pillUid, step, e) => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
-    const pillIndex = elems.findIndex(elem => elem.id === pillUid);
-
-    if (pillIndex >= 0) {
-      if (elems[pillIndex + step]) {
-        e.stopPropagation();
-        elems[pillIndex + step].focus();
-      }
-    }
-  }, [pillGroupUid]);
-  return /*#__PURE__*/_jsx(DSPillGroupV2Context.Provider, {
-    value: {
-      onKeyboardRemove,
-      onKeyboardNavigation
-    }
-  }, void 0, /*#__PURE__*/jsx(StyledPillGroup, _objectSpread(_objectSpread({}, globalAttrs), {}, {
-    width: width,
-    id: pillGroupUid,
-    cols: React.Children.map(children, () => 'auto'),
-    gutter: "2px",
-    ref: innerRef,
-    children: children
-  })));
-};
-
-const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
-DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
-
-export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema };

package/esm/components/index.js

@@ -1,3 +0,0 @@
-export { DSPillV2, DSPillV2WithSchema } from './Pill.js';
-export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema } from './PillGroup.js';
-export { DSPillButton, DSPillButtonWithSchema } from './PillButton.js';

package/esm/components/styled.js

@@ -1,67 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import styled from 'styled-components';
-import { css } from '@elliemae/ds-system';
-import Grid from '@elliemae/ds-grid';
-import { DSButtonV2 } from '@elliemae/ds-button';
-
-var _templateObject, _templateObject2;
-// Common CSS
-// =============================================================================
-
-const borderOutside = function (color) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ", "px solid ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    pointer-events: none;\n    z-index: ", ";\n  }\n"])), size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
-};
-
-const commonPillWrapperCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ", ";\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 13px;\n  line-height: 1;\n  color: ", ";\n  ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
-// Pills wrappers
-// =============================================================================
-
-const StyledLabelPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-0"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
-const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-1"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
-const StyledInputPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-2"
-})(["", " background:", ";padding:0;", ":focus-within{", "}:active{", "}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;height:100%;background:transparent;width:", ";padding:0;margin:0 0 0 8px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, props => props.theme.colors.neutral['000'], _ref => {
-  let {
-    value,
-    theme
-  } = _ref;
-  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
-}, props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => "".concat(props.inputWidth + (props.value === '' ? 24 : 0), "px"));
-const StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-3"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
-const StyledReadonlyPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-4"
-})(["", " font-weight:", ";padding-right:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIconRight ? '0 !important' : '12px', props => props.hasIconLeft ? '0 !important' : '12px');
-const StyledRemovablePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-5"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
-// Pill group
-// =============================================================================
-
-const StyledPillGroup = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-6"
-})(["width:", ";& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-left-radius:0px;border-bottom-left-radius:0px;}}&:not(:last-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}& .ds-pill-wrapper-label,& .ds-pill-wrapper-value,& .ds-pill-wrapper-readonly{&:not(:first-of-type){padding-left:8px;}&:not(:last-of-type){padding-right:8px;}}& .ds-pill-wrapper-removable:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper-dropdown:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper{:not(:first-of-type){.ds-pill-button-left{border-radius:0px;}.ds-pill-button-only{border-top-left-radius:0px;border-bottom-left-radius:0px;}}:not(:last-of-type){.ds-pill-button-right{border-radius:0px;}.ds-pill-button-only{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"], _ref2 => {
-  let {
-    width
-  } = _ref2;
-  return width;
-}); // =============================================================================
-// Extra stuff
-// =============================================================================
-
-const StyledSpanWithTooltip = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-j0tlch-7"
-})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
-const StyledPillButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-j0tlch-8"
-})(["display:grid;place-items:center;position:relative;padding:0;width:", ";height:", ";border-radius:12px;:focus{", "}cursor:pointer;"], props => props.width, props => props.height, props => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit'));
-
-export { StyledDropdownPillWrapper, StyledInputPillWrapper, StyledLabelPillWrapper, StyledPillButton, StyledPillGroup, StyledReadonlyPillWrapper, StyledRemovablePillWrapper, StyledSpanWithTooltip, StyledValuePillWrapper };

package/esm/components/types/DropdownPill.js

@@ -1,76 +0,0 @@
-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 React, { useRef, useMemo } from 'react';
-import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
-import { uid } from 'uid';
-import { ChevronSmallDown } from '@elliemae/ds-icons';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledDropdownPillWrapper } from '../styled.js';
-import { setMultipleRefs } from '../../utils.js';
-import { DSPillButton } from '../PillButton.js';
-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 DropdownPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    labelTruncated,
-    dropdownProps,
-    innerRef,
-    ariaLabel,
-    onDropdownClick
-  } = _ref;
-  const chevronRef = useRef(null);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledDropdownPillWrapper, {
-    size: size,
-    id: pillUid,
-    className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
-    "data-testid": "ds-pill-wrapper",
-    cols: ['auto', '24px'],
-    gutter: "2px",
-    alignItems: "center",
-    justifyItems: "center"
-  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/jsx(DSDropdownMenuV2, _objectSpread(_objectSpread({
-    placementOrderPreference: ['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']
-  }, dropdownProps), {}, {
-    onClickOutside: e => {
-      if (e.code === 'Escape') chevronRef.current.focus();
-      if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
-    },
-    wrapperStyles: {
-      w: '100%',
-      h: '100%'
-    },
-    children: /*#__PURE__*/_jsx(DSPillButton, {
-      className: "ds-pill-focus-point",
-      "data-testid": "ds-pill-dropdown-chevron",
-      innerRef: setMultipleRefs(chevronRef, innerRef),
-      "aria-label": ariaLabel || label,
-      type: "right",
-      onClick: onDropdownClick
-    }, void 0, /*#__PURE__*/_jsx(ChevronSmallDown, {
-      color: ['brand-primary', '800'],
-      width: 20,
-      height: 20
-    }))
-  })));
-});
-
-export { DropdownPill };

package/esm/components/types/InputPill.js

@@ -1,65 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import React, { useRef, useMemo, useCallback, useState } from 'react';
-import { uid } from 'uid';
-import { CloseXsmall } from '@elliemae/ds-icons';
-import { StyledInputPillWrapper } from '../styled.js';
-import { setMultipleRefs } from '../../utils.js';
-import { DSPillButton } from '../PillButton.js';
-
-const InputPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    inputPlaceholder,
-    inputWidth,
-    inputRender,
-    onInputChange,
-    onInputClear,
-    innerRef
-  } = _ref;
-  const ref = useRef(null);
-  const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
-  const onCloseIconClick = useCallback(e => {
-    if ([undefined, 'Enter', 'Space'].includes(e.code)) {
-      e.preventDefault();
-      onInputClear(e);
-      ref.current.focus();
-    }
-  }, [onInputClear]);
-  const [inputHasFocus, setInputHasFocus] = useState(false);
-  return /*#__PURE__*/_jsx(StyledInputPillWrapper, {
-    size: size,
-    className: "ds-pill-wrapper",
-    "data-testid": "ds-pill-wrapper",
-    cols: label === '' ? ['auto'] : ['auto', '24px'],
-    inputWidth: inputWidth,
-    value: label,
-    inputHasFocus: inputHasFocus
-  }, void 0, /*#__PURE__*/_jsx(InputComponent, {
-    id: pillUid,
-    className: "ds-pill-focus-point",
-    "data-testid": "ds-pill-input",
-    innerRef: setMultipleRefs(ref, innerRef),
-    value: label,
-    onChange: onInputChange,
-    placeholder: inputPlaceholder,
-    onFocus: () => setInputHasFocus(true),
-    onBlur: () => setInputHasFocus(false),
-    disableTooltip: false
-  }), label !== '' && /*#__PURE__*/_jsx(DSPillButton, {
-    id: pillUid,
-    "data-testid": "ds-pill-clear-icon",
-    innerRef: innerRef,
-    onClick: onCloseIconClick,
-    onKeyDown: onCloseIconClick,
-    "aria-label": "Clear input",
-    type: "right"
-  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
-    size: "s",
-    color: ['brand-primary', '700']
-  })));
-});
-
-export { InputPill };

package/esm/components/types/LabelPill.js

@@ -1,37 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-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 React from 'react';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledLabelPillWrapper } from '../styled.js';
-
-const LabelPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    labelTruncated,
-    iconLeft,
-    ariaLabel
-  } = _ref;
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledLabelPillWrapper, {
-    size: size,
-    alignItems: "center",
-    className: "ds-pill-wrapper ds-pill-wrapper-label",
-    "data-testid": "ds-pill-wrapper",
-    "aria-label": ariaLabel || label,
-    cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
-    gutter: "xxxs",
-    hasIcon: iconLeft !== null
-  }, void 0, iconLeft, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
-});
-
-export { LabelPill };

package/esm/components/types/ReadOnlyPill.js

@@ -1,41 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-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 React from 'react';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledReadonlyPillWrapper } from '../styled.js';
-
-const ReadOnlyPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    labelTruncated,
-    iconLeft,
-    iconRight,
-    ariaLabel
-  } = _ref;
-  const hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
-  const hasIconRight = iconRight !== null || iconLeft !== null && label === '';
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledReadonlyPillWrapper, {
-    size: size,
-    alignItems: "center",
-    className: "ds-pill-wrapper ds-pill-wrapper-readonly",
-    "data-testid": "ds-pill-wrapper",
-    "aria-label": ariaLabel || label,
-    cols: [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(notFalse => notFalse),
-    gutter: "xxxs",
-    hasIconRight: hasIconRight,
-    hasIconLeft: hasIconLeft
-  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx(TextComponent, {}, void 0, label) : null, iconRight);
-});
-
-export { ReadOnlyPill };

package/esm/components/types/RemovablePill.js

@@ -1,76 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useContext, useMemo, useCallback } from 'react';
-import { uid } from 'uid';
-import { CloseXsmall } from '@elliemae/ds-icons';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledRemovablePillWrapper } from '../styled.js';
-import { DSPillGroupV2Context } from '../PillGroup.js';
-import { DSPillButton } from '../PillButton.js';
-
-const RemovablePill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    labelTruncated,
-    onRemove,
-    innerRef,
-    ariaLabel,
-    tabIndex
-  } = _ref;
-  const {
-    onKeyboardRemove,
-    onKeyboardNavigation
-  } = useContext(DSPillGroupV2Context);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  const onKeyDown = useCallback(e => {
-    if (['Enter', 'Space'].includes(e.code)) {
-      e.preventDefault();
-      if (onKeyboardRemove) onKeyboardRemove(pillUid);
-      onRemove(e);
-    }
-
-    if (e.code === 'ArrowLeft') {
-      e.preventDefault();
-      if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
-    }
-
-    if (e.code === 'ArrowRight') {
-      e.preventDefault();
-      if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
-    }
-  }, [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]);
-  return /*#__PURE__*/_jsx(StyledRemovablePillWrapper, {
-    size: size,
-    cols: ['auto', '24px'],
-    gutter: "2px",
-    alignItems: "center",
-    justifyItems: "center",
-    className: "ds-pill-wrapper ds-pill-wrapper-removable",
-    "data-testid": "ds-pill-wrapper",
-    "aria-label": ariaLabel || label
-  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/_jsx(DSPillButton, {
-    className: "ds-pill-focus-point",
-    id: pillUid,
-    "data-testid": "ds-pill-close-icon",
-    innerRef: innerRef,
-    onClick: onRemove,
-    onKeyDown: onKeyDown,
-    "aria-label": "Remove ".concat(label),
-    type: "right",
-    tabIndex: tabIndex
-  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
-    width: size === 's' ? 18 : 22.65,
-    height: size === 's' ? 18 : 22.65,
-    color: ['brand-primary', '700']
-  })));
-});
-
-export { RemovablePill };

package/esm/components/types/ValuePill.js

@@ -1,45 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-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 React from 'react';
-import { DSTooltipV2 } from '@elliemae/ds-tooltip';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledValuePillWrapper, StyledSpanWithTooltip } from '../styled.js';
-
-const ValuePill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    labelTruncated,
-    tooltipValue,
-    iconLeft,
-    ariaLabel
-  } = _ref;
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledValuePillWrapper, {
-    size: size,
-    alignItems: "center",
-    className: "ds-pill-wrapper ds-pill-wrapper-value",
-    "data-testid": "ds-pill-wrapper",
-    "aria-label": ariaLabel || label,
-    cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
-    gutter: "xxxs",
-    hasIcon: iconLeft !== null
-  }, void 0, iconLeft, tooltipValue !== '' ? /*#__PURE__*/_jsx(DSTooltipV2, {
-    title: tooltipValue,
-    triggerComponent: /*#__PURE__*/_jsx(StyledSpanWithTooltip, {
-      className: "ds-pill-tooltip-value",
-      tabIndex: 0
-    }, void 0, label)
-  }) : /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
-});
-
-export { ValuePill };

package/esm/components/types/index.js

@@ -1,6 +0,0 @@
-export { DropdownPill } from './DropdownPill.js';
-export { InputPill } from './InputPill.js';
-export { LabelPill } from './LabelPill.js';
-export { ReadOnlyPill } from './ReadOnlyPill.js';
-export { RemovablePill } from './RemovablePill.js';
-export { ValuePill } from './ValuePill.js';

package/esm/deprecated/DropdownPill.js

@@ -1,100 +0,0 @@
-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.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useRef, useState } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
-import { ChevronDown } from '@elliemae/ds-icons';
-import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
-import { Pill } from './Pill.js';
-import { jsx } from 'react/jsx-runtime';
-
-var _ChevronDown;
-
-const _excluded = ["containerProps", "label", "variant", "tabIndex", "closeMenuOnItemSelection", "maxWidth", "minWidth"];
-
-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 DropdownPill(_ref) {
-  let {
-    containerProps = {},
-    label = '',
-    variant,
-    tabIndex = -1,
-    closeMenuOnItemSelection = false,
-    maxWidth,
-    minWidth
-  } = _ref,
-      dropdownProps = _objectWithoutProperties(_ref, _excluded);
-
-  const ref = useRef(null);
-  const [chevronEl, chevronRef] = useState();
-  const {
-    focusFirst
-  } = useFocusGroupItem(ref);
-  return /*#__PURE__*/jsx(DSDropdownMenu, _objectSpread(_objectSpread({}, dropdownProps), {}, {
-    closeMenuOnItemSelection: closeMenuOnItemSelection,
-    maxWidth: maxWidth,
-    hideIfNotVisible: true,
-    menuProps: {
-      className: 'dropdown-pill-menu',
-      zIndex: 100
-    },
-    minWidth: minWidth,
-    onClose: focusFirst,
-    referenceNode: chevronEl,
-    triggerComponent: /*#__PURE__*/_jsx(Pill, {
-      "data-testid": "dropdown-pill",
-      className: "dropdown-pill",
-      containerProps: _objectSpread({
-        role: 'listbox'
-      }, containerProps),
-      innerRef: ref,
-      label: label,
-      rightAddon: /*#__PURE__*/jsx("div", {
-        ref: chevronRef,
-        children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx(ChevronDown, {
-          className: "dropdown-pill-chevron-down",
-          "data-testid": "dropdown-pill-button"
-        }))
-      }),
-      tabIndex: tabIndex,
-      variant: variant
-    })
-  }));
-}
-
-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'),
-
-  /** pill variant */
-  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),
-
-  /** html focus border */
-  tabIndex: PropTypes.number.description('html focus order'),
-
-  /** close menu on item selection */
-  closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),
-
-  /** pill max width */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),
-
-  /** pill min width */
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width')
-};
-const DSDropdownPillWithSchema = describe(DropdownPill);
-DSDropdownPillWithSchema.propTypes = props;
-
-export { DSDropdownPillWithSchema, DropdownPill };