@elliemae/ds-pills 1.57.0-rc.3 → 1.57.0-rc.7

package/cjs/components/Pill.js

@@ -12,11 +12,11 @@ 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('@elliemae/ds-form');
 require('@babel/runtime/helpers/extends');
 require('@elliemae/ds-dropdownmenu');
 require('uid');
-require('@elliemae/ds-icons/ChevronSmallDown');
+require('@elliemae/ds-icons');
 require('@elliemae/ds-truncated-tooltip-text');
 require('./styled.js');
 require('styled-components');
@@ -26,7 +26,6 @@ require('../utils.js');
 require('./PillButton.js');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-icons/CloseXsmall');
 require('./PillGroup.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('@elliemae/ds-tooltip');

package/cjs/components/Pill.js.map

@@ -1 +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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\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  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());\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","useMemoMergePropsWithDefault","DSPillV2DefaultProps","useValidateTypescriptPropTypes","DSPillV2WithSchema","toTypescript","type","PillComponent","React","propTypes","DSPillV2PropTypes","describe","description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAQA,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,MAAMC,iBAAiB,GAAGC,2CAA4B,CAACF,OAAD,EAAQG,0BAAR,CAAtD;AACAC,EAAAA,6CAA8B,CAACH,iBAAD,EAAoBI,kBAAkB,CAACC,YAAnB,EAApB,CAA9B;AACA,MAAQC,IAAR,GAAiBN,iBAAjB,CAAQM,IAAR;AACA,MAAMC,aAAa,GAAGtB,mBAAmB,CAACqB,IAAD,CAAzC;AAEA,sBAAOE,wCAAC,aAAD,EAAmBR,iBAAnB,CAAP;AACD;;AAEDF,QAAQ,CAACW,SAAT,GAAqBC,uBAArB;IACMN,kBAAkB,GAAGO,kBAAQ,CAACb,QAAD,CAAR,CAAmBc,WAAnB,CAA+B,MAA/B;AAC3BR,kBAAkB,CAACK,SAAnB,GAA+BC,uBAA/B;;;;;"}
+{"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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\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  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2WithSchema.toTypescript());\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","useMemoMergePropsWithDefault","DSPillV2DefaultProps","useValidateTypescriptPropTypes","DSPillV2WithSchema","toTypescript","type","PillComponent","React","propTypes","DSPillV2PropTypes","describe","description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAQA,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,MAAMC,iBAAiB,GAAGC,2CAA4B,CAACF,OAAD,EAAQG,0BAAR,CAAtD;AACAC,EAAAA,6CAA8B,CAACH,iBAAD,EAAoBI,kBAAkB,CAACC,YAAnB,EAApB,CAA9B;AACA,MAAQC,IAAR,GAAiBN,iBAAjB,CAAQM,IAAR;AACA,MAAMC,aAAa,GAAGtB,mBAAmB,CAACqB,IAAD,CAAzC;AAEA,sBAAOE,wCAAC,aAAD,EAAmBR,iBAAnB,CAAP;AACD;;AAEDF,QAAQ,CAACW,SAAT,GAAqBC,uBAArB;IACMN,kBAAkB,GAAGO,kBAAQ,CAACb,QAAD,CAAR,CAAmBc,WAAnB,CAA+B,MAA/B;AAC3BR,kBAAkB,CAACK,SAAnB,GAA+BC,uBAA/B;;;;;"}

package/cjs/components/PillButton.js

@@ -12,7 +12,7 @@ var props = require('../props.js');
 require('styled-components');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-button');
-require('@elliemae/ds-form/Input');
+require('@elliemae/ds-form');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/components/PillGroup.js

@@ -6,7 +6,10 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 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');
@@ -22,11 +25,15 @@ var DSPillGroupV2Context = /*#__PURE__*/React.createContext({
   }
 });
 
-var DSPillGroupV2 = function DSPillGroupV2(_ref) {
-  var children = _ref.children;
+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")));
 
@@ -45,17 +52,19 @@ var DSPillGroupV2 = function DSPillGroupV2(_ref) {
       onKeyboardRemove: onKeyboardRemove
     }
   }, /*#__PURE__*/React__default['default'].createElement(components_styled.StyledPillGroup, {
+    width: width,
     id: pillGroupUid,
     cols: React__default['default'].Children.map(children, function () {
       return 'auto';
     }),
-    gutter: "2px"
+    gutter: "2px",
+    ref: innerRef
   }, children));
 };
 
-DSPillGroupV2.propTypes = {};
+DSPillGroupV2.propTypes = props.DSPillGroupPropTypes;
 var DSPillGroupV2WithSchema = reactDesc.describe(DSPillGroupV2);
-DSPillGroupV2WithSchema.propTypes = {};
+DSPillGroupV2WithSchema.propTypes = props.DSPillGroupPropTypes;
 
 exports.DSPillGroupV2 = DSPillGroupV2;
 exports.DSPillGroupV2Context = DSPillGroupV2Context;

package/cjs/components/PillGroup.js.map

