@elliemae/ds-pills 3.0.0-alpha.0 → 3.0.0-alpha.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 (93) hide show
  1. package/dist/cjs/components/Pill.js +15 -3
  2. package/dist/cjs/components/Pill.js.map +1 -1
  3. package/dist/cjs/components/PillButton.js +32 -4
  4. package/dist/cjs/components/PillButton.js.map +1 -1
  5. package/dist/cjs/components/PillGroup.js +34 -6
  6. package/dist/cjs/components/PillGroup.js.map +2 -2
  7. package/dist/cjs/components/types/DropdownPill.js +21 -4
  8. package/dist/cjs/components/types/DropdownPill.js.map +1 -1
  9. package/dist/cjs/components/types/RemovablePill.js +17 -6
  10. package/dist/cjs/components/types/RemovablePill.js.map +2 -2
  11. package/dist/cjs/deprecated/DropdownPill.js +50 -14
  12. package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
  13. package/dist/cjs/deprecated/InputPill.js +46 -14
  14. package/dist/cjs/deprecated/InputPill.js.map +1 -1
  15. package/dist/cjs/deprecated/LabeledDropdownPills.js +53 -15
  16. package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
  17. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +64 -26
  18. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
  19. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +55 -19
  20. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
  21. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +60 -24
  22. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
  23. package/dist/cjs/deprecated/Pill.js +48 -14
  24. package/dist/cjs/deprecated/Pill.js.map +1 -1
  25. package/dist/cjs/deprecated/PillGroup.js +15 -3
  26. package/dist/cjs/deprecated/PillGroup.js.map +1 -1
  27. package/dist/cjs/index.d.js.map +1 -1
  28. package/dist/cjs/props.js +2 -1
  29. package/dist/cjs/props.js.map +2 -2
  30. package/dist/esm/components/Pill.js +17 -3
  31. package/dist/esm/components/Pill.js.map +1 -1
  32. package/dist/esm/components/PillButton.js +34 -4
  33. package/dist/esm/components/PillButton.js.map +1 -1
  34. package/dist/esm/components/PillGroup.js +41 -6
  35. package/dist/esm/components/PillGroup.js.map +2 -2
  36. package/dist/esm/components/types/DropdownPill.js +23 -4
  37. package/dist/esm/components/types/DropdownPill.js.map +1 -1
  38. package/dist/esm/components/types/RemovablePill.js +17 -6
  39. package/dist/esm/components/types/RemovablePill.js.map +2 -2
  40. package/dist/esm/deprecated/DropdownPill.js +52 -14
  41. package/dist/esm/deprecated/DropdownPill.js.map +1 -1
  42. package/dist/esm/deprecated/InputPill.js +48 -14
  43. package/dist/esm/deprecated/InputPill.js.map +1 -1
  44. package/dist/esm/deprecated/LabeledDropdownPills.js +55 -15
  45. package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
  46. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +66 -26
  47. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
  48. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +57 -19
  49. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
  50. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +62 -24
  51. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
  52. package/dist/esm/deprecated/Pill.js +50 -14
  53. package/dist/esm/deprecated/Pill.js.map +1 -1
  54. package/dist/esm/deprecated/PillGroup.js +17 -3
  55. package/dist/esm/deprecated/PillGroup.js.map +1 -1
  56. package/dist/esm/props.js +2 -1
  57. package/dist/esm/props.js.map +2 -2
  58. package/package.json +16 -15
  59. package/dist/types/components/Pill.d.ts +0 -5
  60. package/dist/types/components/PillButton.d.ts +0 -5
  61. package/dist/types/components/PillGroup.d.ts +0 -13
  62. package/dist/types/components/index.d.ts +0 -3
  63. package/dist/types/components/styled.d.ts +0 -24
  64. package/dist/types/components/types/DropdownPill.d.ts +0 -3
  65. package/dist/types/components/types/InputPill.d.ts +0 -3
  66. package/dist/types/components/types/LabelPill.d.ts +0 -3
  67. package/dist/types/components/types/ReadOnlyPill.d.ts +0 -3
  68. package/dist/types/components/types/RemovablePill.d.ts +0 -3
  69. package/dist/types/components/types/ValuePill.d.ts +0 -3
  70. package/dist/types/components/types/index.d.ts +0 -6
  71. package/dist/types/deprecated/DropdownPill.d.ts +0 -66
  72. package/dist/types/deprecated/InputPill.d.ts +0 -10
  73. package/dist/types/deprecated/LabeledDropdownPills.d.ts +0 -82
  74. package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.d.ts +0 -17
  75. package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.d.ts +0 -15
  76. package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.d.ts +0 -29
  77. package/dist/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +0 -1
  78. package/dist/types/deprecated/LabeledPills.d.ts +0 -52
  79. package/dist/types/deprecated/OverflowPill.d.ts +0 -33
  80. package/dist/types/deprecated/Pill.d.ts +0 -59
  81. package/dist/types/deprecated/PillGroup.d.ts +0 -50
  82. package/dist/types/deprecated/ReadOnlyPill.d.ts +0 -56
  83. package/dist/types/deprecated/RemovablePill.d.ts +0 -49
  84. package/dist/types/deprecated/index.d.ts +0 -9
  85. package/dist/types/index.d.ts +0 -3
  86. package/dist/types/props.d.ts +0 -92
  87. package/dist/types/tests/DSPill.test.d.ts +0 -1
  88. package/dist/types/tests/DSPillGroup.test.d.ts +0 -1
  89. package/dist/types/tests/events/DSPill.events.keyboard.test.d.ts +0 -1
  90. package/dist/types/tests/events/DSPill.events.test.d.ts +0 -1
  91. package/dist/types/tests/events/DSPillGroup.events.keyboard.test.d.ts +0 -1
  92. package/dist/types/tests/events/DSPillGroup.events.test.d.ts +0 -1
  93. package/dist/types/utils.d.ts +0 -4
