@elliemae/ds-pills 1.60.0 → 2.0.0-alpha.12

package/cjs/components/Pill.js

@@ -2,60 +2,52 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
 var reactDesc = require('react-desc');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var props = require('../props.js');
-var components_types_DropdownPill = require('./types/DropdownPill.js');
-var components_types_InputPill = require('./types/InputPill.js');
-var components_types_LabelPill = require('./types/LabelPill.js');
-var components_types_ReadOnlyPill = require('./types/ReadOnlyPill.js');
-var components_types_RemovablePill = require('./types/RemovablePill.js');
-var components_types_ValuePill = require('./types/ValuePill.js');
-require('@elliemae/ds-form');
-require('@babel/runtime/helpers/extends');
-require('@elliemae/ds-dropdownmenu');
-require('uid');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./styled.js');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-button');
-require('../utils.js');
-require('./PillButton.js');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@babel/runtime/helpers/slicedToArray');
-require('./PillGroup.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@elliemae/ds-tooltip');
+var DropdownPill = require('./types/DropdownPill.js');
+var InputPill = require('./types/InputPill.js');
+var LabelPill = require('./types/LabelPill.js');
+var ReadOnlyPill = require('./types/ReadOnlyPill.js');
+var RemovablePill = require('./types/RemovablePill.js');
+var ValuePill = require('./types/ValuePill.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
-/* eslint-disable react/prop-types */
-var pillComponentGetter = {
-  dropdown: components_types_DropdownPill.DropdownPill,
-  input: components_types_InputPill.InputPill,
-  label: components_types_LabelPill.LabelPill,
-  readonly: components_types_ReadOnlyPill.ReadOnlyPill,
-  removable: components_types_RemovablePill.RemovablePill,
-  value: components_types_ValuePill.ValuePill
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const pillComponentGetter = {
+  dropdown: DropdownPill.DropdownPill,
+  input: InputPill.InputPill,
+  label: LabelPill.LabelPill,
+  readonly: ReadOnlyPill.ReadOnlyPill,
+  removable: RemovablePill.RemovablePill,
+  value: ValuePill.ValuePill
 };
 
-var DSPillV2 = function DSPillV2(props$1) {
-  var propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillV2DefaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());
-  var type = propsWithDefaults.type;
-  var PillComponent = pillComponentGetter[type];
-  return /*#__PURE__*/React__default['default'].createElement(PillComponent, propsWithDefaults);
+const DSPillV2 = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillV2DefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillV2PropTypes);
+  const {
+    type
+  } = propsWithDefaults;
+  const PillComponent = pillComponentGetter[type];
+  return /*#__PURE__*/jsxRuntime.jsx(PillComponent, _objectSpread({}, propsWithDefaults));
 };
 
-DSPillV2.propTypes = props.DSPillV2PropTypes;
-var DSPillV2WithSchema = reactDesc.describe(DSPillV2).description('Pill');
+const DSPillV2WithSchema = reactDesc.describe(DSPillV2).description('Pill');
 DSPillV2WithSchema.propTypes = props.DSPillV2PropTypes;
 
 exports.DSPillV2 = DSPillV2;
 exports.DSPillV2WithSchema = DSPillV2WithSchema;
-//# sourceMappingURL=Pill.js.map

package/cjs/components/PillButton.js

@@ -2,49 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
+require('react');
 var reactDesc = require('react-desc');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
-var components_styled = require('./styled.js');
+var styled = require('./styled.js');
 var props = require('../props.js');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-button');
-require('@elliemae/ds-form');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["type", "children"];
-var typeToClassName = {
+const _excluded = ["type", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const typeToClassName = {
   only: 'ds-pill-button-only',
   left: 'ds-pill-button-left',
   right: 'ds-pill-button-right'
 };
 
-var DSPillButton = function DSPillButton(props$1) {
-  var propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillButtonDefaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonWithSchema.toTypescript());
+const DSPillButton = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillButtonDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillButtonPropTypes);
 
-  var type = propsWithDefaults.type,
-      children = propsWithDefaults.children,
-      rest = _objectWithoutProperties__default['default'](propsWithDefaults, _excluded);
+  const {
+    type,
+    children
+  } = propsWithDefaults,
+        rest = _objectWithoutProperties__default["default"](propsWithDefaults, _excluded);
 
-  return /*#__PURE__*/React__default['default'].createElement(components_styled.StyledPillButton, _extends__default['default']({}, rest, {
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillButton, _objectSpread(_objectSpread({}, rest), {}, {
     buttonType: "raw",
-    className: "".concat(typeToClassName[type], " ").concat(rest.className)
-  }), children);
+    className: "".concat(typeToClassName[type], " ").concat(rest.className),
+    children: children
+  }));
 };
 
