@elliemae/ds-legacy-pills 1.0.0-rc.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 (78) hide show
  1. package/dist/cjs/deprecated/DropdownPill.js +103 -0
  2. package/dist/cjs/deprecated/DropdownPill.js.map +7 -0
  3. package/dist/cjs/deprecated/InputPill.js +87 -0
  4. package/dist/cjs/deprecated/InputPill.js.map +7 -0
  5. package/dist/cjs/deprecated/LabeledDropdownPills.js +112 -0
  6. package/dist/cjs/deprecated/LabeledDropdownPills.js.map +7 -0
  7. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +134 -0
  8. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +7 -0
  9. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +154 -0
  10. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +7 -0
  11. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +169 -0
  12. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +7 -0
  13. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +45 -0
  14. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js.map +7 -0
  15. package/dist/cjs/deprecated/LabeledPills.js +86 -0
  16. package/dist/cjs/deprecated/LabeledPills.js.map +7 -0
  17. package/dist/cjs/deprecated/OverflowPill.js +93 -0
  18. package/dist/cjs/deprecated/OverflowPill.js.map +7 -0
  19. package/dist/cjs/deprecated/Pill.js +83 -0
  20. package/dist/cjs/deprecated/Pill.js.map +7 -0
  21. package/dist/cjs/deprecated/PillGroup.js +74 -0
  22. package/dist/cjs/deprecated/PillGroup.js.map +7 -0
  23. package/dist/cjs/deprecated/ReadOnlyPill.js +124 -0
  24. package/dist/cjs/deprecated/ReadOnlyPill.js.map +7 -0
  25. package/dist/cjs/deprecated/RemovablePill.js +86 -0
  26. package/dist/cjs/deprecated/RemovablePill.js.map +7 -0
  27. package/dist/cjs/deprecated/index.js +45 -0
  28. package/dist/cjs/deprecated/index.js.map +7 -0
  29. package/dist/cjs/index.js +39 -0
  30. package/dist/cjs/index.js.map +7 -0
  31. package/dist/cjs/package.json +7 -0
  32. package/dist/esm/deprecated/DropdownPill.js +73 -0
  33. package/dist/esm/deprecated/DropdownPill.js.map +7 -0
  34. package/dist/esm/deprecated/InputPill.js +57 -0
  35. package/dist/esm/deprecated/InputPill.js.map +7 -0
  36. package/dist/esm/deprecated/LabeledDropdownPills.js +82 -0
  37. package/dist/esm/deprecated/LabeledDropdownPills.js.map +7 -0
  38. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +104 -0
  39. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +7 -0
  40. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +124 -0
  41. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +7 -0
  42. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +139 -0
  43. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +7 -0
  44. package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js +15 -0
  45. package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map +7 -0
  46. package/dist/esm/deprecated/LabeledPills.js +56 -0
  47. package/dist/esm/deprecated/LabeledPills.js.map +7 -0
  48. package/dist/esm/deprecated/OverflowPill.js +63 -0
  49. package/dist/esm/deprecated/OverflowPill.js.map +7 -0
  50. package/dist/esm/deprecated/Pill.js +53 -0
  51. package/dist/esm/deprecated/Pill.js.map +7 -0
  52. package/dist/esm/deprecated/PillGroup.js +44 -0
  53. package/dist/esm/deprecated/PillGroup.js.map +7 -0
  54. package/dist/esm/deprecated/ReadOnlyPill.js +94 -0
  55. package/dist/esm/deprecated/ReadOnlyPill.js.map +7 -0
  56. package/dist/esm/deprecated/RemovablePill.js +56 -0
  57. package/dist/esm/deprecated/RemovablePill.js.map +7 -0
  58. package/dist/esm/deprecated/index.js +14 -0
  59. package/dist/esm/deprecated/index.js.map +7 -0
  60. package/dist/esm/index.js +8 -0
  61. package/dist/esm/index.js.map +7 -0
  62. package/dist/esm/package.json +7 -0
  63. package/dist/types/deprecated/DropdownPill.d.ts +40 -0
  64. package/dist/types/deprecated/InputPill.d.ts +9 -0
  65. package/dist/types/deprecated/LabeledDropdownPills.d.ts +52 -0
  66. package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.d.ts +16 -0
  67. package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.d.ts +13 -0
  68. package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.d.ts +28 -0
  69. package/dist/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +1 -0
  70. package/dist/types/deprecated/LabeledPills.d.ts +38 -0
  71. package/dist/types/deprecated/OverflowPill.d.ts +26 -0
  72. package/dist/types/deprecated/Pill.d.ts +37 -0
  73. package/dist/types/deprecated/PillGroup.d.ts +32 -0
  74. package/dist/types/deprecated/ReadOnlyPill.d.ts +33 -0
  75. package/dist/types/deprecated/RemovablePill.d.ts +34 -0
  76. package/dist/types/deprecated/index.d.ts +9 -0
  77. package/dist/types/index.d.ts +3 -0
  78. package/package.json +195 -0
