@elliemae/ds-pills 3.12.0-next.0 → 3.12.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/cjs/components/PillGroup.js.map +2 -2
  2. package/dist/cjs/deprecated/DropdownPill.js +3 -3
  3. package/dist/cjs/deprecated/DropdownPill.js.map +2 -2
  4. package/dist/cjs/deprecated/InputPill.js +3 -3
  5. package/dist/cjs/deprecated/InputPill.js.map +2 -2
  6. package/dist/cjs/deprecated/LabeledDropdownPills.js +6 -14
  7. package/dist/cjs/deprecated/LabeledDropdownPills.js.map +2 -2
  8. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +3 -3
  9. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +2 -2
  10. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +3 -3
  11. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +2 -2
  12. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +3 -3
  13. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
  14. package/dist/cjs/deprecated/LabeledPills.js +13 -25
  15. package/dist/cjs/deprecated/LabeledPills.js.map +2 -2
  16. package/dist/cjs/deprecated/OverflowPill.js +2 -2
  17. package/dist/cjs/deprecated/OverflowPill.js.map +2 -2
  18. package/dist/cjs/deprecated/Pill.js +22 -30
  19. package/dist/cjs/deprecated/Pill.js.map +2 -2
  20. package/dist/cjs/deprecated/RemovablePill.js +2 -2
  21. package/dist/cjs/deprecated/RemovablePill.js.map +2 -2
  22. package/dist/cjs/index.d.js.map +1 -1
  23. package/dist/esm/components/PillGroup.js.map +2 -2
  24. package/dist/esm/deprecated/DropdownPill.js +3 -3
  25. package/dist/esm/deprecated/DropdownPill.js.map +2 -2
  26. package/dist/esm/deprecated/InputPill.js +3 -3
  27. package/dist/esm/deprecated/InputPill.js.map +2 -2
  28. package/dist/esm/deprecated/LabeledDropdownPills.js +6 -14
  29. package/dist/esm/deprecated/LabeledDropdownPills.js.map +2 -2
  30. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +3 -3
  31. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +2 -2
  32. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +3 -3
  33. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +2 -2
  34. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +3 -3
  35. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
  36. package/dist/esm/deprecated/LabeledPills.js +13 -25
  37. package/dist/esm/deprecated/LabeledPills.js.map +2 -2
  38. package/dist/esm/deprecated/OverflowPill.js +2 -2
  39. package/dist/esm/deprecated/OverflowPill.js.map +2 -2
  40. package/dist/esm/deprecated/Pill.js +22 -30
  41. package/dist/esm/deprecated/Pill.js.map +2 -2
  42. package/dist/esm/deprecated/RemovablePill.js +2 -2
  43. package/dist/esm/deprecated/RemovablePill.js.map +2 -2
  44. package/package.json +14 -14
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DjB;AA3DN,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": ["React"]
7
7
  }
@@ -36,7 +36,7 @@ var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
36
36
  var import_ds_icons = require("@elliemae/ds-icons");
37
37
  var import_ds_shared = require("@elliemae/ds-shared");
38
38
  var import_Pill = require("./Pill");
39
- function DropdownPill({
39
+ const DropdownPill = ({
40
40
  containerProps = {},
41
41
  label = "",
42
42
  variant,
@@ -45,7 +45,7 @@ function DropdownPill({
45
45
  maxWidth,
46
46
  minWidth,
47
47
  ...dropdownProps
48
- }) {
48
+ }) => {
49
49
  const ref = (0, import_react.useRef)(null);
50
50
  const [chevronEl, chevronRef] = (0, import_react.useState)();
51
51
  const { focusFirst } = (0, import_ds_shared.useFocusGroupItem)(ref);
@@ -75,7 +75,7 @@ function DropdownPill({
75
75
  variant
76
76
  })
77
77
  });
78
- }
78
+ };
79
79
  const props = {
80
80
  containerProps: import_ds_utilities.PropTypes.object.description("props injected to component wrapper"),
81
81
  label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/DropdownPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -36,7 +36,7 @@ var import_Pill = require("./Pill");
36
36
  const StyledInputPill = (0, import_ds_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
37
37
  value
38
38
  }));
