@elliemae/ds-pills 3.4.2 → 3.4.3

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 (112) hide show
  1. package/dist/cjs/components/Pill.js +6 -3
  2. package/dist/cjs/components/Pill.js.map +1 -1
  3. package/dist/cjs/components/PillButton.js +9 -5
  4. package/dist/cjs/components/PillButton.js.map +1 -1
  5. package/dist/cjs/components/PillGroup.js +41 -29
  6. package/dist/cjs/components/PillGroup.js.map +2 -2
  7. package/dist/cjs/components/index.js +4 -1
  8. package/dist/cjs/components/index.js.map +1 -1
  9. package/dist/cjs/components/styled.js +4 -1
  10. package/dist/cjs/components/styled.js.map +2 -2
  11. package/dist/cjs/components/types/DropdownPill.js +61 -47
  12. package/dist/cjs/components/types/DropdownPill.js.map +2 -2
  13. package/dist/cjs/components/types/InputPill.js +68 -54
  14. package/dist/cjs/components/types/InputPill.js.map +2 -2
  15. package/dist/cjs/components/types/LabelPill.js +15 -5
  16. package/dist/cjs/components/types/LabelPill.js.map +2 -2
  17. package/dist/cjs/components/types/ReadOnlyPill.js +32 -19
  18. package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
  19. package/dist/cjs/components/types/RemovablePill.js +68 -50
  20. package/dist/cjs/components/types/RemovablePill.js.map +2 -2
  21. package/dist/cjs/components/types/ValuePill.js +36 -22
  22. package/dist/cjs/components/types/ValuePill.js.map +2 -2
  23. package/dist/cjs/components/types/index.js +4 -1
  24. package/dist/cjs/components/types/index.js.map +1 -1
  25. package/dist/cjs/deprecated/DropdownPill.js +15 -10
  26. package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
  27. package/dist/cjs/deprecated/InputPill.js +8 -5
  28. package/dist/cjs/deprecated/InputPill.js.map +1 -1
  29. package/dist/cjs/deprecated/LabeledDropdownPills.js +25 -17
  30. package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
  31. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +32 -25
  32. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
  33. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +68 -53
  34. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
  35. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +51 -37
  36. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
  37. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +4 -1
  38. package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js.map +1 -1
  39. package/dist/cjs/deprecated/LabeledPills.js +25 -16
  40. package/dist/cjs/deprecated/LabeledPills.js.map +1 -1
  41. package/dist/cjs/deprecated/OverflowPill.js +8 -4
  42. package/dist/cjs/deprecated/OverflowPill.js.map +1 -1
  43. package/dist/cjs/deprecated/Pill.js +30 -10
  44. package/dist/cjs/deprecated/Pill.js.map +1 -1
  45. package/dist/cjs/deprecated/PillGroup.js +15 -8
  46. package/dist/cjs/deprecated/PillGroup.js.map +1 -1
  47. package/dist/cjs/deprecated/ReadOnlyPill.js +44 -34
  48. package/dist/cjs/deprecated/ReadOnlyPill.js.map +2 -2
  49. package/dist/cjs/deprecated/RemovablePill.js +8 -4
  50. package/dist/cjs/deprecated/RemovablePill.js.map +1 -1
  51. package/dist/cjs/deprecated/index.js +4 -1
  52. package/dist/cjs/deprecated/index.js.map +1 -1
  53. package/dist/cjs/index.d.js +4 -1
  54. package/dist/cjs/index.d.js.map +1 -1
  55. package/dist/cjs/index.js +4 -1
  56. package/dist/cjs/index.js.map +1 -1
  57. package/dist/cjs/props.js +4 -1
  58. package/dist/cjs/props.js.map +1 -1
  59. package/dist/cjs/utils.js +4 -1
  60. package/dist/cjs/utils.js.map +1 -1
  61. package/dist/esm/components/Pill.js +2 -2
  62. package/dist/esm/components/Pill.js.map +1 -1
  63. package/dist/esm/components/PillButton.js +5 -4
  64. package/dist/esm/components/PillButton.js.map +1 -1
  65. package/dist/esm/components/PillGroup.js +37 -28
  66. package/dist/esm/components/PillGroup.js.map +2 -2
  67. package/dist/esm/components/index.js.map +1 -1
  68. package/dist/esm/components/styled.js.map +1 -1
  69. package/dist/esm/components/types/DropdownPill.js +57 -46
  70. package/dist/esm/components/types/DropdownPill.js.map +2 -2
  71. package/dist/esm/components/types/InputPill.js +64 -53
  72. package/dist/esm/components/types/InputPill.js.map +2 -2
  73. package/dist/esm/components/types/LabelPill.js +11 -4
  74. package/dist/esm/components/types/LabelPill.js.map +2 -2
  75. package/dist/esm/components/types/ReadOnlyPill.js +28 -18
  76. package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
  77. package/dist/esm/components/types/RemovablePill.js +64 -49
  78. package/dist/esm/components/types/RemovablePill.js.map +2 -2
  79. package/dist/esm/components/types/ValuePill.js +32 -21
  80. package/dist/esm/components/types/ValuePill.js.map +2 -2
  81. package/dist/esm/components/types/index.js.map +1 -1
  82. package/dist/esm/deprecated/DropdownPill.js +11 -9
  83. package/dist/esm/deprecated/DropdownPill.js.map +1 -1
  84. package/dist/esm/deprecated/InputPill.js +4 -4
  85. package/dist/esm/deprecated/InputPill.js.map +1 -1
  86. package/dist/esm/deprecated/LabeledDropdownPills.js +21 -16
  87. package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
  88. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +28 -24
  89. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
  90. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +64 -52
  91. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
  92. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +47 -36
  93. package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
  94. package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map +1 -1
  95. package/dist/esm/deprecated/LabeledPills.js +21 -15
  96. package/dist/esm/deprecated/LabeledPills.js.map +1 -1
  97. package/dist/esm/deprecated/OverflowPill.js +4 -3
  98. package/dist/esm/deprecated/OverflowPill.js.map +1 -1
  99. package/dist/esm/deprecated/Pill.js +26 -9
  100. package/dist/esm/deprecated/Pill.js.map +1 -1
  101. package/dist/esm/deprecated/PillGroup.js +11 -7
  102. package/dist/esm/deprecated/PillGroup.js.map +1 -1
  103. package/dist/esm/deprecated/ReadOnlyPill.js +40 -33
  104. package/dist/esm/deprecated/ReadOnlyPill.js.map +2 -2
  105. package/dist/esm/deprecated/RemovablePill.js +4 -3
  106. package/dist/esm/deprecated/RemovablePill.js.map +1 -1
  107. package/dist/esm/deprecated/index.js.map +2 -2
  108. package/dist/esm/index.d.js.map +1 -1
  109. package/dist/esm/index.js.map +2 -2
  110. package/dist/esm/props.js.map +1 -1
  111. package/dist/esm/utils.js.map +1 -1
  112. package/package.json +15 -15
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var Pill_exports = {};
23
26
  __export(Pill_exports, {
@@ -26,7 +29,7 @@ __export(Pill_exports, {
26
29
  });
27
30
  module.exports = __toCommonJS(Pill_exports);
28
31
  var React = __toESM(require("react"));
29
- var import_react = __toESM(require("react"));
32
+ var import_jsx_runtime = require("react/jsx-runtime");
30
33
  var import_ds_utilities = require("@elliemae/ds-utilities");
31
34
  var import_props = require("../props");
32
35
  var import_types = require("./types");
@@ -43,7 +46,7 @@ const DSPillV2 = (props) => {
43
46
  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillV2PropTypes);
44
47
  const { type } = propsWithDefaults;
45
48
  const PillComponent = pillComponentGetter[type];
46
- return /* @__PURE__ */ import_react.default.createElement(PillComponent, {
49
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillComponent, {
47
50
  ...propsWithDefaults
48
51
  });
49
52
  };
@@ -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, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n dropdown: DropdownPill,\n input: InputPill,\n label: LabelPill,\n readonly: ReadOnlyPill,\n removable: RemovablePill,\n value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nDSPillV2.displayName = 'DSPillV2';\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAAuF;AAEvF,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,sDAA6B,OAAO,iCAAoB;AAClF,0DAA+B,mBAAmB,8BAAiB;AACnE,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,mDAAC;AAAA,IAAe,GAAG;AAAA,GAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,kCAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,0BAAuF;AAEvF,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,wBAAoB,kDAA6B,OAAO,iCAAoB;AAClF,0DAA+B,mBAAmB,8BAAiB;AACnE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,4CAAC;AAAA,IAAe,GAAG;AAAA,GAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var PillButton_exports = {};
23
26
  __export(PillButton_exports, {
@@ -26,7 +29,7 @@ __export(PillButton_exports, {
26
29
  });
27
30
  module.exports = __toCommonJS(PillButton_exports);
28
31
  var React = __toESM(require("react"));
29
- var import_react = __toESM(require("react"));
32
+ var import_jsx_runtime = require("react/jsx-runtime");
30
33
  var import_ds_utilities = require("@elliemae/ds-utilities");
31
34
  var import_styled = require("./styled");
32
35
  var import_props = require("../props");
@@ -39,11 +42,12 @@ const DSPillButton = (props) => {
39
42
  const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_props.DSPillButtonDefaultProps);
40
43
  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillButtonPropTypes);
41
44
  const { type, children, ...rest } = propsWithDefaults;
42
- return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, {
45
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPillButton, {
43
46
  ...rest,
44
47
  buttonType: "raw",
45
- className: `${typeToClassName[type]} ${rest.className}`
46
- }, children);
48
+ className: `${typeToClassName[type]} ${rest.className}`,
49
+ children
50
+ });
47
51
  };