@@ -1 +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;;;;;;"}
+{"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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{ onKeyboardRemove: (pillUid: string) => void }>({\n  onKeyboardRemove: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupV2WithSchema.toTypescript());\n\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n  const { children, width, innerRef } = propsWithDefaults;\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\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto')}\n        gutter=\"2px\"\n        ref={innerRef}\n      >\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],"names":["DSPillGroupV2Context","createContext","onKeyboardRemove","DSPillGroupV2","props","propsWithDefaults","useMemoMergePropsWithDefault","DSPillGroupDefaultProps","useValidateTypescriptPropTypes","DSPillGroupV2WithSchema","toTypescript","pillGroupUid","useMemo","uid","children","width","innerRef","useCallback","pillUid","elems","document","querySelectorAll","pillIndex","findIndex","elem","id","focus","length","React","StyledPillGroup","Children","map","propTypes","DSPillGroupPropTypes","describe"],"mappings":";;;;;;;;;;;;;;;;;;;;;IASaA,oBAAoB,gBAAGC,mBAAa,CAAkD;AACjGC,EAAAA,gBAAgB,EAAE;AAAA,WAAM,IAAN;AAAA;AAD+E,CAAlD;;IAI3CC,aAAoD,GAAG,SAAvDA,aAAuD,CAACC,OAAD,EAAW;AACtE,MAAMC,iBAAiB,GAAGC,2CAA4B,CAACF,OAAD,EAAQG,6BAAR,CAAtD;AACAC,EAAAA,6CAA8B,CAACH,iBAAD,EAAoBI,uBAAuB,CAACC,YAAxB,EAApB,CAA9B;AAEA,MAAMC,YAAY,GAAGC,aAAO,CAAC;AAAA,mCAAuBC,OAAG,EAA1B;AAAA,GAAD,EAAiC,EAAjC,CAA5B;AACA,MAAQC,QAAR,GAAsCT,iBAAtC,CAAQS,QAAR;AAAA,MAAkBC,KAAlB,GAAsCV,iBAAtC,CAAkBU,KAAlB;AAAA,MAAyBC,QAAzB,GAAsCX,iBAAtC,CAAyBW,QAAzB;AACA,MAAMd,gBAAgB,GAAGe,iBAAW,CAClC,UAACC,OAAD,EAAqB;AACnB,QAAMC,KAAK,0CAAOC,QAAQ,CAACC,gBAAT,YAA8BV,YAA9B,2BAAP,CAAX;;AAEA,QAAMW,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,CAACf,YAAD,CAZkC,CAApC;AAeA,sBACEiB,wCAAC,oBAAD,CAAsB,QAAtB;AAA+B,IAAA,KAAK,EAAE;AAAE1B,MAAAA,gBAAgB,EAAhBA;AAAF;AAAtC,kBACE0B,wCAACC,iCAAD;AACE,IAAA,KAAK,EAAEd,KADT;AAEE,IAAA,EAAE,EAAEJ,YAFN;AAGE,IAAA,IAAI,EAAEiB,yBAAK,CAACE,QAAN,CAAeC,GAAf,CAAmBjB,QAAnB,EAA6B;AAAA,aAAM,MAAN;AAAA,KAA7B,CAHR;AAIE,IAAA,MAAM,EAAC,KAJT;AAKE,IAAA,GAAG,EAAEE;AALP,KAOGF,QAPH,CADF,CADF;AAaD;;AAEDX,aAAa,CAAC6B,SAAd,GAA0BC,0BAA1B;IACMxB,uBAAuB,GAAGyB,kBAAQ,CAAC/B,aAAD;AACxCM,uBAAuB,CAACuB,SAAxB,GAAoCC,0BAApC;;;;;;"}

package/cjs/components/index.js

@@ -9,12 +9,12 @@ require('react');
 require('react-desc');
 require('@elliemae/ds-props-helpers');
 require('../props.js');
-require('@elliemae/ds-form/Input');
+require('@elliemae/ds-form');
 require('./types/DropdownPill.js');
 require('@babel/runtime/helpers/extends');
 require('@elliemae/ds-dropdownmenu');
 require('uid');
-require('@elliemae/ds-icons/ChevronSmallDown');
+require('@elliemae/ds-icons');
 require('@elliemae/ds-truncated-tooltip-text');
 require('./styled.js');
 require('styled-components');
@@ -24,7 +24,6 @@ require('../utils.js');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('./types/InputPill.js');
 require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-icons/CloseXsmall');
 require('./types/LabelPill.js');
 require('./types/ReadOnlyPill.js');
 require('./types/RemovablePill.js');

package/cjs/components/index.js.map

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

package/cjs/components/styled.js

@@ -22,7 +22,7 @@ var borderOutside = function borderOutside(color) {
   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);
 };
 
-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:13px;line-height:1;color:", ";", ";"], function (props) {
+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];
@@ -85,7 +85,10 @@ var StyledRemovablePillWrapper = /*#__PURE__*/styled__default['default'](Grid__d
 
 var StyledPillGroup = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
   componentId: "sc-j0tlch-6"
-})(["width:fit-content;& .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;}}}"]); // =============================================================================
+})(["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;
+  return width;
+}); // =============================================================================
 // Extra stuff
 // =============================================================================
 

package/cjs/components/styled.js.map

@@ -1 +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 { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex};\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: 13px;\n  line-height: 1;\n  color: ${(props) => props.theme.colors.brand[800]};\n  ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: fit-content;\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n  }\n\n  cursor: pointer;\n`;\n"],"names":["borderOutside","color","size","zIndex","borderRadius","css","commonPillWrapperCss","props","theme","colors","brand","StyledLabelPillWrapper","styled","Grid","fontWeights","semibold","hasIcon","StyledValuePillWrapper","regular","StyledInputPillWrapper","neutral","value","inputHasFocus","inputWidth","StyledDropdownPillWrapper","StyledReadonlyPillWrapper","hasIconRight","hasIconLeft","StyledRemovablePillWrapper","StyledPillGroup","StyledSpanWithTooltip","span","StyledPillButton","DSButtonV2","width","height"],"mappings":"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"}
+{"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 { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex};\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  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: ${(props) => props.theme.colors.brand[800]};\n  ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n  }\n\n  cursor: pointer;\n`;\n"],"names":["borderOutside","color","size","zIndex","borderRadius","css","commonPillWrapperCss","props","theme","colors","brand","StyledLabelPillWrapper","styled","Grid","fontWeights","semibold","hasIcon","StyledValuePillWrapper","regular","StyledInputPillWrapper","neutral","value","inputHasFocus","inputWidth","StyledDropdownPillWrapper","StyledReadonlyPillWrapper","hasIconRight","hasIconLeft","StyledRemovablePillWrapper","StyledPillGroup","width","StyledSpanWithTooltip","span","StyledPillButton","DSButtonV2","height"],"mappings":"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"}

package/cjs/components/types/DropdownPill.js

@@ -6,7 +6,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
 var uid = require('uid');
-var ChevronDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsIcons = require('@elliemae/ds-icons');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var components_styled = require('../styled.js');
 var utils = require('../../utils.js');
@@ -18,24 +18,30 @@ require('@babel/runtime/helpers/objectWithoutProperties');
 require('react-desc');
 require('@elliemae/ds-props-helpers');
 require('../../props.js');
-require('@elliemae/ds-form/Input');
+require('@elliemae/ds-form');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
-var ChevronDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDown);
 
 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;