39
- function InputPill({
39
+ const InputPill = ({
40
40
  containerProps = {},
41
41
  placeholder = "Enter Value",
42
42
  onChange = () => {
@@ -45,7 +45,7 @@ function InputPill({
45
45
  value,
46
46
  type,
47
47
  ...otherProps
48
- }) {
48
+ }) => {
49
49
  let TypeOfInput = import_ds_form.DSInput;
50
50
  switch (type) {
51
51
  case "inputText":
@@ -75,5 +75,5 @@ function InputPill({
75
75
  }),
76
76
  tabIndex: -1
77
77
  });
78
- }
78
+ };
79
79
  //# sourceMappingURL=InputPill.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/InputPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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,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,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -41,7 +41,7 @@ const DropdownPills = {
41
41
  cascaded: import_LabeledDropdownCascadeMenuPill.LabeledDropdownCascadeMenuPill
42
42
  };
43
43
  const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
44
- function LabeledDropdownPills({
44
+ const LabeledDropdownPills = ({
45
45
  label = "",
46
46
  value,
47
47
  type,
@@ -52,7 +52,7 @@ function LabeledDropdownPills({
52
52
  minWidth,
53
53
  fixed,
54
54
  ...menuProps
55
- }) {
55
+ }) => {
56
56
  const Component = createDropdownPill(type);
57
57
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillGroup.PillGroup, {
58
58
  onFocusGroupSet,
@@ -67,22 +67,14 @@ function LabeledDropdownPills({
67
67
  fixed
68
68
  })
69
69
  });
70
- }
70
+ };
71
71
  const props = {
72
- type: import_ds_utilities.PropTypes.oneOf(["single", "multi", "cascaded"]).description(
73
- "pill type"
74
- ),
72
+ type: import_ds_utilities.PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
75
73
  onFocusNextGroup: import_ds_utilities.PropTypes.func.description("focus next group callback"),
76
74
  onFocusPreviousGroup: import_ds_utilities.PropTypes.func.description("focus prev group callback"),
77
75
  onFocusGroupSet: import_ds_utilities.PropTypes.func.description("focus group set callback"),
78
- maxWidth: import_ds_utilities.PropTypes.oneOfType([
79
- import_ds_utilities.PropTypes.string,
80
- import_ds_utilities.PropTypes.number
81
- ]).description("pill max width"),
82
- minWidth: import_ds_utilities.PropTypes.oneOfType([
83
- import_ds_utilities.PropTypes.string,
84
- import_ds_utilities.PropTypes.number
85
- ]).description("pill min width"),
76
+ maxWidth: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("pill max width"),
77
+ minWidth: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("pill min width"),
86
78
  fixed: import_ds_utilities.PropTypes.bool.description("fixed pill"),
87
79
  label: import_ds_utilities.PropTypes.string.isRequired.description("pill label text"),
88
80
  value: import_ds_utilities.PropTypes.oneOfType([
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/LabeledDropdownPills.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCjB;AAnCN,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -65,7 +65,7 @@ const getSubmenuOptionLabelById = (options, id) => {
65
65
  const index = options.findIndex((option) => option.id === id);
66
66
  return index ? options[index].label : "";
67
67
  };
68
- function LabeledDropdownCascadeMenuPill({
68
+ const LabeledDropdownCascadeMenuPill = ({
69
69
  label,
70
70
  options,
71
71
  value: optionValue,
@@ -79,7 +79,7 @@ function LabeledDropdownCascadeMenuPill({
79
79
  maxWidth,
80
80
  minWidth,
81
81
  ...menuProps
82
- }) {
82
+ }) => {
83
83
  const selectionId = Object.keys(selection)[0];
84
84
  const selectionValues = selection[selectionId] || "";
85
85
  const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
@@ -127,6 +127,6 @@ function LabeledDropdownCascadeMenuPill({
127
127
  }, option.id))
128
128
  ]
129
129
  });
130
- }
130
+ };
131
131
  var LabeledDropdownCascadeMenuPill_default = LabeledDropdownCascadeMenuPill;
132
132
  //# sourceMappingURL=LabeledDropdownCascadeMenuPill.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -37,7 +37,7 @@ var import_RemovablePill = require("../RemovablePill");
37
37
  var import_Pill = require("../Pill");
38
38
  var import_OverflowPill = require("../OverflowPill");
39
39
  var import_DropdownPill = require("../DropdownPill");
40
- function LabeledDropdownMultiPills({
40
+ const LabeledDropdownMultiPills = ({
41
41
  label,
42
42
  options = [],
43
43
  value = [],
@@ -47,7 +47,7 @@ function LabeledDropdownMultiPills({
47
47
  maxWidth,
48
48
  minWidth,
49
49
  ...menuProps
50
- }) {
50
+ }) => {
51
51
  const [totalDefaultOptions, setTotalDefaultOptions] = (0, import_react.useState)(0);
52
52
  const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(value);
53
53
  const [allOptions, setAllOptions] = (0, import_react.useState)(options);
@@ -149,6 +149,6 @@ function LabeledDropdownMultiPills({
149
149
  })
150
150
  ]
151
151
  });
152
- }
152
+ };
153
153
  var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
154
154
  //# sourceMappingURL=LabeledDropdownMultiPill.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { RemovablePill } from '../RemovablePill';\nimport { Pill } from '../Pill';\nimport { OverflowPill } from '../OverflowPill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction LabeledDropdownMultiPills({\n label,\n options = [],\n value = [],\n onSelect = () => null,\n onRemove = () => null,\n onChange, // if this is defined, then it's calculating the next result onSelect or onRemove\n maxWidth,\n minWidth,\n ...menuProps\n}) {\n const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);\n const [selectedOptions, setSelectedOptions] = useState(value);\n const [allOptions, setAllOptions] = useState(options);\n const [overflowOptions, setOverflowOptions] = useState([]);\n\n const overflowQuantity = 3;\n\n useEffect(() => setSelectedOptions(value), [value]);\n\n useEffect(() => {\n const newOptions = allOptions.filter((option) => option.fixedItem);\n if (newOptions.length > 0) {\n setSelectedOptions(newOptions);\n }\n setTotalDefaultOptions(newOptions.length);\n }, []);\n\n useEffect(() => {\n if (totalDefaultOptions) {\n const newOptions = allOptions.map((opt) => {\n if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {\n return { ...opt, fixedItem: true };\n }\n return { ...opt, fixedItem: false };\n });\n\n setAllOptions(newOptions);\n }\n }, [onSelect, onRemove, selectedOptions]);\n\n useEffect(() => {\n if (selectedOptions.length > overflowQuantity) {\n const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);\n setOverflowOptions(overflow);\n }\n }, [selectedOptions]);\n\n const selectOption = useCallback(\n (option) => {\n if (!option.fixedItem) {\n if (isFunction(onChange)) {\n const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onSelect(option);\n }\n },\n [selectedOptions],\n );\n\n const removeOption = useCallback(\n (option) => {\n if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {\n if (isFunction(onChange)) {\n const nextValue = selectedOptions.filter((val) => option.id !== val.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onRemove(option);\n }\n },\n [selectedOptions],\n );\n\n const typeOfPill = () => {\n if (selectedOptions.length > totalDefaultOptions) {\n return RemovablePill;\n }\n\n return Pill;\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n focusOnOpen={false}\n label={label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: true,\n items: allOptions,\n },\n ]}\n selection={{\n 'multi-selection-views': selectedOptions ? selectedOptions.map((o) => o.id) : '',\n }}\n variant=\"title\"\n />\n {selectedOptions &&\n selectedOptions.map((option, index) => {\n const TypeOfPill = typeOfPill();\n if (index < overflowQuantity) {\n return <TypeOfPill key={option.id} label={option.label} onRemove={() => removeOption(option)} />;\n }\n return null;\n })}\n {selectedOptions && selectedOptions.length > overflowQuantity && (\n <OverflowPill label={`+ ${selectedOptions.length - overflowQuantity}`} options={overflowOptions} />\n )}\n </>\n );\n}\n\nexport { LabeledDropdownMultiPills };\nexport default LabeledDropdownMultiPills;", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { RemovablePill } from '../RemovablePill';\nimport { Pill } from '../Pill';\nimport { OverflowPill } from '../OverflowPill';\nimport { DropdownPill } from '../DropdownPill';\n\nconst LabeledDropdownMultiPills = ({\n label,\n options = [],\n value = [],\n onSelect = () => null,\n onRemove = () => null,\n onChange, // if this is defined, then it's calculating the next result onSelect or onRemove\n maxWidth,\n minWidth,\n ...menuProps\n}) => {\n const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);\n const [selectedOptions, setSelectedOptions] = useState(value);\n const [allOptions, setAllOptions] = useState(options);\n const [overflowOptions, setOverflowOptions] = useState([]);\n\n const overflowQuantity = 3;\n\n useEffect(() => setSelectedOptions(value), [value]);\n\n useEffect(() => {\n const newOptions = allOptions.filter((option) => option.fixedItem);\n if (newOptions.length > 0) {\n setSelectedOptions(newOptions);\n }\n setTotalDefaultOptions(newOptions.length);\n }, []);\n\n useEffect(() => {\n if (totalDefaultOptions) {\n const newOptions = allOptions.map((opt) => {\n if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {\n return { ...opt, fixedItem: true };\n }\n return { ...opt, fixedItem: false };\n });\n\n setAllOptions(newOptions);\n }\n }, [onSelect, onRemove, selectedOptions]);\n\n useEffect(() => {\n if (selectedOptions.length > overflowQuantity) {\n const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);\n setOverflowOptions(overflow);\n }\n }, [selectedOptions]);\n\n const selectOption = useCallback(\n (option) => {\n if (!option.fixedItem) {\n if (isFunction(onChange)) {\n const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onSelect(option);\n }\n },\n [selectedOptions],\n );\n\n const removeOption = useCallback(\n (option) => {\n if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {\n if (isFunction(onChange)) {\n const nextValue = selectedOptions.filter((val) => option.id !== val.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onRemove(option);\n }\n },\n [selectedOptions],\n );\n\n const typeOfPill = () => {\n if (selectedOptions.length > totalDefaultOptions) {\n return RemovablePill;\n }\n\n return Pill;\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n focusOnOpen={false}\n label={label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: true,\n items: allOptions,\n },\n ]}\n selection={{\n 'multi-selection-views': selectedOptions ? selectedOptions.map((o) => o.id) : '',\n }}\n variant=\"title\"\n />\n {selectedOptions &&\n selectedOptions.map((option, index) => {\n const TypeOfPill = typeOfPill();\n if (index < overflowQuantity) {\n return <TypeOfPill key={option.id} label={option.label} onRemove={() => removeOption(option)} />;\n }\n return null;\n })}\n {selectedOptions && selectedOptions.length > overflowQuantity && (\n <OverflowPill label={`+ ${selectedOptions.length - overflowQuantity}`} options={overflowOptions} />\n )}\n </>\n );\n};\n\nexport { LabeledDropdownMultiPills };\nexport default LabeledDropdownMultiPills;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -38,7 +38,7 @@ var import_InputPill = require("../InputPill");
38
38
  var import_Pill = require("../Pill");
39
39
  var import_RemovablePill = require("../RemovablePill");
40
40
  var import_utils = require("./utils");
41
- function LabeledDropdownSinglePill({
41
+ const LabeledDropdownSinglePill = ({
42
42
  label,
43
43
  labelIsValue = false,
44
44
  options,
@@ -49,7 +49,7 @@ function LabeledDropdownSinglePill({
49
49
  minWidth,
50
50
  fixed = false,
51
51
  ...menuProps
52
- }) {
52
+ }) => {
53
53
  const [optionValue, setOptionValue] = (0, import_react.useState)(value);
54
54
  const prevOptions = (0, import_ds_utilities.usePrevious)(options);
55
55
  const areOptionsEqual = (0, import_ds_utilities.useShouldRecalculate)((0, import_utils.hasOptionChanged)(prevOptions, options));
@@ -146,7 +146,7 @@ function LabeledDropdownSinglePill({
146
146
  renderSelection()
147
147
  ]
148
148
  });
149
- }
149
+ };
150
150
  LabeledDropdownSinglePill.propTypes = {
151
151
  label: import_prop_types.default.string,
152
152
  labelIsValue: import_prop_types.default.bool,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable mdx/no-unused-expressions */\n/* eslint-disable no-shadow */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable max-lines */\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-utilities';\nimport { DropdownPill } from '../DropdownPill';\nimport { InputPill } from '../InputPill';\nimport { Pill } from '../Pill';\nimport { RemovablePill } from '../RemovablePill';\nimport { hasOptionChanged } from './utils';\n\nfunction LabeledDropdownSinglePill({\n label,\n labelIsValue = false,\n options,\n value,\n onSelect = () => null,\n onChange,\n maxWidth,\n minWidth,\n fixed = false,\n ...menuProps\n}) {\n const [optionValue, setOptionValue] = useState(value);\n const prevOptions = usePrevious(options);\n const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));\n\n useEffect(() => setOptionValue(value), [value]);\n\n useEffect(() => {\n const selectedValue = options.find((option) => option.selected);\n\n if (selectedValue) {\n setOptionValue(selectedValue);\n } else if (!selectedValue) {\n setOptionValue(options[0]);\n }\n }, [areOptionsEqual]);\n\n useLayoutEffect(() => {\n if (optionValue) {\n const selectedValue = options.find((option) => option.id === optionValue.id);\n setOptionValue(selectedValue);\n }\n }, [options]);\n\n const selectOption = useCallback(\n (option) => {\n if (isFunction(onChange)) {\n onChange(option);\n }\n setOptionValue(option);\n onSelect(option);\n },\n [onChange, onSelect],\n );\n\n const onChangeInputValue = useCallback(\n ({ target: { value: inputValue } }) => {\n const { onChangeInput } = optionValue;\n\n onChangeInput && onChangeInput(inputValue);\n },\n [optionValue],\n );\n\n const removeOption = (removedOption) => {\n const { onRemove } = menuProps;\n const { onChangeInput } = optionValue;\n setOptionValue(null);\n onChangeInput && onChangeInput('');\n const newOption = { ...removedOption, input: '' };\n onRemove && onRemove(newOption, removedOption);\n };\n\n const renderPill = (option, fixed) => {\n const { input, onChangeInput, ...otherProps } = option;\n let SelectedPill;\n if (isString(input)) {\n SelectedPill = InputPill;\n } else if (fixed) {\n SelectedPill = Pill;\n } else {\n SelectedPill = RemovablePill;\n }\n\n return (\n <SelectedPill\n key={option.id}\n label={option.label}\n onChange={onChangeInputValue}\n onRemove={(e) => removeOption(option, e)}\n value={input}\n {...otherProps}\n />\n );\n };\n\n const renderSelection = () => {\n if (!labelIsValue) {\n if (optionValue) return renderPill(optionValue, fixed);\n return <Pill label=\"-\" />;\n }\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n label={!labelIsValue ? label : optionValue?.label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: false,\n items: options,\n closeOnClick: true,\n },\n ]}\n selection={{\n 'multi-selection-views': optionValue ? [optionValue?.id] : '',\n }}\n variant=\"title\"\n />\n {renderSelection()}\n </>\n );\n}\n\nLabeledDropdownSinglePill.propTypes = {\n label: PropTypes.string,\n labelIsValue: PropTypes.bool,\n options: PropTypes.array,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onSelect: PropTypes.func,\n onChange: PropTypes.func,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n fixed: PropTypes.bool,\n};\n\nexport { LabeledDropdownSinglePill };\nexport default LabeledDropdownSinglePill;", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable mdx/no-unused-expressions */\n/* eslint-disable no-shadow */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable max-lines */\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-utilities';\nimport { DropdownPill } from '../DropdownPill';\nimport { InputPill } from '../InputPill';\nimport { Pill } from '../Pill';\nimport { RemovablePill } from '../RemovablePill';\nimport { hasOptionChanged } from './utils';\n\nconst LabeledDropdownSinglePill = ({\n label,\n labelIsValue = false,\n options,\n value,\n onSelect = () => null,\n onChange,\n maxWidth,\n minWidth,\n fixed = false,\n ...menuProps\n}) => {\n const [optionValue, setOptionValue] = useState(value);\n const prevOptions = usePrevious(options);\n const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));\n\n useEffect(() => setOptionValue(value), [value]);\n\n useEffect(() => {\n const selectedValue = options.find((option) => option.selected);\n\n if (selectedValue) {\n setOptionValue(selectedValue);\n } else if (!selectedValue) {\n setOptionValue(options[0]);\n }\n }, [areOptionsEqual]);\n\n useLayoutEffect(() => {\n if (optionValue) {\n const selectedValue = options.find((option) => option.id === optionValue.id);\n setOptionValue(selectedValue);\n }\n }, [options]);\n\n const selectOption = useCallback(\n (option) => {\n if (isFunction(onChange)) {\n onChange(option);\n }\n setOptionValue(option);\n onSelect(option);\n },\n [onChange, onSelect],\n );\n\n const onChangeInputValue = useCallback(\n ({ target: { value: inputValue } }) => {\n const { onChangeInput } = optionValue;\n\n onChangeInput && onChangeInput(inputValue);\n },\n [optionValue],\n );\n\n const removeOption = (removedOption) => {\n const { onRemove } = menuProps;\n const { onChangeInput } = optionValue;\n setOptionValue(null);\n onChangeInput && onChangeInput('');\n const newOption = { ...removedOption, input: '' };\n onRemove && onRemove(newOption, removedOption);\n };\n\n const renderPill = (option, fixed) => {\n const { input, onChangeInput, ...otherProps } = option;\n let SelectedPill;\n if (isString(input)) {\n SelectedPill = InputPill;\n } else if (fixed) {\n SelectedPill = Pill;\n } else {\n SelectedPill = RemovablePill;\n }\n\n return (\n <SelectedPill\n key={option.id}\n label={option.label}\n onChange={onChangeInputValue}\n onRemove={(e) => removeOption(option, e)}\n value={input}\n {...otherProps}\n />\n );\n };\n\n const renderSelection = () => {\n if (!labelIsValue) {\n if (optionValue) return renderPill(optionValue, fixed);\n return <Pill label=\"-\" />;\n }\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n label={!labelIsValue ? label : optionValue?.label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: false,\n items: options,\n closeOnClick: true,\n },\n ]}\n selection={{\n 'multi-selection-views': optionValue ? [optionValue?.id] : '',\n }}\n variant=\"title\"\n />\n {renderSelection()}\n </>\n );\n};\n\nLabeledDropdownSinglePill.propTypes = {\n label: PropTypes.string,\n labelIsValue: PropTypes.bool,\n options: PropTypes.array,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onSelect: PropTypes.func,\n onChange: PropTypes.func,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n fixed: PropTypes.bool,\n};\n\nexport { LabeledDropdownSinglePill };\nexport default LabeledDropdownSinglePill;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["fixed", "PropTypes"]
7
7
  }
@@ -34,37 +34,25 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
34
34
  var import_PillGroup = require("./PillGroup");
35
35
  var import_RemovablePill = require("./RemovablePill");
36
36
  var import_Pill = require("./Pill");
37
- function LabeledPills({
38
- children,
39
- label = "",
40
- leftAddon,
37
+ const LabeledPills = ({ children, label = "", leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_PillGroup.PillGroup, {
41
38
  onFocusGroupSet,
42
39
  onFocusNextGroup,
43
- onFocusPreviousGroup
44
- }) {
45
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_PillGroup.PillGroup, {
46
- onFocusGroupSet,
47
- onFocusNextGroup,
48
- onFocusPreviousGroup,
49
- children: [
50
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, {
51
- label,
52
- leftAddon,
53
- variant: "title",
54
- "data-testid": "pill-title"
55
- }),
56
- children
57
- ]
58
- });
59
- }
40
+ onFocusPreviousGroup,
41
+ children: [
42
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, {
43
+ label,
44
+ leftAddon,
45
+ variant: "title",
46
+ "data-testid": "pill-title"
47
+ }),
48
+ children
49
+ ]
50
+ });
60
51
  const props = {
61
52
  label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
62
53
  children: import_ds_utilities.PropTypes.arrayOf(
63
54
  import_ds_utilities.PropTypes.shape({
64
- type: import_ds_utilities.PropTypes.oneOf([
65
- import_ds_utilities.PropTypes.instanceOf(import_Pill.Pill),
66
- import_ds_utilities.PropTypes.instanceOf(import_RemovablePill.RemovablePill)
67
- ])
55
+ type: import_ds_utilities.PropTypes.oneOf([import_ds_utilities.PropTypes.instanceOf(import_Pill.Pill), import_ds_utilities.PropTypes.instanceOf(import_RemovablePill.RemovablePill)])
68
56
  })
69
57
  ).isRequired.description("pill to add the label to"),
70
58
  leftAddon: import_ds_utilities.PropTypes.node.description("addon component to left"),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/LabeledPills.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { RemovablePill } from './RemovablePill';\nimport { Pill } from './Pill';\n\nfunction LabeledPills({\n children,\n label = '',\n leftAddon,\n onFocusGroupSet,\n onFocusNextGroup,\n onFocusPreviousGroup,\n}) {\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <Pill\n label={label}\n leftAddon={leftAddon}\n variant=\"title\"\n data-testid=\"pill-title\"\n />\n {children}\n </PillGroup>\n );\n}\n\nconst props = {\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill to add the label to */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf([\n PropTypes.instanceOf(Pill),\n PropTypes.instanceOf(RemovablePill),\n ]),\n }),\n ).isRequired.description('pill to add the label to'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\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};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAdJ,0BAAoC;AACpC,uBAA0B;AAC1B,2BAA8B;AAC9B,kBAAqB;AAErB,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SACE,6CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,kDAAC;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR,eAAY;AAAA,OACd;AAAA,MACC;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,8BAAU;AAAA,IAClB,8BAAU,MAAM;AAAA,MACd,MAAM,8BAAU,MAAM;AAAA,QACpB,8BAAU,WAAW,gBAAI;AAAA,QACzB,8BAAU,WAAW,kCAAa;AAAA,MACpC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA,EAEnD,WAAW,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,kBAAkB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,8BAAU,KAAK,YAAY,0BAA0B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
4
+ "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { RemovablePill } from './RemovablePill';\nimport { Pill } from './Pill';\n\nconst LabeledPills = ({ children, label = '', leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <Pill label={label} leftAddon={leftAddon} variant=\"title\" data-testid=\"pill-title\" />\n {children}\n </PillGroup>\n);\n\nconst props = {\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill to add the label to */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)]),\n }),\n ).isRequired.description('pill to add the label to'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\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};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOrB;AANF,0BAAoC;AACpC,uBAA0B;AAC1B,2BAA8B;AAC9B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,UAAU,QAAQ,IAAI,WAAW,iBAAiB,kBAAkB,qBAAqB,MAC/G,6CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,gDAAC;AAAA,MAAK;AAAA,MAAc;AAAA,MAAsB,SAAQ;AAAA,MAAQ,eAAY;AAAA,KAAa;AAAA,IAClF;AAAA;AAAA,CACH;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,8BAAU;AAAA,IAClB,8BAAU,MAAM;AAAA,MACd,MAAM,8BAAU,MAAM,CAAC,8BAAU,WAAW,gBAAI,GAAG,8BAAU,WAAW,kCAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA,EAEnD,WAAW,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,kBAAkB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,8BAAU,KAAK,YAAY,0BAA0B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -35,7 +35,7 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
35
35
  var import_ds_shared = require("@elliemae/ds-shared");
36
36
  var import_ds_tooltip = require("@elliemae/ds-tooltip");
37
37
  var import_Pill = require("./Pill");
38
- function OverflowPill({ containerProps = {}, label = "", options = [] }) {
38
+ const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
39
39
  const ref = (0, import_react.useRef)(null);
40
40
  const [tooltipIsOpen, setTooltipIsOpen] = (0, import_react.useState)(false);
41
41
  const [tooltipText, setTooltipText] = (0, import_react.useState)("");
@@ -65,7 +65,7 @@ function OverflowPill({ containerProps = {}, label = "", options = [] }) {
65
65
  onMouseLeave: () => setTooltipIsOpen(false)
66
66
  })
67
67
  });
68
- }
68
+ };
69
69
  const props = {
70
70
  containerProps: import_ds_utilities.PropTypes.object.description("props to inject to pill wrapper"),
71
71
  label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/OverflowPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\n\nfunction OverflowPill({ containerProps = {}, label = '', options = [] }) {\n const ref = useRef(null);\n const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n const [tooltipText, setTooltipText] = useState('');\n\n useEffect(() => {\n let text = '';\n options.forEach((option) => {\n if (!tooltipText || option === options[0]) {\n text = `${option.label}`;\n } else {\n text = text.concat(`, ${option.label}`);\n }\n });\n setTooltipText(text);\n }, [options]);\n\n useFocusGroupItem(ref);\n\n return (\n <DSTooltip\n isOpen={tooltipIsOpen}\n title={tooltipText}\n zIndex={11}\n triggerComponent={\n <Pill\n className=\"overflow-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n tabIndex={-1}\n onMouseEnter={() => setTooltipIsOpen(true)}\n onMouseLeave={() => setTooltipIsOpen(false)}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** overflow pills options */\n options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nOverflowPill.displayName = 'OverflowPill';\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA/BR,mBAAmD;AACnD,0BAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,SAAS,aAAa,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,GAAG;AACvE,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,8BAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,0CAAkB,GAAG;AAErB,SACE,4CAAC;AAAA,IACC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,4CAAC;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,MACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,KAC5C;AAAA,GAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EAE9E,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,8BAAU,MAAM,YAAY,wBAAwB;AAC/D;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
4
+ "sourcesContent": ["import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\n\nconst OverflowPill = ({ containerProps = {}, label = '', options = [] }) => {\n const ref = useRef(null);\n const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n const [tooltipText, setTooltipText] = useState('');\n\n useEffect(() => {\n let text = '';\n options.forEach((option) => {\n if (!tooltipText || option === options[0]) {\n text = `${option.label}`;\n } else {\n text = text.concat(`, ${option.label}`);\n }\n });\n setTooltipText(text);\n }, [options]);\n\n useFocusGroupItem(ref);\n\n return (\n <DSTooltip\n isOpen={tooltipIsOpen}\n title={tooltipText}\n zIndex={11}\n triggerComponent={\n <Pill\n className=\"overflow-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n tabIndex={-1}\n onMouseEnter={() => setTooltipIsOpen(true)}\n onMouseLeave={() => setTooltipIsOpen(false)}\n />\n }\n />\n );\n};\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** overflow pills options */\n options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nOverflowPill.displayName = 'OverflowPill';\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA/BR,mBAAmD;AACnD,0BAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,MAAM;AAC1E,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,8BAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,0CAAkB,GAAG;AAErB,SACE,4CAAC;AAAA,IACC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,4CAAC;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,MACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,KAC5C;AAAA,GAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EAE9E,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,8BAAU,MAAM,YAAY,wBAAwB;AAC/D;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -34,17 +34,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
34
34
  var import_ds_utilities = require("@elliemae/ds-utilities");
35
35
  var import_ds_classnames = require("@elliemae/ds-classnames");
36
36
  const pillBlockName = "pill";
37
- const PillWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(
38
- pillBlockName,
39
- null,
40
- ({ size, variant }) => ({
41
- [variant]: !!variant,
42
- [size]: !!size
43
- })
44
- );
37
+ const PillWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(pillBlockName, null, ({ size, variant }) => ({
38
+ [variant]: !!variant,
39
+ [size]: !!size
40
+ }));
45
41
  const PillLabel = (0, import_ds_classnames.aggregatedClasses)("span")(pillBlockName, "label");
46
42
  const PillAddon = (0, import_ds_classnames.aggregatedClasses)("div")(pillBlockName, "addon");
47
- function Pill({
43
+ const Pill = ({
48
44
  containerProps = {},
49
45
  label = "",
50
46
  leftAddon,
@@ -52,28 +48,24 @@ function Pill({
52
48
  variant = "value",
53
49
  size = "m",
54
50
  ...otherProps
55
- }) {
56
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PillWrapper, {
57
- ...containerProps,
58
- classProps: { variant, size },
59
- ...otherProps,
60
- children: [
61
- leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, {
62
- children: leftAddon
63
- }),
64
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillLabel, {
65
- children: label
66
- }),
67
- rightAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, {
68
- children: rightAddon
69
- })
70
- ]
71
- });
72
- }
51
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PillWrapper, {
52
+ ...containerProps,
53
+ classProps: { variant, size },
54
+ ...otherProps,
55
+ children: [
56
+ leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, {
57
+ children: leftAddon
58
+ }),
59
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillLabel, {
60
+ children: label
61
+ }),
62
+ rightAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, {
63
+ children: rightAddon
64
+ })
65
+ ]
66
+ });
73
67
  const props = {
74
- containerProps: import_ds_utilities.PropTypes.object.description(
75
- "props to inject to pill wrapper"
76
- ),
68
+ containerProps: import_ds_utilities.PropTypes.object.description("props to inject to pill wrapper"),
77
69
  label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
78
70
  size: import_ds_utilities.PropTypes.oneOf(["m", "l"]).description("pill size"),
79
71
  variant: import_ds_utilities.PropTypes.oneOf(["value", "title"]).description("pill variant"),