@@ -2,8 +2,22 @@ var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
6
  var __getProtoOf = Object.getPrototypeOf;
6
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
7
21
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
22
  var __export = (target, all) => {
9
23
  for (var name in all)
@@ -49,9 +63,7 @@ const DSPillV2 = (props) => {
49
63
  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillV2PropTypes);
50
64
  const { type } = propsWithDefaults;
51
65
  const PillComponent = pillComponentGetter[type];
52
- return /* @__PURE__ */ import_react.default.createElement(PillComponent, {
53
- ...propsWithDefaults
54
- });
66
+ return /* @__PURE__ */ import_react.default.createElement(PillComponent, __spreadValues({}, propsWithDefaults));
55
67
  };
56
68
  DSPillV2.propTypes = import_props.DSPillV2PropTypes;
57
69
  const DSPillV2WithSchema = (0, import_react_desc.describe)(DSPillV2).description("Pill");
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Pill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n dropdown: DropdownPill,\n input: InputPill,\n label: LabelPill,\n readonly: ReadOnlyPill,\n removable: RemovablePill,\n value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AACzB,8BAA6E;AAE7E,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA;AAGT,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAClD,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,mDAAC,eAAD;AAAA,OAAmB;AAAA;AAAA;AAG5B,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS,UAAU,YAAY;AAC1D,mBAAmB,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AACzB,8BAA6E;AAE7E,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA;AAGT,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAClD,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,mDAAC,eAAD,mBAAmB;AAAA;AAG5B,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS,UAAU,YAAY;AAC1D,mBAAmB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,39 @@
1
1
  var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
8
  var __getProtoOf = Object.getPrototypeOf;
6
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
7
24
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
8
37
  var __export = (target, all) => {
9
38
  for (var name in all)
10
39
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -44,12 +73,11 @@ const typeToClassName = {
44
73
  const DSPillButton = (props) => {
45
74
  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillButtonDefaultProps);
46
75
  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillButtonPropTypes);
47
- const { type, children, ...rest } = propsWithDefaults;
48
- return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, {
49
- ...rest,
76
+ const _a = propsWithDefaults, { type, children } = _a, rest = __objRest(_a, ["type", "children"]);
77
+ return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, __spreadProps(__spreadValues({}, rest), {
50
78
  buttonType: "raw",
51
79
  className: `${typeToClassName[type]} ${rest.className}`
52
- }, children);
80
+ }), children);
53
81
  };
54
82
  DSPillButton.propTypes = import_props.DSPillButtonPropTypes;