48
52
  DSPillButton.propTypes = import_props.DSPillButtonPropTypes;
49
53
  DSPillButton.displayName = "DSPillButton";
@@ -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 { DSButtonPropsT } from '@elliemae/ds-button';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n only: 'ds-pill-button-only',\n left: 'ds-pill-button-left',\n right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n const { type, children, ...rest } = propsWithDefaults;\n\n return (\n <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n {children}\n </StyledPillButton>\n );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nDSPillButton.displayName = 'DSPillButton';\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAElB,0BAAuF;AACvF,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,sDAA6B,OAAO,qCAAwB;AACtF,0DAA+B,mBAAmB,kCAAqB;AAEvE,QAAM,EAAE,MAAM,aAAa,SAAS;AAEpC,SACE,mDAAC;AAAA,IAAkB,GAAG;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,KACtF,QACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,kCAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,0BAAuF;AACvF,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,wBAAoB,kDAA6B,OAAO,qCAAwB;AACtF,0DAA+B,mBAAmB,kCAAqB;AAEvE,QAAM,EAAE,MAAM,aAAa,KAAK,IAAI;AAEpC,SACE,4CAAC;AAAA,IAAkB,GAAG;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,IACtF;AAAA,GACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var PillGroup_exports = {};
23
26
  __export(PillGroup_exports, {
@@ -27,6 +30,7 @@ __export(PillGroup_exports, {
27
30
  });
28
31
  module.exports = __toCommonJS(PillGroup_exports);
29
32
  var React = __toESM(require("react"));
33
+ var import_jsx_runtime = require("react/jsx-runtime");
30
34
  var import_react = __toESM(require("react"));
31
35
  var import_uid = require("uid");
32
36
  var import_ds_utilities = require("@elliemae/ds-utilities");
@@ -42,35 +46,43 @@ const DSPillGroupV2 = (props) => {
42
46
  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefaults);
43
47
  const pillGroupUid = (0, import_react.useMemo)(() => `ds-pill-group-${(0, import_uid.uid)()}`, []);
44
48
  const { children, width, innerRef } = propsWithDefaults;
45
- const onKeyboardRemove = (0, import_react.useCallback)((pillUid) => {
46
- const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
47
- const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
48
- if (pillIndex > 0) {
49
- elems[pillIndex - 1].focus();
50
- } else if (pillIndex + 1 < elems.length) {
51
- elems[pillIndex + 1].focus();
52
- }
53
- }, [pillGroupUid]);
54
- const onKeyboardNavigation = (0, import_react.useCallback)((pillUid, step, e) => {
55
- const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
56
- const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
57
- if (pillIndex >= 0) {
58
- if (elems[pillIndex + step]) {
59
- e.stopPropagation();
60
- elems[pillIndex + step].focus();
49
+ const onKeyboardRemove = (0, import_react.useCallback)(
50
+ (pillUid) => {
51
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
52
+ const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
53
+ if (pillIndex > 0) {
54
+ elems[pillIndex - 1].focus();
55
+ } else if (pillIndex + 1 < elems.length) {
56
+ elems[pillIndex + 1].focus();
61
57
  }
62
- }
63
- }, [pillGroupUid]);
64
- return /* @__PURE__ */ import_react.default.createElement(DSPillGroupV2Context.Provider, {
65
- value: { onKeyboardRemove, onKeyboardNavigation }
66
- }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, {
67
- ...globalAttrs,
68
- width,
69
- id: pillGroupUid,
70
- cols: import_react.default.Children.map(children, () => "auto"),
71
- gutter: "2px",
72
- ref: innerRef
73
- }, children));
58
+ },
59
+ [pillGroupUid]
60
+ );
61
+ const onKeyboardNavigation = (0, import_react.useCallback)(
62
+ (pillUid, step, e) => {
63
+ const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
64
+ const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
65
+ if (pillIndex >= 0) {
66
+ if (elems[pillIndex + step]) {
67
+ e.stopPropagation();
68
+ elems[pillIndex + step].focus();
69
+ }
70
+ }
71
+ },
72
+ [pillGroupUid]
73
+ );
74
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DSPillGroupV2Context.Provider, {
75
+ value: { onKeyboardRemove, onKeyboardNavigation },
76
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPillGroup, {
77
+ ...globalAttrs,
78
+ width,
79
+ id: pillGroupUid,
80
+ cols: import_react.default.Children.map(children, () => "auto"),
81
+ gutter: "2px",
82
+ ref: innerRef,
83
+ children
84
+ })
85
+ });
74
86
  };