@@ -0,0 +1,82 @@
1
+ import * as React from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { useDeprecateComponent } from "@elliemae/ds-legacy-utilities";
4
+ import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
5
+ import { PillGroup } from "./PillGroup.js";
6
+ import { LabeledDropdownSinglePill } from "./LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js";
7
+ import { LabeledDropdownMultiPills } from "./LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js";
8
+ import { LabeledDropdownCascadeMenuPill } from "./LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js";
9
+ const DropdownPills = {
10
+ single: LabeledDropdownSinglePill,
11
+ multi: LabeledDropdownMultiPills,
12
+ cascaded: LabeledDropdownCascadeMenuPill
13
+ };
14
+ const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
15
+ const LabeledDropdownPills = ({
16
+ label = "",
17
+ value,
18
+ type,
19
+ onFocusNextGroup,
20
+ onFocusPreviousGroup,
21
+ onFocusGroupSet,
22
+ maxWidth,
23
+ minWidth,
24
+ fixed,
25
+ className,
26
+ ...menuProps
27
+ }) => {
28
+ const Component = createDropdownPill(type);
29
+ useDeprecateComponent({ componentName: "ds-pills", version: "TBD Date: 2023 Q3" });
30
+ return /* @__PURE__ */ jsx(
31
+ PillGroup,
32
+ {
33
+ onFocusGroupSet,
34
+ onFocusNextGroup,
35
+ onFocusPreviousGroup,
36
+ containerProps: { className },
37
+ children: /* @__PURE__ */ jsx(Component, { ...menuProps, label, maxWidth, minWidth, value, fixed })
38
+ }
39
+ );
40
+ };
41
+ const props = {
42
+ /** pill type */
43
+ type: PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
44
+ /** focus next group callback */
45
+ onFocusNextGroup: PropTypes.func.description("focus next group callback"),
46
+ /** focus prev group callback */
47
+ onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
48
+ /** focus group set callback */
49
+ onFocusGroupSet: PropTypes.func.description("focus group set callback"),
50
+ /** pill max width */
51
+ maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("pill max width"),
52
+ /** pill min width */
53
+ minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("pill min width"),
54
+ /** fixed pill */
55
+ fixed: PropTypes.bool.description("fixed pill"),
56
+ /** pill label text */
57
+ label: PropTypes.string.isRequired.description("pill label text"),
58
+ /** additional className */
59
+ className: PropTypes.string.description("Additional className"),
60
+ /** pill value */
61
+ value: PropTypes.oneOfType([
62
+ PropTypes.arrayOf(
63
+ PropTypes.shape({
64
+ id: PropTypes.string,
65
+ label: PropTypes.string
66
+ })
67
+ ),
68
+ PropTypes.shape({
69
+ id: PropTypes.string,
70
+ label: PropTypes.string
71
+ })
72
+ ]).description("pill value")
73
+ };
74
+ LabeledDropdownPills.propTypes = props;
75
+ LabeledDropdownPills.displayName = "LabeledDropdownPills";
76
+ const DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);
77
+ DSLabeledDropdownPillsWithSchema.propTypes = props;
78
+ export {
79
+ DSLabeledDropdownPillsWithSchema,
80
+ LabeledDropdownPills
81
+ };
82
+ //# sourceMappingURL=LabeledDropdownPills.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledDropdownPills.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-legacy-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { PillGroup } from './PillGroup.js';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js';\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 className,\n ...menuProps\n}) => {\n const Component = createDropdownPill(type);\n useDeprecateComponent({ componentName: 'ds-pills', version: 'TBD Date: 2023 Q3' });\n\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n containerProps={{ className }}\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 /** additional className */\n className: PropTypes.string.description('Additional className'),\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC2CjB;AAtCN,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,sCAAsC;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,IAAI,KAAK,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,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AACzC,wBAAsB,EAAE,eAAe,YAAY,SAAS,oBAAoB,CAAC;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,EAAE,UAAU;AAAA,MAE5B,8BAAC,aAAW,GAAG,WAAW,OAAc,UAAoB,UAAoB,OAAc,OAAc;AAAA;AAAA,EAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA;AAAA,EAE9E,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA;AAAA,EAEhG,OAAO,UAAU,KAAK,YAAY,YAAY;AAAA;AAAA,EAE9C,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE9D,OAAO,UAAU,UAAU;AAAA,IACzB,UAAU;AAAA,MACR,UAAU,MAAM;AAAA,QACd,IAAI,UAAU;AAAA,QACd,OAAO,UAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,mCAAmC,SAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
6
+ "names": []
7
+ }
@@ -0,0 +1,104 @@
1
+ import * as React from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { createElement } from "react";
4
+ import { isFunction, addOrRemove } from "@elliemae/ds-legacy-utilities";
5
+ import { PillGroup } from "../PillGroup.js";
6
+ import { RemovablePill } from "../RemovablePill.js";
7
+ import { DropdownPill } from "../DropdownPill.js";
8
+ function renderMenuItems(options, factory) {
9
+ return options.map((option, index) => {
10
+ const ItemComponent = factory("radio");
11
+ if (option.type === "submenu") {
12
+ const SubmenuComponent = factory("submenu");
13
+ const ChildComponent = factory("selection-group");
14
+ return /* @__PURE__ */ createElement(SubmenuComponent, { ...option, key: option.id, item: option }, /* @__PURE__ */ jsx(
15
+ ChildComponent,
16
+ {
17
+ ...option,
18
+ id: option.id,
19
+ item: option,
20
+ items: option.items,
21
+ itemValueAccessor: (item) => item,
22
+ multi: true
23
+ }
24
+ ));
25
+ }
26
+ return /* @__PURE__ */ createElement(ItemComponent, { ...option, key: option.id || index, item: option });
27
+ });
28
+ }
29
+ const getSubmenuOptionLabelById = (options, id) => {
30
+ const index = options.findIndex((option) => option.id === id);
31
+ return index ? options[index].label : "";
32
+ };
33
+ const LabeledDropdownCascadeMenuPill = ({
34
+ label,
35
+ options,
36
+ value: optionValue,
37
+ onChange,
38
+ onRemove,
39
+ value: selection = {},
40
+ placeholder = "---",
41
+ onFocusNextGroup,
42
+ onFocusPreviousGroup,
43
+ onFocusGroupSet,
44
+ maxWidth,
45
+ minWidth,
46
+ ...menuProps
47
+ }) => {
48
+ const selectionId = Object.keys(selection)[0];
49
+ const selectionValues = selection[selectionId] || "";
50
+ const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
51
+ const handleSelectChange = ({ item, group }) => {
52
+ if (isFunction(onChange)) {
53
+ const nextSelection = group ? {
54
+ [group.id]: addOrRemove([...selection[group.id] || []], item, (o) => o.id)
55
+ } : {
56
+ [item.id]: item.label
57
+ };
58
+ onChange(nextSelection);
59
+ }
60
+ };
61
+ const removeOption = (option) => {
62
+ if (isFunction(onChange)) {
63
+ const nextSelection = {
64
+ [selectionId]: selectionValues.filter((val) => option.id !== val.id)
65
+ };
66
+ onChange(nextSelection);
67
+ }
68
+ onRemove(option);
69
+ };
70
+ return /* @__PURE__ */ jsxs(
71
+ PillGroup,
72
+ {
73
+ onFocusGroupSet,
74
+ onFocusNextGroup,
75
+ onFocusPreviousGroup,
76
+ children: [
77
+ /* @__PURE__ */ jsx(
78
+ DropdownPill,
79
+ {
80
+ ...menuProps,
81
+ itemsRenderer: renderMenuItems,
82
+ label: dropdownLabel || placeholder,
83
+ maxWidth,
84
+ minWidth,
85
+ onSelectChange: handleSelectChange,
86
+ options,
87
+ selection: {
88
+ [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues
89
+ },
90
+ singleGroupSelection: true,
91
+ variant: "title"
92
+ }
93
+ ),
94
+ Array.isArray(selectionValues) && selectionValues.map((option) => /* @__PURE__ */ jsx(RemovablePill, { label: option.label, onRemove: () => removeOption(option) }, option.id))
95
+ ]
96
+ }
97
+ );
98
+ };
99
+ var LabeledDropdownCascadeMenuPill_default = LabeledDropdownCascadeMenuPill;
100
+ export {
101
+ LabeledDropdownCascadeMenuPill,
102
+ LabeledDropdownCascadeMenuPill_default as default
103
+ };
104
+ //# sourceMappingURL=LabeledDropdownCascadeMenuPill.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-legacy-utilities';\nimport { PillGroup } from '../PillGroup.js';\nimport { RemovablePill } from '../RemovablePill.js';\nimport { DropdownPill } from '../DropdownPill.js';\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"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,124 @@
1
+ import * as React from "react";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ import { useState, useEffect, useCallback } from "react";
4
+ import { find } from "lodash";
5
+ import { isFunction, addOrRemove } from "@elliemae/ds-legacy-utilities";
6
+ import { RemovablePill } from "../RemovablePill.js";
7
+ import { Pill } from "../Pill.js";
8
+ import { OverflowPill } from "../OverflowPill.js";
9
+ import { DropdownPill } from "../DropdownPill.js";
10
+ const LabeledDropdownMultiPills = ({
11
+ label,
12
+ options = [],
13
+ value = [],
14
+ onSelect = () => null,
15
+ onRemove = () => null,
16
+ onChange,
17
+ // if this is defined, then it's calculating the next result onSelect or onRemove
18
+ maxWidth,
19
+ minWidth,
20
+ ...menuProps
21
+ }) => {
22
+ const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);
23
+ const [selectedOptions, setSelectedOptions] = useState(value);
24
+ const [allOptions, setAllOptions] = useState(options);
25
+ const [overflowOptions, setOverflowOptions] = useState([]);
26
+ const overflowQuantity = 3;
27
+ useEffect(() => setSelectedOptions(value), [value]);
28
+ useEffect(() => {
29
+ const newOptions = allOptions.filter((option) => option.fixedItem);
30
+ if (newOptions.length > 0) {
31
+ setSelectedOptions(newOptions);
32
+ }
33
+ setTotalDefaultOptions(newOptions.length);
34
+ }, []);
35
+ useEffect(() => {
36
+ if (totalDefaultOptions) {
37
+ const newOptions = allOptions.map((opt) => {
38
+ if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {
39
+ return { ...opt, fixedItem: true };
40
+ }
41
+ return { ...opt, fixedItem: false };
42
+ });
43
+ setAllOptions(newOptions);
44
+ }
45
+ }, [onSelect, onRemove, selectedOptions]);
46
+ useEffect(() => {
47
+ if (selectedOptions.length > overflowQuantity) {
48
+ const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);
49
+ setOverflowOptions(overflow);
50
+ }
51
+ }, [selectedOptions]);
52
+ const selectOption = useCallback(
53
+ (option) => {
54
+ if (!option.fixedItem) {
55
+ if (isFunction(onChange)) {
56
+ const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);
57
+ setSelectedOptions(nextValue);
58
+ onChange(nextValue);
59
+ }
60
+ onSelect(option);
61
+ }
62
+ },
63
+ [selectedOptions]
64
+ );
65
+ const removeOption = useCallback(
66
+ (option) => {
67
+ if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
68
+ if (isFunction(onChange)) {
69
+ const nextValue = selectedOptions.filter((val) => option.id !== val.id);
70
+ setSelectedOptions(nextValue);
71
+ onChange(nextValue);
72
+ }
73
+ onRemove(option);
74
+ }
75
+ },
76
+ [selectedOptions]
77
+ );
78
+ const typeOfPill = () => {
79
+ if (selectedOptions.length > totalDefaultOptions) {
80
+ return RemovablePill;
81
+ }
82
+ return Pill;
83
+ };
84
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
85
+ /* @__PURE__ */ jsx(
86
+ DropdownPill,
87
+ {
88
+ ...menuProps,
89
+ focusOnOpen: false,
90
+ label,
91
+ maxWidth,
92
+ minWidth,
93
+ onSelectMenuItem: selectOption,
94
+ options: [
95
+ {
96
+ ...menuProps,
97
+ type: "SelectionGroup",
98
+ id: "multi-selection-views",
99
+ multi: true,
100
+ items: allOptions
101
+ }
102
+ ],
103
+ selection: {
104
+ "multi-selection-views": selectedOptions ? selectedOptions.map((o) => o.id) : ""
105
+ },
106
+ variant: "title"
107
+ }
108
+ ),
109
+ selectedOptions && selectedOptions.map((option, index) => {
110
+ const TypeOfPill = typeOfPill();
111
+ if (index < overflowQuantity) {
112
+ return /* @__PURE__ */ jsx(TypeOfPill, { label: option.label, onRemove: () => removeOption(option) }, option.id);
113
+ }
114
+ return null;
115
+ }),
116
+ selectedOptions && selectedOptions.length > overflowQuantity && /* @__PURE__ */ jsx(OverflowPill, { label: `+ ${selectedOptions.length - overflowQuantity}`, options: overflowOptions })
117
+ ] });
118
+ };
119
+ var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
120
+ export {
121
+ LabeledDropdownMultiPills,
122
+ LabeledDropdownMultiPill_default as default
123
+ };
124
+ //# sourceMappingURL=LabeledDropdownMultiPill.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-legacy-utilities';\nimport { RemovablePill } from '../RemovablePill.js';\nimport { Pill } from '../Pill.js';\nimport { OverflowPill } from '../OverflowPill.js';\nimport { DropdownPill } from '../DropdownPill.js';\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"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,139 @@
1
+ import * as React from "react";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ import { useCallback, useState, useEffect, useLayoutEffect } from "react";
4
+ import PropTypes from "prop-types";
5
+ import { isFunction, isString, useShouldRecalculate, usePrevious } from "@elliemae/ds-legacy-utilities";
6
+ import { DropdownPill } from "../DropdownPill.js";
7
+ import { InputPill } from "../InputPill.js";
8
+ import { Pill } from "../Pill.js";
9
+ import { RemovablePill } from "../RemovablePill.js";
10
+ import { hasOptionChanged } from "./utils.js";
11
+ const LabeledDropdownSinglePill = ({
12
+ label,
13
+ labelIsValue = false,
14
+ options,
15
+ value,
16
+ onSelect = () => null,
17
+ onChange,
18
+ maxWidth,
19
+ minWidth,
20
+ fixed = false,
21
+ ...menuProps
22
+ }) => {
23
+ const [optionValue, setOptionValue] = useState(value);
24
+ const prevOptions = usePrevious(options);
25
+ const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));
26
+ useEffect(() => setOptionValue(value), [value]);
27
+ useEffect(() => {
28
+ const selectedValue = options.find((option) => option.selected);
29
+ if (selectedValue) {
30
+ setOptionValue(selectedValue);
31
+ } else if (!selectedValue) {
32
+ setOptionValue(options[0]);
33
+ }
34
+ }, [areOptionsEqual]);
35
+ useLayoutEffect(() => {
36
+ if (optionValue) {
37
+ const selectedValue = options.find((option) => option.id === optionValue.id);
38
+ setOptionValue(selectedValue);
39
+ }
40
+ }, [options]);
41
+ const selectOption = useCallback(
42
+ (option) => {
43
+ if (isFunction(onChange)) {
44
+ onChange(option);
45
+ }
46
+ setOptionValue(option);
47
+ onSelect(option);
48
+ },
49
+ [onChange, onSelect]
50
+ );
51
+ const onChangeInputValue = useCallback(
52
+ ({ target: { value: inputValue } }) => {
53
+ const { onChangeInput } = optionValue;
54
+ onChangeInput && onChangeInput(inputValue);
55
+ },
56
+ [optionValue]
57
+ );
58
+ const removeOption = (removedOption) => {
59
+ const { onRemove } = menuProps;
60
+ const { onChangeInput } = optionValue;
61
+ setOptionValue(null);
62
+ onChangeInput && onChangeInput("");
63
+ const newOption = { ...removedOption, input: "" };
64
+ onRemove && onRemove(newOption, removedOption);
65
+ };
66
+ const renderPill = (option, fixed2) => {
67
+ const { input, onChangeInput, ...otherProps } = option;
68
+ let SelectedPill;
69
+ if (isString(input)) {
70
+ SelectedPill = InputPill;
71
+ } else if (fixed2) {
72
+ SelectedPill = Pill;
73
+ } else {
74
+ SelectedPill = RemovablePill;
75
+ }
76
+ return /* @__PURE__ */ jsx(
77
+ SelectedPill,
78
+ {
79
+ label: option.label,
80
+ onChange: onChangeInputValue,
81
+ onRemove: (e) => removeOption(option, e),
82
+ value: input,
83
+ ...otherProps
84
+ },
85
+ option.id
86
+ );
87
+ };
88
+ const renderSelection = () => {
89
+ if (!labelIsValue) {
90
+ if (optionValue)
91
+ return renderPill(optionValue, fixed);
92
+ return /* @__PURE__ */ jsx(Pill, { label: "-" });
93
+ }
94
+ };
95
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
96
+ /* @__PURE__ */ jsx(
97
+ DropdownPill,
98
+ {
99
+ ...menuProps,
100
+ label: !labelIsValue ? label : optionValue?.label,
101
+ maxWidth,
102
+ minWidth,
103
+ onSelectMenuItem: selectOption,
104
+ options: [
105
+ {
106
+ ...menuProps,
107
+ type: "SelectionGroup",
108
+ id: "multi-selection-views",
109
+ multi: false,
110
+ items: options,
111
+ closeOnClick: true
112
+ }
113
+ ],
114
+ selection: {
115
+ "multi-selection-views": optionValue ? [optionValue?.id] : ""
116
+ },
117
+ variant: "title"
118
+ }
119
+ ),
120
+ renderSelection()
121
+ ] });
122
+ };
123
+ LabeledDropdownSinglePill.propTypes = {
124
+ label: PropTypes.string,
125
+ labelIsValue: PropTypes.bool,
126
+ options: PropTypes.array,
127
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
128
+ onSelect: PropTypes.func,
129
+ onChange: PropTypes.func,
130
+ maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
131
+ minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
132
+ fixed: PropTypes.bool
133
+ };
134
+ var LabeledDropdownSinglePill_default = LabeledDropdownSinglePill;
135
+ export {
136
+ LabeledDropdownSinglePill,
137
+ LabeledDropdownSinglePill_default as default
138
+ };
139
+ //# sourceMappingURL=LabeledDropdownSinglePill.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-legacy-utilities';\nimport { DropdownPill } from '../DropdownPill.js';\nimport { InputPill } from '../InputPill.js';\nimport { Pill } from '../Pill.js';\nimport { RemovablePill } from '../RemovablePill.js';\nimport { hasOptionChanged } from './utils.js';\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"],
5
+ "mappings": "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",
6
+ "names": ["fixed"]
7
+ }
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import { isEqual } from "@elliemae/ds-legacy-utilities";
3
+ import { omit } from "lodash";
4
+ const hasOptionChanged = (prevOptions, options) => {
5
+ if (prevOptions && options) {
6
+ const prevOptionsOmited = prevOptions.map((option) => omit(option, ["input", "onChangeInput", "mask"]));
7
+ const optionsOmited = options.map((option) => omit(option, ["input", "onChangeInput", "mask"]));
8
+ return isEqual(prevOptionsOmited, optionsOmited);
9
+ }
10
+ return false;
11
+ };
12
+ export {
13
+ hasOptionChanged
14
+ };
15
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/utils.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { isEqual } from '@elliemae/ds-legacy-utilities';\nimport { omit } from 'lodash';\n\nexport const hasOptionChanged = (prevOptions, options) => {\n if (prevOptions && options) {\n const prevOptionsOmited = prevOptions.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n const optionsOmited = options.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n\n return isEqual(prevOptionsOmited, optionsOmited);\n }\n\n return false;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,eAAe;AACxB,SAAS,YAAY;AAEd,MAAM,mBAAmB,CAAC,aAAa,YAAY;AACxD,MAAI,eAAe,SAAS;AAC1B,UAAM,oBAAoB,YAAY,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB,MAAM,CAAC,CAAC;AACtG,UAAM,gBAAgB,QAAQ,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB,MAAM,CAAC,CAAC;AAE9F,WAAO,QAAQ,mBAAmB,aAAa;AAAA,EACjD;AAEA,SAAO;AACT;",
6
+ "names": []
7
+ }
@@ -0,0 +1,56 @@
1
+ import * as React from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
4
+ import { PillGroup } from "./PillGroup.js";
5
+ import { RemovablePill } from "./RemovablePill.js";
6
+ import { Pill } from "./Pill.js";
7
+ const LabeledPills = ({
8
+ children,
9
+ label = "",
10
+ leftAddon,
11
+ onFocusGroupSet,
12
+ onFocusNextGroup,
13
+ onFocusPreviousGroup,
14
+ className
15
+ }) => /* @__PURE__ */ jsxs(
16
+ PillGroup,
17
+ {
18
+ onFocusGroupSet,
19
+ onFocusNextGroup,
20
+ onFocusPreviousGroup,
21
+ containerProps: { className },
22
+ children: [
23
+ /* @__PURE__ */ jsx(Pill, { label, leftAddon, variant: "title", "data-testid": "pill-title" }),
24
+ children
25
+ ]
26
+ }
27
+ );
28
+ const props = {
29
+ /** labeled pill text label */
30
+ label: PropTypes.string.isRequired.description("pill text label"),
31
+ /** pill to add the label to */
32
+ children: PropTypes.arrayOf(
33
+ PropTypes.shape({
34
+ type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)])
35
+ })
36
+ ).isRequired.description("pill to add the label to"),
37
+ /** addon component to left */
38
+ leftAddon: PropTypes.node.description("addon component to left"),
39
+ /** focus next group callback */
40
+ onFocusNextGroup: PropTypes.func.description("focus next group callback"),
41
+ /** focus prev group callback */
42
+ onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
43
+ /** focus group set callback */
44
+ onFocusGroupSet: PropTypes.func.description("focus group set callback"),
45
+ /** additional className */
46
+ className: PropTypes.string.description("Additional className")
47
+ };
48
+ LabeledPills.propTypes = props;
49
+ LabeledPills.displayName = "LabeledPills";
50
+ const DSLabeledPillsWithSchema = describe(LabeledPills);
51
+ DSLabeledPillsWithSchema.propTypes = props;
52
+ export {
53
+ DSLabeledPillsWithSchema,
54
+ LabeledPills
55
+ };
56
+ //# sourceMappingURL=LabeledPills.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledPills.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { PillGroup } from './PillGroup.js';\nimport { RemovablePill } from './RemovablePill.js';\nimport { Pill } from './Pill.js';\n\nconst LabeledPills = ({\n children,\n label = '',\n leftAddon,\n onFocusGroupSet,\n onFocusNextGroup,\n onFocusPreviousGroup,\n className,\n}) => (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n containerProps={{ className }}\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 /** additional className */\n className: PropTypes.string.description('Additional className'),\n};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACmBrB,SAME,KANF;AAdF,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,EAAE,UAAU;AAAA,IAE5B;AAAA,0BAAC,QAAK,OAAc,WAAsB,SAAQ,SAAQ,eAAY,cAAa;AAAA,MAClF;AAAA;AAAA;AACH;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA;AAAA,EAEhE,UAAU,UAAU;AAAA,IAClB,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,MAAM,CAAC,UAAU,WAAW,IAAI,GAAG,UAAU,WAAW,aAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA;AAAA,EAEnD,WAAW,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE/D,kBAAkB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAExE,sBAAsB,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAE5E,iBAAiB,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAEtE,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAChE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY;AACtD,yBAAyB,YAAY;",
6
+ "names": []
7
+ }