-DSPillButton.propTypes = props.DSPillButtonPropTypes;
-var DSPillButtonWithSchema = reactDesc.describe(DSPillButton).description('Pill button');
+const DSPillButtonWithSchema = reactDesc.describe(DSPillButton).description('Pill button');
 DSPillButtonWithSchema.propTypes = props.DSPillButtonPropTypes;
 
 exports.DSPillButton = DSPillButton;
 exports.DSPillButtonWithSchema = DSPillButtonWithSchema;
-//# sourceMappingURL=PillButton.js.map

package/cjs/components/PillGroup.js

@@ -2,44 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+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');
 var React = require('react');
 var reactDesc = require('react-desc');
 var uid = require('uid');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var props = require('../props.js');
-var components_styled = require('./styled.js');
-require('@elliemae/ds-form');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-button');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var DSPillGroupV2Context = /*#__PURE__*/React.createContext({
-  onKeyboardRemove: function onKeyboardRemove() {
-    return null;
-  }
+const DSPillGroupV2Context = /*#__PURE__*/React.createContext({
+  onKeyboardRemove: () => null
 });
 
-var DSPillGroupV2 = function DSPillGroupV2(props$1) {
-  var propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillGroupDefaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupV2WithSchema.toTypescript());
-  var pillGroupUid = React.useMemo(function () {
-    return "ds-pill-group-".concat(uid.uid());
-  }, []);
-  var children = propsWithDefaults.children,
-      width = propsWithDefaults.width,
-      innerRef = propsWithDefaults.innerRef;
-  var onKeyboardRemove = React.useCallback(function (pillUid) {
-    var elems = _toConsumableArray__default['default'](document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point")));
-
-    var pillIndex = elems.findIndex(function (elem) {
-      return elem.id === pillUid;
-    });
+const DSPillGroupV2 = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillGroupDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillGroupPropTypes);
+  const pillGroupUid = React.useMemo(() => "ds-pill-group-".concat(uid.uid()), []);
+  const {
+    children,
+    width,
+    innerRef
+  } = propsWithDefaults;
+  const onKeyboardRemove = React.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();
@@ -47,26 +42,23 @@ var DSPillGroupV2 = function DSPillGroupV2(props$1) {
       elems[pillIndex + 1].focus();
     }
   }, [pillGroupUid]);
-  return /*#__PURE__*/React__default['default'].createElement(DSPillGroupV2Context.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](DSPillGroupV2Context.Provider, {
     value: {
-      onKeyboardRemove: onKeyboardRemove
+      onKeyboardRemove
     }
-  }, /*#__PURE__*/React__default['default'].createElement(components_styled.StyledPillGroup, {
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillGroup, {
     width: width,
     id: pillGroupUid,
-    cols: React__default['default'].Children.map(children, function () {
-      return 'auto';
-    }),
+    cols: React__default["default"].Children.map(children, () => 'auto'),
     gutter: "2px",
-    ref: innerRef
-  }, children));
+    ref: innerRef,
+    children: children
+  }));
 };
 
-DSPillGroupV2.propTypes = props.DSPillGroupPropTypes;
-var DSPillGroupV2WithSchema = reactDesc.describe(DSPillGroupV2);
+const DSPillGroupV2WithSchema = reactDesc.describe(DSPillGroupV2);
 DSPillGroupV2WithSchema.propTypes = props.DSPillGroupPropTypes;
 
 exports.DSPillGroupV2 = DSPillGroupV2;
 exports.DSPillGroupV2Context = DSPillGroupV2Context;
 exports.DSPillGroupV2WithSchema = DSPillGroupV2WithSchema;
-//# sourceMappingURL=PillGroup.js.map

package/cjs/components/index.js