75
87
  DSPillGroupV2.propTypes = import_props.DSPillGroupPropTypes;
76
88
  DSPillGroupV2.displayName = "DSPillGroupV2";
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n onKeyboardRemove: (pillUid: string) => void;\n onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n onKeyboardRemove: () => null,\n onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n const onKeyboardNavigation = useCallback(\n (pillUid: string, step: number, e: KeyboardEvent) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex >= 0) {\n if (elems[pillIndex + step]) {\n e.stopPropagation();\n elems[pillIndex + step].focus();\n }\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n <StyledPillGroup\n {...globalAttrs}\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto')}\n gutter=\"2px\"\n ref={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\nDSPillGroupV2.displayName = 'DSPillGroupV2';\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8E;AAC9E,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,uBAAuB,gCAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,sDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,cAAc,gDAAuB,iBAAiB;AAC5D,QAAM,eAAe,0BAAQ,MAAM,iBAAiB,oBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,8BACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG,MAAM;AAAA,IAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG,MAAM;AAAA,IAC7B;AAAA,EACF,GACA,CAAC,YAAY,CACf;AACA,QAAM,uBAAuB,8BAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,QAAI,aAAa,GAAG;AAClB,UAAI,MAAM,YAAY,OAAO;AAC3B,UAAE,gBAAgB;AAClB,cAAM,YAAY,MAAM,MAAM;AAAA,MAChC;AAAA,IACF;AAAA,EACF,GACA,CAAC,YAAY,CACf;AAEA,SACE,mDAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,KAC7E,mDAAC;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,qBAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,IAC/C,QAAO;AAAA,IACP,KAAK;AAAA,KAEJ,QACH,CACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
6
- "names": []
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA8E;AAC9E,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,wBAAoB,kDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,kBAAc,4CAAuB,iBAAiB;AAC5D,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,OAAO;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,4CAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,IAC7E,sDAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP,KAAK;AAAA,MAEJ;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
6
+ "names": ["React"]
7
7
  }
