@elliemae/ds-pills 1.53.4-rc.1 → 1.53.4-rc.6

package/cjs/components/Pill.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var reactDesc = require('react-desc');
+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/Input');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/slicedToArray');
+require('@elliemae/ds-dropdownmenu');
+require('uid');
+require('./styled.js');
+require('styled-components');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-icons/CloseXsmall');
+require('@elliemae/ds-icons/ChevronSmallDown');
+require('../utils.js');
+require('./PillGroup.js');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@elliemae/ds-tooltip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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; }
+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
+};
+
+var DSPillV2 = function DSPillV2(props$1) {
+  // TODO -- investigate why showcase story doesn't work with useMemoMerge
+  var propsWithDefaults = _objectSpread(_objectSpread({}, props.DSPillV2DefaultProps), props$1);
+
+  var type = propsWithDefaults.type;
+  var PillComponent = pillComponentGetter[type];
+  return /*#__PURE__*/React__default['default'].createElement(PillComponent, propsWithDefaults);
+};
+
+DSPillV2.propTypes = props.DSPillV2PropTypes;
+var DSPillV2WithSchema = reactDesc.describe(DSPillV2).description('Pill');
+DSPillV2WithSchema.propTypes = props.DSPillV2PropTypes;
+
+exports.DSPillV2 = DSPillV2;
+exports.DSPillV2WithSchema = DSPillV2WithSchema;
+//# sourceMappingURL=Pill.js.map

package/cjs/components/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sources":["../../../src/components/Pill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n  dropdown: DropdownPill,\n  input: InputPill,\n  label: LabelPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n  // TODO -- investigate why showcase story doesn't work with useMemoMerge\n  const propsWithDefaults = { ...DSPillV2DefaultProps, ...props };\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n"],"names":["pillComponentGetter","dropdown","DropdownPill","input","InputPill","label","LabelPill","readonly","ReadOnlyPill","removable","RemovablePill","value","ValuePill","DSPillV2","props","propsWithDefaults","DSPillV2DefaultProps","type","PillComponent","React","propTypes","DSPillV2PropTypes","DSPillV2WithSchema","describe","description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,mBAAqE,GAAG;AAC5EC,EAAAA,QAAQ,EAAEC,0CADkE;AAE5EC,EAAAA,KAAK,EAAEC,oCAFqE;AAG5EC,EAAAA,KAAK,EAAEC,oCAHqE;AAI5EC,EAAAA,QAAQ,EAAEC,0CAJkE;AAK5EC,EAAAA,SAAS,EAAEC,4CALiE;AAM5EC,EAAAA,KAAK,EAAEC;AANqE,CAA9E;;IASMC,QAA0C,GAAG,SAA7CA,QAA6C,CAACC,OAAD,EAAW;AAC5D;AACA,MAAMC,iBAAiB,mCAAQC,0BAAR,GAAiCF,OAAjC,CAAvB;;AACA,MAAQG,IAAR,GAAiBF,iBAAjB,CAAQE,IAAR;AACA,MAAMC,aAAa,GAAGlB,mBAAmB,CAACiB,IAAD,CAAzC;AAEA,sBAAOE,wCAAC,aAAD,EAAmBJ,iBAAnB,CAAP;AACD;;AAEDF,QAAQ,CAACO,SAAT,GAAqBC,uBAArB;IACMC,kBAAkB,GAAGC,kBAAQ,CAACV,QAAD,CAAR,CAAmBW,WAAnB,CAA+B,MAA/B;AAC3BF,kBAAkB,CAACF,SAAnB,GAA+BC,uBAA/B;;;;;"}

