@elliemae/ds-pills 2.4.2-rc.9 → 2.4.3-rc.1

package/cjs/components/PillButton.js

@@ -44,7 +44,7 @@ const DSPillButton = props$1 => {
 
   return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
     buttonType: "raw",
-    className: "".concat(typeToClassName[type], " ").concat(rest.className),
+    className: `${typeToClassName[type]} ${rest.className}`,
     children: children
   }));
 };

package/cjs/components/PillGroup.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
@@ -37,14 +36,14 @@ const DSPillGroupV2 = props$1 => {
   const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillGroupDefaultProps);
   dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillGroupPropTypes);
   const globalAttrs = dsPropsHelpers.useGetGlobalAttributes(propsWithDefaults);
-  const pillGroupUid = React.useMemo(() => "ds-pill-group-".concat(uid.uid()), []);
+  const pillGroupUid = React.useMemo(() => `ds-pill-group-${uid.uid()}`, []);
   const {
     children,
     width,
     innerRef
   } = propsWithDefaults;
   const onKeyboardRemove = React.useCallback(pillUid => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
+    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
     const pillIndex = elems.findIndex(elem => elem.id === pillUid);
 
     if (pillIndex > 0) {
@@ -54,7 +53,7 @@ const DSPillGroupV2 = props$1 => {
     }
   }, [pillGroupUid]);
   const onKeyboardNavigation = React.useCallback((pillUid, step, e) => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
+    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
     const pillIndex = elems.findIndex(elem => elem.id === pillUid);
 
     if (pillIndex >= 0) {

package/cjs/components/styled.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var Grid = require('@elliemae/ds-grid');
@@ -10,50 +9,88 @@ var dsButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-var _templateObject, _templateObject2;
+/* eslint-disable max-lines */
+
+// =============================================================================
 // 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 dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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, _ref => {
+  return dsSystem.css`
+  :after {
+    content: ' ';
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: ${size}px solid ${_ref => {
     let {
       disabled,
       theme
     } = _ref;
     return disabled ? theme.colors.neutral[400] : color;
-  }, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+  }};
+    border-top-left-radius: ${borderRadius};
+    border-top-right-radius: ${borderRadius};
+    border-bottom-left-radius: ${borderRadius};
+    border-bottom-right-radius: ${borderRadius};
+    pointer-events: none;
+    z-index: ${zIndex};
+  }
+`;
 };
 
-const commonPillWrapperCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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  user-select: ", ";\n  cursor: ", ";\n  color: ", ";\n  ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', _ref2 => {
+const commonPillWrapperCss = dsSystem.css`
+  height: ${props => props?.size === 'm' ? '24px' : '18px'};
+
+  position: relative;
+
+  width: fit-content;
+
+  background-color: ${_ref2 => {
   let {
     theme,
     disabled
   } = _ref2;
   return disabled ? theme.colors.neutral['080'] : theme.colors.brand[200];
-}, _ref3 => {
+}};
+
+  outline: none;
+
+  white-space: nowrap;
+
+  padding: 0px 12px 0 12px;
+  border-radius: 12px;
+
+  font-size: 13px;
+  line-height: 1;
+  user-select: ${_ref3 => {
   let {
     disabled
   } = _ref3;
   return disabled ? 'none' : 'auto';
-}, _ref4 => {
+}};
+  cursor: ${_ref4 => {
   let {
     disabled
   } = _ref4;
   return disabled ? 'not-allowed' : 'default';
-}, _ref5 => {
+}};
+  color: ${_ref5 => {
   let {
     theme,
     disabled
   } = _ref5;
   return disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'];
-}, props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
+}};
+  ${props => borderOutside(props.theme.colors.brand[300])};
+`; // =============================================================================
 // Pills wrappers
 // =============================================================================
 
@@ -67,11 +104,12 @@ const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__def
   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'], _ref6 => {
   let {
-    value,
-    theme
+    theme,
+    hasError
   } = _ref6;
-  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"));
+  if (hasError) return borderOutside(theme.colors.danger[900]);
+  return borderOutside(theme.colors.brand[500]);
+}, props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`);
 const StyledDropdownPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-3"
 })(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);

package/cjs/components/types/DropdownPill.js

@@ -39,7 +39,7 @@ const DropdownPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     onDropdownClick
   } = _ref;
   const chevronRef = React.useRef(null);
-  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
+  const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
   const TextComponent = labelTruncated ? _ref2 => {
     let {
       children

package/cjs/components/types/InputPill.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var uid = require('uid');
 var dsIcons = require('@elliemae/ds-icons');
@@ -25,11 +24,13 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     inputRender,
     onInputChange,
     onInputClear,
-    innerRef
+    innerRef,
+    hasError,
+    inputId
   } = _ref;
   const ref = React.useRef(null);
   const InputComponent = React.useMemo(() => inputRender, [inputRender]);
-  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
+  const pillUid = React.useMemo(() => inputId ?? `ds-pill-${uid.uid()}`, []);
   const onCloseIconClick = React.useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -45,7 +46,8 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus
+    inputHasFocus: inputHasFocus,
+    hasError: hasError
   }, void 0, /*#__PURE__*/_jsx__default["default"](InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/cjs/components/types/RemovablePill.js

@@ -32,7 +32,7 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
     onKeyboardRemove,
     onKeyboardNavigation
   } = React.useContext(PillGroup.DSPillGroupV2Context);
-  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
+  const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
   const TextComponent = labelTruncated ? _ref2 => {
     let {
       children
@@ -75,7 +75,7 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
       innerRef: innerRef,
       onClick: onRemove,
       onKeyDown: onKeyDown,
-      "aria-label": "Remove ".concat(label),
+      "aria-label": `Remove ${label}`,
       type: "right",
       tabIndex: tabIndex
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {

package/cjs/deprecated/DropdownPill.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var reactDesc = require('react-desc');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');

package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -5,7 +5,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');

package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -3,7 +3,6 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
@@ -144,7 +143,7 @@ function LabeledDropdownMultiPills(_ref) {
 
       return null;
     }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx__default["default"](OverflowPill.OverflowPill, {
-      label: "+ ".concat(selectedOptions.length - overflowQuantity),
+      label: `+ ${selectedOptions.length - overflowQuantity}`,
       options: overflowOptions
     })]
   });

package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js

@@ -3,7 +3,6 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.find.js');
@@ -140,7 +139,7 @@ function LabeledDropdownSinglePill(_ref) {
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(DropdownPill.DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
-      label: !labelIsValue ? label : optionValue === null || optionValue === void 0 ? void 0 : optionValue.label,
+      label: !labelIsValue ? label : optionValue?.label,
       maxWidth: maxWidth,
       minWidth: minWidth,
       onSelectMenuItem: selectOption,
@@ -152,7 +151,7 @@ function LabeledDropdownSinglePill(_ref) {
         closeOnClick: true
       })],
       selection: {
-        'multi-selection-views': optionValue ? [optionValue === null || optionValue === void 0 ? void 0 : optionValue.id] : ''
+        'multi-selection-views': optionValue ? [optionValue?.id] : ''
       },
       variant: "title"
     })), renderSelection()]

package/cjs/deprecated/OverflowPill.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
@@ -32,9 +31,9 @@ function OverflowPill(_ref) {
     let text = '';
     options.forEach(option => {
       if (!tooltipText || option === options[0]) {
-        text = "".concat(option.label);
+        text = `${option.label}`;
       } else {
-        text = text.concat(", ".concat(option.label));
+        text = text.concat(`, ${option.label}`);
       }
     });
     setTooltipText(text);

package/cjs/deprecated/ReadOnlyPill.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var dsIcons = require('@elliemae/ds-icons');

package/cjs/props.js

@@ -22,8 +22,11 @@ const DSPillV2PropTypes = {
   onInputChange: reactDesc.PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
   onInputClear: reactDesc.PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
   inputWidth: reactDesc.PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
+  inputId: reactDesc.PropTypes.string.description('ID for the input pill').defaultValue(undefined),
   dropdownProps: reactDesc.PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
-  onDropdownClick: reactDesc.PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
+  onDropdownClick: reactDesc.PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null),
+  disabled: reactDesc.PropTypes.bool.description('Whether the pill should be disabled. Only for value and removable pill').defaultValue(false),
+  hasError: reactDesc.PropTypes.bool.description('Whether the pill should be in an error state. Only for input pill').defaultValue(false)
 };
 const DSPillButtonPropTypes = {
   type: reactDesc.PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
@@ -37,6 +40,7 @@ const DSPillGroupPropTypes = {
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
+  hasError: false,
   ariaLabel: '',
   size: 'm',
   labelTruncated: true,

package/esm/components/PillButton.js

@@ -35,7 +35,7 @@ const DSPillButton = props => {
 
   return /*#__PURE__*/jsx(StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
     buttonType: "raw",
-    className: "".concat(typeToClassName[type], " ").concat(rest.className),
+    className: `${typeToClassName[type]} ${rest.className}`,
     children: children
   }));
 };

package/esm/components/PillGroup.js

@@ -1,6 +1,5 @@
 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';
@@ -27,14 +26,14 @@ const DSPillGroupV2 = props => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
   const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
-  const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
+  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);
   const {
     children,
     width,
     innerRef
   } = propsWithDefaults;
   const onKeyboardRemove = useCallback(pillUid => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
+    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
     const pillIndex = elems.findIndex(elem => elem.id === pillUid);
 
     if (pillIndex > 0) {
@@ -44,7 +43,7 @@ const DSPillGroupV2 = props => {
     }
   }, [pillGroupUid]);
   const onKeyboardNavigation = useCallback((pillUid, step, e) => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
+    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
     const pillIndex = elems.findIndex(elem => elem.id === pillUid);
 
     if (pillIndex >= 0) {

package/esm/components/styled.js

@@ -1,49 +1,87 @@
-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;
+/* eslint-disable max-lines */
+
+// =============================================================================
 // 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, _ref => {
+  return css`
+  :after {
+    content: ' ';
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: ${size}px solid ${_ref => {
     let {
       disabled,
       theme
     } = _ref;
     return disabled ? theme.colors.neutral[400] : color;
-  }, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+  }};
+    border-top-left-radius: ${borderRadius};
+    border-top-right-radius: ${borderRadius};
+    border-bottom-left-radius: ${borderRadius};
+    border-bottom-right-radius: ${borderRadius};
+    pointer-events: none;
+    z-index: ${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  user-select: ", ";\n  cursor: ", ";\n  color: ", ";\n  ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', _ref2 => {
+const commonPillWrapperCss = css`
+  height: ${props => props?.size === 'm' ? '24px' : '18px'};
+
+  position: relative;
+
+  width: fit-content;
+
+  background-color: ${_ref2 => {
   let {
     theme,
     disabled
   } = _ref2;
   return disabled ? theme.colors.neutral['080'] : theme.colors.brand[200];
-}, _ref3 => {
+}};
+
+  outline: none;
+
+  white-space: nowrap;
+
+  padding: 0px 12px 0 12px;
+  border-radius: 12px;
+
+  font-size: 13px;
+  line-height: 1;
+  user-select: ${_ref3 => {
   let {
     disabled
   } = _ref3;
   return disabled ? 'none' : 'auto';
-}, _ref4 => {
+}};
+  cursor: ${_ref4 => {
   let {
     disabled
   } = _ref4;
   return disabled ? 'not-allowed' : 'default';
-}, _ref5 => {
+}};
+  color: ${_ref5 => {
   let {
     theme,
     disabled
   } = _ref5;
   return disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'];
-}, props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
+}};
+  ${props => borderOutside(props.theme.colors.brand[300])};
+`; // =============================================================================
 // Pills wrappers
 // =============================================================================
 
@@ -57,11 +95,12 @@ 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'], _ref6 => {
   let {
-    value,
-    theme
+    theme,
+    hasError
   } = _ref6;
-  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"));
+  if (hasError) return borderOutside(theme.colors.danger[900]);
+  return borderOutside(theme.colors.brand[500]);
+}, props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => `${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);

package/esm/components/types/DropdownPill.js

@@ -29,7 +29,7 @@ const DropdownPill = /*#__PURE__*/React.memo(_ref => {
     onDropdownClick
   } = _ref;
   const chevronRef = useRef(null);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
   const TextComponent = labelTruncated ? _ref2 => {
     let {
       children

package/esm/components/types/InputPill.js

@@ -1,5 +1,4 @@
 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';
@@ -16,11 +15,13 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     inputRender,
     onInputChange,
     onInputClear,
-    innerRef
+    innerRef,
+    hasError,
+    inputId
   } = _ref;
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);
   const onCloseIconClick = useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -36,7 +37,8 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus
+    inputHasFocus: inputHasFocus,
+    hasError: hasError
   }, void 0, /*#__PURE__*/_jsx(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/esm/components/types/RemovablePill.js

@@ -23,7 +23,7 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
     onKeyboardRemove,
     onKeyboardNavigation
   } = useContext(DSPillGroupV2Context);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
   const TextComponent = labelTruncated ? _ref2 => {
     let {
       children
@@ -66,7 +66,7 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
       innerRef: innerRef,
       onClick: onRemove,
       onKeyDown: onKeyDown,
-      "aria-label": "Remove ".concat(label),
+      "aria-label": `Remove ${label}`,
       type: "right",
       tabIndex: tabIndex
     }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {

package/esm/deprecated/DropdownPill.js

@@ -1,12 +1,11 @@
-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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useRef, useState } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import DSDropdownMenu from '@elliemae/ds-dropdownmenu';

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-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';

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -1,7 +1,6 @@
 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';
@@ -136,7 +135,7 @@ function LabeledDropdownMultiPills(_ref) {
 
       return null;
     }), selectedOptions && selectedOptions.length > overflowQuantity && /*#__PURE__*/_jsx(OverflowPill, {
-      label: "+ ".concat(selectedOptions.length - overflowQuantity),
+      label: `+ ${selectedOptions.length - overflowQuantity}`,
       options: overflowOptions
     })]
   });

package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js

@@ -1,7 +1,6 @@
 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';
@@ -132,7 +131,7 @@ function LabeledDropdownSinglePill(_ref) {
 
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(DropdownPill, _objectSpread(_objectSpread({}, menuProps), {}, {
-      label: !labelIsValue ? label : optionValue === null || optionValue === void 0 ? void 0 : optionValue.label,
+      label: !labelIsValue ? label : optionValue?.label,
       maxWidth: maxWidth,
       minWidth: minWidth,
       onSelectMenuItem: selectOption,
@@ -144,7 +143,7 @@ function LabeledDropdownSinglePill(_ref) {
         closeOnClick: true
       })],
       selection: {
-        'multi-selection-views': optionValue ? [optionValue === null || optionValue === void 0 ? void 0 : optionValue.id] : ''
+        'multi-selection-views': optionValue ? [optionValue?.id] : ''
       },
       variant: "title"
     })), renderSelection()]

package/esm/deprecated/OverflowPill.js

@@ -1,5 +1,4 @@
 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';
@@ -22,9 +21,9 @@ function OverflowPill(_ref) {
     let text = '';
     options.forEach(option => {
       if (!tooltipText || option === options[0]) {
-        text = "".concat(option.label);
+        text = `${option.label}`;
       } else {
-        text = text.concat(", ".concat(option.label));
+        text = text.concat(`, ${option.label}`);
       }
     });
     setTooltipText(text);

package/esm/deprecated/ReadOnlyPill.js

@@ -1,5 +1,4 @@
 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';

package/esm/props.js

@@ -18,8 +18,11 @@ const DSPillV2PropTypes = {
   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),
+  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),
   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)
+  onDropdownClick: PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null),
+  disabled: PropTypes.bool.description('Whether the pill should be disabled. Only for value and removable pill').defaultValue(false),
+  hasError: PropTypes.bool.description('Whether the pill should be in an error state. Only for input pill').defaultValue(false)
 };
 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'),
@@ -33,6 +36,7 @@ const DSPillGroupPropTypes = {
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
+  hasError: false,
   ariaLabel: '',
   size: 'm',
   labelTruncated: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills",
-  "version": "2.4.2-rc.9",
+  "version": "2.4.3-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills",
   "module": "./esm/index.js",
@@ -144,20 +144,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.2-rc.9",
-    "@elliemae/ds-classnames": "2.4.2-rc.9",
-    "@elliemae/ds-dropdownmenu": "2.4.2-rc.9",
-    "@elliemae/ds-form": "2.4.2-rc.9",
-    "@elliemae/ds-grid": "2.4.2-rc.9",
-    "@elliemae/ds-icons": "2.4.2-rc.9",
-    "@elliemae/ds-modal": "2.4.2-rc.9",
-    "@elliemae/ds-popover": "2.4.2-rc.9",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.9",
-    "@elliemae/ds-shared": "2.4.2-rc.9",
-    "@elliemae/ds-system": "2.4.2-rc.9",
-    "@elliemae/ds-tooltip": "2.4.2-rc.9",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.9",
-    "@elliemae/ds-utilities": "2.4.2-rc.9",
+    "@elliemae/ds-button": "2.4.3-rc.1",
+    "@elliemae/ds-classnames": "2.4.3-rc.1",
+    "@elliemae/ds-dropdownmenu": "2.4.3-rc.1",
+    "@elliemae/ds-form": "2.4.3-rc.1",
+    "@elliemae/ds-grid": "2.4.3-rc.1",
+    "@elliemae/ds-icons": "2.4.3-rc.1",
+    "@elliemae/ds-modal": "2.4.3-rc.1",
+    "@elliemae/ds-popover": "2.4.3-rc.1",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.1",
+    "@elliemae/ds-shared": "2.4.3-rc.1",
+    "@elliemae/ds-system": "2.4.3-rc.1",
+    "@elliemae/ds-tooltip": "2.4.3-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.1",
+    "@elliemae/ds-utilities": "2.4.3-rc.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"

package/types/components/styled.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
+interface InputPillWrapperProps {
     value: string;
     inputWidth: number;
     inputHasFocus: boolean;
-}, never>;
+    hasError: boolean;
+}
+export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, InputPillWrapperProps, never>;
 export declare const StyledDropdownPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledReadonlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     hasIconRight: boolean;
@@ -18,3 +20,4 @@ export declare const StyledPillButton: import("styled-components").StyledCompone
     width: string;
     height: string;
 }, never>;
+export {};

package/types/props.d.ts

@@ -38,12 +38,21 @@ export declare const DSPillV2PropTypes: {
     inputWidth: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
+    inputId: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     dropdownProps: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
     onDropdownClick: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
+    disabled: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    hasError: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
 };
 export declare const DSPillButtonPropTypes: {
     type: {
@@ -67,6 +76,7 @@ export declare const DSPillGroupPropTypes: {
 export declare const DSPillV2DefaultProps: {
     innerRef: () => null;
     disabled: boolean;
+    hasError: boolean;
     ariaLabel: string;
     size: string;
     labelTruncated: boolean;