+      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, {
+      value: children
+    });
+  } : React__default['default'].Fragment;
   return /*#__PURE__*/React__default['default'].createElement(components_styled.StyledDropdownPillWrapper, {
     id: pillUid,
     className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
@@ -44,28 +50,26 @@ var DropdownPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }), /*#__PURE__*/React__default['default'].createElement(DSDropdownMenu__default['default'], _extends__default['default']({
-    hideIfNotVisible: true,
-    onClose: function onClose() {
-      return chevronRef.current.focus();
+  }, /*#__PURE__*/React__default['default'].createElement(TextComponent, null, label), /*#__PURE__*/React__default['default'].createElement(DSDropdownMenu.DSDropdownMenuV2, _extends__default['default']({}, dropdownProps, {
+    onClickOutside: function onClickOutside(e) {
+      if (e.code === 'Escape') chevronRef.current.focus();
+      if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
     },
-    menuProps: {
-      zIndex: 100
+    wrapperSpacing: {
+      width: '100%',
+      height: '100%'
     }
-  }, dropdownProps, {
-    triggerComponent: /*#__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"
-    }, /*#__PURE__*/React__default['default'].createElement(ChevronDown__default['default'], {
-      color: ['brand-primary', '700'],
-      size: "s"
-    }))
-  })));
+  }), /*#__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"
+  }))));
 });
 
 exports.DropdownPill = DropdownPill;

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownPill.js","sources":["../../../../src/components/types/DropdownPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport ChevronDown from '@elliemae/ds-icons/ChevronSmallDown';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(({ label, dropdownProps, innerRef, ariaLabel }) => {\n  const chevronRef = useRef(null);\n\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n  return (\n    <StyledDropdownPillWrapper\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={['auto', '24px']}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n    >\n      <SimpleTruncatedTooltipText value={label} />\n      <DSDropdownMenu\n        hideIfNotVisible\n        onClose={() => chevronRef.current.focus()}\n        menuProps={{ zIndex: 100 }}\n        {...dropdownProps}\n        triggerComponent={\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n          >\n            <ChevronDown color={['brand-primary', '700']} size=\"s\" />\n          </DSPillButton>\n        }\n      />\n    </StyledDropdownPillWrapper>\n  );\n});\n"],"names":["DropdownPill","React","memo","label","dropdownProps","innerRef","ariaLabel","chevronRef","useRef","pillUid","useMemo","uid","StyledDropdownPillWrapper","SimpleTruncatedTooltipText","DSDropdownMenu","current","focus","zIndex","DSPillButton","setMultipleRefs","ChevronDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWaA,YAAY,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAAmD;AAAA,MAAhDC,KAAgD,QAAhDA,KAAgD;AAAA,MAAzCC,aAAyC,QAAzCA,aAAyC;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACrG,MAAMC,UAAU,GAAGC,YAAM,CAAC,IAAD,CAAzB;AAEA,MAAMC,OAAO,GAAGC,aAAO,CAAC;AAAA,6BAAiBC,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,sBACEV,wCAACW,2CAAD;AACE,IAAA,EAAE,EAAEH,OADN;AAEE,IAAA,SAAS,EAAC,0CAFZ;AAGE,mBAAY,iBAHd;AAIE,IAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CAJR;AAKE,IAAA,MAAM,EAAC,KALT;AAME,IAAA,UAAU,EAAC,QANb;AAOE,IAAA,YAAY,EAAC;AAPf,kBASER,wCAACY,iDAAD;AAA4B,IAAA,KAAK,EAAEV;AAAnC,IATF,eAUEF,wCAACa,kCAAD;AACE,IAAA,gBAAgB,MADlB;AAEE,IAAA,OAAO,EAAE;AAAA,aAAMP,UAAU,CAACQ,OAAX,CAAmBC,KAAnB,EAAN;AAAA,KAFX;AAGE,IAAA,SAAS,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV;AAHb,KAIMb,aAJN;AAKE,IAAA,gBAAgB,eACdH,wCAACiB,kCAAD;AACE,MAAA,SAAS,EAAC,qBADZ;AAEE,qBAAY,0BAFd;AAGE,MAAA,QAAQ,EAAEC,qBAAe,CAACZ,UAAD,EAAaF,QAAb,CAH3B;AAIE,oBAAYC,SAAS,IAAIH,KAJ3B;AAKE,MAAA,IAAI,EAAC;AALP,oBAOEF,wCAACmB,+BAAD;AAAa,MAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,KAAlB,CAApB;AAA8C,MAAA,IAAI,EAAC;AAAnD,MAPF;AANJ,KAVF,CADF;AA8BD,CAnC2B;;;;"}
+{"version":3,"file":"DropdownPill.js","sources":["../../../../src/components/types/DropdownPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n  ({ label, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperSpacing={{ width: '100%', height: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} size=\"s\" />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],"names":["DropdownPill","React","memo","label","labelTruncated","dropdownProps","innerRef","ariaLabel","onDropdownClick","chevronRef","useRef","pillUid","useMemo","uid","TextComponent","children","SimpleTruncatedTooltipText","Fragment","StyledDropdownPillWrapper","DSDropdownMenuV2","e","code","current","focus","onClickOutside","width","height","DSPillButton","setMultipleRefs","ChevronSmallDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;IAWaA,YAAY,gBAAGC,yBAAK,CAACC,IAAN,CAC1B,gBAAoF;AAAA,MAAjFC,KAAiF,QAAjFA,KAAiF;AAAA,MAA1EC,cAA0E,QAA1EA,cAA0E;AAAA,MAA1DC,aAA0D,QAA1DA,aAA0D;AAAA,MAA3CC,QAA2C,QAA3CA,QAA2C;AAAA,MAAjCC,SAAiC,QAAjCA,SAAiC;AAAA,MAAtBC,eAAsB,QAAtBA,eAAsB;AAClF,MAAMC,UAAU,GAAGC,YAAM,CAAC,IAAD,CAAzB;AAEA,MAAMC,OAAO,GAAGC,aAAO,CAAC;AAAA,6BAAiBC,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,MAAMC,aAAa,GAAGV,cAAc,GAChC;AAAA,QAAGW,QAAH,SAAGA,QAAH;AAAA,wBAAkBd,wCAACe,iDAAD;AAA4B,MAAA,KAAK,EAAED;AAAnC,MAAlB;AAAA,GADgC,GAEhCd,yBAAK,CAACgB,QAFV;AAIA,sBACEhB,wCAACiB,2CAAD;AACE,IAAA,EAAE,EAAEP,OADN;AAEE,IAAA,SAAS,EAAC,0CAFZ;AAGE,mBAAY,iBAHd;AAIE,IAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CAJR;AAKE,IAAA,MAAM,EAAC,KALT;AAME,IAAA,UAAU,EAAC,QANb;AAOE,IAAA,YAAY,EAAC;AAPf,kBASEV,wCAAC,aAAD,QAAgBE,KAAhB,CATF,eAUEF,wCAACkB,+BAAD,mCACMd,aADN;AAEE,IAAA,cAAc,EAAE,wBAACe,CAAD,EAAO;AACrB,UAAIA,CAAC,CAACC,IAAF,KAAW,QAAf,EAAyBZ,UAAU,CAACa,OAAX,CAAmBC,KAAnB;AACzB,UAAIlB,aAAa,CAACmB,cAAlB,EAAkCnB,aAAa,CAACmB,cAAd,CAA6BJ,CAA7B;AACnC,KALH;AAME,IAAA,cAAc,EAAE;AAAEK,MAAAA,KAAK,EAAE,MAAT;AAAiBC,MAAAA,MAAM,EAAE;AAAzB;AANlB,mBAQEzB,wCAAC0B,kCAAD;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,mBAAY,0BAFd;AAGE,IAAA,QAAQ,EAAEC,qBAAe,CAACnB,UAAD,EAAaH,QAAb,CAH3B;AAIE,kBAAYC,SAAS,IAAIJ,KAJ3B;AAKE,IAAA,IAAI,EAAC,OALP;AAME,IAAA,OAAO,EAAEK;AANX,kBAQEP,wCAAC4B,wBAAD;AAAkB,IAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,KAAlB,CAAzB;AAAmD,IAAA,IAAI,EAAC;AAAxD,IARF,CARF,CAVF,CADF;AAgCD,CA1CyB;;;;"}

package/cjs/components/types/InputPill.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var uid = require('uid');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var dsIcons = require('@elliemae/ds-icons');
 var components_styled = require('../styled.js');
 var utils = require('../../utils.js');
 var components_PillButton = require('../PillButton.js');
@@ -17,13 +17,12 @@ require('@babel/runtime/helpers/objectWithoutProperties');
 require('react-desc');
 require('@elliemae/ds-props-helpers');
 require('../../props.js');
-require('@elliemae/ds-form/Input');
+require('@elliemae/ds-form');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
 
 var InputPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
   var label = _ref.label,
@@ -83,7 +82,7 @@ var InputPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
     onKeyDown: onCloseIconClick,
     "aria-label": "Clear input",
     type: "right"
-  }, /*#__PURE__*/React__default['default'].createElement(CloseXsmall__default['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(dsIcons.CloseXsmall, {
     size: "s",
     color: ['brand-primary', '700']
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"InputPill.js","sources":["../../../../src/components/types/InputPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport CloseIcon from '@elliemae/ds-icons/CloseXsmall';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n  ({ label, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onInputClear(e);\n          ref.current.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label}\n        inputHasFocus={inputHasFocus}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={setMultipleRefs(ref, innerRef)}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef}\n            onClick={onCloseIconClick}\n            onKeyDown={onCloseIconClick}\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseIcon size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],"names":["InputPill","React","memo","label","inputPlaceholder","inputWidth","inputRender","onInputChange","onInputClear","innerRef","ref","useRef","InputComponent","useMemo","pillUid","uid","onCloseIconClick","useCallback","e","undefined","includes","code","preventDefault","current","focus","useState","inputHasFocus","setInputHasFocus","StyledInputPillWrapper","setMultipleRefs","DSPillButton","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;IASaA,SAAS,gBAAGC,yBAAK,CAACC,IAAN,CACvB,gBAAiG;AAAA,MAA9FC,KAA8F,QAA9FA,KAA8F;AAAA,MAAvFC,gBAAuF,QAAvFA,gBAAuF;AAAA,MAArEC,UAAqE,QAArEA,UAAqE;AAAA,MAAzDC,WAAyD,QAAzDA,WAAyD;AAAA,MAA5CC,aAA4C,QAA5CA,aAA4C;AAAA,MAA7BC,YAA6B,QAA7BA,YAA6B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AAC/F,MAAMC,GAAG,GAAGC,YAAM,CAAc,IAAd,CAAlB;AAEA,MAAMC,cAAc,GAAGC,aAAO,CAAC;AAAA,WAAMP,WAAN;AAAA,GAAD,EAAoB,CAACA,WAAD,CAApB,CAA9B;AAEA,MAAMQ,OAAO,GAAGD,aAAO,CAAC;AAAA,6BAAiBE,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,MAAMC,gBAAsE,GAAGC,iBAAW,CACxF,UAACC,CAAD,EAAO;AACL,QAAI,CAACC,SAAD,EAAY,OAAZ,EAAqB,OAArB,EAA8BC,QAA9B,CAAuCF,CAAC,CAACG,IAAzC,CAAJ,EAAoD;AAClDH,MAAAA,CAAC,CAACI,cAAF;AACAd,MAAAA,YAAY,CAACU,CAAD,CAAZ;AACAR,MAAAA,GAAG,CAACa,OAAJ,CAAYC,KAAZ;AACD;AACF,GAPuF,EAQxF,CAAChB,YAAD,CARwF,CAA1F;;AAWA,kBAA0CiB,cAAQ,CAAC,KAAD,CAAlD;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AAEA,sBACE1B,wCAAC2B,wCAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,mBAAY,iBAFd;AAGE,IAAA,IAAI,EAAEzB,KAAK,KAAK,EAAV,GAAe,CAAC,MAAD,CAAf,GAA0B,CAAC,MAAD,EAAS,MAAT,CAHlC;AAIE,IAAA,UAAU,EAAEE,UAJd;AAKE,IAAA,KAAK,EAAEF,KALT;AAME,IAAA,aAAa,EAAEuB;AANjB,kBAQEzB,wCAAC,cAAD;AACE,IAAA,EAAE,EAAEa,OADN;AAEE,IAAA,SAAS,EAAC,qBAFZ;AAGE,mBAAY,eAHd;AAIE,IAAA,QAAQ,EAAEe,qBAAe,CAACnB,GAAD,EAAMD,QAAN,CAJ3B;AAKE,IAAA,KAAK,EAAEN,KALT;AAME,IAAA,QAAQ,EAAEI,aANZ;AAOE,IAAA,WAAW,EAAEH,gBAPf;AAQE,IAAA,OAAO,EAAE;AAAA,aAAMuB,gBAAgB,CAAC,IAAD,CAAtB;AAAA,KARX;AASE,IAAA,MAAM,EAAE;AAAA,aAAMA,gBAAgB,CAAC,KAAD,CAAtB;AAAA,KATV;AAUE,IAAA,cAAc,EAAE;AAVlB,IARF,EAoBGxB,KAAK,KAAK,EAAV,iBACCF,wCAAC6B,kCAAD;AACE,IAAA,EAAE,EAAEhB,OADN;AAEE,mBAAY,oBAFd;AAGE,IAAA,QAAQ,EAAEL,QAHZ;AAIE,IAAA,OAAO,EAAEO,gBAJX;AAKE,IAAA,SAAS,EAAEA,gBALb;AAME,kBAAW,aANb;AAOE,IAAA,IAAI,EAAC;AAPP,kBASEf,wCAAC8B,+BAAD;AAAW,IAAA,IAAI,EAAC,GAAhB;AAAoB,IAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,KAAlB;AAA3B,IATF,CArBJ,CADF;AAoCD,CAzDsB;;;;"}
+{"version":3,"file":"InputPill.js","sources":["../../../../src/components/types/InputPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n  ({ label, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onInputClear(e);\n          ref.current.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label}\n        inputHasFocus={inputHasFocus}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={setMultipleRefs(ref, innerRef)}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef}\n            onClick={onCloseIconClick}\n            onKeyDown={onCloseIconClick}\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],"names":["InputPill","React","memo","label","inputPlaceholder","inputWidth","inputRender","onInputChange","onInputClear","innerRef","ref","useRef","InputComponent","useMemo","pillUid","uid","onCloseIconClick","useCallback","e","undefined","includes","code","preventDefault","current","focus","useState","inputHasFocus","setInputHasFocus","StyledInputPillWrapper","setMultipleRefs","DSPillButton","CloseXsmall"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;IASaA,SAAS,gBAAGC,yBAAK,CAACC,IAAN,CACvB,gBAAiG;AAAA,MAA9FC,KAA8F,QAA9FA,KAA8F;AAAA,MAAvFC,gBAAuF,QAAvFA,gBAAuF;AAAA,MAArEC,UAAqE,QAArEA,UAAqE;AAAA,MAAzDC,WAAyD,QAAzDA,WAAyD;AAAA,MAA5CC,aAA4C,QAA5CA,aAA4C;AAAA,MAA7BC,YAA6B,QAA7BA,YAA6B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AAC/F,MAAMC,GAAG,GAAGC,YAAM,CAAc,IAAd,CAAlB;AAEA,MAAMC,cAAc,GAAGC,aAAO,CAAC;AAAA,WAAMP,WAAN;AAAA,GAAD,EAAoB,CAACA,WAAD,CAApB,CAA9B;AAEA,MAAMQ,OAAO,GAAGD,aAAO,CAAC;AAAA,6BAAiBE,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,MAAMC,gBAAsE,GAAGC,iBAAW,CACxF,UAACC,CAAD,EAAO;AACL,QAAI,CAACC,SAAD,EAAY,OAAZ,EAAqB,OAArB,EAA8BC,QAA9B,CAAuCF,CAAC,CAACG,IAAzC,CAAJ,EAAoD;AAClDH,MAAAA,CAAC,CAACI,cAAF;AACAd,MAAAA,YAAY,CAACU,CAAD,CAAZ;AACAR,MAAAA,GAAG,CAACa,OAAJ,CAAYC,KAAZ;AACD;AACF,GAPuF,EAQxF,CAAChB,YAAD,CARwF,CAA1F;;AAWA,kBAA0CiB,cAAQ,CAAC,KAAD,CAAlD;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AAEA,sBACE1B,wCAAC2B,wCAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,mBAAY,iBAFd;AAGE,IAAA,IAAI,EAAEzB,KAAK,KAAK,EAAV,GAAe,CAAC,MAAD,CAAf,GAA0B,CAAC,MAAD,EAAS,MAAT,CAHlC;AAIE,IAAA,UAAU,EAAEE,UAJd;AAKE,IAAA,KAAK,EAAEF,KALT;AAME,IAAA,aAAa,EAAEuB;AANjB,kBAQEzB,wCAAC,cAAD;AACE,IAAA,EAAE,EAAEa,OADN;AAEE,IAAA,SAAS,EAAC,qBAFZ;AAGE,mBAAY,eAHd;AAIE,IAAA,QAAQ,EAAEe,qBAAe,CAACnB,GAAD,EAAMD,QAAN,CAJ3B;AAKE,IAAA,KAAK,EAAEN,KALT;AAME,IAAA,QAAQ,EAAEI,aANZ;AAOE,IAAA,WAAW,EAAEH,gBAPf;AAQE,IAAA,OAAO,EAAE;AAAA,aAAMuB,gBAAgB,CAAC,IAAD,CAAtB;AAAA,KARX;AASE,IAAA,MAAM,EAAE;AAAA,aAAMA,gBAAgB,CAAC,KAAD,CAAtB;AAAA,KATV;AAUE,IAAA,cAAc,EAAE;AAVlB,IARF,EAoBGxB,KAAK,KAAK,EAAV,iBACCF,wCAAC6B,kCAAD;AACE,IAAA,EAAE,EAAEhB,OADN;AAEE,mBAAY,oBAFd;AAGE,IAAA,QAAQ,EAAEL,QAHZ;AAIE,IAAA,OAAO,EAAEO,gBAJX;AAKE,IAAA,SAAS,EAAEA,gBALb;AAME,kBAAW,aANb;AAOE,IAAA,IAAI,EAAC;AAPP,kBASEf,wCAAC8B,mBAAD;AAAa,IAAA,IAAI,EAAC,GAAlB;AAAsB,IAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,KAAlB;AAA7B,IATF,CArBJ,CADF;AAoCD,CAzDsB;;;;"}

package/cjs/components/types/LabelPill.js

@@ -16,8 +16,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /* eslint-disable react/prop-types */
 var LabelPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
   var label = _ref.label,
+      labelTruncated = _ref.labelTruncated,
       iconLeft = _ref.iconLeft,
       ariaLabel = _ref.ariaLabel;
+  var TextComponent = labelTruncated ? function (_ref2) {
+    var children = _ref2.children;
+    return /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React__default['default'].Fragment;
   return /*#__PURE__*/React__default['default'].createElement(components_styled.StyledLabelPillWrapper, {
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-label",
@@ -28,9 +35,7 @@ var LabelPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
     }),
     gutter: "xxxs",
     hasIcon: iconLeft !== null
-  }, iconLeft, /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }));
+  }, iconLeft, /*#__PURE__*/React__default['default'].createElement(TextComponent, null, label));
 });
 
 exports.LabelPill = LabelPill;

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