@@ -2,42 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_Pill = require('./Pill.js');
-var components_PillGroup = require('./PillGroup.js');
-var components_PillButton = require('./PillButton.js');
-require('react');
-require('react-desc');
-require('@elliemae/ds-props-helpers');
-require('../props.js');
-require('@elliemae/ds-form');
-require('./types/DropdownPill.js');
-require('@babel/runtime/helpers/extends');
-require('@elliemae/ds-dropdownmenu');
-require('uid');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./styled.js');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-button');
-require('../utils.js');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('./types/InputPill.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('./types/LabelPill.js');
-require('./types/ReadOnlyPill.js');
-require('./types/RemovablePill.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('./types/ValuePill.js');
-require('@elliemae/ds-tooltip');
+var Pill = require('./Pill.js');
+var PillGroup = require('./PillGroup.js');
+var PillButton = require('./PillButton.js');
 
 
 
-exports.DSPillV2 = components_Pill.DSPillV2;
-exports.DSPillV2WithSchema = components_Pill.DSPillV2WithSchema;
-exports.DSPillGroupV2 = components_PillGroup.DSPillGroupV2;
-exports.DSPillGroupV2Context = components_PillGroup.DSPillGroupV2Context;
-exports.DSPillGroupV2WithSchema = components_PillGroup.DSPillGroupV2WithSchema;
-exports.DSPillButton = components_PillButton.DSPillButton;
-exports.DSPillButtonWithSchema = components_PillButton.DSPillButtonWithSchema;
-//# sourceMappingURL=index.js.map
+exports.DSPillV2 = Pill.DSPillV2;
+exports.DSPillV2WithSchema = Pill.DSPillV2WithSchema;
+exports.DSPillGroupV2 = PillGroup.DSPillGroupV2;
+exports.DSPillGroupV2Context = PillGroup.DSPillGroupV2Context;
+exports.DSPillGroupV2WithSchema = PillGroup.DSPillGroupV2WithSchema;
+exports.DSPillButton = PillButton.DSPillButton;
+exports.DSPillButtonWithSchema = PillButton.DSPillButtonWithSchema;

package/cjs/components/styled.js

@@ -2,110 +2,77 @@
 
 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');
 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);
 
-/* eslint-disable max-lines */
+var _templateObject, _templateObject2;
 // Common CSS
 // =============================================================================
 
-var borderOutside = function borderOutside(color) {
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  var zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  var borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
-  return styled.css([":after{content:' ';position:absolute;top:0px;left:0px;right:0px;bottom:0px;border:", "px solid ", ";border-top-left-radius:", ";border-top-right-radius:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";pointer-events:none;z-index:", ";}"], size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
+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, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
 };
 
-var commonPillWrapperCss = /*#__PURE__*/styled.css(["height:24px;position:relative;width:fit-content;background-color:", ";outline:none;white-space:nowrap;padding:0px 12px 0 12px;border-radius:12px;font-size:13px;line-height:1;color:", ";", ";"], function (props) {
-  return props.theme.colors.brand[200];
-}, function (props) {
-  return props.theme.colors.brand[800];
-}, function (props) {
-  return borderOutside(props.theme.colors.brand[300]);
-}); // =============================================================================
+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  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
 // =============================================================================
 
-var StyledLabelPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledLabelPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-0"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.hasIcon ? '0px !important' : '12px';
-});
-var StyledValuePillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
+const StyledValuePillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-1"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return props.hasIcon ? '0px !important' : '12px';
-});
-var StyledInputPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
+const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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, function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (_ref) {
-  var value = _ref.value,
-      theme = _ref.theme;
+})(["", " 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]);
-}, function (props) {
-  return props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '';
-}, function (props) {
-  return props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '';
-}, function (props) {
-  return "".concat(props.inputWidth + (props.value === '' ? 24 : 0), "px");
-});
-var StyledDropdownPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+}, 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__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-3"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.semibold;
-});
-var StyledReadonlyPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
+const StyledReadonlyPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-4"
-})(["", " font-weight:", ";padding-right:", ";padding-left:", ";"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.hasIconRight ? '0 !important' : '12px';
-}, function (props) {
-  return props.hasIconLeft ? '0 !important' : '12px';
-});
-var StyledRemovablePillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+})(["", " 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__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-5"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, function (props) {
-  return props.theme.fontWeights.regular;
-}); // =============================================================================
+})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
 // Pill group
 // =============================================================================
 