55
83
  const DSPillButtonWithSchema = (0, import_react_desc.describe)(DSPillButton).description("Pill button");
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/PillButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n only: 'ds-pill-button-only',\n left: 'ds-pill-button-left',\n right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n const { type, children, ...rest } = propsWithDefaults;\n\n return (\n <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n {children}\n </StyledPillButton>\n );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AAEzB,8BAA6E;AAC7E,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,EAAE,MAAM,aAAa,SAAS;AAEpC,SACE,mDAAC,gCAAD;AAAA,OAAsB;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,KACtF;AAAA;AAKP,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AAEzB,8BAA6E;AAC7E,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAoC,wBAA5B,QAAM,aAAsB,IAAT,iBAAS,IAAT,CAAnB,QAAM;AAEd,SACE,mDAAC,gCAAD,iCAAsB,OAAtB;AAAA,IAA4B,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,MACtF;AAAA;AAKP,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,26 @@
1
1
  var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
8
  var __getProtoOf = Object.getPrototypeOf;
6
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
7
24
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
25
  var __export = (target, all) => {
9
26
  for (var name in all)
@@ -33,17 +50,18 @@ __export(PillGroup_exports, {
33
50
  });
34
51
  var React = __toESM(require("react"));
35
52
  var import_react = __toESM(require("react"));
36
- var import_react_desc = require("react-desc");
37
53
  var import_uid = require("uid");
38
54
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
39
55
  var import_props = require("../props");
40
56
  var import_styled = require("./styled");
41
57
  const DSPillGroupV2Context = (0, import_react.createContext)({
42
- onKeyboardRemove: () => null
58
+ onKeyboardRemove: () => null,
59
+ onKeyboardNavigation: () => null
43
60
  });
44
61
  const DSPillGroupV2 = (props) => {
45
62
  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillGroupDefaultProps);
46
63
  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillGroupPropTypes);
64
+ const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
47
65
  const pillGroupUid = (0, import_react.useMemo)(() => `ds-pill-group-${(0, import_uid.uid)()}`, []);
48
66
  const { children, width, innerRef } = propsWithDefaults;
49
67
  const onKeyboardRemove = (0, import_react.useCallback)((pillUid) => {
@@ -55,18 +73,28 @@ const DSPillGroupV2 = (props) => {
55
73
  elems[pillIndex + 1].focus();
56
74
  }
57
75
  }, [pillGroupUid]);
76
+ const onKeyboardNavigation = (0, import_react.useCallback)((pillUid, step, e) => {
77
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
78
+ const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
79
+ if (pillIndex >= 0) {
80
+ if (elems[pillIndex + step]) {
81
+ e.stopPropagation();
82
+ elems[pillIndex + step].focus();
83
+ }
84
+ }
85
+ }, [pillGroupUid]);
58
86
  return /* @__PURE__ */ import_react.default.createElement(DSPillGroupV2Context.Provider, {
59
- value: { onKeyboardRemove }
60
- }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, {
87
+ value: { onKeyboardRemove, onKeyboardNavigation }
88
+ }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, __spreadProps(__spreadValues({}, globalAttrs), {
61
89
  width,
62
90
  id: pillGroupUid,
63
91
  cols: import_react.default.Children.map(children, () => "auto"),
64
92
  gutter: "2px",
65
93
  ref: innerRef
66
- }, children));
94
+ }), children));
67
95
  };
68
96
  DSPillGroupV2.propTypes = import_props.DSPillGroupPropTypes;
69
- const DSPillGroupV2WithSchema = (0, import_react_desc.describe)(DSPillGroupV2);
97
+ const DSPillGroupV2WithSchema = (0, import_ds_props_helpers.describe)(DSPillGroupV2);
70
98
  DSPillGroupV2WithSchema.propTypes = import_props.DSPillGroupPropTypes;
71
99
  module.exports = __toCommonJS(PillGroup_exports);
72
100
  //# sourceMappingURL=PillGroup.js.map
@@ -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 } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{ onKeyboardRemove: (pillUid: string) => void }>({\n onKeyboardRemove: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove }}>\n <StyledPillGroup\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto')}\n gutter=\"2px\"\n ref={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2D;AAC3D,wBAAyB;AACzB,iBAAoB;AACpB,8BAA6E;AAE7E,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,uBAAuB,gCAA+D;AAAA,EACjG,kBAAkB,MAAM;AAAA;AAG1B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,eAAe,0BAAQ,MAAM,iBAAiB,yBAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,8BACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAGH,SACE,mDAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE;AAAA,KACtC,mDAAC,+BAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,qBAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,KAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,gCAAS;AACzC,wBAAwB,YAAY;",
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-props-helpers';\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>;\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;ACAA,YAAuB;ADCvB,mBAA8E;AAC9E,iBAAoB;AACpB,8BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,uBAAuB,gCAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAAA;AAG9B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,cAAc,oDAAuB;AAC3C,QAAM,eAAe,0BAAQ,MAAM,iBAAiB,yBAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,8BACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAEH,QAAM,uBAAuB,8BAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,aAAa,GAAG;AAClB,UAAI,MAAM,YAAY,OAAO;AAC3B,UAAE;AACF,cAAM,YAAY,MAAM;AAAA;AAAA;AAAA,KAI9B,CAAC;AAGH,SACE,mDAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE,kBAAkB;AAAA,KACxD,mDAAC,+BAAD,iCACM,cADN;AAAA,IAEE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,qBAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,MAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,sCAAS;AACzC,wBAAwB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,26 @@
1
1
  var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