@@ -1 +1 @@
-{"version":3,"file":"LabelPill.js","sources":["../../../../src/components/types/LabelPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledLabelPillWrapper } from '../styled';\n\nexport const LabelPill = React.memo<DSPillProps>(({ label, iconLeft, ariaLabel }) => (\n  <StyledLabelPillWrapper\n    alignItems=\"center\"\n    className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n    data-testid=\"ds-pill-wrapper\"\n    aria-label={ariaLabel || label}\n    cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n    gutter=\"xxxs\"\n    hasIcon={iconLeft !== null}\n  >\n    {iconLeft}\n    <SimpleTruncatedTooltipText value={label} />\n  </StyledLabelPillWrapper>\n));\n"],"names":["LabelPill","React","memo","label","iconLeft","ariaLabel","StyledLabelPillWrapper","filter","notFalse","SimpleTruncatedTooltipText"],"mappings":";;;;;;;;;;;;;;;AAAA;IAMaA,SAAS,gBAAGC,yBAAK,CAACC,IAAN,CAAwB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,QAAV,QAAUA,QAAV;AAAA,MAAoBC,SAApB,QAAoBA,SAApB;AAAA,sBAC/CJ,wCAACK,wCAAD;AACE,IAAA,UAAU,EAAC,QADb;AAEE,IAAA,SAAS,EAAC,uCAFZ;AAGE,mBAAY,iBAHd;AAIE,kBAAYD,SAAS,IAAIF,KAJ3B;AAKE,IAAA,IAAI,EAAE,CAACC,QAAQ,IAAI,aAAb,EAA4B,MAA5B,EAAoCG,MAApC,CAA2C,UAACC,QAAD;AAAA,aAAcA,QAAd;AAAA,KAA3C,CALR;AAME,IAAA,MAAM,EAAC,MANT;AAOE,IAAA,OAAO,EAAEJ,QAAQ,KAAK;AAPxB,KASGA,QATH,eAUEH,wCAACQ,iDAAD;AAA4B,IAAA,KAAK,EAAEN;AAAnC,IAVF,CAD+C;AAAA,CAAxB;;;;"}
+{"version":3,"file":"LabelPill.js","sources":["../../../../src/components/types/LabelPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledLabelPillWrapper } from '../styled';\n\nexport const LabelPill = React.memo<DSPillProps>(({ label, labelTruncated, iconLeft, ariaLabel }) => {\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n  return (\n    <StyledLabelPillWrapper\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n    >\n      {iconLeft}\n      <TextComponent>{label}</TextComponent>\n    </StyledLabelPillWrapper>\n  );\n});\n"],"names":["LabelPill","React","memo","label","labelTruncated","iconLeft","ariaLabel","TextComponent","children","SimpleTruncatedTooltipText","Fragment","StyledLabelPillWrapper","filter","notFalse"],"mappings":";;;;;;;;;;;;;;;AAAA;IAMaA,SAAS,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAAoD;AAAA,MAAjDC,KAAiD,QAAjDA,KAAiD;AAAA,MAA1CC,cAA0C,QAA1CA,cAA0C;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACnG,MAAMC,aAAa,GAAGH,cAAc,GAChC;AAAA,QAAGI,QAAH,SAAGA,QAAH;AAAA,wBAAkBP,wCAACQ,iDAAD;AAA4B,MAAA,KAAK,EAAED;AAAnC,MAAlB;AAAA,GADgC,GAEhCP,yBAAK,CAACS,QAFV;AAGA,sBACET,wCAACU,wCAAD;AACE,IAAA,UAAU,EAAC,QADb;AAEE,IAAA,SAAS,EAAC,uCAFZ;AAGE,mBAAY,iBAHd;AAIE,kBAAYL,SAAS,IAAIH,KAJ3B;AAKE,IAAA,IAAI,EAAE,CAACE,QAAQ,IAAI,aAAb,EAA4B,MAA5B,EAAoCO,MAApC,CAA2C,UAACC,QAAD;AAAA,aAAcA,QAAd;AAAA,KAA3C,CALR;AAME,IAAA,MAAM,EAAC,MANT;AAOE,IAAA,OAAO,EAAER,QAAQ,KAAK;AAPxB,KASGA,QATH,eAUEJ,wCAAC,aAAD,QAAgBE,KAAhB,CAVF,CADF;AAcD,CAlBwB;;;;"}

