@elliemae/ds-pills 3.11.1-rc.1 → 3.12.0-next.1

package/dist/cjs/components/Pill.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/Pill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\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, DSPillV2PropTypes);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nDSPillV2.displayName = 'DSPillV2';\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,0BAAuF;AAEvF,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,wBAAoB,kDAA6B,OAAO,iCAAoB;AAClF,0DAA+B,mBAAmB,8BAAiB;AACnE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,4CAAC;AAAA,IAAe,GAAG;AAAA,GAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBd;AApBT,0BAAuF;AAEvF,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,wBAAoB,kDAA6B,OAAO,iCAAoB;AAClF,0DAA+B,mBAAmB,8BAAiB;AACnE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,4CAAC;AAAA,IAAe,GAAG;AAAA,GAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/components/PillButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/PillButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n  only: 'ds-pill-button-only',\n  left: 'ds-pill-button-left',\n  right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n  const { type, children, ...rest } = propsWithDefaults;\n\n  return (\n    <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nDSPillButton.displayName = 'DSPillButton';\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,0BAAuF;AACvF,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,wBAAoB,kDAA6B,OAAO,qCAAwB;AACtF,0DAA+B,mBAAmB,kCAAqB;AAEvE,QAAM,EAAE,MAAM,aAAa,KAAK,IAAI;AAEpC,SACE,4CAAC;AAAA,IAAkB,GAAG;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,IACtF;AAAA,GACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport type { DSButtonPropsT } from '@elliemae/ds-button';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n  only: 'ds-pill-button-only',\n  left: 'ds-pill-button-left',\n  right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n  const { type, children, ...rest } = propsWithDefaults;\n\n  return (\n    <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nDSPillButton.displayName = 'DSPillButton';\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AAjBJ,0BAAuF;AACvF,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,wBAAoB,kDAA6B,OAAO,qCAAwB;AACtF,0DAA+B,mBAAmB,kCAAqB;AAEvE,QAAM,EAAE,MAAM,aAAa,KAAK,IAAI;AAEpC,SACE,4CAAC;AAAA,IAAkB,GAAG;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,IACtF;AAAA,GACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/components/PillGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n  onKeyboardRemove: (pillUid: string) => void;\n  onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n  onKeyboardRemove: () => null,\n  onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\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  const onKeyboardNavigation = useCallback(\n    (pillUid: string, step: number, e: KeyboardEvent) => {\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        if (elems[pillIndex + step]) {\n          e.stopPropagation();\n          elems[pillIndex + step].focus();\n        }\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n      <StyledPillGroup\n        {...globalAttrs}\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 as WeakValidationMap<unknown>;\nDSPillGroupV2.displayName = 'DSPillGroupV2';\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA8E;AAC9E,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,wBAAoB,kDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,kBAAc,4CAAuB,iBAAiB;AAC5D,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,OAAO;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,4CAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,IAC7E,sDAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP,KAAK;AAAA,MAEJ;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport type { WeakValidationMap } from 'react';\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport type { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n  onKeyboardRemove: (pillUid: string) => void;\n  onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n  onKeyboardRemove: () => null,\n  onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\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  const onKeyboardNavigation = useCallback(\n    (pillUid: string, step: number, e: KeyboardEvent) => {\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        if (elems[pillIndex + step]) {\n          e.stopPropagation();\n          elems[pillIndex + step].focus();\n        }\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n      <StyledPillGroup\n        {...globalAttrs}\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 as WeakValidationMap<unknown>;\nDSPillGroupV2.displayName = 'DSPillGroupV2';\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DjB;AA3DN,mBAA2D;AAC3D,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,wBAAoB,kDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,kBAAc,4CAAuB,iBAAiB;AAC5D,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,OAAO;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,4CAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,IAC7E,sDAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP,KAAK;AAAA,MAEJ;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": ["React"]
 }

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

@@ -44,6 +44,15 @@ const DropdownPill = import_react.default.memo(
     const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
       value: children
     }) : import_react.default.Fragment;
+    const handleOnClick = (0, import_react.useCallback)(
+      (e, ...args) => {
+        if (e.type === "click") {
+          e.preventDefault();
+          onDropdownClick(e, ...args);
+        }
+      },
+      [onDropdownClick]
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledDropdownPillWrapper, {
       size,
       id: pillUid,
@@ -81,7 +90,7 @@ const DropdownPill = import_react.default.memo(
             innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
             "aria-label": ariaLabel || label,
             type: "right",
-            onClick: onDropdownClick,
+            onClick: handleOnClick,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {
               color: ["brand-primary", "800"],
               width: 20,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "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, size, 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        size={size}\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          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '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']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB,4CAAC;AAAA,UACC,0BAA0B;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UACJ,gBAAgB,CAAC,MAAM;AACrB,gBAAI,EAAE,SAAS;AAAU,yBAAW,QAAQ,MAAM;AAClD,gBAAI,cAAc;AAAgB,4BAAc,eAAe,CAAC;AAAA,UAClE;AAAA,UACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,UAEtC,sDAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,cAAU,8BAAgB,YAAY,QAAQ;AAAA,YAC9C,cAAY,aAAa;AAAA,YACzB,MAAK;AAAA,YACL,SAAS;AAAA,YAET,sDAAC;AAAA,cAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAAG,OAAO;AAAA,cAAI,QAAQ;AAAA,aAAI;AAAA,WAC5E;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef, useCallback } 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, size, 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    const handleOnClick = useCallback(\n      (e, ...args) => {\n        if (e.type === 'click') {\n          e.preventDefault();\n          onDropdownClick(e, ...args);\n        }\n      },\n      [onDropdownClick],\n    );\n    return (\n      <StyledDropdownPillWrapper\n        size={size}\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          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '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={handleOnClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBG;AAjB1B,mBAAoD;AACpD,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AACV,UAAM,oBAAgB;AAAA,MACpB,CAAC,MAAM,SAAS;AACd,YAAI,EAAE,SAAS,SAAS;AACtB,YAAE,eAAe;AACjB,0BAAgB,GAAG,GAAG,IAAI;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,CAAC,eAAe;AAAA,IAClB;AACA,WACE,6CAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB,4CAAC;AAAA,UACC,0BAA0B;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UACJ,gBAAgB,CAAC,MAAM;AACrB,gBAAI,EAAE,SAAS;AAAU,yBAAW,QAAQ,MAAM;AAClD,gBAAI,cAAc;AAAgB,4BAAc,eAAe,CAAC;AAAA,UAClE;AAAA,UACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,UAEtC,sDAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,cAAU,8BAAgB,YAAY,QAAQ;AAAA,YAC9C,cAAY,aAAa;AAAA,YACzB,MAAK;AAAA,YACL,SAAS;AAAA,YAET,sDAAC;AAAA,cAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAAG,OAAO;AAAA,cAAI,QAAQ;AAAA,aAAI;AAAA,WAC5E;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -53,7 +53,7 @@ const InputPill = import_react.default.memo(
     const pillUid = (0, import_react.useMemo)(() => inputId ?? `ds-pill-${(0, import_uid.uid)()}`, []);
     const onCloseIconClick = (0, import_react.useCallback)(
       (e) => {
-        if ([void 0, "Enter", "Space"].includes(e.code)) {
+        if (e.type === "click") {
           e.preventDefault();
           onInputClear(e);
           ref.current.focus();
@@ -89,7 +89,6 @@ const InputPill = import_react.default.memo(
           "data-testid": "ds-pill-clear-icon",
           innerRef,
           onClick: onCloseIconClick,
-          onKeyDown: onCloseIconClick,
           "aria-label": "Clear input",
           type: "right",
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "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  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `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        size={size}\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        hasError={hasError}\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE,6CAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,cAAU,8BAAgB,KAAK,QAAQ;AAAA,UACvC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UACpC,gBAAgB;AAAA,SAClB;AAAA,QACC,UAAU,MACT,4CAAC;AAAA,UACC,IAAI;AAAA,UACJ,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,UACX,cAAW;AAAA,UACX,MAAK;AAAA,UAEL,sDAAC;AAAA,YAAY,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SACzD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;",
+  "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  ({\n    label,\n    size,\n    inputPlaceholder,\n    inputWidth,\n    inputRender,\n    onInputChange,\n    onInputClear,\n    innerRef,\n    hasError,\n    inputId,\n  }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if (e.type === 'click') {\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        size={size}\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        hasError={hasError}\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} // button v2 now triggers click on key down already\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,EAAE,SAAS,SAAS;AACtB,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE,6CAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,cAAU,8BAAgB,KAAK,QAAQ;AAAA,UACvC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UACpC,gBAAgB;AAAA,SAClB;AAAA,QACC,UAAU,MACT,4CAAC;AAAA,UACC,IAAI;AAAA,UACJ,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UAET,cAAW;AAAA,UACX,MAAK;AAAA,UAEL,sDAAC;AAAA,YAAY,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SACzD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/LabelPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "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, size, labelTruncated, iconLeft, ariaLabel }) => {\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n  return (\n    <StyledLabelPillWrapper\n      size={size}\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkB;AAClB,uCAA2C;AAE3C,oBAAuC;AAEhC,MAAM,YAAY,aAAAA,QAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,MAAM;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,aAAAA,QAAM;AACV,SACE,6CAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IACvE,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,IAErB;AAAA;AAAA,MACD,4CAAC;AAAA,QAAe;AAAA,OAAM;AAAA;AAAA,GACxB;AAEJ,CAAC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQC;AAPxB,mBAAkB;AAClB,uCAA2C;AAE3C,oBAAuC;AAEhC,MAAM,YAAY,aAAAA,QAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,MAAM;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,aAAAA,QAAM;AACV,SACE,6CAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,IACvE,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,IAErB;AAAA;AAAA,MACD,4CAAC;AAAA,QAAe;AAAA,OAAM;AAAA;AAAA,GACxB;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "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>(\n  ({ label, size, 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        size={size}\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);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAkB;AAClB,uCAA2C;AAE3C,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,UAAU,MAAM;AACnE,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,aAAa,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MAC5G,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,QAAQ,4CAAC;AAAA,UAAe;AAAA,SAAM,IAAmB;AAAA,QACjD;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaG;AAX1B,mBAAkB;AAClB,uCAA2C;AAE3C,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,UAAU,MAAM;AACnE,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,aAAa,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MAC5G,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,QAAQ,4CAAC;AAAA,UAAe;AAAA,SAAM,IAAmB;AAAA,QACjD;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -36,21 +36,18 @@ var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-t
 var import_styled = require("../styled");
 var import_PillGroup = require("../PillGroup");
 var import_PillButton = require("../PillButton");
+const noopKeyboardRemove = (_pillUid) => {
+};
 const RemovablePill = import_react.default.memo(
   ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
     const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
     const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
+    const postponedKeyboardRemove = (0, import_react.useRef)(noopKeyboardRemove);
     const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
       value: children
     }) : import_react.default.Fragment;
-    const onKeyDown = (0, import_react.useCallback)(
+    const handleOnKeyDown = (0, import_react.useCallback)(
       (e) => {
-        if (["Enter", "Space"].includes(e.code)) {
-          e.preventDefault();
-          if (onKeyboardRemove)
-            onKeyboardRemove(pillUid);
-          onRemove(e);
-        }
         if (e.code === "ArrowLeft") {
           e.preventDefault();
           if (onKeyboardNavigation)
@@ -62,7 +59,20 @@ const RemovablePill = import_react.default.memo(
             onKeyboardNavigation(pillUid, 1, e);
         }
       },
-      [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]
+      [onKeyboardNavigation, pillUid]
+    );
+    const handleOnClick = (0, import_react.useCallback)(
+      (e) => {
+        if (e.type === "keydown") {
+          postponedKeyboardRemove.current = onKeyboardRemove;
+        }
+        if (e.type === "click") {
+          onRemove(e);
+          postponedKeyboardRemove.current(pillUid);
+          postponedKeyboardRemove.current = noopKeyboardRemove;
+        }
+      },
+      [onKeyboardRemove, onRemove, pillUid]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledRemovablePillWrapper, {
       size,
@@ -83,8 +93,8 @@ const RemovablePill = import_react.default.memo(
             id: pillUid,
             "data-testid": "ds-pill-close-icon",
             innerRef,
-            onClick: onRemove,
-            onKeyDown,
+            onClick: handleOnClick,
+            onKeyDown: handleOnKeyDown,
             "aria-label": `Remove ${label}`,
             type: "right",
             tabIndex,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "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>(\n  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n    const { onKeyboardRemove, onKeyboardNavigation } = 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 = useCallback(\n      (e: KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          if (onKeyboardRemove) onKeyboardRemove(pillUid);\n          onRemove(e);\n        }\n        if (e.code === 'ArrowLeft') {\n          e.preventDefault();\n          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n        }\n        if (e.code === 'ArrowRight') {\n          e.preventDefault();\n          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n        }\n      },\n      [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        size={size}\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        <>\n          {!disabled ? (\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              tabIndex={tabIndex}\n            >\n              <CloseXsmall\n                width={size === 's' ? 18 : 22.65}\n                height={size === 's' ? 18 : 22.65}\n                color={['brand-primary', '700']}\n              />\n            </DSPillButton>\n          ) : null}\n        </>\n      </StyledRemovablePillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,UAAM,gBAAY;AAAA,MAChB,CAAC,MAAqB;AACpB,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI;AAAkB,6BAAiB,OAAO;AAC9C,mBAAS,CAAC;AAAA,QACZ;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,UAAU,sBAAsB,OAAO;AAAA,IAC5D;AAEA,WACE,6CAAC;AAAA,MACC;AAAA,MACA,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MAEzB;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB;AAAA,UACG,WAAC,WACA,4CAAC;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU;AAAA,YACtB,MAAK;AAAA,YACL;AAAA,YAEA,sDAAC;AAAA,cACC,OAAO,SAAS,MAAM,KAAK;AAAA,cAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,cAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,aAChC;AAAA,WACF,IACE;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef } 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\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nconst noopKeyboardRemove = (_pillUid: string) => {};\nexport const RemovablePill = React.memo<DSPillProps>(\n  ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n    const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n    // onKeyboardRemove is vanilla javascript implementation\n    // it will NOT WORK if it's not invoked specifically after onRemove\n    // even doing onRemove and setTimeout(()=>{onKeyboardRemove(pillUid)}) will break the implementation\n    // given the changes to button-v2 \"onClick\" invokation logic\n    // we now need this mutable ref to ensure onKeyboardRemove is invoked at the right moment, just after onRemove\n    const postponedKeyboardRemove = useRef(noopKeyboardRemove);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    const handleOnKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.code === 'ArrowLeft') {\n          e.preventDefault();\n          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n        }\n        if (e.code === 'ArrowRight') {\n          e.preventDefault();\n          if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n        }\n      },\n      [onKeyboardNavigation, pillUid],\n    );\n    const handleOnClick = useCallback(\n      (e) => {\n        if (e.type === 'keydown') {\n          // check postponedKeyboardRemove comment\n          postponedKeyboardRemove.current = onKeyboardRemove;\n        }\n        if (e.type === 'click') {\n          onRemove(e);\n          // check postponedKeyboardRemove comment\n          postponedKeyboardRemove.current(pillUid);\n          postponedKeyboardRemove.current = noopKeyboardRemove;\n        }\n      },\n      [onKeyboardRemove, onRemove, pillUid],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        size={size}\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        <>\n          {!disabled ? (\n            <DSPillButton\n              className=\"ds-pill-focus-point\"\n              id={pillUid}\n              data-testid=\"ds-pill-close-icon\"\n              innerRef={innerRef}\n              onClick={handleOnClick}\n              onKeyDown={handleOnKeyDown}\n              aria-label={`Remove ${label}`}\n              type=\"right\"\n              tabIndex={tabIndex}\n            >\n              <CloseXsmall\n                width={size === 's' ? 18 : 22.65}\n                height={size === 's' ? 18 : 22.65}\n                color={['brand-primary', '700']}\n              />\n            </DSPillButton>\n          ) : null}\n        </>\n      </StyledRemovablePillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBG;AAvB1B,mBAAgE;AAChE,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAG7B,MAAM,qBAAqB,CAAC,aAAqB;AAAC;AAC3C,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAMpD,UAAM,8BAA0B,qBAAO,kBAAkB;AAEzD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,UAAM,sBAAkB;AAAA,MACtB,CAAC,MAAqB;AACpB,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,sBAAsB,OAAO;AAAA,IAChC;AACA,UAAM,oBAAgB;AAAA,MACpB,CAAC,MAAM;AACL,YAAI,EAAE,SAAS,WAAW;AAExB,kCAAwB,UAAU;AAAA,QACpC;AACA,YAAI,EAAE,SAAS,SAAS;AACtB,mBAAS,CAAC;AAEV,kCAAwB,QAAQ,OAAO;AACvC,kCAAwB,UAAU;AAAA,QACpC;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,UAAU,OAAO;AAAA,IACtC;AAEA,WACE,6CAAC;AAAA,MACC;AAAA,MACA,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MAEzB;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB;AAAA,UACG,WAAC,WACA,4CAAC;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ;AAAA,YACA,SAAS;AAAA,YACT,WAAW;AAAA,YACX,cAAY,UAAU;AAAA,YACtB,MAAK;AAAA,YACL;AAAA,YAEA,sDAAC;AAAA,cACC,OAAO,SAAS,MAAM,KAAK;AAAA,cAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,cAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,aAChC;AAAA,WACF,IACE;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/components/types/ValuePill.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledValuePillWrapper\n        disabled={disabled}\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-value\"\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        {tooltipValue !== '' ? (\n          <DSTooltipV3 text={tooltipValue}>\n            <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n              {label}\n            </StyledSpanWithTooltip>\n          </DSTooltipV3>\n        ) : (\n          <TextComponent>{label}</TextComponent>\n        )}\n      </StyledValuePillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAE3C,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,UAAU,MAAM;AAChF,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MAErB;AAAA;AAAA,QACA,iBAAiB,KAChB,4CAAC;AAAA,UAAY,MAAM;AAAA,UACjB,sDAAC;AAAA,YAAsB,WAAU;AAAA,YAAwB,UAAU;AAAA,YAChE;AAAA,WACH;AAAA,SACF,IAEA,4CAAC;AAAA,UAAe;AAAA,SAAM;AAAA;AAAA,KAE1B;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUG;AAT1B,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAE3C,oBAA8D;AAEvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,UAAU,MAAM;AAChF,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MACzB,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MAErB;AAAA;AAAA,QACA,iBAAiB,KAChB,4CAAC;AAAA,UAAY,MAAM;AAAA,UACjB,sDAAC;AAAA,YAAsB,WAAU;AAAA,YAAwB,UAAU;AAAA,YAChE;AAAA,WACH;AAAA,SACF,IAEA,4CAAC;AAAA,UAAe;AAAA,SAAM;AAAA;AAAA,KAE1B;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/deprecated/DropdownPill.js

@@ -36,7 +36,7 @@ var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_shared = require("@elliemae/ds-shared");
 var import_Pill = require("./Pill");
-function DropdownPill({
+const DropdownPill = ({
   containerProps = {},
   label = "",
   variant,
@@ -45,7 +45,7 @@ function DropdownPill({
   maxWidth,
   minWidth,
   ...dropdownProps
-}) {
+}) => {
   const ref = (0, import_react.useRef)(null);
   const [chevronEl, chevronRef] = (0, import_react.useState)();
   const { focusFirst } = (0, import_ds_shared.useFocusGroupItem)(ref);
@@ -75,7 +75,7 @@ function DropdownPill({
       variant
     })
   });
-}
+};
 const props = {
   containerProps: import_ds_utilities.PropTypes.object.description("props injected to component wrapper"),
   label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),

package/dist/cjs/deprecated/DropdownPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/DropdownPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nfunction DropdownPill({\n  containerProps = {},\n  label = '',\n  variant,\n  tabIndex = -1,\n  closeMenuOnItemSelection = false,\n  maxWidth,\n  minWidth,\n  ...dropdownProps\n}) {\n  const ref = useRef(null);\n  const [chevronEl, chevronRef] = useState();\n  const { focusFirst } = useFocusGroupItem(ref);\n  return (\n    <DSDropdownMenu\n      {...dropdownProps}\n      closeMenuOnItemSelection={closeMenuOnItemSelection}\n      maxWidth={maxWidth}\n      hideIfNotVisible\n      menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n      minWidth={minWidth}\n      onClose={focusFirst}\n      referenceNode={chevronEl}\n      triggerComponent={\n        <Pill\n          data-testid=\"dropdown-pill\"\n          className=\"dropdown-pill\"\n          containerProps={{ role: 'listbox', ...containerProps }}\n          innerRef={ref}\n          label={label}\n          rightAddon={\n            <div ref={chevronRef}>\n              <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n            </div>\n          }\n          tabIndex={tabIndex}\n          variant={variant}\n        />\n      }\n    />\n  );\n}\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** pill variant */\n  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n  /** html focus border */\n  tabIndex: PropTypes.number.description('html focus order'),\n  /** close menu on item selection */\n  closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n  /** pill max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nDropdownPill.displayName = 'DropdownPill';\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwC;AACxC,0BAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,SAAS,aAAa;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,KACG;AACL,GAAG;AACD,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,WAAW,UAAU,QAAI,uBAAS;AACzC,QAAM,EAAE,WAAW,QAAI,oCAAkB,GAAG;AAC5C,SACE,4CAAC;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ,IAAI;AAAA,IAC1D;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,4CAAC;AAAA,MACC,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,EAAE,MAAM,WAAW,GAAG,eAAe;AAAA,MACrD,UAAU;AAAA,MACV;AAAA,MACA,YACE,4CAAC;AAAA,QAAI,KAAK;AAAA,QACR,sDAAC;AAAA,UAAY,WAAU;AAAA,UAA6B,eAAY;AAAA,SAAuB;AAAA,OACzF;AAAA,MAEF;AAAA,MACA;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,8BAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA,EAEvE,UAAU,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEzD,0BAA0B,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EAEnF,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAClG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nconst DropdownPill = ({\n  containerProps = {},\n  label = '',\n  variant,\n  tabIndex = -1,\n  closeMenuOnItemSelection = false,\n  maxWidth,\n  minWidth,\n  ...dropdownProps\n}) => {\n  const ref = useRef(null);\n  const [chevronEl, chevronRef] = useState();\n  const { focusFirst } = useFocusGroupItem(ref);\n  return (\n    <DSDropdownMenu\n      {...dropdownProps}\n      closeMenuOnItemSelection={closeMenuOnItemSelection}\n      maxWidth={maxWidth}\n      hideIfNotVisible\n      menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n      minWidth={minWidth}\n      onClose={focusFirst}\n      referenceNode={chevronEl}\n      triggerComponent={\n        <Pill\n          data-testid=\"dropdown-pill\"\n          className=\"dropdown-pill\"\n          containerProps={{ role: 'listbox', ...containerProps }}\n          innerRef={ref}\n          label={label}\n          rightAddon={\n            <div ref={chevronRef}>\n              <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n            </div>\n          }\n          tabIndex={tabIndex}\n          variant={variant}\n        />\n      }\n    />\n  );\n};\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** pill variant */\n  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n  /** html focus border */\n  tabIndex: PropTypes.number.description('html focus order'),\n  /** close menu on item selection */\n  closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n  /** pill max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nDropdownPill.displayName = 'DropdownPill';\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCT;AAvCd,mBAAwC;AACxC,0BAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,WAAW,UAAU,QAAI,uBAAS;AACzC,QAAM,EAAE,WAAW,QAAI,oCAAkB,GAAG;AAC5C,SACE,4CAAC;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ,IAAI;AAAA,IAC1D;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,4CAAC;AAAA,MACC,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,EAAE,MAAM,WAAW,GAAG,eAAe;AAAA,MACrD,UAAU;AAAA,MACV;AAAA,MACA,YACE,4CAAC;AAAA,QAAI,KAAK;AAAA,QACR,sDAAC;AAAA,UAAY,WAAU;AAAA,UAA6B,eAAY;AAAA,SAAuB;AAAA,OACzF;AAAA,MAEF;AAAA,MACA;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,8BAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA,EAEvE,UAAU,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEzD,0BAA0B,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EAEnF,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAClG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/deprecated/InputPill.js

@@ -36,7 +36,7 @@ var import_Pill = require("./Pill");
 const StyledInputPill = (0, import_ds_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
   value
 }));
-function InputPill({
+const InputPill = ({
   containerProps = {},
   placeholder = "Enter Value",
   onChange = () => {
@@ -45,7 +45,7 @@ function InputPill({
   value,
   type,
   ...otherProps
-}) {
+}) => {
   let TypeOfInput = import_ds_form.DSInput;
   switch (type) {
     case "inputText":
@@ -75,5 +75,5 @@ function InputPill({
     }),
     tabIndex: -1
   });
-}
+};
 //# sourceMappingURL=InputPill.js.map

package/dist/cjs/deprecated/InputPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/InputPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n  value,\n}));\n\nexport function InputPill({\n  containerProps = {},\n  placeholder = 'Enter Value',\n  onChange = () => {},\n  onRemove,\n  value,\n  type,\n  ...otherProps\n}) {\n  let TypeOfInput = DSInput;\n  // TODO: implement the DSTimeInput, see how because it returns a moment()\n  // TODO: implement the DSDateInput\n  switch (type) {\n    case 'inputText':\n      TypeOfInput = DSInput;\n      break;\n    case 'inputMask':\n      TypeOfInput = DSInputMask;\n      break;\n    default:\n      break;\n  }\n\n  return (\n    <StyledInputPill\n      className=\"input-pill\"\n      classProps={{ value }}\n      containerProps={containerProps}\n      label={\n        <TypeOfInput\n          data-testid=\"input-pill\"\n          onChange={onChange}\n          placeholder={placeholder}\n          value={value}\n          {...otherProps}\n        />\n      }\n      rightAddon={\n        value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n      }\n      tabIndex={-1}\n    />\n  );\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,sBAAkB,wCAAkB,gBAAI,EAAE,cAAc,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EAClF;AACF,EAAE;AAEK,SAAS,UAAU;AAAA,EACxB,iBAAiB,CAAC;AAAA,EAClB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAG;AACD,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,4CAAC;AAAA,IACC,WAAU;AAAA,IACV,YAAY,EAAE,MAAM;AAAA,IACpB;AAAA,IACA,OACE,4CAAC;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,KACN;AAAA,IAEF,YACE,SAAS,4CAAC;AAAA,MAAY,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA,KAAU;AAAA,IAE3G,UAAU;AAAA,GACZ;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n  value,\n}));\n\nexport const InputPill = ({\n  containerProps = {},\n  placeholder = 'Enter Value',\n  onChange = () => {},\n  onRemove,\n  value,\n  type,\n  ...otherProps\n}) => {\n  let TypeOfInput = DSInput;\n  // TODO: implement the DSTimeInput, see how because it returns a moment()\n  // TODO: implement the DSDateInput\n  switch (type) {\n    case 'inputText':\n      TypeOfInput = DSInput;\n      break;\n    case 'inputMask':\n      TypeOfInput = DSInputMask;\n      break;\n    default:\n      break;\n  }\n\n  return (\n    <StyledInputPill\n      className=\"input-pill\"\n      classProps={{ value }}\n      containerProps={containerProps}\n      label={\n        <TypeOfInput\n          data-testid=\"input-pill\"\n          onChange={onChange}\n          placeholder={placeholder}\n          value={value}\n          {...otherProps}\n        />\n      }\n      rightAddon={\n        value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n      }\n      tabIndex={-1}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCf;AAtCR,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,sBAAkB,wCAAkB,gBAAI,EAAE,cAAc,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EAClF;AACF,EAAE;AAEK,MAAM,YAAY,CAAC;AAAA,EACxB,iBAAiB,CAAC;AAAA,EAClB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,MAAI,cAAc;AAGlB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE;AAAA,EACJ;AAEA,SACE,4CAAC;AAAA,IACC,WAAU;AAAA,IACV,YAAY,EAAE,MAAM;AAAA,IACpB;AAAA,IACA,OACE,4CAAC;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,KACN;AAAA,IAEF,YACE,SAAS,4CAAC;AAAA,MAAY,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA,KAAU;AAAA,IAE3G,UAAU;AAAA,GACZ;AAEJ;",
   "names": []
 }

package/dist/cjs/deprecated/LabeledDropdownPills.js

@@ -41,7 +41,7 @@ const DropdownPills = {
   cascaded: import_LabeledDropdownCascadeMenuPill.LabeledDropdownCascadeMenuPill
 };
 const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
-function LabeledDropdownPills({
+const LabeledDropdownPills = ({
   label = "",
   value,
   type,
@@ -52,7 +52,7 @@ function LabeledDropdownPills({
   minWidth,
   fixed,
   ...menuProps
-}) {
+}) => {
   const Component = createDropdownPill(type);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillGroup.PillGroup, {
     onFocusGroupSet,
@@ -67,22 +67,14 @@ function LabeledDropdownPills({
       fixed
     })
   });
-}
+};
 const props = {
-  type: import_ds_utilities.PropTypes.oneOf(["single", "multi", "cascaded"]).description(
-    "pill type"
-  ),
+  type: import_ds_utilities.PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
   onFocusNextGroup: import_ds_utilities.PropTypes.func.description("focus next group callback"),
   onFocusPreviousGroup: import_ds_utilities.PropTypes.func.description("focus prev group callback"),
   onFocusGroupSet: import_ds_utilities.PropTypes.func.description("focus group set callback"),
-  maxWidth: import_ds_utilities.PropTypes.oneOfType([
-    import_ds_utilities.PropTypes.string,
-    import_ds_utilities.PropTypes.number
-  ]).description("pill max width"),
-  minWidth: import_ds_utilities.PropTypes.oneOfType([
-    import_ds_utilities.PropTypes.string,
-    import_ds_utilities.PropTypes.number
-  ]).description("pill min width"),
+  maxWidth: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("pill max width"),
+  minWidth: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("pill min width"),
   fixed: import_ds_utilities.PropTypes.bool.description("fixed pill"),
   label: import_ds_utilities.PropTypes.string.isRequired.description("pill label text"),
   value: import_ds_utilities.PropTypes.oneOfType([

package/dist/cjs/deprecated/LabeledDropdownPills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deprecated/LabeledDropdownPills.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) =>\n  DropdownPills[type] || DropdownPills.single;\n\nfunction LabeledDropdownPills({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  ...menuProps\n}) {\n  const Component = createDropdownPill(type);\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <Component\n        {...menuProps}\n        label={label}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        value={value}\n        fixed={fixed}\n      />\n    </PillGroup>\n  );\n}\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description(\n    'pill type',\n  ),\n  /** focus next group callback */\n  onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n  /** focus prev group callback */\n  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n  /** focus group set callback */\n  onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n  /** pill max width */\n  maxWidth: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,0BAAoC;AACpC,uBAA0B;AAC1B,uCAA0C;AAC1C,sCAA0C;AAC1C,4CAA+C;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAC1B,cAAc,SAAS,cAAc;AAEvC,SAAS,qBAAqB;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAG;AACD,QAAM,YAAY,mBAAmB,IAAI;AAEzC,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA,sDAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,MAAM,8BAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE;AAAA,IACrD;AAAA,EACF;AAAA,EAEA,kBAAkB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,8BAAU,KAAK,YAAY,0BAA0B;AAAA,EAEtE,UAAU,8BAAU,UAAU;AAAA,IAC5B,8BAAU;AAAA,IACV,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAE/B,UAAU,8BAAU,UAAU;AAAA,IAC5B,8BAAU;AAAA,IACV,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAE/B,OAAO,8BAAU,KAAK,YAAY,YAAY;AAAA,EAE9C,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,OAAO,8BAAU,UAAU;AAAA,IACzB,8BAAU;AAAA,MACR,8BAAU,MAAM;AAAA,QACd,IAAI,8BAAU;AAAA,QACd,OAAO,8BAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,8BAAU,MAAM;AAAA,MACd,IAAI,8BAAU;AAAA,MACd,OAAO,8BAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,uCAAmC,8BAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;\n\nconst LabeledDropdownPills = ({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  ...menuProps\n}) => {\n  const Component = createDropdownPill(type);\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <Component {...menuProps} label={label} maxWidth={maxWidth} minWidth={minWidth} value={value} fixed={fixed} />\n    </PillGroup>\n  );\n};\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),\n  /** focus next group callback */\n  onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n  /** focus prev group callback */\n  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n  /** focus group set callback */\n  onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n  /** pill max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AAlCN,0BAAoC;AACpC,uBAA0B;AAC1B,uCAA0C;AAC1C,sCAA0C;AAC1C,4CAA+C;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,SAAS,cAAc;AAE1E,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AAEzC,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA,sDAAC;AAAA,MAAW,GAAG;AAAA,MAAW;AAAA,MAAc;AAAA,MAAoB;AAAA,MAAoB;AAAA,MAAc;AAAA,KAAc;AAAA,GAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,MAAM,8BAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA,EAE9E,kBAAkB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,8BAAU,KAAK,YAAY,0BAA0B;AAAA,EAEtE,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,OAAO,8BAAU,KAAK,YAAY,YAAY;AAAA,EAE9C,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,OAAO,8BAAU,UAAU;AAAA,IACzB,8BAAU;AAAA,MACR,8BAAU,MAAM;AAAA,QACd,IAAI,8BAAU;AAAA,QACd,OAAO,8BAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,8BAAU,MAAM;AAAA,MACd,IAAI,8BAAU;AAAA,MACd,OAAO,8BAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,uCAAmC,8BAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
   "names": []
 }

package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -65,7 +65,7 @@ const getSubmenuOptionLabelById = (options, id) => {
   const index = options.findIndex((option) => option.id === id);
   return index ? options[index].label : "";
 };
-function LabeledDropdownCascadeMenuPill({
+const LabeledDropdownCascadeMenuPill = ({
   label,
   options,
   value: optionValue,
@@ -79,7 +79,7 @@ function LabeledDropdownCascadeMenuPill({
   maxWidth,
   minWidth,
   ...menuProps
-}) {
+}) => {
   const selectionId = Object.keys(selection)[0];
   const selectionValues = selection[selectionId] || "";
   const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
@@ -127,6 +127,6 @@ function LabeledDropdownCascadeMenuPill({
       }, option.id))
     ]
   });
-}
+};
 var LabeledDropdownCascadeMenuPill_default = LabeledDropdownCascadeMenuPill;
 //# sourceMappingURL=LabeledDropdownCascadeMenuPill.js.map

package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { PillGroup } from '../PillGroup';\nimport { RemovablePill } from '../RemovablePill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction renderMenuItems(options, factory) {\n  return options.map((option, index) => {\n    const ItemComponent = factory('radio');\n\n    if (option.type === 'submenu') {\n      const SubmenuComponent = factory('submenu');\n      const ChildComponent = factory('selection-group');\n      return (\n        <SubmenuComponent {...option} key={option.id} item={option}>\n          <ChildComponent\n            {...option}\n            id={option.id}\n            item={option}\n            items={option.items}\n            itemValueAccessor={(item) => item}\n            multi\n          />\n        </SubmenuComponent>\n      );\n    }\n\n    return <ItemComponent {...option} key={option.id || index} item={option} />;\n  });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n  const index = options.findIndex((option) => option.id === id);\n  return index ? options[index].label : '';\n};\n\nfunction LabeledDropdownCascadeMenuPill({\n  label,\n  options,\n  value: optionValue,\n  onChange,\n  onRemove,\n  value: selection = {},\n  placeholder = '---',\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  ...menuProps\n}) {\n  const selectionId = Object.keys(selection)[0];\n  const selectionValues = selection[selectionId] || '';\n  const dropdownLabel = Array.isArray(selectionValues)\n    ? getSubmenuOptionLabelById(options, selectionId)\n    : selectionValues;\n\n  const handleSelectChange = ({ item, group }) => {\n    if (isFunction(onChange)) {\n      const nextSelection = group\n        ? {\n            [group.id]: addOrRemove([...(selection[group.id] || [])], item, (o) => o.id),\n          }\n        : {\n            [item.id]: item.label,\n          };\n      onChange(nextSelection);\n    }\n  };\n\n  const removeOption = (option) => {\n    if (isFunction(onChange)) {\n      const nextSelection = {\n        [selectionId]: selectionValues.filter((val) => option.id !== val.id),\n      };\n      onChange(nextSelection);\n    }\n    onRemove(option);\n  };\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <DropdownPill\n        {...menuProps}\n        itemsRenderer={renderMenuItems}\n        label={dropdownLabel || placeholder}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectChange={handleSelectChange}\n        options={options}\n        selection={{\n          [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues,\n        }}\n        singleGroupSelection\n        variant=\"title\"\n      />\n      {Array.isArray(selectionValues) &&\n        selectionValues.map((option) => (\n          <RemovablePill key={option.id} label={option.label} onRemove={() => removeOption(option)} />\n        ))}\n    </PillGroup>\n  );\n}\n\nexport { LabeledDropdownCascadeMenuPill };\nexport default LabeledDropdownCascadeMenuPill;", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { PillGroup } from '../PillGroup';\nimport { RemovablePill } from '../RemovablePill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction renderMenuItems(options, factory) {\n  return options.map((option, index) => {\n    const ItemComponent = factory('radio');\n\n    if (option.type === 'submenu') {\n      const SubmenuComponent = factory('submenu');\n      const ChildComponent = factory('selection-group');\n      return (\n        <SubmenuComponent {...option} key={option.id} item={option}>\n          <ChildComponent\n            {...option}\n            id={option.id}\n            item={option}\n            items={option.items}\n            itemValueAccessor={(item) => item}\n            multi\n          />\n        </SubmenuComponent>\n      );\n    }\n\n    return <ItemComponent {...option} key={option.id || index} item={option} />;\n  });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n  const index = options.findIndex((option) => option.id === id);\n  return index ? options[index].label : '';\n};\n\nconst LabeledDropdownCascadeMenuPill = ({\n  label,\n  options,\n  value: optionValue,\n  onChange,\n  onRemove,\n  value: selection = {},\n  placeholder = '---',\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  ...menuProps\n}) => {\n  const selectionId = Object.keys(selection)[0];\n  const selectionValues = selection[selectionId] || '';\n  const dropdownLabel = Array.isArray(selectionValues)\n    ? getSubmenuOptionLabelById(options, selectionId)\n    : selectionValues;\n\n  const handleSelectChange = ({ item, group }) => {\n    if (isFunction(onChange)) {\n      const nextSelection = group\n        ? {\n          [group.id]: addOrRemove([...(selection[group.id] || [])], item, (o) => o.id),\n        }\n        : {\n          [item.id]: item.label,\n        };\n      onChange(nextSelection);\n    }\n  };\n\n  const removeOption = (option) => {\n    if (isFunction(onChange)) {\n      const nextSelection = {\n        [selectionId]: selectionValues.filter((val) => option.id !== val.id),\n      };\n      onChange(nextSelection);\n    }\n    onRemove(option);\n  };\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <DropdownPill\n        {...menuProps}\n        itemsRenderer={renderMenuItems}\n        label={dropdownLabel || placeholder}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectChange={handleSelectChange}\n        options={options}\n        selection={{\n          [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues,\n        }}\n        singleGroupSelection\n        variant=\"title\"\n      />\n      {Array.isArray(selectionValues) &&\n        selectionValues.map((option) => (\n          <RemovablePill key={option.id} label={option.label} onRemove={() => removeOption(option)} />\n        ))}\n    </PillGroup>\n  );\n};\n\nexport { LabeledDropdownCascadeMenuPill };\nexport default LabeledDropdownCascadeMenuPill;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -37,7 +37,7 @@ var import_RemovablePill = require("../RemovablePill");
 var import_Pill = require("../Pill");
 var import_OverflowPill = require("../OverflowPill");
 var import_DropdownPill = require("../DropdownPill");
-function LabeledDropdownMultiPills({
+const LabeledDropdownMultiPills = ({
   label,
   options = [],
   value = [],
@@ -47,7 +47,7 @@ function LabeledDropdownMultiPills({
   maxWidth,
   minWidth,
   ...menuProps
-}) {
+}) => {
   const [totalDefaultOptions, setTotalDefaultOptions] = (0, import_react.useState)(0);
   const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(value);
   const [allOptions, setAllOptions] = (0, import_react.useState)(options);
@@ -149,6 +149,6 @@ function LabeledDropdownMultiPills({
       })
     ]
   });
-}
+};
 var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
 //# sourceMappingURL=LabeledDropdownMultiPill.js.map