package/cjs/components/PillGroup.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var React = require('react');
+var reactDesc = require('react-desc');
+var uid = require('uid');
+var components_styled = require('./styled.js');
+require('styled-components');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-icons/CloseXsmall');
+require('@elliemae/ds-icons/ChevronSmallDown');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var DSPillGroupV2Context = /*#__PURE__*/React.createContext({
+  onKeyboardRemove: function onKeyboardRemove() {
+    return null;
+  }
+});
+
+var DSPillGroupV2 = function DSPillGroupV2(_ref) {
+  var children = _ref.children;
+  var pillGroupUid = React.useMemo(function () {
+    return "ds-pill-group-".concat(uid.uid());
+  }, []);
+  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;
+    });
+
+    if (pillIndex > 0) {
+      elems[pillIndex - 1].focus();
+    } else if (pillIndex + 1 < elems.length) {
+      elems[pillIndex + 1].focus();
+    }
+  }, [pillGroupUid]);
+  return /*#__PURE__*/React__default['default'].createElement(DSPillGroupV2Context.Provider, {
+    value: {
+      onKeyboardRemove: onKeyboardRemove
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(components_styled.StyledPillGroup, {
+    id: pillGroupUid,
+    cols: React__default['default'].Children.map(children, function () {
+      return 'auto';
+    }),
+    gutter: "2px"
+  }, children));
+};
+
+DSPillGroupV2.propTypes = {};
+var DSPillGroupV2WithSchema = reactDesc.describe(DSPillGroupV2);
+DSPillGroupV2WithSchema.propTypes = {};
+
+exports.DSPillGroupV2 = DSPillGroupV2;
+exports.DSPillGroupV2Context = DSPillGroupV2Context;
+exports.DSPillGroupV2WithSchema = DSPillGroupV2WithSchema;
+//# sourceMappingURL=PillGroup.js.map

package/cjs/components/PillGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillGroup.js","sources":["../../../src/components/PillGroup.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{ onKeyboardRemove: (pillUid: string) => void }>({\n  onKeyboardRemove: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType = ({ children }) => {\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n\n  const onKeyboardRemove = useCallback(\n    (pillUid: string) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex > 0) {\n        elems[pillIndex - 1].focus();\n      } else if (pillIndex + 1 < elems.length) {\n        elems[pillIndex + 1].focus();\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove }}>\n      <StyledPillGroup id={pillGroupUid} cols={React.Children.map(children, () => 'auto')} gutter=\"2px\">\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = {};\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = {};\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],"names":["DSPillGroupV2Context","createContext","onKeyboardRemove","DSPillGroupV2","children","pillGroupUid","useMemo","uid","useCallback","pillUid","elems","document","querySelectorAll","pillIndex","findIndex","elem","id","focus","length","React","StyledPillGroup","Children","map","propTypes","DSPillGroupV2WithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;;;;IAMaA,oBAAoB,gBAAGC,mBAAa,CAAkD;AACjGC,EAAAA,gBAAgB,EAAE;AAAA,WAAM,IAAN;AAAA;AAD+E,CAAlD;;IAI3CC,aAAkC,GAAG,SAArCA,aAAqC,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AAC3D,MAAMC,YAAY,GAAGC,aAAO,CAAC;AAAA,mCAAuBC,OAAG,EAA1B;AAAA,GAAD,EAAiC,EAAjC,CAA5B;AAEA,MAAML,gBAAgB,GAAGM,iBAAW,CAClC,UAACC,OAAD,EAAqB;AACnB,QAAMC,KAAK,0CAAOC,QAAQ,CAACC,gBAAT,YAA8BP,YAA9B,2BAAP,CAAX;;AAEA,QAAMQ,SAAS,GAAGH,KAAK,CAACI,SAAN,CAAgB,UAACC,IAAD;AAAA,aAAUA,IAAI,CAACC,EAAL,KAAYP,OAAtB;AAAA,KAAhB,CAAlB;;AAEA,QAAII,SAAS,GAAG,CAAhB,EAAmB;AACjBH,MAAAA,KAAK,CAACG,SAAS,GAAG,CAAb,CAAL,CAAqBI,KAArB;AACD,KAFD,MAEO,IAAIJ,SAAS,GAAG,CAAZ,GAAgBH,KAAK,CAACQ,MAA1B,EAAkC;AACvCR,MAAAA,KAAK,CAACG,SAAS,GAAG,CAAb,CAAL,CAAqBI,KAArB;AACD;AACF,GAXiC,EAYlC,CAACZ,YAAD,CAZkC,CAApC;AAeA,sBACEc,wCAAC,oBAAD,CAAsB,QAAtB;AAA+B,IAAA,KAAK,EAAE;AAAEjB,MAAAA,gBAAgB,EAAhBA;AAAF;AAAtC,kBACEiB,wCAACC,iCAAD;AAAiB,IAAA,EAAE,EAAEf,YAArB;AAAmC,IAAA,IAAI,EAAEc,yBAAK,CAACE,QAAN,CAAeC,GAAf,CAAmBlB,QAAnB,EAA6B;AAAA,aAAM,MAAN;AAAA,KAA7B,CAAzC;AAAqF,IAAA,MAAM,EAAC;AAA5F,KACGA,QADH,CADF,CADF;AAOD;;AAEDD,aAAa,CAACoB,SAAd,GAA0B,EAA1B;IACMC,uBAAuB,GAAGC,kBAAQ,CAACtB,aAAD;AACxCqB,uBAAuB,CAACD,SAAxB,GAAoC,EAApC;;;;;;"}

package/cjs/components/index.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Pill = require('./Pill.js');
+var components_PillGroup = require('./PillGroup.js');
+require('@babel/runtime/helpers/defineProperty');
+require('react');
+require('react-desc');
+require('../props.js');
+require('@elliemae/ds-form/Input');
+require('./types/DropdownPill.js');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/slicedToArray');
+require('@elliemae/ds-dropdownmenu');
+require('uid');
+require('./styled.js');
+require('styled-components');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-icons/CloseXsmall');
+require('@elliemae/ds-icons/ChevronSmallDown');
+require('../utils.js');
+require('./types/InputPill.js');
+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');
+
+
+
+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;
+//# sourceMappingURL=index.js.map

package/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/components/styled.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var ChevronDown = require('@elliemae/ds-icons/ChevronSmallDown');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
+var ChevronDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDown);
+
+/* eslint-disable max-lines */
+// Common CSS
+// =============================================================================
+
+var borderOutside = function borderOutside(color) {
+  return styled.css([":after{content:' ';position:absolute;top:0px;left:0px;right:0px;bottom:0px;border:1px solid ", ";border-radius:12px;pointer-events:none;}"], color);
+};
+
+var borderInside = function borderInside(color) {
+  return styled.css([":before{content:' ';position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid ", ";border-radius:12px;pointer-events:none;}"], color);
+};
+
+var commonPillWrapperCss = /*#__PURE__*/styled.css(["height:24px;position:relative;width:fit-content;background-color:", ";outline:none;padding:0px 12px 0 12px;border-radius:12px;font-size:", ";color:", ";"], function (props) {
+  return props.theme.colors.brand[200];
+}, function (props) {
+  return props.theme.fontSizes.value[400];
+}, function (props) {
+  return props.theme.colors.neutral[800];
+});
+var commonFocuseablePillWrapperCss = /*#__PURE__*/styled.css([":focus,:hover,:active{color:", ";", " ", "}"], function (props) {
+  return props.theme.colors.brand[800];
+}, function (props) {
+  return borderOutside(props.theme.colors.brand[600]);
+}, function (props) {
+  return borderInside(props.theme.colors.brand[300]);
+}); // =============================================================================
+// Pill content
+// =============================================================================
+
+var StyledInput = /*#__PURE__*/styled__default['default'].input.withConfig({
+  componentId: "sc-j0tlch-0"
+})(["font-style:", ";color:", ";background:inherit;border:none;font-size:13px;margin:1px 0 1px 12px;padding:0;width:", ";outline:none;:focus{font-style:normal;color:", ";}"], function (props) {
+  return props.value === '' ? 'italic' : 'normal';
+}, function (_ref) {
+  var value = _ref.value,
+      theme = _ref.theme;
+  return value === '' ? theme.colors.neutral[500] : theme.colors.brand[800];
+}, function (props) {
+  return props.inputWidth;
+}, function (props) {
+  return props.theme.colors.brand[800];
+}); // =============================================================================
+// Icons
+// =============================================================================
+
+var StyledCloseIcon = /*#__PURE__*/styled__default['default'](CloseXsmall__default['default']).withConfig({
+  componentId: "sc-j0tlch-1"
+})(["cursor:pointer;z-index:2;margin-top:-1px;:focus{outline:1px solid ", ";}"], function (props) {
+  return props.theme.colors.brand[800];
+});
+var StyledChevronDown = /*#__PURE__*/styled__default['default'](ChevronDown__default['default']).withConfig({
+  componentId: "sc-j0tlch-2"
+})(["fill:", ";svg{fill:inherit !important;}"], function (props) {
+  return props.theme.colors.neutral[600];
+}); // =============================================================================
+// Pills wrappers
+// =============================================================================
+
+var StyledLabelPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-3"
+})(["", " ", " font-weight:", ";"], commonPillWrapperCss, commonFocuseablePillWrapperCss, function (props) {
+  return props.theme.fontWeights.semibold;
+});
+var StyledValuePillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-4"
+})(["", " ", " font-weight:", ";"], commonPillWrapperCss, commonFocuseablePillWrapperCss, function (props) {
+  return props.theme.fontWeights.regular;
+});
+var StyledInputPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-5"
+})(["", " background:", ";border:", ";padding:0;:focus-within{border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";background:", ";}:active,:hover{border:1px solid ", ";}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:none !important;height:100%;background:transparent;width:", ";padding:0;margin:1px 0 1px 12px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, function (_ref2) {
+  var value = _ref2.value,
+      theme = _ref2.theme;
+  return value === '' ? theme.colors.neutral['000'] : theme.colors.brand[200];
+}, function (_ref3) {
+  var value = _ref3.value,
+      theme = _ref3.theme;
+  return value === '' ? "1px solid ".concat(theme.colors.neutral[300]) : '1px solid transparent';
+}, function (props) {
+  return props.theme.colors.brand[600];
+}, function (props) {
+  return props.theme.colors.brand[300];
+}, function (props) {
+  return props.theme.colors.brand[200];
+}, function (props) {
+  return props.theme.colors.brand[700];
+}, function (props) {
+  return "".concat(props.inputWidth, "px");
+});
+var StyledDropdownPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-6"
+})(["", " ", " font-weight:", ";cursor:pointer;padding:1px 3px 0 12px;:focus,:hover,:active{& ", "{fill:", ";}}"], commonPillWrapperCss, commonFocuseablePillWrapperCss, function (props) {
+  return props.theme.fontWeights.semibold;
+}, StyledChevronDown, function (props) {
+  return props.theme.colors.brand[800];
+});
+var StyledReadonlyPillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-7"
+})(["", " font-weight:", ";"], commonPillWrapperCss, function (props) {
+  return props.theme.fontWeights.semibold;
+});
+var StyledRemovablePillWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-8"
+})(["", " ", " font-weight:", ";padding:1px 3px 0 12px;"], commonPillWrapperCss, commonFocuseablePillWrapperCss, function (props) {
+  return props.theme.fontWeights.regular;
+}); // =============================================================================
+// Pill group
+// =============================================================================
+
+var StyledPillGroup = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+  componentId: "sc-j0tlch-9"
+})(["width:fit-content;& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,> input{border-top-left-radius:0px;border-bottom-left-radius:0px;}}}& .ds-pill-wrapper{&:not(:last-of-type){&,:after,:before,> input{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"]);
+
+exports.StyledChevronDown = StyledChevronDown;
+exports.StyledCloseIcon = StyledCloseIcon;
+exports.StyledDropdownPillWrapper = StyledDropdownPillWrapper;
+exports.StyledInput = StyledInput;
+exports.StyledInputPillWrapper = StyledInputPillWrapper;
+exports.StyledLabelPillWrapper = StyledLabelPillWrapper;
+exports.StyledPillGroup = StyledPillGroup;
+exports.StyledReadonlyPillWrapper = StyledReadonlyPillWrapper;
+exports.StyledRemovablePillWrapper = StyledRemovablePillWrapper;
+exports.StyledValuePillWrapper = StyledValuePillWrapper;
+//# sourceMappingURL=styled.js.map