8
  var __getProtoOf = Object.getPrototypeOf;
6
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
7
24
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
25
  var __export = (target, all) => {
9
26
  for (var name in all)
@@ -53,7 +70,7 @@ const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, d
53
70
  gutter: "2px",
54
71
  alignItems: "center",
55
72
  justifyItems: "center"
56
- }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
73
+ }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, __spreadProps(__spreadValues({
57
74
  placementOrderPreference: [
58
75
  "bottom-start",
59
76
  "bottom",
@@ -62,8 +79,8 @@ const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, d
62
79
  "top-start",
63
80
  "top",
64
81
  "top-end"
65
- ],
66
- ...dropdownProps,
82
+ ]
83
+ }, dropdownProps), {
67
84
  onClickOutside: (e) => {
68
85
  if (e.code === "Escape")
69
86
  chevronRef.current.focus();
@@ -71,7 +88,7 @@ const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, d
71
88
  dropdownProps.onClickOutside(e);
72
89
  },
73
90
  wrapperStyles: { w: "100%", h: "100%" }
74
- }, /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
91
+ }), /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
75
92
  className: "ds-pill-focus-point",
76
93
  "data-testid": "ds-pill-dropdown-chevron",
77
94
  innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledDropdownPillWrapper\n size={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent>{label}</TextComponent>\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\n {...dropdownProps}\n onClickOutside={(e) => {\n if (e.code === 'Escape') chevronRef.current.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-dropdown-chevron\"\n innerRef={setMultipleRefs(chevronRef, innerRef)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,qBAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,yBAAO;AAE1B,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,SACE,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,mDAAC,eAAD,MAAgB,QAChB,mDAAC,yCAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,OAEE;AAAA,IACJ,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,KAE/B,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,kCAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,mDAAC,kCAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,qBAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,yBAAO;AAE1B,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,SACE,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,mDAAC,eAAD,MAAgB,QAChB,mDAAC,yCAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAEE,gBAVN;AAAA,IAWE,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,MAE/B,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,kCAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,mDAAC,kCAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -37,8 +37,8 @@ var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-t
37
37
  var import_styled = require("../styled");
38
38
  var import_PillGroup = require("../PillGroup");
39
39
  var import_PillButton = require("../PillButton");
40
- const RemovablePill = import_react.default.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel }) => {
41
- const { onKeyboardRemove } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
40
+ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
41
+ const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
42
42
  const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
43
43
  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
44
44
  value: children
@@ -50,7 +50,17 @@ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated,
50
50
  onKeyboardRemove(pillUid);
51
51
  onRemove(e);
52
52
  }
53
- }, [onKeyboardRemove, onRemove, pillUid]);
53
+ if (e.code === "ArrowLeft") {
54
+ e.preventDefault();
55
+ if (onKeyboardNavigation)
56
+ onKeyboardNavigation(pillUid, -1, e);
57
+ }
58
+ if (e.code === "ArrowRight") {
59
+ e.preventDefault();
60
+ if (onKeyboardNavigation)
61
+ onKeyboardNavigation(pillUid, 1, e);
62
+ }
63
+ }, [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]);
54
64
  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRemovablePillWrapper, {
55
65
  size,
56
66
  cols: ["auto", "24px"],
@@ -68,10 +78,11 @@ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated,
68
78
  onClick: onRemove,
69
79
  onKeyDown,
70
80
  "aria-label": `Remove ${label}`,
71
- type: "right"
81
+ type: "right",
82
+ tabIndex
72
83
  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
73
- width: 22.65,
74
- height: 22.65,
84
+ width: size === "s" ? 18 : 22.65,
85
+ height: size === "s" ? 18 : 22.65,
75
86
  color: ["brand-primary", "700"]
76
87
  })));