package/cjs/components/types/ReadOnlyPill.js

@@ -13,14 +13,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/* eslint-disable react/prop-types */
+/* eslint-disable complexity */
 var ReadOnlyPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
   var label = _ref.label,
+      labelTruncated = _ref.labelTruncated,
       iconLeft = _ref.iconLeft,
       iconRight = _ref.iconRight,
       ariaLabel = _ref.ariaLabel;
   var hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
   var hasIconRight = iconRight !== null || iconLeft !== null && label === '';
+  var TextComponent = labelTruncated ? function (_ref2) {
+    var children = _ref2.children;
+    return /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React__default['default'].Fragment;
   return /*#__PURE__*/React__default['default'].createElement(components_styled.StyledReadonlyPillWrapper, {
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-readonly",
@@ -32,9 +39,7 @@ var ReadOnlyPill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
     gutter: "xxxs",
     hasIconRight: hasIconRight,
     hasIconLeft: hasIconLeft
-  }, iconLeft, label ? /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }) : null, iconRight);
+  }, iconLeft, label ? /*#__PURE__*/React__default['default'].createElement(TextComponent, null, label) : null, iconRight);
 });
 
 exports.ReadOnlyPill = ReadOnlyPill;

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

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyPill.js","sources":["../../../../src/components/types/ReadOnlyPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledReadonlyPillWrapper } from '../styled';\n\nexport const ReadOnlyPill = React.memo<DSPillProps>(({ label, iconLeft, iconRight, ariaLabel }) => {\n  const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n  const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n  return (\n    <StyledReadonlyPillWrapper\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter((notFalse) => notFalse)}\n      gutter=\"xxxs\"\n      hasIconRight={hasIconRight}\n      hasIconLeft={hasIconLeft}\n    >\n      {iconLeft}\n      {label ? <SimpleTruncatedTooltipText value={label} /> : null}\n      {iconRight}\n    </StyledReadonlyPillWrapper>\n  );\n});\n"],"names":["ReadOnlyPill","React","memo","label","iconLeft","iconRight","ariaLabel","hasIconLeft","hasIconRight","StyledReadonlyPillWrapper","filter","notFalse","SimpleTruncatedTooltipText"],"mappings":";;;;;;;;;;;;;;;AAAA;IAMaA,YAAY,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAA+C;AAAA,MAA5CC,KAA4C,QAA5CA,KAA4C;AAAA,MAArCC,QAAqC,QAArCA,QAAqC;AAAA,MAA3BC,SAA2B,QAA3BA,SAA2B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACjG,MAAMC,WAAW,GAAGH,QAAQ,KAAK,IAAb,IAAsBC,SAAS,KAAK,IAAd,IAAsBF,KAAK,KAAK,EAA1E;AACA,MAAMK,YAAY,GAAGH,SAAS,KAAK,IAAd,IAAuBD,QAAQ,KAAK,IAAb,IAAqBD,KAAK,KAAK,EAA3E;AAEA,sBACEF,wCAACQ,2CAAD;AACE,IAAA,UAAU,EAAC,QADb;AAEE,IAAA,SAAS,EAAC,0CAFZ;AAGE,mBAAY,iBAHd;AAIE,kBAAYH,SAAS,IAAIH,KAJ3B;AAKE,IAAA,IAAI,EAAE,CAACC,QAAQ,IAAI,aAAb,EAA4BD,KAAK,IAAI,MAArC,EAA6CE,SAAS,IAAI,aAA1D,EAAyEK,MAAzE,CAAgF,UAACC,QAAD;AAAA,aAAcA,QAAd;AAAA,KAAhF,CALR;AAME,IAAA,MAAM,EAAC,MANT;AAOE,IAAA,YAAY,EAAEH,YAPhB;AAQE,IAAA,WAAW,EAAED;AARf,KAUGH,QAVH,EAWGD,KAAK,gBAAGF,wCAACW,iDAAD;AAA4B,IAAA,KAAK,EAAET;AAAnC,IAAH,GAAkD,IAX1D,EAYGE,SAZH,CADF;AAgBD,CApB2B;;;;"}
+{"version":3,"file":"ReadOnlyPill.js","sources":["../../../../src/components/types/ReadOnlyPill.tsx"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledReadonlyPillWrapper } from '../styled';\n\nexport const ReadOnlyPill = React.memo<DSPillProps>(({ label, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n  const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n  const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n\n  return (\n    <StyledReadonlyPillWrapper\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter((notFalse) => notFalse)}\n      gutter=\"xxxs\"\n      hasIconRight={hasIconRight}\n      hasIconLeft={hasIconLeft}\n    >\n      {iconLeft}\n      {label ? <TextComponent>{label}</TextComponent> : null}\n      {iconRight}\n    </StyledReadonlyPillWrapper>\n  );\n});\n"],"names":["ReadOnlyPill","React","memo","label","labelTruncated","iconLeft","iconRight","ariaLabel","hasIconLeft","hasIconRight","TextComponent","children","SimpleTruncatedTooltipText","Fragment","StyledReadonlyPillWrapper","filter","notFalse"],"mappings":";;;;;;;;;;;;;;;AAAA;IAOaA,YAAY,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAA+D;AAAA,MAA5DC,KAA4D,QAA5DA,KAA4D;AAAA,MAArDC,cAAqD,QAArDA,cAAqD;AAAA,MAArCC,QAAqC,QAArCA,QAAqC;AAAA,MAA3BC,SAA2B,QAA3BA,SAA2B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACjH,MAAMC,WAAW,GAAGH,QAAQ,KAAK,IAAb,IAAsBC,SAAS,KAAK,IAAd,IAAsBH,KAAK,KAAK,EAA1E;AACA,MAAMM,YAAY,GAAGH,SAAS,KAAK,IAAd,IAAuBD,QAAQ,KAAK,IAAb,IAAqBF,KAAK,KAAK,EAA3E;AAEA,MAAMO,aAAa,GAAGN,cAAc,GAChC;AAAA,QAAGO,QAAH,SAAGA,QAAH;AAAA,wBAAkBV,wCAACW,iDAAD;AAA4B,MAAA,KAAK,EAAED;AAAnC,MAAlB;AAAA,GADgC,GAEhCV,yBAAK,CAACY,QAFV;AAIA,sBACEZ,wCAACa,2CAAD;AACE,IAAA,UAAU,EAAC,QADb;AAEE,IAAA,SAAS,EAAC,0CAFZ;AAGE,mBAAY,iBAHd;AAIE,kBAAYP,SAAS,IAAIJ,KAJ3B;AAKE,IAAA,IAAI,EAAE,CAACE,QAAQ,IAAI,aAAb,EAA4BF,KAAK,IAAI,MAArC,EAA6CG,SAAS,IAAI,aAA1D,EAAyES,MAAzE,CAAgF,UAACC,QAAD;AAAA,aAAcA,QAAd;AAAA,KAAhF,CALR;AAME,IAAA,MAAM,EAAC,MANT;AAOE,IAAA,YAAY,EAAEP,YAPhB;AAQE,IAAA,WAAW,EAAED;AARf,KAUGH,QAVH,EAWGF,KAAK,gBAAGF,wCAAC,aAAD,QAAgBE,KAAhB,CAAH,GAA4C,IAXpD,EAYGG,SAZH,CADF;AAgBD,CAxB2B;;;;"}

package/cjs/components/types/RemovablePill.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var uid = require('uid');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var dsIcons = require('@elliemae/ds-icons');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var components_styled = require('../styled.js');
 var components_PillGroup = require('../PillGroup.js');
@@ -14,20 +14,20 @@ require('@elliemae/ds-grid');
 require('@elliemae/ds-button');
 require('@babel/runtime/helpers/toConsumableArray');
 require('react-desc');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@elliemae/ds-props-helpers');
 require('../../props.js');
-require('@elliemae/ds-form/Input');
+require('@elliemae/ds-form');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/objectWithoutProperties');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
 
 /* eslint-disable react/prop-types */
 var RemovablePill = /*#__PURE__*/React__default['default'].memo(function (_ref) {
   var label = _ref.label,
+      labelTruncated = _ref.labelTruncated,
       onRemove = _ref.onRemove,
       innerRef = _ref.innerRef,
       ariaLabel = _ref.ariaLabel;
@@ -38,6 +38,12 @@ var RemovablePill = /*#__PURE__*/React__default['default'].memo(function (_ref)
   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, {
+      value: children
+    });
+  } : React__default['default'].Fragment;
   var onKeyDown = React.useCallback(function (e) {
     if (['Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -53,9 +59,7 @@ var RemovablePill = /*#__PURE__*/React__default['default'].memo(function (_ref)
     className: "ds-pill-wrapper ds-pill-wrapper-removable",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label
-  }, /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-    value: label
-  }), /*#__PURE__*/React__default['default'].createElement(components_PillButton.DSPillButton, {
+  }, /*#__PURE__*/React__default['default'].createElement(TextComponent, null, label), /*#__PURE__*/React__default['default'].createElement(components_PillButton.DSPillButton, {
     className: "ds-pill-focus-point",
     id: pillUid,
     "data-testid": "ds-pill-close-icon",
@@ -64,7 +68,7 @@ var RemovablePill = /*#__PURE__*/React__default['default'].memo(function (_ref)
     onKeyDown: onKeyDown,
     "aria-label": "Remove ".concat(label),
     type: "right"
-  }, /*#__PURE__*/React__default['default'].createElement(CloseXsmall__default['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(dsIcons.CloseXsmall, {
     size: "s",
     color: ['brand-primary', '700']
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"RemovablePill.js","sources":["../../../../src/components/types/RemovablePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport CloseIcon from '@elliemae/ds-icons/CloseXsmall';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(({ label, onRemove, innerRef, ariaLabel }) => {\n  const { onKeyboardRemove } = useContext(DSPillGroupV2Context);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n  const onKeyDown: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (['Enter', 'Space'].includes(e.code)) {\n        e.preventDefault();\n        if (onKeyboardRemove) onKeyboardRemove(pillUid);\n        onRemove(e);\n      }\n    },\n    [onKeyboardRemove, onRemove, pillUid],\n  );\n\n  return (\n    <StyledRemovablePillWrapper\n      cols={['auto', '24px']}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n    >\n      <SimpleTruncatedTooltipText value={label} />\n      <DSPillButton\n        className=\"ds-pill-focus-point\"\n        id={pillUid}\n        data-testid=\"ds-pill-close-icon\"\n        innerRef={innerRef}\n        onClick={onRemove}\n        onKeyDown={onKeyDown}\n        aria-label={`Remove ${label}`}\n        type=\"right\"\n      >\n        <CloseIcon size=\"s\" color={['brand-primary', '700']} />\n      </DSPillButton>\n    </StyledRemovablePillWrapper>\n  );\n});\n"],"names":["RemovablePill","React","memo","label","onRemove","innerRef","ariaLabel","useContext","DSPillGroupV2Context","onKeyboardRemove","pillUid","useMemo","uid","onKeyDown","useCallback","e","includes","code","preventDefault","StyledRemovablePillWrapper","SimpleTruncatedTooltipText","DSPillButton","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;IAUaA,aAAa,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAA8C;AAAA,MAA3CC,KAA2C,QAA3CA,KAA2C;AAAA,MAApCC,QAAoC,QAApCA,QAAoC;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;;AACjG,oBAA6BC,gBAAU,CAACC,yCAAD,CAAvC;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAMC,OAAO,GAAGC,aAAO,CAAC;AAAA,6BAAiBC,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,MAAMC,SAA+D,GAAGC,iBAAW,CACjF,UAACC,CAAD,EAAO;AACL,QAAI,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,CAAJ,EAAyC;AACvCF,MAAAA,CAAC,CAACG,cAAF;AACA,UAAIT,gBAAJ,EAAsBA,gBAAgB,CAACC,OAAD,CAAhB;AACtBN,MAAAA,QAAQ,CAACW,CAAD,CAAR;AACD;AACF,GAPgF,EAQjF,CAACN,gBAAD,EAAmBL,QAAnB,EAA6BM,OAA7B,CARiF,CAAnF;AAWA,sBACET,wCAACkB,4CAAD;AACE,IAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADR;AAEE,IAAA,MAAM,EAAC,KAFT;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,YAAY,EAAC,QAJf;AAKE,IAAA,SAAS,EAAC,2CALZ;AAME,mBAAY,iBANd;AAOE,kBAAYb,SAAS,IAAIH;AAP3B,kBASEF,wCAACmB,iDAAD;AAA4B,IAAA,KAAK,EAAEjB;AAAnC,IATF,eAUEF,wCAACoB,kCAAD;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,IAAA,EAAE,EAAEX,OAFN;AAGE,mBAAY,oBAHd;AAIE,IAAA,QAAQ,EAAEL,QAJZ;AAKE,IAAA,OAAO,EAAED,QALX;AAME,IAAA,SAAS,EAAES,SANb;AAOE,mCAAsBV,KAAtB,CAPF;AAQE,IAAA,IAAI,EAAC;AARP,kBAUEF,wCAACqB,+BAAD;AAAW,IAAA,IAAI,EAAC,GAAhB;AAAoB,IAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,KAAlB;AAA3B,IAVF,CAVF,CADF;AAyBD,CAxC4B;;;;"}
+{"version":3,"file":"RemovablePill.js","sources":["../../../../src/components/types/RemovablePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(({ label, labelTruncated, onRemove, innerRef, ariaLabel }) => {\n  const { onKeyboardRemove } = useContext(DSPillGroupV2Context);\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n\n  const onKeyDown: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (['Enter', 'Space'].includes(e.code)) {\n        e.preventDefault();\n        if (onKeyboardRemove) onKeyboardRemove(pillUid);\n        onRemove(e);\n      }\n    },\n    [onKeyboardRemove, onRemove, pillUid],\n  );\n\n  return (\n    <StyledRemovablePillWrapper\n      cols={['auto', '24px']}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n    >\n      <TextComponent>{label}</TextComponent>\n      <DSPillButton\n        className=\"ds-pill-focus-point\"\n        id={pillUid}\n        data-testid=\"ds-pill-close-icon\"\n        innerRef={innerRef}\n        onClick={onRemove}\n        onKeyDown={onKeyDown}\n        aria-label={`Remove ${label}`}\n        type=\"right\"\n      >\n        <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n      </DSPillButton>\n    </StyledRemovablePillWrapper>\n  );\n});\n"],"names":["RemovablePill","React","memo","label","labelTruncated","onRemove","innerRef","ariaLabel","useContext","DSPillGroupV2Context","onKeyboardRemove","pillUid","useMemo","uid","TextComponent","children","SimpleTruncatedTooltipText","Fragment","onKeyDown","useCallback","e","includes","code","preventDefault","StyledRemovablePillWrapper","DSPillButton","CloseXsmall"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;IAUaA,aAAa,gBAAGC,yBAAK,CAACC,IAAN,CAAwB,gBAA8D;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,cAAoD,QAApDA,cAAoD;AAAA,MAApCC,QAAoC,QAApCA,QAAoC;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;;AACjH,oBAA6BC,gBAAU,CAACC,yCAAD,CAAvC;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAMC,OAAO,GAAGC,aAAO,CAAC;AAAA,6BAAiBC,OAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAvB;AAEA,MAAMC,aAAa,GAAGV,cAAc,GAChC;AAAA,QAAGW,QAAH,SAAGA,QAAH;AAAA,wBAAkBd,wCAACe,iDAAD;AAA4B,MAAA,KAAK,EAAED;AAAnC,MAAlB;AAAA,GADgC,GAEhCd,yBAAK,CAACgB,QAFV;AAIA,MAAMC,SAA+D,GAAGC,iBAAW,CACjF,UAACC,CAAD,EAAO;AACL,QAAI,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,CAAJ,EAAyC;AACvCF,MAAAA,CAAC,CAACG,cAAF;AACA,UAAIb,gBAAJ,EAAsBA,gBAAgB,CAACC,OAAD,CAAhB;AACtBN,MAAAA,QAAQ,CAACe,CAAD,CAAR;AACD;AACF,GAPgF,EAQjF,CAACV,gBAAD,EAAmBL,QAAnB,EAA6BM,OAA7B,CARiF,CAAnF;AAWA,sBACEV,wCAACuB,4CAAD;AACE,IAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADR;AAEE,IAAA,MAAM,EAAC,KAFT;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,YAAY,EAAC,QAJf;AAKE,IAAA,SAAS,EAAC,2CALZ;AAME,mBAAY,iBANd;AAOE,kBAAYjB,SAAS,IAAIJ;AAP3B,kBASEF,wCAAC,aAAD,QAAgBE,KAAhB,CATF,eAUEF,wCAACwB,kCAAD;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,IAAA,EAAE,EAAEd,OAFN;AAGE,mBAAY,oBAHd;AAIE,IAAA,QAAQ,EAAEL,QAJZ;AAKE,IAAA,OAAO,EAAED,QALX;AAME,IAAA,SAAS,EAAEa,SANb;AAOE,mCAAsBf,KAAtB,CAPF;AAQE,IAAA,IAAI,EAAC;AARP,kBAUEF,wCAACyB,mBAAD;AAAa,IAAA,IAAI,EAAC,GAAlB;AAAsB,IAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,KAAlB;AAA7B,IAVF,CAVF,CADF;AAyBD,CA5C4B;;;;"}