package/cjs/components/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/styled.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport styled, { css } from 'styled-components';\nimport Grid from '@elliemae/ds-grid';\nimport CloseIcon from '@elliemae/ds-icons/CloseXsmall';\nimport ChevronDown from '@elliemae/ds-icons/ChevronSmallDown';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string) => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: 1px solid ${color};\n    border-radius: 12px;\n    pointer-events: none;\n  }\n`;\n\nconst borderInside = (color: string) => css`\n  :before {\n    content: ' ';\n    position: absolute;\n    top: 1px;\n    left: 1px;\n    right: 1px;\n    bottom: 1px;\n    border: 1px solid ${color};\n    border-radius: 12px;\n    pointer-events: none;\n  }\n`;\n\nconst commonPillWrapperCss = css`\n  height: 24px;\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${(props) => props.theme.colors.brand[200]};\n\n  outline: none;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: ${(props) => props.theme.fontSizes.value[400]};\n  color: ${(props) => props.theme.colors.neutral[800]};\n`;\n\nconst commonFocuseablePillWrapperCss = css`\n  :focus,\n  :hover,\n  :active {\n    color: ${(props) => props.theme.colors.brand[800]};\n    ${(props) => borderOutside(props.theme.colors.brand[600])}\n    ${(props) => borderInside(props.theme.colors.brand[300])}\n  }\n`;\n\n// =============================================================================\n// Pill content\n// =============================================================================\n\nexport const StyledInput = styled.input<{ value: string; inputWidth: number }>`\n  font-style: ${(props) => (props.value === '' ? 'italic' : 'normal')};\n  color: ${({ value, theme }) => (value === '' ? theme.colors.neutral[500] : theme.colors.brand[800])};\n  background: inherit;\n  border: none;\n  font-size: 13px;\n  margin: 1px 0 1px 12px;\n  padding: 0;\n  width: ${(props) => props.inputWidth};\n  outline: none;\n\n  :focus {\n    font-style: normal;\n    color: ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n\n// =============================================================================\n// Icons\n// =============================================================================\n\nexport const StyledCloseIcon = styled(CloseIcon)`\n  cursor: pointer;\n  z-index: 2;\n  margin-top: -1px;\n  :focus {\n    outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n\nexport const StyledChevronDown = styled(ChevronDown)`\n  fill: ${(props) => props.theme.colors.neutral[600]};\n  svg {\n    fill: inherit !important;\n  }\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  ${commonFocuseablePillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  ${commonFocuseablePillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number }>`\n  ${commonPillWrapperCss}\n  background: ${({ value, theme }) => (value === '' ? theme.colors.neutral['000'] : theme.colors.brand[200])};\n\n  border: ${({ value, theme }) => (value === '' ? `1px solid ${theme.colors.neutral[300]}` : '1px solid transparent')};\n\n  padding: 0;\n\n  :focus-within {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[300]};\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n\n  :active,\n  :hover {\n    border: 1px solid ${(props) => props.theme.colors.brand[700]};\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: none !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth}px`};\n    padding: 0;\n    margin: 1px 0 1px 12px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  ${commonFocuseablePillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  cursor: pointer;\n  padding: 1px 3px 0 12px;\n\n  :focus,\n  :hover,\n  :active {\n    & ${StyledChevronDown} {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  ${commonFocuseablePillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 1px 3px 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: fit-content;\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      > input {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n  }\n\n  & .ds-pill-wrapper {\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      > input {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n"],"names":["borderOutside","color","css","borderInside","commonPillWrapperCss","props","theme","colors","brand","fontSizes","value","neutral","commonFocuseablePillWrapperCss","StyledInput","styled","input","inputWidth","StyledCloseIcon","CloseIcon","StyledChevronDown","ChevronDown","StyledLabelPillWrapper","Grid","fontWeights","semibold","StyledValuePillWrapper","regular","StyledInputPillWrapper","StyledDropdownPillWrapper","StyledReadonlyPillWrapper","StyledRemovablePillWrapper","StyledPillGroup"],"mappings":"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"}

package/cjs/components/types/DropdownPill.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
+var uid = require('uid');
+var components_styled = require('../styled.js');
+var utils = require('../../utils.js');
+require('styled-components');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-icons/CloseXsmall');
+require('@elliemae/ds-icons/ChevronSmallDown');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
+
+var DropdownPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+  var label = _ref.label,
+      dropdownProps = _ref.dropdownProps,
+      innerRef = _ref.innerRef;
+
+  var _useState = React.useState(),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      chevronEl = _useState2[0],
+      chevronRef = _useState2[1];
+
+  var pillRef = React.useRef(null);
+  var pillUid = React.useMemo(function () {
+    return "ds-pill-".concat(uid.uid());
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement(DSDropdownMenu__default['default'], _extends__default['default']({}, dropdownProps, {
+    hideIfNotVisible: true,
+    referenceNode: chevronEl,
+    onClose: function onClose() {
+      return pillRef.current.focus();
+    },
+    menuProps: {
+      zIndex: 100
+    },
+    triggerComponent: /*#__PURE__*/React__default['default'].createElement(components_styled.StyledDropdownPillWrapper, {
+      id: pillUid,
+      className: "ds-pill-wrapper ds-pill-focus-point",
+      "data-testid": "ds-pill-wrapper",
+      ref: utils.setMultipleRefs(pillRef, innerRef),
+      cols: ['auto', '24px'],
+      alignItems: "center",
+      tabIndex: 0,
+      justifyItems: "center",
+      role: "button",
+      onKeyDown: function onKeyDown(e) {
+        return ['Enter', 'Space'].includes(e.code);
+      },
+      "aria-label": label
+    }, label, /*#__PURE__*/React__default['default'].createElement("div", {
+      ref: chevronRef
+    }, /*#__PURE__*/React__default['default'].createElement(components_styled.StyledChevronDown, {
+      size: "s",
+      "data-testid": "ds-pill-dropdown-chevron"
+    })))
+  }));
+});
+
+exports.DropdownPill = DropdownPill;
+//# sourceMappingURL=DropdownPill.js.map

package/cjs/components/types/DropdownPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPill.js","sources":["../../../../src/components/types/DropdownPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef, useState } from 'react';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { StyledDropdownPillWrapper, StyledChevronDown } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\n\nexport const DropdownPill = React.memo<DSPillProps>(({ label, dropdownProps, innerRef }) => {\n  const [chevronEl, chevronRef] = useState<HTMLDivElement>();\n  const pillRef = useRef(null);\n\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n  return (\n    <DSDropdownMenu\n      {...dropdownProps}\n      hideIfNotVisible\n      referenceNode={chevronEl}\n      onClose={() => pillRef.current.focus()}\n      menuProps={{ zIndex: 100 }}\n      triggerComponent={\n        <StyledDropdownPillWrapper\n          id={pillUid}\n          className=\"ds-pill-wrapper ds-pill-focus-point\"\n          data-testid=\"ds-pill-wrapper\"\n          ref={setMultipleRefs(pillRef, innerRef)}\n          cols={['auto', '24px']}\n          alignItems=\"center\"\n          tabIndex={0}\n          justifyItems=\"center\"\n          role=\"button\"\n          onKeyDown={(e) => ['Enter', 'Space'].includes(e.code)}\n          aria-label={label}\n        >\n          {label}\n          <div ref={chevronRef}>\n            <StyledChevronDown size=\"s\" data-testid=\"ds-pill-dropdown-chevron\" />\n          </div>\n        </StyledDropdownPillWrapper>\n      }\n    />\n  );\n});\n"],"names":["DropdownPill","React","memo","label","dropdownProps","innerRef","useState","chevronEl","chevronRef","pillRef","useRef","pillUid","useMemo","uid","DSDropdownMenu","current","focus","zIndex","StyledDropdownPillWrapper","setMultipleRefs","e","includes","code","StyledChevronDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAQaA,YAAY,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAAwC;AAAA,MAArCC,KAAqC,QAArCA,KAAqC;AAAA,MAA9BC,aAA8B,QAA9BA,aAA8B;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC1F,kBAAgCC,cAAQ,EAAxC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,UAAlB;;AACA,MAAMC,OAAO,GAAGC,YAAM,CAAC,IAAD,CAAtB;AAEA,MAAMC,OAAO,GAAGC,aAAO,CAAC;AAAA,6BAAiBC,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,sBACEZ,wCAACa,kCAAD,mCACMV,aADN;AAEE,IAAA,gBAAgB,MAFlB;AAGE,IAAA,aAAa,EAAEG,SAHjB;AAIE,IAAA,OAAO,EAAE;AAAA,aAAME,OAAO,CAACM,OAAR,CAAgBC,KAAhB,EAAN;AAAA,KAJX;AAKE,IAAA,SAAS,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KALb;AAME,IAAA,gBAAgB,eACdhB,wCAACiB,2CAAD;AACE,MAAA,EAAE,EAAEP,OADN;AAEE,MAAA,SAAS,EAAC,qCAFZ;AAGE,qBAAY,iBAHd;AAIE,MAAA,GAAG,EAAEQ,qBAAe,CAACV,OAAD,EAAUJ,QAAV,CAJtB;AAKE,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CALR;AAME,MAAA,UAAU,EAAC,QANb;AAOE,MAAA,QAAQ,EAAE,CAPZ;AAQE,MAAA,YAAY,EAAC,QARf;AASE,MAAA,IAAI,EAAC,QATP;AAUE,MAAA,SAAS,EAAE,mBAACe,CAAD;AAAA,eAAO,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,CAAP;AAAA,OAVb;AAWE,oBAAYnB;AAXd,OAaGA,KAbH,eAcEF;AAAK,MAAA,GAAG,EAAEO;AAAV,oBACEP,wCAACsB,mCAAD;AAAmB,MAAA,IAAI,EAAC,GAAxB;AAA4B,qBAAY;AAAxC,MADF,CAdF;AAPJ,KADF;AA6BD,CAnC2B;;;;"}

package/cjs/components/types/InputPill.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var uid = require('uid');
+var components_styled = require('../styled.js');
+var utils = require('../../utils.js');
+require('styled-components');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-icons/CloseXsmall');
+require('@elliemae/ds-icons/ChevronSmallDown');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/* eslint-disable react/prop-types */
+var InputPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+  var label = _ref.label,
+      inputPlaceholder = _ref.inputPlaceholder,
+      inputWidth = _ref.inputWidth,
+      inputRender = _ref.inputRender,
+      onInputChange = _ref.onInputChange,
+      onInputClear = _ref.onInputClear,
+      innerRef = _ref.innerRef;
+  var ref = React.useRef(null);
+  var InputComponent = React.useMemo(function () {
+    return inputRender;
+  }, [inputRender]);
+  var pillUid = React.useMemo(function () {
+    return "ds-pill-".concat(uid.uid());
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement(components_styled.StyledInputPillWrapper, {
+    className: "ds-pill-wrapper",
+    "data-testid": "ds-pill-wrapper",
+    cols: ['auto', '24px'],
+    inputWidth: inputWidth
+  }, /*#__PURE__*/React__default['default'].createElement(InputComponent, {
+    id: pillUid,
+    className: "ds-pill-focus-point",
+    "data-testid": "ds-pill-input",
+    innerRef: utils.setMultipleRefs(ref, innerRef),
+    value: label,
+    onChange: onInputChange,
+    placeholder: inputPlaceholder
+  }), label !== '' && /*#__PURE__*/React__default['default'].createElement(components_styled.StyledCloseIcon, {
+    "data-testid": "ds-pill-clear-icon",
+    tabIndex: 0,
+    size: "s",
+    onClick: function onClick(e) {
+      onInputClear(e);
+      ref.current.focus();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (['Enter', 'Space'].includes(e.code)) {
+        e.preventDefault();
+        onInputClear(e);
+        ref.current.focus();
+      }
+    },
+    style: {
+      position: 'absolute',
+      right: 6,
+      top: 4
+    }
+  }));
+});
+
+exports.InputPill = InputPill;
+//# sourceMappingURL=InputPill.js.map