-var StyledPillGroup = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledPillGroup = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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;}}}"], function (_ref2) {
-  var width = _ref2.width;
+})(["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
 // =============================================================================
 
-var StyledSpanWithTooltip = /*#__PURE__*/styled__default['default'].span.withConfig({
+const StyledSpanWithTooltip = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-j0tlch-7"
-})(["outline:none;:focus{", "}"], function (props) {
-  return borderOutside(props.theme.colors.brand[700], 2, 3);
-});
-var StyledPillButton = /*#__PURE__*/styled__default['default'](dsButton.DSButtonV2).withConfig({
+})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
+const StyledPillButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
   componentId: "sc-j0tlch-8"
-})(["display:grid;place-items:center;position:relative;padding:0;width:", ";height:", ";border-radius:12px;:focus{", "}cursor:pointer;"], function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-}, function (props) {
-  return borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit');
-});
+})(["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'));
 
 exports.StyledDropdownPillWrapper = StyledDropdownPillWrapper;
 exports.StyledInputPillWrapper = StyledInputPillWrapper;
@@ -116,4 +83,3 @@ exports.StyledReadonlyPillWrapper = StyledReadonlyPillWrapper;
 exports.StyledRemovablePillWrapper = StyledRemovablePillWrapper;
 exports.StyledSpanWithTooltip = StyledSpanWithTooltip;
 exports.StyledValuePillWrapper = StyledValuePillWrapper;
-//# sourceMappingURL=styled.js.map

package/cjs/components/types/DropdownPill.js

@@ -2,47 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
 var uid = require('uid');
 var dsIcons = require('@elliemae/ds-icons');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var components_styled = require('../styled.js');
+var styled = require('../styled.js');
 var utils = require('../../utils.js');
-var components_PillButton = require('../PillButton.js');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-button');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('react-desc');
-require('@elliemae/ds-props-helpers');
-require('../../props.js');
-require('@elliemae/ds-form');
+var PillButton = require('../PillButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var DropdownPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
-  var label = _ref.label,
-      labelTruncated = _ref.labelTruncated,
-      dropdownProps = _ref.dropdownProps,
-      innerRef = _ref.innerRef,
-      ariaLabel = _ref.ariaLabel,
-      onDropdownClick = _ref.onDropdownClick;
-  var chevronRef = React.useRef(null);
-  var pillUid = React.useMemo(function () {
-    return "ds-pill-".concat(uid.uid());
-  }, []);
-  var TextComponent = labelTruncated ? function (_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const DropdownPill = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    dropdownProps,
+    innerRef,
+    ariaLabel,
+    onDropdownClick
+  } = _ref;
+  const chevronRef = React.useRef(null);
+  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
       value: children
     });
-  } : React__default['default'].Fragment;
-  return /*#__PURE__*/React__default['default'].createElement(components_styled.StyledDropdownPillWrapper, {
+  } : React__default["default"].Fragment;
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownPillWrapper, {
+    size: size,
     id: pillUid,
     className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
     "data-testid": "ds-pill-wrapper",
@@ -50,27 +57,30 @@ var DropdownPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, /*#__PURE__*/React__default['default'].createElement(TextComponent, null, label), /*#__PURE__*/React__default['default'].createElement(DSDropdownMenu.DSDropdownMenuV2, _extends__default['default']({}, dropdownProps, {
-    onClickOutside: function onClickOutside(e) {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](TextComponent, {}, void 0, label), /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu.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: {
       width: '100%',
       height: '100%'
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(components_PillButton.DSPillButton, {
-    className: "ds-pill-focus-point",
-    "data-testid": "ds-pill-dropdown-chevron",
-    innerRef: utils.setMultipleRefs(chevronRef, innerRef),
-    "aria-label": ariaLabel || label,
-    type: "right",
-    onClick: onDropdownClick
-  }, /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronSmallDown, {
-    color: ['brand-primary', '800'],
-    size: "s"
-  }))));
+    },
+    children: /*#__PURE__*/_jsx__default["default"](PillButton.DSPillButton, {
+      className: "ds-pill-focus-point",
+      "data-testid": "ds-pill-dropdown-chevron",
+      innerRef: utils.setMultipleRefs(chevronRef, innerRef),
+      "aria-label": ariaLabel || label,
+      type: "right",
+      onClick: onDropdownClick
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+      color: ['brand-primary', '800'],
+      width: 20,
+      height: 20
+    }))
+  })));
 });
 
 exports.DropdownPill = DropdownPill;
-//# sourceMappingURL=DropdownPill.js.map