@@ -14,7 +14,10 @@ var __copyProps = (to, from, except, desc) => {
14
14
  return to;
15
15
  };
16
16
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
17
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
17
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
18
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
19
+ mod
20
+ ));
18
21
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
22
  var components_exports = {};
20
23
  module.exports = __toCommonJS(components_exports);
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["export * from './Pill';\nexport * from './PillGroup';\nexport * from './PillButton';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAc,mBAAd;AACA,+BAAc,wBADd;AAEA,+BAAc,yBAFd;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAc,mBAAd;AACA,+BAAc,wBADd;AAEA,+BAAc,yBAFd;",
6
6
  "names": []
7
7
  }
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var styled_exports = {};
23
26
  __export(styled_exports, {
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex ? zIndex : ''};\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 13px;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside(theme.colors.danger[900]);\n return borderOutside(theme.colors.brand[500]);\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n width: ${(props) => props.width};\n height: ${(props) => props.height};\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 1, 'inherit')}\n }\n\n cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
6
- "names": []
5
+ "mappings": "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",
6
+ "names": ["import_ds_system"]
7
7
  }
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var DropdownPill_exports = {};
23
26
  __export(DropdownPill_exports, {
@@ -25,6 +28,7 @@ __export(DropdownPill_exports, {
25
28
  });
26
29
  module.exports = __toCommonJS(DropdownPill_exports);
27
30
  var React = __toESM(require("react"));
31
+ var import_jsx_runtime = require("react/jsx-runtime");
28
32
  var import_react = __toESM(require("react"));
29
33
  var import_ds_common = require("@elliemae/ds-common");
30
34
  var import_uid = require("uid");
@@ -33,50 +37,60 @@ var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-t
33
37
  var import_styled = require("../styled");
34
38
  var import_utils = require("../../utils");
35
39
  var import_PillButton = require("../PillButton");
36
- const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
37
- const chevronRef = (0, import_react.useRef)(null);
38
- const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
39
- const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
40
- value: children
41
- }) : import_react.default.Fragment;
42
- return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledDropdownPillWrapper, {
43
- size,
44
- id: pillUid,
45
- className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
46
- "data-testid": "ds-pill-wrapper",
47
- cols: ["auto", "24px"],
48
- gutter: "2px",
49
- alignItems: "center",
50
- justifyItems: "center"
51
- }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_common.DSDropdownMenuV2, {
52
- placementOrderPreference: [
53
- "bottom-start",
54
- "bottom",
55
- "bottom-end",
56
- "right-end",
57
- "top-start",
58
- "top",
59
- "top-end"
60
- ],
61
- ...dropdownProps,
62
- onClickOutside: (e) => {
63
- if (e.code === "Escape")
64
- chevronRef.current.focus();
65
- if (dropdownProps.onClickOutside)
66
- dropdownProps.onClickOutside(e);
67
- },
68
- wrapperStyles: { w: "100%", h: "100%" }
69
- }, /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
70
- className: "ds-pill-focus-point",
71
- "data-testid": "ds-pill-dropdown-chevron",
72
- innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
73
- "aria-label": ariaLabel || label,
74
- type: "right",
75
- onClick: onDropdownClick
76
- }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
77
- color: ["brand-primary", "800"],
78
- width: 20,
79
- height: 20
80
- }))));
81
- });
40
+ const DropdownPill = import_react.default.memo(
41
+ ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
42
+ const chevronRef = (0, import_react.useRef)(null);
43
+ const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
44
+ const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
45
+ value: children
46
+ }) : import_react.default.Fragment;
47
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledDropdownPillWrapper, {
48
+ size,
49
+ id: pillUid,
50
+ className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
51
+ "data-testid": "ds-pill-wrapper",
52
+ cols: ["auto", "24px"],
53
+ gutter: "2px",
54
+ alignItems: "center",
55
+ justifyItems: "center",
56
+ children: [
57
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, {
58
+ children: label
59
+ }),
60
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_common.DSDropdownMenuV2, {
61
+ placementOrderPreference: [
62
+ "bottom-start",
63
+ "bottom",
64
+ "bottom-end",
65
+ "right-end",
66
+ "top-start",
67
+ "top",
68
+ "top-end"
69
+ ],
70
+ ...dropdownProps,
71
+ onClickOutside: (e) => {
72
+ if (e.code === "Escape")
73
+ chevronRef.current.focus();
74
+ if (dropdownProps.onClickOutside)
75
+ dropdownProps.onClickOutside(e);
76
+ },
77
+ wrapperStyles: { w: "100%", h: "100%" },
78
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillButton.DSPillButton, {
79
+ className: "ds-pill-focus-point",
80
+ "data-testid": "ds-pill-dropdown-chevron",
81
+ innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
82
+ "aria-label": ariaLabel || label,
83
+ type: "right",
84
+ onClick: onDropdownClick,
85
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {
86
+ color: ["brand-primary", "800"],
87
+ width: 20,
88
+ height: 20
89
+ })
90
+ })
91
+ })
92
+ ]
93
+ });
94
+ }
95
+ );
82
96
  //# sourceMappingURL=DropdownPill.js.map