77
88
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel }) => {\n const { onKeyboardRemove } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n (e) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n },\n [onKeyboardRemove, onRemove, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n >\n <CloseXsmall width={22.65} height={22.65} color={['brand-primary', '700']} />\n </DSPillButton>\n </StyledRemovablePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,qBAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,gBAAgB;AAClE,QAAM,EAAE,qBAAqB,6BAAW;AACxC,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,QAAM,YAAkE,8BACtE,CAAC,MAAM;AACL,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAAA,KAGb,CAAC,kBAAkB,UAAU;AAG/B,SACE,mDAAC,0CAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,mDAAC,eAAD,MAAgB,QAChB,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,KAEL,mDAAC,6BAAD;AAAA,IAAa,OAAO;AAAA,IAAO,QAAQ;AAAA,IAAO,OAAO,CAAC,iBAAiB;AAAA;AAAA;",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n >\n <CloseXsmall\n width={size === 's' ? 18 : 22.65}\n height={size === 's' ? 18 : 22.65}\n color={['brand-primary', '700']}\n />\n </DSPillButton>\n </StyledRemovablePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,qBAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,eAAe;AAC5E,QAAM,EAAE,kBAAkB,yBAAyB,6BAAW;AAC9D,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,QAAM,YAAY,8BAChB,CAAC,MAAqB;AACpB,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAEX,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,IAAI;AAAA;AAE9D,QAAI,EAAE,SAAS,cAAc;AAC3B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,GAAG;AAAA;AAAA,KAG/D,CAAC,kBAAkB,UAAU,sBAAsB;AAGrD,SACE,mDAAC,0CAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,mDAAC,eAAD,MAAgB,QAChB,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,IACL;AAAA,KAEA,mDAAC,6BAAD;AAAA,IACE,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,IAC5B,OAAO,CAAC,iBAAiB;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,39 @@
1
1
  var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
8
  var __getProtoOf = Object.getPrototypeOf;
6
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
7
24
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
8
37
  var __export = (target, all) => {
9
38
  for (var name in all)
10
39
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -37,21 +66,28 @@ var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
37
66
  var import_ds_icons = require("@elliemae/ds-icons");
38
67
  var import_useFocusGroupItem = require("@elliemae/ds-shared/FocusGroup/useFocusGroupItem");
39
68
  var import_Pill = require("./Pill");
40
- function DropdownPill({
41
- containerProps = {},
42
- label = "",
43
- variant,
44
- tabIndex = -1,
45
- closeMenuOnItemSelection = false,
46
- maxWidth,
47
- minWidth,
48
- ...dropdownProps
49
- }) {
69
+ function DropdownPill(_a) {
70
+ var _b = _a, {
71
+ containerProps = {},
72
+ label = "",
73
+ variant,
74
+ tabIndex = -1,
75
+ closeMenuOnItemSelection = false,
76
+ maxWidth,
77
+ minWidth
78
+ } = _b, dropdownProps = __objRest(_b, [
79
+ "containerProps",
80
+ "label",
81
+ "variant",
82
+ "tabIndex",
83
+ "closeMenuOnItemSelection",
84
+ "maxWidth",
85
+ "minWidth"
86
+ ]);
50
87
  const ref = (0, import_react.useRef)(null);
51
88
  const [chevronEl, chevronRef] = (0, import_react.useState)();
52
89
  const { focusFirst } = (0, import_useFocusGroupItem.useFocusGroupItem)(ref);
53
- return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenu, {
54
- ...dropdownProps,
90
+ return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenu, __spreadProps(__spreadValues({}, dropdownProps), {
55
91
  closeMenuOnItemSelection,
56
92
  maxWidth,
57
93
  hideIfNotVisible: true,
@@ -62,7 +98,7 @@ function DropdownPill({
62
98
  triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_Pill.Pill, {
63
99
  "data-testid": "dropdown-pill",
64
100
  className: "dropdown-pill",
65
- containerProps: { role: "listbox", ...containerProps },
101
+ containerProps: __spreadValues({ role: "listbox" }, containerProps),
66
102
  innerRef: ref,
67
103
  label,
68
104
  rightAddon: /* @__PURE__ */ import_react.default.createElement("div", {
@@ -74,7 +110,7 @@ function DropdownPill({
74
110
  tabIndex,
75
111
  variant
76
112
  })
77
- });
113
+ }));
78
114
  }
79
115
  const props = {
80
116
  containerProps: import_react_desc.PropTypes.object.description("props injected to component wrapper"),
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/DropdownPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';\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;\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;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,wBAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,+BAAkC;AAClC,kBAAqB;AAErB,sBAAsB;AAAA,EACpB,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,MAAM,yBAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,gDAAkB;AACzC,SACE,mDAAC,uCAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,mDAAC,kBAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,EAAE,MAAM,cAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,mDAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,mDAAC,6BAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,4BAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,4BAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,4BAAU,KAAK,YAAY;AAAA,EAErD,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,gCAAS;AAC1C,yBAAyB,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,wBAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,+BAAkC;AAClC,kBAAqB;AAErB,sBAAsB,IASnB;AATmB,eACpB;AAAA,qBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,2BAA2B;AAAA,IAC3B;AAAA,IACA;AAAA,MAPoB,IAQjB,0BARiB,IAQjB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,MAAM,yBAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,gDAAkB;AACzC,SACE,mDAAC,uCAAD,iCACM,gBADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,mDAAC,kBAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,iBAAE,MAAM,aAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,mDAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,mDAAC,6BAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,4BAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,4BAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,4BAAU,KAAK,YAAY;AAAA,EAErD,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,gCAAS;AAC1C,yBAAyB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -2,9 +2,35 @@ var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
6
  var __getProtoOf = Object.getPrototypeOf;
6
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
7
21
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
22
+ var __objRest = (source, exclude) => {
23
+ var target = {};
24
+ for (var prop in source)
25
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
26
+ target[prop] = source[prop];
27
+ if (source != null && __getOwnPropSymbols)
28
+ for (var prop of __getOwnPropSymbols(source)) {
29
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
30
+ target[prop] = source[prop];
31
+ }
32
+ return target;
33
+ };
8
34
  var __export = (target, all) => {
9
35
  for (var name in all)
10
36
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -38,16 +64,23 @@ var import_Pill = require("./Pill");
38
64
  const StyledInputPill = (0, import_ds_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
39
65
  value
40
66
  }));
41
- function InputPill({
42
- containerProps = {},
43
- placeholder = "Enter Value",
44
- onChange = () => {
45
- },
46
- onRemove,
47
- value,
48
- type,
49
- ...otherProps
50
- }) {
67
+ function InputPill(_a) {
68
+ var _b = _a, {
69
+ containerProps = {},
70
+ placeholder = "Enter Value",
71
+ onChange = () => {
72
+ },
73
+ onRemove,
74
+ value,
75
+ type
76
+ } = _b, otherProps = __objRest(_b, [
77
+ "containerProps",
78
+ "placeholder",
79
+ "onChange",
80
+ "onRemove",
81
+ "value",
82
+ "type"
83
+ ]);
51
84
  let TypeOfInput = import_ds_form.DSInput;
52
85
  switch (type) {
53
86
  case "inputText":
@@ -63,13 +96,12 @@ function InputPill({
63
96
  className: "input-pill",
64
97
  classProps: { value },
65
98
  containerProps,
66
- label: /* @__PURE__ */ import_react.default.createElement(TypeOfInput, {
99
+ label: /* @__PURE__ */ import_react.default.createElement(TypeOfInput, __spreadValues({
67
100
  "data-testid": "input-pill",
68
101
  onChange,
69
102
  placeholder,
70
- value,
71
- ...otherProps
72
- }),
103
+ value
104
+ }, otherProps)),
73
105
  rightAddon: value && /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
74
106
  className: "remove-pill-button",
75
107
  "data-testid": "remove-pill-button",
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/deprecated/InputPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
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;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,kBAAkB,4CAAkB,kBAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB;AAAA,EACxB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,mDAAC,iBAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY,EAAE;AAAA,IACd;AAAA,IACA,OACE,mDAAC,aAAD;AAAA,MACE,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,SACI;AAAA;AAAA,IAGR,YACE,SAAS,mDAAC,6BAAD;AAAA,MAAa,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEjG,UAAU;AAAA;AAAA;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,kBAAkB,4CAAkB,kBAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB,IAQvB;AARuB,eACxB;AAAA,qBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,WAAW,MAAM;AAAA;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MANwB,IAOrB,uBAPqB,IAOrB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,mDAAC,iBAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY,EAAE;AAAA,IACd;AAAA,IACA,OACE,mDAAC,aAAD;AAAA,MACE,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,OACI;AAAA,IAGR,YACE,SAAS,mDAAC,6BAAD;AAAA,MAAa,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEjG,UAAU;AAAA;AAAA;",
6
6
  "names": []
7
7
  }