@@ -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-common';\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;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AACvC,uBAAiC;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,IAAI;AAE9B,QAAM,UAAU,0BAAQ,MAAM,WAAW,oBAAI,KAAK,CAAC,CAAC;AAEpD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAU,IAC/D,qBAAM;AAEV,SACE,mDAAC;AAAA,IACC;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,mDAAC,qBAAe,KAAM,GACtB,mDAAC;AAAA,IACC,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IACJ,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ,MAAM;AAClD,UAAI,cAAc;AAAgB,sBAAc,eAAe,CAAC;AAAA,IAClE;AAAA,IACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,KAEtC,mDAAC;AAAA,IACC,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,kCAAgB,YAAY,QAAQ;AAAA,IAC9C,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,mDAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,IAAG,OAAO;AAAA,IAAI,QAAQ;AAAA,GAAI,CAC5E,CACF,CACF;AAEJ,CACF;",
6
- "names": []
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAuC;AACvC,uBAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB,4CAAC;AAAA,UACC,0BAA0B;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UACJ,gBAAgB,CAAC,MAAM;AACrB,gBAAI,EAAE,SAAS;AAAU,yBAAW,QAAQ,MAAM;AAClD,gBAAI,cAAc;AAAgB,4BAAc,eAAe,CAAC;AAAA,UAClE;AAAA,UACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,UAEtC,sDAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,cAAU,8BAAgB,YAAY,QAAQ;AAAA,YAC9C,cAAY,aAAa;AAAA,YACzB,MAAK;AAAA,YACL,SAAS;AAAA,YAET,sDAAC;AAAA,cAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAAG,OAAO;AAAA,cAAI,QAAQ;AAAA,aAAI;AAAA,WAC5E;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
6
+ "names": ["React"]
7
7
  }
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var InputPill_exports = {};
23
26
  __export(InputPill_exports, {
@@ -25,66 +28,77 @@ __export(InputPill_exports, {
25
28
  });
26
29
  module.exports = __toCommonJS(InputPill_exports);
27
30
  var React = __toESM(require("react"));
31
+ var import_jsx_runtime = require("react/jsx-runtime");
28
32
  var import_react = __toESM(require("react"));
29
33
  var import_uid = require("uid");
30
34
  var import_ds_icons = require("@elliemae/ds-icons");
31
35
  var import_styled = require("../styled");
32
36
  var import_utils = require("../../utils");
33
37
  var import_PillButton = require("../PillButton");
34
- const InputPill = import_react.default.memo(({
35
- label,
36
- size,
37
- inputPlaceholder,
38
- inputWidth,
39
- inputRender,
40
- onInputChange,
41
- onInputClear,
42
- innerRef,
43
- hasError,
44
- inputId
45
- }) => {
46
- const ref = (0, import_react.useRef)(null);
47
- const InputComponent = (0, import_react.useMemo)(() => inputRender, [inputRender]);
48
- const pillUid = (0, import_react.useMemo)(() => inputId ?? `ds-pill-${(0, import_uid.uid)()}`, []);
49
- const onCloseIconClick = (0, import_react.useCallback)((e) => {
50
- if ([void 0, "Enter", "Space"].includes(e.code)) {
51
- e.preventDefault();
52
- onInputClear(e);
53
- ref.current.focus();
54
- }
55
- }, [onInputClear]);
56
- const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
57
- return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputPillWrapper, {
38
+ const InputPill = import_react.default.memo(
39
+ ({
40
+ label,
58
41
  size,
59
- className: "ds-pill-wrapper",
60
- "data-testid": "ds-pill-wrapper",
61
- cols: label === "" ? ["auto"] : ["auto", "24px"],
42
+ inputPlaceholder,
62
43
  inputWidth,
63
- value: label,
64
- inputHasFocus,
65
- hasError
66
- }, /* @__PURE__ */ import_react.default.createElement(InputComponent, {
67
- id: pillUid,
68
- className: "ds-pill-focus-point",
69
- "data-testid": "ds-pill-input",
70
- innerRef: (0, import_utils.setMultipleRefs)(ref, innerRef),
71
- value: label,
72
- onChange: onInputChange,
73
- placeholder: inputPlaceholder,
74
- onFocus: () => setInputHasFocus(true),
75
- onBlur: () => setInputHasFocus(false),
76
- disableTooltip: false
77
- }), label !== "" && /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
78
- id: pillUid,
79
- "data-testid": "ds-pill-clear-icon",
44
+ inputRender,
45
+ onInputChange,
46
+ onInputClear,
80
47
  innerRef,
81
- onClick: onCloseIconClick,
82
- onKeyDown: onCloseIconClick,
83
- "aria-label": "Clear input",
84
- type: "right"
85
- }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
86
- size: "s",
87
- color: ["brand-primary", "700"]
88
- })));
89
- });
48
+ hasError,
49
+ inputId
50
+ }) => {
51
+ const ref = (0, import_react.useRef)(null);
52
+ const InputComponent = (0, import_react.useMemo)(() => inputRender, [inputRender]);
53
+ const pillUid = (0, import_react.useMemo)(() => inputId ?? `ds-pill-${(0, import_uid.uid)()}`, []);
54
+ const onCloseIconClick = (0, import_react.useCallback)(
55
+ (e) => {
56
+ if ([void 0, "Enter", "Space"].includes(e.code)) {
57
+ e.preventDefault();
58
+ onInputClear(e);
59
+ ref.current.focus();
60
+ }
61
+ },
62
+ [onInputClear]
63
+ );
64
+ const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
65
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputPillWrapper, {
66
+ size,
67
+ className: "ds-pill-wrapper",
68
+ "data-testid": "ds-pill-wrapper",
69
+ cols: label === "" ? ["auto"] : ["auto", "24px"],
70
+ inputWidth,
71
+ value: label,
72
+ inputHasFocus,
73
+ hasError,
74
+ children: [
75
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputComponent, {
76
+ id: pillUid,
77
+ className: "ds-pill-focus-point",
78
+ "data-testid": "ds-pill-input",
79
+ innerRef: (0, import_utils.setMultipleRefs)(ref, innerRef),
80
+ value: label,
81
+ onChange: onInputChange,
82
+ placeholder: inputPlaceholder,
83
+ onFocus: () => setInputHasFocus(true),
84
+ onBlur: () => setInputHasFocus(false),
85
+ disableTooltip: false
86
+ }),
87
+ label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillButton.DSPillButton, {
88
+ id: pillUid,
89
+ "data-testid": "ds-pill-clear-icon",
90
+ innerRef,
91
+ onClick: onCloseIconClick,
92
+ onKeyDown: onCloseIconClick,
93
+ "aria-label": "Clear input",
94
+ type: "right",
95
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, {
96
+ size: "s",
97
+ color: ["brand-primary", "700"]
98
+ })
99
+ })
100
+ ]
101
+ });
102
+ }
103
+ );
90
104
  //# sourceMappingURL=InputPill.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLElement>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n (e) => {\n if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onInputClear(e);\n ref.current.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n size={size}\n className=\"ds-pill-wrapper\"\n data-testid=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-input\"\n innerRef={setMultipleRefs(ref, innerRef)}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <DSPillButton\n id={pillUid}\n data-testid=\"ds-pill-clear-icon\"\n innerRef={innerRef}\n onClick={onCloseIconClick}\n onKeyDown={onCloseIconClick}\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,qBAAM,KAC7B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,yBAAoB,IAAI;AAEpC,QAAM,iBAAiB,0BAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,QAAM,UAAU,0BAAQ,MAAM,WAAW,WAAW,oBAAI,KAAK,CAAC,CAAC;AAE/D,QAAM,mBAAyE,8BAC7E,CAAC,MAAM;AACL,QAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,QAAE,eAAe;AACjB,mBAAa,CAAC;AACd,UAAI,QAAQ,MAAM;AAAA,IACpB;AAAA,EACF,GACA,CAAC,YAAY,CACf;AAEA,QAAM,CAAC,eAAe,oBAAoB,2BAAS,KAAK;AAExD,SACE,mDAAC;AAAA,IACC;AAAA,IACA,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,KAEA,mDAAC;AAAA,IACC,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,kCAAgB,KAAK,QAAQ;AAAA,IACvC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,IACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,IACpC,gBAAgB;AAAA,GAClB,GACC,UAAU,MACT,mDAAC;AAAA,IACC,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAW;AAAA,IACX,MAAK;AAAA,KAEL,mDAAC;AAAA,IAAY,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAAG,CACzD,CAEJ;AAEJ,CACF;",
6
- "names": []
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE,6CAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,cAAU,8BAAgB,KAAK,QAAQ;AAAA,UACvC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UACpC,gBAAgB;AAAA,SAClB;AAAA,QACC,UAAU,MACT,4CAAC;AAAA,UACC,IAAI;AAAA,UACJ,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,UACX,cAAW;AAAA,UACX,MAAK;AAAA,UAEL,sDAAC;AAAA,YAAY,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SACzD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;",
6
+ "names": ["React"]
7
7
  }