@activecollab/components 1.0.180 → 1.0.182

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 (62) hide show
  1. package/dist/cjs/components/Chip/Chip.js +18 -6
  2. package/dist/cjs/components/Chip/Chip.js.map +1 -1
  3. package/dist/cjs/components/Chip/Styles.js +21 -2
  4. package/dist/cjs/components/Chip/Styles.js.map +1 -1
  5. package/dist/cjs/components/ComboBox/ComboBox.js +38 -16
  6. package/dist/cjs/components/ComboBox/ComboBox.js.map +1 -1
  7. package/dist/cjs/components/Entity/EntityCard.js +6 -1
  8. package/dist/cjs/components/Entity/EntityCard.js.map +1 -1
  9. package/dist/cjs/components/Entity/EntityProperty.js +2 -1
  10. package/dist/cjs/components/Entity/EntityProperty.js.map +1 -1
  11. package/dist/cjs/components/Entity/Styles.js +1 -1
  12. package/dist/cjs/components/Entity/Styles.js.map +1 -1
  13. package/dist/cjs/components/Select/OptionContent/Styles.js +3 -3
  14. package/dist/cjs/components/Select/OptionContent/Styles.js.map +1 -1
  15. package/dist/cjs/components/Wizard/Wizard.js +3 -3
  16. package/dist/cjs/components/Wizard/Wizard.js.map +1 -1
  17. package/dist/cjs/components/Wizard/{WizardContext.js → context/index.js} +1 -1
  18. package/dist/cjs/components/Wizard/context/index.js.map +1 -0
  19. package/dist/cjs/components/Wizard/index.js +14 -13
  20. package/dist/cjs/components/Wizard/index.js.map +1 -1
  21. package/dist/esm/components/Chip/Chip.d.ts +4 -0
  22. package/dist/esm/components/Chip/Chip.d.ts.map +1 -1
  23. package/dist/esm/components/Chip/Chip.js +18 -6
  24. package/dist/esm/components/Chip/Chip.js.map +1 -1
  25. package/dist/esm/components/Chip/Styles.d.ts +3 -0
  26. package/dist/esm/components/Chip/Styles.d.ts.map +1 -1
  27. package/dist/esm/components/Chip/Styles.js +20 -2
  28. package/dist/esm/components/Chip/Styles.js.map +1 -1
  29. package/dist/esm/components/ComboBox/ComboBox.d.ts +1 -0
  30. package/dist/esm/components/ComboBox/ComboBox.d.ts.map +1 -1
  31. package/dist/esm/components/ComboBox/ComboBox.js +38 -16
  32. package/dist/esm/components/ComboBox/ComboBox.js.map +1 -1
  33. package/dist/esm/components/Entity/EntityCard.d.ts.map +1 -1
  34. package/dist/esm/components/Entity/EntityCard.js +3 -1
  35. package/dist/esm/components/Entity/EntityCard.js.map +1 -1
  36. package/dist/esm/components/Entity/EntityProperty.d.ts.map +1 -1
  37. package/dist/esm/components/Entity/EntityProperty.js +2 -1
  38. package/dist/esm/components/Entity/EntityProperty.js.map +1 -1
  39. package/dist/esm/components/Entity/Styles.js +1 -1
  40. package/dist/esm/components/Entity/Styles.js.map +1 -1
  41. package/dist/esm/components/Select/OptionContent/Styles.d.ts +2 -1
  42. package/dist/esm/components/Select/OptionContent/Styles.d.ts.map +1 -1
  43. package/dist/esm/components/Select/OptionContent/Styles.js +2 -1
  44. package/dist/esm/components/Select/OptionContent/Styles.js.map +1 -1
  45. package/dist/esm/components/Wizard/Wizard.js +1 -1
  46. package/dist/esm/components/Wizard/Wizard.js.map +1 -1
  47. package/dist/esm/components/Wizard/{WizardContext.d.ts → context/index.d.ts} +1 -1
  48. package/dist/esm/components/Wizard/context/index.d.ts.map +1 -0
  49. package/dist/esm/components/Wizard/{WizardContext.js → context/index.js} +1 -1
  50. package/dist/esm/components/Wizard/context/index.js.map +1 -0
  51. package/dist/esm/components/Wizard/index.d.ts +2 -1
  52. package/dist/esm/components/Wizard/index.d.ts.map +1 -1
  53. package/dist/esm/components/Wizard/index.js +2 -1
  54. package/dist/esm/components/Wizard/index.js.map +1 -1
  55. package/dist/index.js +88 -37
  56. package/dist/index.js.map +1 -1
  57. package/dist/index.min.js +1 -1
  58. package/dist/index.min.js.map +1 -1
  59. package/package.json +1 -1
  60. package/dist/cjs/components/Wizard/WizardContext.js.map +0 -1
  61. package/dist/esm/components/Wizard/WizardContext.d.ts.map +0 -1
  62. package/dist/esm/components/Wizard/WizardContext.js.map +0 -1
@@ -13,7 +13,7 @@ var _Styles = require("./Styles");
13
13
 
14
14
  var _Typography = require("../Typography/Typography");
15
15
 
16
- var _excluded = ["leftAdornment", "label", "onClose", "size"];
16
+ var _excluded = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "isLabel"];
17
17
 
18
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
19
 
@@ -31,10 +31,18 @@ var Chip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
31
31
  onClose = _ref.onClose,
32
32
  _ref$size = _ref.size,
33
33
  size = _ref$size === void 0 ? "regular" : _ref$size,
34
+ color = _ref.color,
35
+ backgroundColor = _ref.backgroundColor,
36
+ closeClassName = _ref.closeClassName,
37
+ isLabel = _ref.isLabel,
34
38
  rest = _objectWithoutProperties(_ref, _excluded);
35
39
 
36
40
  var showClose = typeof onClose === "function";
37
41
  var variant = (0, _react.useMemo)(function () {
42
+ if (isLabel) {
43
+ return "Caption 2";
44
+ }
45
+
38
46
  switch (size) {
39
47
  case "regular":
40
48
  return "Body 2";
@@ -45,20 +53,24 @@ var Chip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
45
53
  default:
46
54
  return "Caption 1";
47
55
  }
48
- }, [size]);
56
+ }, [isLabel, size]);
49
57
  return /*#__PURE__*/_react.default.createElement(_Styles.ChipContainer, _extends({}, rest, {
50
58
  ref: ref,
51
59
  $size: size,
52
- $showClose: showClose
60
+ $showClose: showClose,
61
+ $color: color,
62
+ $backgroundColor: backgroundColor,
63
+ $isLabel: isLabel,
64
+ "data-testid": "chip-container"
53
65
  }), leftAdornment, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
54
66
  variant: variant,
55
- className: "tw-flex-1 tw-truncate"
67
+ "data-testid": "chip-typography"
56
68
  }, label), showClose ? /*#__PURE__*/_react.default.createElement(_Styles.ChipTrigger, {
57
69
  $size: size,
58
70
  onClick: onClose,
59
- className: "tw-ml-0.5"
71
+ className: closeClassName
60
72
  }, /*#__PURE__*/_react.default.createElement(_Styles.ChipCloseIcon, {
61
- fill: "currentColor"
73
+ fill: color ? color : "currentColor"
62
74
  })) : null);
63
75
  });
64
76
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","React","forwardRef","ref","leftAdornment","label","onClose","size","rest","showClose","variant","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;AASO,IAAMA,IAAI,gBAAGC,eAAMC,UAAN,CAGlB,gBAA+DC,GAA/D,EAAuE;AAAA,MAApEC,aAAoE,QAApEA,aAAoE;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,uBAArCC,IAAqC;AAAA,MAArCA,IAAqC,0BAA9B,SAA8B;AAAA,MAAhBC,IAAgB;;AACvE,MAAMC,SAAS,GAAG,OAAOH,OAAP,KAAmB,UAArC;AACA,MAAMI,OAAO,GAAG,oBAAQ,YAAM;AAC5B,YAAQH,IAAR;AACE,WAAK,SAAL;AACE,eAAO,QAAP;;AACF,WAAK,KAAL;AACE,eAAO,QAAP;;AACF;AACE,eAAO,WAAP;AANJ;AAQD,GATe,EASb,CAACA,IAAD,CATa,CAAhB;AAUA,sBACE,6BAAC,qBAAD,eAAmBC,IAAnB;AAAyB,IAAA,GAAG,EAAEL,GAA9B;AAAmC,IAAA,KAAK,EAAEI,IAA1C;AAAgD,IAAA,UAAU,EAAEE;AAA5D,MACGL,aADH,eAEE,6BAAC,sBAAD;AAAY,IAAA,OAAO,EAAEM,OAArB;AAA8B,IAAA,SAAS,EAAE;AAAzC,KACGL,KADH,CAFF,EAKGI,SAAS,gBACR,6BAAC,mBAAD;AAAa,IAAA,KAAK,EAAEF,IAApB;AAA0B,IAAA,OAAO,EAAED,OAAnC;AAA4C,IAAA,SAAS,EAAE;AAAvD,kBACE,6BAAC,qBAAD;AAAe,IAAA,IAAI,EAAC;AAApB,IADF,CADQ,GAIN,IATN,CADF;AAaD,CA5BmB,CAAb;;;AA8BPN,IAAI,CAACW,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface ChipProps {\n label: string;\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n leftAdornment?: ReactNode;\n size?: InputSize;\n}\n\nexport const Chip = React.forwardRef<\n HTMLDivElement,\n ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(({ leftAdornment, label, onClose, size = \"regular\", ...rest }, ref) => {\n const showClose = typeof onClose === \"function\";\n const variant = useMemo(() => {\n switch (size) {\n case \"regular\":\n return \"Body 2\";\n case \"big\":\n return \"Body 1\";\n default:\n return \"Caption 1\";\n }\n }, [size]);\n return (\n <ChipContainer {...rest} ref={ref} $size={size} $showClose={showClose}>\n {leftAdornment}\n <Typography variant={variant} className={\"tw-flex-1 tw-truncate\"}>\n {label}\n </Typography>\n {showClose ? (\n <ChipTrigger $size={size} onClick={onClose} className={\"tw-ml-0.5\"}>\n <ChipCloseIcon fill=\"currentColor\" />\n </ChipTrigger>\n ) : null}\n </ChipContainer>\n );\n});\n\nChip.displayName = \"Chip\";\n"],"file":"Chip.js"}
1
+ {"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","React","forwardRef","ref","leftAdornment","label","onClose","size","color","backgroundColor","closeClassName","isLabel","rest","showClose","variant","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;AAaO,IAAMA,IAAI,gBAAGC,eAAMC,UAAN,CAIlB,gBAYEC,GAZF,EAaK;AAAA,MAXDC,aAWC,QAXDA,aAWC;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,OASC,QATDA,OASC;AAAA,uBARDC,IAQC;AAAA,MARDA,IAQC,0BARM,SAQN;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,eAMC,QANDA,eAMC;AAAA,MALDC,cAKC,QALDA,cAKC;AAAA,MAJDC,OAIC,QAJDA,OAIC;AAAA,MAHEC,IAGF;;AACH,MAAMC,SAAS,GAAG,OAAOP,OAAP,KAAmB,UAArC;AACA,MAAMQ,OAAO,GAAG,oBAAQ,YAAM;AAC5B,QAAIH,OAAJ,EAAa;AACX,aAAO,WAAP;AACD;;AACD,YAAQJ,IAAR;AACE,WAAK,SAAL;AACE,eAAO,QAAP;;AACF,WAAK,KAAL;AACE,eAAO,QAAP;;AACF;AACE,eAAO,WAAP;AANJ;AAQD,GAZe,EAYb,CAACI,OAAD,EAAUJ,IAAV,CAZa,CAAhB;AAaA,sBACE,6BAAC,qBAAD,eACMK,IADN;AAEE,IAAA,GAAG,EAAET,GAFP;AAGE,IAAA,KAAK,EAAEI,IAHT;AAIE,IAAA,UAAU,EAAEM,SAJd;AAKE,IAAA,MAAM,EAAEL,KALV;AAME,IAAA,gBAAgB,EAAEC,eANpB;AAOE,IAAA,QAAQ,EAAEE,OAPZ;AAQE,mBAAa;AARf,MAUGP,aAVH,eAWE,6BAAC,sBAAD;AAAY,IAAA,OAAO,EAAEU,OAArB;AAA8B,mBAAa;AAA3C,KACGT,KADH,CAXF,EAcGQ,SAAS,gBACR,6BAAC,mBAAD;AACE,IAAA,KAAK,EAAEN,IADT;AAEE,IAAA,OAAO,EAAED,OAFX;AAGE,IAAA,SAAS,EAAEI;AAHb,kBAKE,6BAAC,qBAAD;AAAe,IAAA,IAAI,EAAEF,KAAK,GAAGA,KAAH,GAAW;AAArC,IALF,CADQ,GAQN,IAtBN,CADF;AA0BD,CA1DiB,CAAb;;;AA6DPR,IAAI,CAACe,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface ChipProps {\n label: string;\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n leftAdornment?: ReactNode;\n size?: InputSize;\n color?: string;\n backgroundColor?: string;\n closeClassName?: string;\n isLabel?: boolean;\n}\n\nexport const Chip = React.forwardRef<\n HTMLDivElement,\n ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n (\n {\n leftAdornment,\n label,\n onClose,\n size = \"regular\",\n color,\n backgroundColor,\n closeClassName,\n isLabel,\n ...rest\n },\n ref\n ) => {\n const showClose = typeof onClose === \"function\";\n const variant = useMemo(() => {\n if (isLabel) {\n return \"Caption 2\";\n }\n switch (size) {\n case \"regular\":\n return \"Body 2\";\n case \"big\":\n return \"Body 1\";\n default:\n return \"Caption 1\";\n }\n }, [isLabel, size]);\n return (\n <ChipContainer\n {...rest}\n ref={ref}\n $size={size}\n $showClose={showClose}\n $color={color}\n $backgroundColor={backgroundColor}\n $isLabel={isLabel}\n data-testid={\"chip-container\"}\n >\n {leftAdornment}\n <Typography variant={variant} data-testid={\"chip-typography\"}>\n {label}\n </Typography>\n {showClose ? (\n <ChipTrigger\n $size={size}\n onClick={onClose}\n className={closeClassName}\n >\n <ChipCloseIcon fill={color ? color : \"currentColor\"} />\n </ChipTrigger>\n ) : null}\n </ChipContainer>\n );\n }\n);\n\nChip.displayName = \"Chip\";\n"],"file":"Chip.js"}
@@ -17,6 +17,8 @@ var _Trigger = require("../Trigger");
17
17
 
18
18
  var _FontStyle = require("../FontStyle");
19
19
 
20
+ var _Styles = require("../Typography/Styles");
21
+
20
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
23
 
22
24
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,7 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
24
26
  var ChipContainer = _styledComponents.default.div.withConfig({
25
27
  displayName: "Styles__ChipContainer",
26
28
  componentId: "sc-7s0bd1-0"
27
- })(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], {
29
+ })(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "{", " ", "}", " ", " ", " ", " ", " ", " ", ""], {
28
30
  "height": "1.5rem"
29
31
  }, {
30
32
  "borderRadius": "0.25rem"
@@ -48,6 +50,21 @@ var ChipContainer = _styledComponents.default.div.withConfig({
48
50
  "fontWeight": "400"
49
51
  }, {
50
52
  "backgroundColor": "var(--color-theme-400)"
53
+ }, _Styles.StyledTypography, {
54
+ "flex": "1 1 0%"
55
+ }, {
56
+ "overflow": "hidden",
57
+ "textOverflow": "ellipsis",
58
+ "whiteSpace": "nowrap"
59
+ }, function (_ref) {
60
+ var $color = _ref.$color;
61
+ return $color && (0, _styledComponents.css)(["", "{color:", ";}"], _Styles.StyledTypography, $color);
62
+ }, function (_ref2) {
63
+ var $isLabel = _ref2.$isLabel;
64
+ return $isLabel && (0, _styledComponents.css)(["", "{color:#303037;}"], _Styles.StyledTypography);
65
+ }, function (_ref3) {
66
+ var $backgroundColor = _ref3.$backgroundColor;
67
+ return $backgroundColor && (0, _styledComponents.css)(["background-color:", ";"], $backgroundColor);
51
68
  }, function (props) {
52
69
  return props.$showClose ? null : (0, _styledComponents.css)(["", ""], {
53
70
  "paddingRight": "0.375rem"
@@ -79,12 +96,14 @@ ChipLabel.displayName = "ChipLabel";
79
96
  var ChipTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
80
97
  displayName: "Styles__ChipTrigger",
81
98
  componentId: "sc-7s0bd1-2"
82
- })(["", " ", " ", " &:hover{", "}", " ", " ", ""], {
99
+ })(["", " ", " ", " ", " &:hover{", "}", " ", " ", ""], {
83
100
  "display": "flex"
84
101
  }, {
85
102
  "alignItems": "center"
86
103
  }, {
87
104
  "justifyContent": "center"
105
+ }, {
106
+ "marginLeft": "0.125rem"
88
107
  }, {
89
108
  "backgroundColor": "var(--color-theme-transparent-400)"
90
109
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Chip/Styles.ts"],"names":["ChipContainer","styled","div","FontStyle","BoxSizingStyle","props","$showClose","css","$size","displayName","ChipLabel","span","ChipTrigger","Trigger","ChipCloseIcon","CloseSmallIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,iIAMpB;AAAA;AAAA,CANoB,EAOpB;AAAA;AAAA,CAPoB,EAQpB;AAAA;AAAA,CARoB,EASpB;AAAA;AAAA,CAToB,EAUpB;AAAA;AAAA,CAVoB,EAWpB;AAAA;AAAA,CAXoB,EAatBC,oBAbsB,EActBC,8BAdsB,EAiBpB;AAAA;AAAA,CAjBoB,EAkBpB;AAAA;AAAA,CAlBoB,EAmBpB;AAAA;AAAA,CAnBoB,EAoBpB;AAAA;AAAA,CApBoB,EAqBpB;AAAA;AAAA,CArBoB,EAwBpB;AAAA;AAAA,CAxBoB,EA0BtB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,GACI,IADJ,OAEIC,qBAFJ,YAGU;AAAA;AAAA,GAHV,CADA;AAAA,CA1BsB,EAiCtB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,QACAD,qBADA,mBADA;AAAA,CAjCsB,EAuCtB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,mBADA;AAAA,CAvCsB,EA6CtB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,KAAhB,QACAD,qBADA,mBADA;AAAA,CA7CsB,CAAnB;;;AAoDPP,aAAa,CAACS,WAAd,GAA4B,eAA5B;;AAEO,IAAMC,SAAS,GAAGT,0BAAOU,IAAV;AAAA;AAAA;AAAA,kBAChB;AAAA;AAAA,CADgB,EAEhB;AAAA;AAAA;AAAA;AAAA,CAFgB,CAAf;;;AAKPD,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEO,IAAMG,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,mDAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAMhB;AAAA;AAAA,CANgB,EASpB,UAACR,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,QACAD,qBADA,8BADA;AAAA,CAToB,EAgBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,8BADA;AAAA,CAhBoB,EAuBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,KAAhB,QACAD,qBADA,8BADA;AAAA,CAvBoB,CAAjB;;AA+BPK,WAAW,CAACH,WAAZ,GAA0B,aAA1B;AAEO,IAAMK,aAAa,GAAG,+BAAOC,qBAAP,CAAH;AAAA;AAAA;AAAA,aACpB;AAAA;AAAA,CADoB,CAAnB;;AAIPD,aAAa,CAACL,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const ChipContainer = styled.div<{\n $showClose?: boolean;\n $size?: string;\n}>`\n min-width: 44px;\n max-width: 220px;\n ${tw`tw-h-6`}\n ${tw`tw-rounded`}\n ${tw`tw-flex`}\n ${tw`tw-items-center`}\n ${tw`tw-pl-1.5`}\n ${tw`tw-overflow-hidden`}\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n // font\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n\n // background\n ${tw`tw-bg-theme-400`}\n\n ${(props) =>\n props.$showClose\n ? null\n : css`\n ${tw`tw-pr-1.5`}\n `}\n\n ${(props) =>\n props.$size === \"regular\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n height: 18px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 30px;\n `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n ${tw`tw-w-full`}\n ${tw`tw-truncate`}\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<{ $size?: string }>`\n ${tw`tw-flex`}\n ${tw`tw-items-center`}\n ${tw`tw-justify-center`}\n\n &:hover {\n ${tw`tw-bg-theme-transparent-400`}\n }\n\n ${(props) =>\n props.$size === \"regular\" &&\n css`\n height: 24px;\n width: 24px;\n `}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n height: 18px;\n width: 18px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 30px;\n width: 30px;\n `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n ${tw`tw-text-theme-700`}\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Chip/Styles.ts"],"names":["ChipContainer","styled","div","FontStyle","BoxSizingStyle","StyledTypography","$color","css","$isLabel","$backgroundColor","props","$showClose","$size","displayName","ChipLabel","span","ChipTrigger","Trigger","ChipCloseIcon","CloseSmallIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+JASpB;AAAA;AAAA,CAToB,EAUpB;AAAA;AAAA,CAVoB,EAWpB;AAAA;AAAA,CAXoB,EAYpB;AAAA;AAAA,CAZoB,EAapB;AAAA;AAAA,CAboB,EAcpB;AAAA;AAAA,CAdoB,EAgBtBC,oBAhBsB,EAiBtBC,8BAjBsB,EAoBpB;AAAA;AAAA,CApBoB,EAqBpB;AAAA;AAAA,CArBoB,EAsBpB;AAAA;AAAA,CAtBoB,EAuBpB;AAAA;AAAA,CAvBoB,EAwBpB;AAAA;AAAA,CAxBoB,EA2BpB;AAAA;AAAA,CA3BoB,EA6BtBC,wBA7BsB,EA8BlB;AAAA;AAAA,CA9BkB,EA+BlB;AAAA;AAAA;AAAA;AAAA,CA/BkB,EAkCtB;AAAA,MAAGC,MAAH,QAAGA,MAAH;AAAA,SACAA,MAAM,QACNC,qBADM,yBAEFF,wBAFE,EAGOC,MAHP,CADN;AAAA,CAlCsB,EAyCtB;AAAA,MAAGE,QAAH,SAAGA,QAAH;AAAA,SACAA,QAAQ,QACRD,qBADQ,4BAEJF,wBAFI,CADR;AAAA,CAzCsB,EAiDtB;AAAA,MAAGI,gBAAH,SAAGA,gBAAH;AAAA,SACAA,gBAAgB,QAChBF,qBADgB,8BAEME,gBAFN,CADhB;AAAA,CAjDsB,EAuDtB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,GACI,IADJ,OAEIJ,qBAFJ,YAGU;AAAA;AAAA,GAHV,CADA;AAAA,CAvDsB,EA8DtB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,SAAhB,QACAL,qBADA,mBADA;AAAA,CA9DsB,EAoEtB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,QACAL,qBADA,mBADA;AAAA,CApEsB,EA0EtB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,KAAhB,QACAL,qBADA,mBADA;AAAA,CA1EsB,CAAnB;;;AAiFPP,aAAa,CAACa,WAAd,GAA4B,eAA5B;;AAEO,IAAMC,SAAS,GAAGb,0BAAOc,IAAV;AAAA;AAAA;AAAA,kBAChB;AAAA;AAAA,CADgB,EAEhB;AAAA;AAAA;AAAA;AAAA,CAFgB,CAAf;;;AAKPD,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEO,IAAMG,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,wDAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAQhB;AAAA;AAAA,CARgB,EAWpB,UAACP,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,SAAhB,QACAL,qBADA,8BADA;AAAA,CAXoB,EAkBpB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,QACAL,qBADA,8BADA;AAAA,CAlBoB,EAyBpB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,KAAhB,QACAL,qBADA,8BADA;AAAA,CAzBoB,CAAjB;;AAiCPS,WAAW,CAACH,WAAZ,GAA0B,aAA1B;AAEO,IAAMK,aAAa,GAAG,+BAAOC,qBAAP,CAAH;AAAA;AAAA;AAAA,aACpB;AAAA;AAAA,CADoB,CAAnB;;AAIPD,aAAa,CAACL,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\nimport { FontStyle } from \"../FontStyle\";\nimport { StyledTypography } from \"../Typography/Styles\";\n\nexport const ChipContainer = styled.div<{\n $showClose?: boolean;\n $size?: string;\n $color?: string;\n $backgroundColor?: string;\n $isLabel?: boolean;\n}>`\n min-width: 44px;\n max-width: 220px;\n ${tw`tw-h-6`}\n ${tw`tw-rounded`}\n ${tw`tw-flex`}\n ${tw`tw-items-center`}\n ${tw`tw-pl-1.5`}\n ${tw`tw-overflow-hidden`}\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n // font\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n\n // background\n ${tw`tw-bg-theme-400`}\n\n ${StyledTypography} {\n ${tw`tw-flex-1`}\n ${tw`tw-truncate`}\n }\n\n ${({ $color }) =>\n $color &&\n css`\n ${StyledTypography} {\n color: ${$color};\n }\n `}\n ${({ $isLabel }) =>\n $isLabel &&\n css`\n ${StyledTypography} {\n color: #303037;\n }\n `}\n\n ${({ $backgroundColor }) =>\n $backgroundColor &&\n css`\n background-color: ${$backgroundColor};\n `}\n\n ${(props) =>\n props.$showClose\n ? null\n : css`\n ${tw`tw-pr-1.5`}\n `}\n\n ${(props) =>\n props.$size === \"regular\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n height: 18px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 30px;\n `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n ${tw`tw-w-full`}\n ${tw`tw-truncate`}\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<{ $size?: string }>`\n ${tw`tw-flex`}\n ${tw`tw-items-center`}\n ${tw`tw-justify-center`}\n ${tw`tw-ml-0.5`}\n\n\n &:hover {\n ${tw`tw-bg-theme-transparent-400`}\n }\n\n ${(props) =>\n props.$size === \"regular\" &&\n css`\n height: 24px;\n width: 24px;\n `}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n height: 18px;\n width: 18px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 30px;\n width: 30px;\n `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n ${tw`tw-text-theme-700`}\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"file":"Styles.js"}
@@ -53,7 +53,7 @@ var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper
53
53
 
54
54
  var _classnames = _interopRequireDefault(require("classnames"));
55
55
 
56
- var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName"];
56
+ var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper"];
57
57
 
58
58
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
59
59
 
@@ -109,6 +109,7 @@ var ComboBox = function ComboBox(_ref) {
109
109
  _ref$inPortal = _ref.inPortal,
110
110
  inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
111
111
  inputWrapperClassName = _ref.inputWrapperClassName,
112
+ scrollWrapper = _ref.scrollWrapper,
112
113
  prop = _objectWithoutProperties(_ref, _excluded);
113
114
 
114
115
  var selectedName = (0, _react.useMemo)(function () {
@@ -272,24 +273,39 @@ var ComboBox = function ComboBox(_ref) {
272
273
  "marginRight": "0.125rem"
273
274
  }
274
275
  })) : undefined;
276
+
277
+ var onClose = function onClose(e) {
278
+ e.preventDefault();
279
+ e.stopPropagation();
280
+
281
+ if (Array.isArray(selected) && selected.includes(option.id)) {
282
+ if (typeof onChange === "function") {
283
+ var newSelected = selected.filter(function (item) {
284
+ return item !== option.id;
285
+ });
286
+ onChange(newSelected);
287
+ }
288
+ }
289
+ };
290
+
291
+ var showOnClose = true;
292
+
293
+ if (disabled) {
294
+ showOnClose = false;
295
+ }
296
+
297
+ if (option.color) {
298
+ showOnClose = false;
299
+ }
300
+
275
301
  return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
276
302
  className: "c-combo-box-chip",
277
303
  leftAdornment: leftAdornment,
278
304
  label: option.name,
279
305
  key: index,
280
- onClose: !disabled ? function (e) {
281
- e.preventDefault();
282
- e.stopPropagation();
283
-
284
- if (Array.isArray(selected) && selected.includes(option.id)) {
285
- if (typeof onChange === "function") {
286
- var newSelected = selected.filter(function (item) {
287
- return item !== option.id;
288
- });
289
- onChange(newSelected);
290
- }
291
- }
292
- } : undefined,
306
+ backgroundColor: option.color,
307
+ isLabel: Boolean(option.color),
308
+ onClose: showOnClose ? onClose : undefined,
293
309
  size: size
294
310
  });
295
311
  }, [disabled, onChange, renderChip, selected, size]);
@@ -350,7 +366,9 @@ var ComboBox = function ComboBox(_ref) {
350
366
 
351
367
  (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
352
368
  },
353
- $_css3: autoSize === "auto" ? "auto" : undefined
369
+ $_css3: autoSize === "auto" ? "auto" : undefined,
370
+ $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
371
+ $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
354
372
  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledChipWrapper, {
355
373
  $autoSize: autoSize,
356
374
  $open: open,
@@ -455,8 +473,12 @@ var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).w
455
473
  var _StyledStyledInputWrapper = (0, _styledComponents.default)(_Styles2.StyledInputWrapper).withConfig({
456
474
  displayName: "ComboBox___StyledStyledInputWrapper",
457
475
  componentId: "sc-uvsz9l-2"
458
- })(["display:flex;justify-content:space-between;flex:1;height:", ";"], function (p) {
476
+ })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], function (p) {
459
477
  return p.$_css3;
478
+ }, function (p) {
479
+ return p.$_css4;
480
+ }, function (p) {
481
+ return p.$_css5;
460
482
  });
461
483
 
462
484
  var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","inPortal","inputWrapperClassName","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","comboBoxRef","open","setOpen","current","contains","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","handleBlur","renderChipAdornment","index","avatarProps","leftAdornment","undefined","Array","isArray","includes","newSelected","filter","item","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","display","flex","alignSelf","width","children","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n IAutocompleteProps,\n isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledChipWrapper,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInput, StyledInputWrapper } from \"../Input/Styles\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\nimport { Trigger } from \"../Trigger\";\nimport { Typography } from \"../Typography/Typography\";\nimport tw from \"twin.macro\";\nimport { Portal } from \"../../helpers\";\nimport { ConditionalWrapper } from \"../../helpers/ConditionWrapper/ConditionWrapper\";\nimport classNames from \"classnames\";\n\nexport interface IComboBoxProps\n extends Omit<IAutocompleteProps, \"handleChange\" | \"inputEl\"> {\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (\n e: (string | number)[] | string | number | null | undefined\n ) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n /** Combobox size */\n size?: InputSize;\n /** Invalid state */\n invalid?: boolean;\n /** Render Chip */\n renderChip?: <T extends IOptionItemProps>(\n item: T,\n key?: string | number\n ) => JSX.Element;\n /** Close menu on change */\n forceCloseMenu?: boolean;\n /** Limit chips */\n limitChips?: number;\n /** Hidden number text */\n hiddenNumberText?: (hidden: number) => string;\n /** Render Autocomplete in <Portal> */\n inPortal?: boolean;\n /** inputWrapperClassName */\n inputWrapperClassName?: string;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size = \"regular\",\n invalid = false,\n type = \"single\",\n renderChip,\n forceCloseMenu = type === \"single\",\n renderOption,\n limitChips = 2,\n hiddenNumberText,\n inPortal = false,\n inputWrapperClassName,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const chipWrapper = useRef<HTMLDivElement>(null);\n const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n const [open, setOpen] = useState(false);\n\n useOnClickOutside(wrapperRef, (e) => {\n if (e.target && comboBoxRef.current?.contains(e.target as Node)) {\n return;\n }\n setOpen(false);\n });\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n if (e.key === \"Enter\" && type === \"multiple\") {\n setValue(\"\");\n }\n },\n [open, selectedName, type]\n );\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n onChange?.(selectedValue);\n if (forceCloseMenu) {\n setOpen(false);\n }\n },\n [forceCloseMenu, onChange]\n );\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback(\n (option, props) => {\n if (typeof renderOption === \"function\") {\n return renderOption(option, props);\n }\n if (type === \"multiple\") {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <Checkbox {...props} />\n </>\n );\n }\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n },\n [type, renderOption]\n );\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n if (type === \"multiple\") {\n onChange?.([]);\n } else {\n onChange?.(\"\");\n }\n\n setOpen(false);\n },\n [type, onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const handleBlur = useCallback(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const renderChipAdornment = useCallback(\n (option, index) => {\n if (typeof renderChip === \"function\") {\n return renderChip(option, index);\n }\n const avatarProps: Partial<IAvatar> = {\n size: 18,\n };\n switch (size) {\n case \"big\":\n avatarProps.size = 22;\n break;\n case \"small\":\n avatarProps.size = 14;\n break;\n }\n const leftAdornment = option.image ? (\n <Avatar\n css={`\n ${tw`tw-my-0.5`}\n ${tw`tw-mr-0.5`}\n `}\n url={option.image}\n {...avatarProps}\n />\n ) : undefined;\n\n return (\n <Chip\n className={\"c-combo-box-chip\"}\n leftAdornment={leftAdornment}\n label={option.name}\n key={index}\n onClose={\n !disabled\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (Array.isArray(selected) && selected.includes(option.id)) {\n if (typeof onChange === \"function\") {\n const newSelected = selected.filter(\n (item) => item !== option.id\n );\n onChange(newSelected);\n }\n }\n }\n : undefined\n }\n size={size}\n />\n );\n },\n [disabled, onChange, renderChip, selected, size]\n );\n\n const autoSize = useMemo(() => {\n if (\n type === \"multiple\" &&\n open &&\n Array.isArray(selected) &&\n selected.length > 1\n ) {\n return \"auto\";\n }\n return size;\n }, [open, selected, size, type]);\n\n const startAdornment = useMemo(() => {\n if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n const elements: JSX.Element[] = [];\n let total = 0;\n options.forEach((option, index) => {\n const isGrouped = isOptionGroup(option);\n if (selected.includes(option.id) && !isGrouped) {\n total = total + 1;\n elements.push(renderChipAdornment(option, index));\n } else if (isGrouped) {\n const groupedOptions = option.options.filter((o) =>\n selected.includes(o.id)\n );\n total = total + groupedOptions.length;\n if (groupedOptions.length > 0) {\n groupedOptions.forEach((o, _index) => {\n elements.push(renderChipAdornment(o, `${index}_${_index}`));\n });\n }\n }\n });\n let hidden = 0;\n if (!open && limitChips > 0 && elements.length > limitChips) {\n hidden = elements.splice(\n limitChips,\n elements.length - limitChips\n ).length;\n }\n\n return (\n <Fragment>\n {elements}\n {hidden > 0 && (\n <Typography\n variant={\n size === \"small\"\n ? \"Caption 1\"\n : size === \"regular\"\n ? \"Body 2\"\n : \"Body 1\"\n }\n css={`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n `}\n >\n {typeof hiddenNumberText === \"function\"\n ? hiddenNumberText(hidden)\n : `+${hidden}`}\n </Typography>\n )}\n </Fragment>\n );\n }\n return undefined;\n }, [\n type,\n selected,\n options,\n open,\n limitChips,\n hiddenNumberText,\n renderChipAdornment,\n size,\n ]);\n\n const showXIcon =\n Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n const hasSelected =\n type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n return (\n <div className=\"c-combo-box\">\n {type === \"multiple\" ? (\n <>\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n ref={comboBoxRef}\n css={`\n display: flex;\n justify-content: space-between;\n flex: 1;\n height: ${autoSize === \"auto\" ? \"auto\" : undefined};\n `}\n className={classNames(\n \"c-combo-box-input-wrapper\",\n inputWrapperClassName\n )}\n onClick={() => {\n elementRef.current?.focus();\n }}\n >\n <StyledChipWrapper\n $autoSize={autoSize}\n $open={open}\n ref={chipWrapper}\n >\n {startAdornment}\n <StyledInput\n className={\"c-combo-box-input\"}\n onBlur={handleBlur}\n onFocus={onOpen}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={!hasSelected ? placeholder : undefined}\n disabled={disabled}\n $size={size}\n $loading={loading}\n style={{\n display: \"flex\",\n flex: 1,\n alignSelf: \"center\",\n width: autoSize === \"auto\" ? \"auto\" : \"100%\",\n }}\n />\n </StyledChipWrapper>\n {!disabled && (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : (\n <>\n {showXIcon && (\n <Trigger\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n data-testid={\"deselect-all\"}\n css={`\n display: flex;\n justify-content: center;\n `}\n >\n <StyledComboBoxCloseSmallIcon />\n </Trigger>\n )}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n )}\n </>\n )}\n </StyledInputWrapper>\n </>\n ) : (\n <StyledComboBoxInput\n className={classNames(\"c-combo-box-input\", inputWrapperClassName)}\n onBlur={handleBlur}\n onFocus={onOpen}\n wrapRef={comboBoxRef}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n size={size}\n invalid={invalid}\n $loading={loading}\n startAdornment={startAdornment}\n endAdornment={\n !disabled ? (\n <InputAdornment disablePointerEvents={disabled}>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size=\"small\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </InputAdornment>\n ) : null\n }\n />\n )}\n\n {!disabled ? (\n <ConditionalWrapper\n condition={inPortal}\n wrap={(children) => <Portal>{children}</Portal>}\n >\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{\n zIndex: 10,\n width: comboBoxRef.current?.clientWidth,\n }}\n ref={wrapperRef}\n strategy={\"fixed\"}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type={type}\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n </ConditionalWrapper>\n ) : null}\n </div>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
1
+ {"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","inPortal","inputWrapperClassName","scrollWrapper","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","comboBoxRef","open","setOpen","current","contains","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","handleBlur","renderChipAdornment","index","avatarProps","leftAdornment","undefined","onClose","Array","isArray","includes","newSelected","filter","item","showOnClose","Boolean","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","display","flex","alignSelf","width","children","zIndex","clientWidth","displayName"],"mappings":";;;;;;;;;;;AAAA;;AASA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,IAAMA,QAA4B,GAAG,SAA/BA,QAA+B,OAqBtC;AAAA;;AAAA,0BApBJC,OAoBI;AAAA,MApBJA,OAoBI,6BApBM,EAoBN;AAAA,MAnBJC,QAmBI,QAnBJA,QAmBI;AAAA,0BAlBJC,OAkBI;AAAA,MAlBJA,OAkBI,6BAlBM,KAkBN;AAAA,MAjBJC,WAiBI,QAjBJA,WAiBI;AAAA,MAhBJC,QAgBI,QAhBJA,QAgBI;AAAA,MAfJC,WAeI,QAfJA,WAeI;AAAA,MAdJC,iBAcI,QAdJA,iBAcI;AAAA,2BAbJC,QAaI;AAAA,MAbJA,QAaI,8BAbO,KAaP;AAAA,uBAZJC,IAYI;AAAA,MAZJA,IAYI,0BAZG,SAYH;AAAA,0BAXJC,OAWI;AAAA,MAXJA,OAWI,6BAXM,KAWN;AAAA,uBAVJC,IAUI;AAAA,MAVJA,IAUI,0BAVG,QAUH;AAAA,MATJC,UASI,QATJA,UASI;AAAA,iCARJC,cAQI;AAAA,MARJA,cAQI,oCARaF,IAAI,KAAK,QAQtB;AAAA,MAPJG,YAOI,QAPJA,YAOI;AAAA,6BANJC,UAMI;AAAA,MANJA,UAMI,gCANS,CAMT;AAAA,MALJC,gBAKI,QALJA,gBAKI;AAAA,2BAJJC,QAII;AAAA,MAJJA,QAII,8BAJO,KAIP;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,aAEI,QAFJA,aAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,YAAY,GAAG,oBAAQ,YAAM;AACjC,QAAIC,KAAK,GAAG,EAAZ;;AACA,QAAI,CAACpB,QAAL,EAAe;AACb,aAAOoB,KAAP;AACD;;AACDrB,IAAAA,OAAO,CAACsB,GAAR,CAAY,UAACC,CAAD,EAAO;AACjB,UAAKA,CAAL,aAAKA,CAAL,eAAKA,CAAD,CAA0BvB,OAA9B,EAAuC;AACrC,eAAQuB,CAAD,CAAyBvB,OAAzB,CAAiCwB,IAAjC,CAAsC,UAACC,CAAD,EAAO;AAClD,cAAIA,CAAC,CAACC,EAAF,KAASzB,QAAb,EAAuB;AACrBoB,YAAAA,KAAK,GAAGI,CAAC,CAACE,IAAV;AACA;AACD;AACF,SALM,CAAP;AAMD,OAPD,MAOO;AACL,YAAIJ,CAAC,CAACG,EAAF,KAASzB,QAAb,EAAuB;AACrBoB,UAAAA,KAAK,GAAGE,CAAC,CAACI,IAAV;AACA;AACD;AACF;AACF,KAdD;AAeA,WAAON,KAAP;AACD,GArBoB,EAqBlB,CAACrB,OAAD,EAAUC,QAAV,CArBkB,CAArB;;AAsBA,kBAA0B,qBAASmB,YAAT,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcO,QAAd;;AACA,MAAMC,cAAc,GAAG,wBAAY,UAACC,CAAD;AAAA,WAAOF,QAAQ,CAACE,CAAC,CAACC,MAAF,CAASV,KAAV,CAAf;AAAA,GAAZ,EAA6C,EAA7C,CAAvB;;AACA,mBAAkC,sBAAlC;AAAA;AAAA,MAAOW,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,UAAU,GAAG,mBAAgC,IAAhC,CAAnB;AACA,MAAMC,SAAS,GAAG,yBAAWF,YAAX,EAAyBC,UAAzB,CAAlB;AACA,MAAME,UAAU,GAAG,mBAAuB,IAAvB,CAAnB;AACA,MAAMC,WAAW,GAAG,mBAAuB,IAAvB,CAApB;AACA,MAAMC,WAAW,GAAG,mBAA8B,IAA9B,CAApB;;AAEA,mBAAwB,qBAAS,KAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,4CAAkBJ,UAAlB,EAA8B,UAACN,CAAD,EAAO;AAAA;;AACnC,QAAIA,CAAC,CAACC,MAAF,4BAAYO,WAAW,CAACG,OAAxB,iDAAY,qBAAqBC,QAArB,CAA8BZ,CAAC,CAACC,MAAhC,CAAhB,EAAiE;AAC/D;AACD;;AACDS,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GALD;AAOA,MAAMG,eAAe,GAAG,wBACtB,UAACb,CAAD,EAAO;AACL,QAAIA,CAAC,CAACc,GAAF,KAAU,QAAV,IAAsBL,IAA1B,EAAgC;AAC9BC,MAAAA,OAAO,CAAC,KAAD,CAAP;AACAZ,MAAAA,QAAQ,CAACR,YAAD,CAAR;AACAU,MAAAA,CAAC,CAACe,eAAF;AACD;;AACD,QAAIf,CAAC,CAACc,GAAF,KAAU,OAAV,IAAqBlC,IAAI,KAAK,UAAlC,EAA8C;AAC5CkB,MAAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,GAVqB,EAWtB,CAACW,IAAD,EAAOnB,YAAP,EAAqBV,IAArB,CAXsB,CAAxB;AAcA,wBAAU,YAAM;AACd6B,IAAAA,IAAI,KAAIP,SAAJ,aAAIA,SAAJ,uBAAIA,SAAS,CAAEc,KAAX,EAAJ,CAAJ;AACA,KAACP,IAAD,KAASP,SAAT,aAASA,SAAT,uBAASA,SAAS,CAAEe,IAAX,EAAT;AACD,GAHD,EAGG,CAACf,SAAD,EAAYO,IAAZ,CAHH;AAKA,wBAAU,YAAM;AACdX,IAAAA,QAAQ,CAACR,YAAD,CAAR;AACD,GAFD,EAEG,CAACA,YAAD,CAFH;AAIA,MAAM4B,WAAW,GAAG,wBAClB,UAACzB,CAAD,EAAO;AACLjB,IAAAA,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,YAAAA,iBAAiB,CAAGiB,CAAH,CAAjB;AACAiB,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAJiB,EAKlB,CAAClC,iBAAD,CALkB,CAApB;AAQA,MAAM2C,YAAY,GAAG,wBACnB,UAACC,aAAD,EAAmB;AACjB9C,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG8C,aAAH,CAAR;;AACA,QAAItC,cAAJ,EAAoB;AAClB4B,MAAAA,OAAO,CAAC,KAAD,CAAP;AACD;AACF,GANkB,EAOnB,CAAC5B,cAAD,EAAiBR,QAAjB,CAPmB,CAArB;AAUA,MAAM+C,MAAM,GAAG,wBAAY,YAAM;AAC/B,QAAI,CAAC5C,QAAL,EAAe;AACbiC,MAAAA,OAAO,CAAC,IAAD,CAAP;AACD;AACF,GAJc,EAIZ,CAACjC,QAAD,CAJY,CAAf;AAMA,MAAM6C,kBAAkB,GAAG,wBACzB,UAACC,MAAD,EAASC,KAAT,EAAmB;AACjB,QAAI,OAAOzC,YAAP,KAAwB,UAA5B,EAAwC;AACtC,aAAOA,YAAY,CAACwC,MAAD,EAASC,KAAT,CAAnB;AACD;;AACD,QAAI5C,IAAI,KAAK,UAAb,EAAyB;AACvB,0BACE,yEACE,6BAAC,4BAAD;AACE,QAAA,QAAQ,EAAE2C,MAAM,CAACE,KADnB;AAEE,QAAA,KAAK,EAAEF,MAAM,CAACG,KAFhB;AAGE,QAAA,SAAS,EAAEH,MAAM,CAACI,SAHpB;AAIE,QAAA,IAAI,EAAEJ,MAAM,CAAC1B;AAJf,QADF,eAOE,6BAAC,kBAAD,EAAc2B,KAAd,CAPF,CADF;AAWD;;AACD,wBACE,yEACE,6BAAC,4BAAD;AACE,MAAA,QAAQ,EAAED,MAAM,CAACE,KADnB;AAEE,MAAA,KAAK,EAAEF,MAAM,CAACG,KAFhB;AAGE,MAAA,SAAS,EAAEH,MAAM,CAACI,SAHpB;AAIE,MAAA,IAAI,EAAEJ,MAAM,CAAC1B;AAJf,MADF,eAOE,6BAAC,wBAAD,EAAiB2B,KAAjB,CAPF,CADF;AAWD,GA7BwB,EA8BzB,CAAC5C,IAAD,EAAOG,YAAP,CA9ByB,CAA3B;AAiCA,MAAM6C,cAAc,GAAG,wBACrB,UAAC5B,CAAD,EAAO;AACLA,IAAAA,CAAC,CAACe,eAAF;;AACA,QAAInC,IAAI,KAAK,UAAb,EAAyB;AACvBN,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG,EAAH,CAAR;AACD,KAFD,MAEO;AACLA,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG,EAAH,CAAR;AACD;;AAEDoC,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAVoB,EAWrB,CAAC9B,IAAD,EAAON,QAAP,CAXqB,CAAvB;AAcA,MAAMuD,eAAe,GAAG,wBAAY,UAAC7B,CAAD,EAAO;AACzCA,IAAAA,CAAC,CAAC8B,cAAF;AACD,GAFuB,EAErB,EAFqB,CAAxB;AAIA,MAAMC,UAAU,GAAG,wBAAY,YAAM;AACnCjC,IAAAA,QAAQ,CAACR,YAAD,CAAR;AACD,GAFkB,EAEhB,CAACA,YAAD,CAFgB,CAAnB;AAIA,MAAM0C,mBAAmB,GAAG,wBAC1B,UAACT,MAAD,EAASU,KAAT,EAAmB;AACjB,QAAI,OAAOpD,UAAP,KAAsB,UAA1B,EAAsC;AACpC,aAAOA,UAAU,CAAC0C,MAAD,EAASU,KAAT,CAAjB;AACD;;AACD,QAAMC,WAA6B,GAAG;AACpCxD,MAAAA,IAAI,EAAE;AAD8B,KAAtC;;AAGA,YAAQA,IAAR;AACE,WAAK,KAAL;AACEwD,QAAAA,WAAW,CAACxD,IAAZ,GAAmB,EAAnB;AACA;;AACF,WAAK,OAAL;AACEwD,QAAAA,WAAW,CAACxD,IAAZ,GAAmB,EAAnB;AACA;AANJ;;AAQA,QAAMyD,aAAa,GAAGZ,MAAM,CAACE,KAAP,gBACpB;AAKE,MAAA,GAAG,EAAEF,MAAM,CAACE;AALd,OAMMS,WANN;AAAA,aAEQ;AAAA;AAAA;AAAA,OAFR;AAAA,cAGQ;AAAA;AAAA;AAHR,OADoB,GASlBE,SATJ;;AAWA,QAAMC,OAAO,GAAG,SAAVA,OAAU,CAACrC,CAAD,EAAO;AACrBA,MAAAA,CAAC,CAAC8B,cAAF;AACA9B,MAAAA,CAAC,CAACe,eAAF;;AACA,UAAIuB,KAAK,CAACC,OAAN,CAAcpE,QAAd,KAA2BA,QAAQ,CAACqE,QAAT,CAAkBjB,MAAM,CAAC3B,EAAzB,CAA/B,EAA6D;AAC3D,YAAI,OAAOtB,QAAP,KAAoB,UAAxB,EAAoC;AAClC,cAAMmE,WAAW,GAAGtE,QAAQ,CAACuE,MAAT,CAAgB,UAACC,IAAD;AAAA,mBAAUA,IAAI,KAAKpB,MAAM,CAAC3B,EAA1B;AAAA,WAAhB,CAApB;AACAtB,UAAAA,QAAQ,CAACmE,WAAD,CAAR;AACD;AACF;AACF,KATD;;AAWA,QAAIG,WAAW,GAAG,IAAlB;;AACA,QAAInE,QAAJ,EAAc;AACZmE,MAAAA,WAAW,GAAG,KAAd;AACD;;AACD,QAAIrB,MAAM,CAACG,KAAX,EAAkB;AAChBkB,MAAAA,WAAW,GAAG,KAAd;AACD;;AAED,wBACE,6BAAC,UAAD;AACE,MAAA,SAAS,EAAE,kBADb;AAEE,MAAA,aAAa,EAAET,aAFjB;AAGE,MAAA,KAAK,EAAEZ,MAAM,CAAC1B,IAHhB;AAIE,MAAA,GAAG,EAAEoC,KAJP;AAKE,MAAA,eAAe,EAAEV,MAAM,CAACG,KAL1B;AAME,MAAA,OAAO,EAAEmB,OAAO,CAACtB,MAAM,CAACG,KAAR,CANlB;AAOE,MAAA,OAAO,EAAEkB,WAAW,GAAGP,OAAH,GAAaD,SAPnC;AAQE,MAAA,IAAI,EAAE1D;AARR,MADF;AAYD,GA1DyB,EA2D1B,CAACD,QAAD,EAAWH,QAAX,EAAqBO,UAArB,EAAiCV,QAAjC,EAA2CO,IAA3C,CA3D0B,CAA5B;AA8DA,MAAMoE,QAAQ,GAAG,oBAAQ,YAAM;AAC7B,QACElE,IAAI,KAAK,UAAT,IACA6B,IADA,IAEA6B,KAAK,CAACC,OAAN,CAAcpE,QAAd,CAFA,IAGAA,QAAQ,CAAC4E,MAAT,GAAkB,CAJpB,EAKE;AACA,aAAO,MAAP;AACD;;AACD,WAAOrE,IAAP;AACD,GAVgB,EAUd,CAAC+B,IAAD,EAAOtC,QAAP,EAAiBO,IAAjB,EAAuBE,IAAvB,CAVc,CAAjB;AAYA,MAAMoE,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIpE,IAAI,KAAK,UAAT,IAAuB0D,KAAK,CAACC,OAAN,CAAcpE,QAAd,CAAvB,IAAkDA,QAAQ,CAAC4E,MAAT,GAAkB,CAAxE,EAA2E;AACzE,UAAME,QAAuB,GAAG,EAAhC;AACA,UAAIC,KAAK,GAAG,CAAZ;AACAhF,MAAAA,OAAO,CAACiF,OAAR,CAAgB,UAAC5B,MAAD,EAASU,KAAT,EAAmB;AACjC,YAAMmB,SAAS,GAAG,kCAAc7B,MAAd,CAAlB;;AACA,YAAIpD,QAAQ,CAACqE,QAAT,CAAkBjB,MAAM,CAAC3B,EAAzB,KAAgC,CAACwD,SAArC,EAAgD;AAC9CF,UAAAA,KAAK,GAAGA,KAAK,GAAG,CAAhB;AACAD,UAAAA,QAAQ,CAACI,IAAT,CAAcrB,mBAAmB,CAACT,MAAD,EAASU,KAAT,CAAjC;AACD,SAHD,MAGO,IAAImB,SAAJ,EAAe;AACpB,cAAME,cAAc,GAAG/B,MAAM,CAACrD,OAAP,CAAewE,MAAf,CAAsB,UAACa,CAAD;AAAA,mBAC3CpF,QAAQ,CAACqE,QAAT,CAAkBe,CAAC,CAAC3D,EAApB,CAD2C;AAAA,WAAtB,CAAvB;AAGAsD,UAAAA,KAAK,GAAGA,KAAK,GAAGI,cAAc,CAACP,MAA/B;;AACA,cAAIO,cAAc,CAACP,MAAf,GAAwB,CAA5B,EAA+B;AAC7BO,YAAAA,cAAc,CAACH,OAAf,CAAuB,UAACI,CAAD,EAAIC,MAAJ,EAAe;AACpCP,cAAAA,QAAQ,CAACI,IAAT,CAAcrB,mBAAmB,CAACuB,CAAD,YAAOtB,KAAP,cAAgBuB,MAAhB,EAAjC;AACD,aAFD;AAGD;AACF;AACF,OAhBD;AAiBA,UAAIC,OAAM,GAAG,CAAb;;AACA,UAAI,CAAChD,IAAD,IAASzB,UAAU,GAAG,CAAtB,IAA2BiE,QAAQ,CAACF,MAAT,GAAkB/D,UAAjD,EAA6D;AAC3DyE,QAAAA,OAAM,GAAGR,QAAQ,CAACS,MAAT,CACP1E,UADO,EAEPiE,QAAQ,CAACF,MAAT,GAAkB/D,UAFX,EAGP+D,MAHF;AAID;;AAED,0BACE,6BAAC,eAAD,QACGE,QADH,EAEGQ,OAAM,GAAG,CAAT,iBACC;AACE,QAAA,OAAO,EACL/E,IAAI,KAAK,OAAT,GACI,WADJ,GAEIA,IAAI,KAAK,SAAT,GACA,QADA,GAEA;AANR,SAcG,OAAOO,gBAAP,KAA4B,UAA5B,GACGA,gBAAgB,CAACwE,OAAD,CADnB,cAEOA,OAFP,CAdH,CAHJ,CADF;AAyBD;;AACD,WAAOrB,SAAP;AACD,GAxDsB,EAwDpB,CACDxD,IADC,EAEDT,QAFC,EAGDD,OAHC,EAIDuC,IAJC,EAKDzB,UALC,EAMDC,gBANC,EAOD+C,mBAPC,EAQDtD,IARC,CAxDoB,CAAvB;AAmEA,MAAMiF,SAAS,GACbrB,KAAK,CAACC,OAAN,CAAcpE,QAAd,KAA2BS,IAAI,KAAK,UAApC,IAAkDT,QAAQ,CAAC4E,MAAT,GAAkB,CADtE;AAGA,MAAMa,WAAW,GACfhF,IAAI,KAAK,UAAT,IAAuB0D,KAAK,CAACC,OAAN,CAAcpE,QAAd,CAAvB,IAAkDA,QAAQ,CAAC4E,MAAT,GAAkB,CADtE;AAGA,sBACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGnE,IAAI,KAAK,UAAT,gBACC,yEACE;AACE,IAAA,KAAK,EAAEF,IADT;AAEE,IAAA,QAAQ,EAAEC,OAFZ;AAGE,IAAA,GAAG,EAAE6B,WAHP;AAgBE,IAAA,SAAS,EAAE,yBACT,2BADS,EAETrB,qBAFS,CAhBb;AAoBE,IAAA,OAAO,EAAE,mBAAM;AAAA;;AACb,6BAAAiB,UAAU,CAACO,OAAX,4EAAoBK,KAApB;AACD,KAtBH;AAAA,YAQc8B,QAAQ,KAAK,MAAb,GAAsB,MAAtB,GAA+BV,SAR7C;AAAA,YASkBU,QAAQ,KAAK,MAAb,IAAuB1D,aAAvB,GACV,QADU,GAEVgD,SAXR;AAAA,YAYkBU,QAAQ,KAAK,MAAb,IAAuB1D,aAAvB,GACV,MADU,GAEVgD;AAdR,kBAwBE,6BAAC,yBAAD;AACE,IAAA,SAAS,EAAEU,QADb;AAEE,IAAA,KAAK,EAAErC,IAFT;AAGE,IAAA,GAAG,EAAEF;AAHP,KAKGyC,cALH,eAME,6BAAC,oBAAD;AACE,IAAA,SAAS,EAAE,mBADb;AAEE,IAAA,MAAM,EAAEjB,UAFV;AAGE,IAAA,OAAO,EAAEV,MAHX;AAIE,IAAA,GAAG,EAAEhB,SAJP;AAKE,IAAA,KAAK,EAAEjC,OAAO,IAAIC,WAAX,GAAyBA,WAAzB,GAAuCkB,KALhD;AAME,IAAA,SAAS,EAAEsB,eANb;AAOE,IAAA,QAAQ,EAAEd,cAPZ;AAQE,IAAA,WAAW,EAAE,CAAC6D,WAAD,GAAerF,WAAf,GAA6B6D,SAR5C;AASE,IAAA,QAAQ,EAAE3D,QATZ;AAUE,IAAA,KAAK,EAAEC,IAVT;AAWE,IAAA,QAAQ,EAAEN,OAXZ;AAYE,IAAA,KAAK,EAAE;AACLyF,MAAAA,OAAO,EAAE,MADJ;AAELC,MAAAA,IAAI,EAAE,CAFD;AAGLC,MAAAA,SAAS,EAAE,QAHN;AAILC,MAAAA,KAAK,EAAElB,QAAQ,KAAK,MAAb,GAAsB,MAAtB,GAA+B;AAJjC;AAZT,IANF,CAxBF,EAkDG,CAACrE,QAAD,iBACC,4DACGL,OAAO,gBACN,6BAAC,4BAAD,OADM,gBAGN,4DACGuF,SAAS,iBACR;AACE,IAAA,WAAW,EAAE9B,eADf;AAEE,IAAA,OAAO,EAAED,cAFX;AAGE,mBAAa;AAHf,kBASE,6BAAC,oCAAD,OATF,CAFJ,eAcE,6BAAC,8CAAD;AAAwC,IAAA,KAAK,EAAEnB;AAA/C,IAdF,CAJJ,CAnDJ,CADF,CADD,gBA+EC,6BAAC,2BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,mBAAX,EAAgCtB,qBAAhC,CADb;AAEE,IAAA,MAAM,EAAE4C,UAFV;AAGE,IAAA,OAAO,EAAEV,MAHX;AAIE,IAAA,OAAO,EAAEb,WAJX;AAKE,IAAA,GAAG,EAAEH,SALP;AAME,IAAA,KAAK,EAAEjC,OAAO,IAAIC,WAAX,GAAyBA,WAAzB,GAAuCkB,KANhD;AAOE,IAAA,SAAS,EAAEsB,eAPb;AAQE,IAAA,QAAQ,EAAEd,cARZ;AASE,IAAA,WAAW,EAAExB,WATf;AAUE,IAAA,QAAQ,EAAEE,QAVZ;AAWE,IAAA,IAAI,EAAEC,IAXR;AAYE,IAAA,OAAO,EAAEC,OAZX;AAaE,IAAA,QAAQ,EAAEP,OAbZ;AAcE,IAAA,cAAc,EAAE4E,cAdlB;AAeE,IAAA,YAAY,EACV,CAACvE,QAAD,gBACE,6BAAC,8BAAD;AAAgB,MAAA,oBAAoB,EAAEA;AAAtC,OACGL,OAAO,gBACN,6BAAC,4BAAD,OADM,GAEJD,QAAQ,gBACV,6BAAC,cAAD;AACE,MAAA,WAAW,EAAE0D,eADf;AAEE,MAAA,OAAO,EAAED,cAFX;AAGE,MAAA,OAAO,EAAC,WAHV;AAIE,MAAA,IAAI,EAAC;AAJP,oBAME,6BAAC,oCAAD,OANF,CADU,GASR,IAZN,eAaE,6BAAC,8CAAD;AAAwC,MAAA,KAAK,EAAEnB;AAA/C,MAbF,CADF,GAgBI;AAhCR,IAhFJ,EAqHG,CAAChC,QAAD,gBACC,6BAAC,oCAAD;AACE,IAAA,SAAS,EAAES,QADb;AAEE,IAAA,IAAI,EAAE,cAAC+E,QAAD;AAAA,0BAAc,6BAAC,eAAD,QAASA,QAAT,CAAd;AAAA;AAFR,kBAIE,6BAAC,cAAD;AACE,IAAA,QAAQ,EAAEzD,WAAW,CAACG,OADxB;AAEE,IAAA,IAAI,EAAEF,IAFR;AAGE,IAAA,SAAS,EAAC,QAHZ;AAIE,IAAA,KAAK,EAAE;AACLyD,MAAAA,MAAM,EAAE,EADH;AAELF,MAAAA,KAAK,2BAAExD,WAAW,CAACG,OAAd,0DAAE,sBAAqBwD;AAFvB,KAJT;AAQE,IAAA,GAAG,EAAE7D,UARP;AASE,IAAA,QAAQ,EAAE;AATZ,kBAWE,6BAAC,+BAAD;AAAc,IAAA,WAAW,MAAzB;AAA0B,IAAA,cAAc;AAAxC,kBACE,6BAAC,0BAAD;AAAoB,IAAA,MAAM,2BAAEE,WAAW,CAACG,OAAd,0DAAE,sBAAqBwD;AAAjD,kBACE,6BAAC,0BAAD,eACM9E,IADN;AAEE,IAAA,OAAO,EAAEa,SAFX;AAGE,IAAA,QAAQ,EAAE/B,QAHZ;AAIE,IAAA,YAAY,EAAEgD,YAJhB;AAKE,IAAA,YAAY,EAAEG,kBALhB;AAME,IAAA,OAAO,EAAEpD,OANX;AAOE,IAAA,IAAI,EAAEU,IAPR;AAQE,IAAA,iBAAiB,EAAEsC;AARrB,KADF,CADF,CAXF,CAJF,CADD,GAgCG,IArJN,CADF;AAyJD,CAhdM;;;AAkdPjD,QAAQ,CAACmG,WAAT,GAAuB,UAAvB","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n IAutocompleteProps,\n isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledChipWrapper,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInput, StyledInputWrapper } from \"../Input/Styles\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\nimport { Trigger } from \"../Trigger\";\nimport { Typography } from \"../Typography/Typography\";\nimport tw from \"twin.macro\";\nimport { Portal } from \"../../helpers\";\nimport { ConditionalWrapper } from \"../../helpers/ConditionWrapper/ConditionWrapper\";\nimport classNames from \"classnames\";\n\nexport interface IComboBoxProps\n extends Omit<IAutocompleteProps, \"handleChange\" | \"inputEl\"> {\n /** Set combobox in to loading state */\n loading?: boolean;\n /** Text to display while in loading state */\n loadingText?: string;\n /** onChange callback */\n onChange?: (\n e: (string | number)[] | string | number | null | undefined\n ) => void;\n /** Placeholder for Select input */\n placeholder?: string;\n /** disable Input element */\n disabled?: boolean;\n /** Combobox size */\n size?: InputSize;\n /** Invalid state */\n invalid?: boolean;\n /** Render Chip */\n renderChip?: <T extends IOptionItemProps>(\n item: T,\n key?: string | number\n ) => JSX.Element;\n /** Close menu on change */\n forceCloseMenu?: boolean;\n /** Limit chips */\n limitChips?: number;\n /** Hidden number text */\n hiddenNumberText?: (hidden: number) => string;\n /** Render Autocomplete in <Portal> */\n inPortal?: boolean;\n /** inputWrapperClassName */\n inputWrapperClassName?: string;\n /** scrollWrapper */\n scrollWrapper?: boolean;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size = \"regular\",\n invalid = false,\n type = \"single\",\n renderChip,\n forceCloseMenu = type === \"single\",\n renderOption,\n limitChips = 2,\n hiddenNumberText,\n inPortal = false,\n inputWrapperClassName,\n scrollWrapper,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n const elementRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const chipWrapper = useRef<HTMLDivElement>(null);\n const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n const [open, setOpen] = useState(false);\n\n useOnClickOutside(wrapperRef, (e) => {\n if (e.target && comboBoxRef.current?.contains(e.target as Node)) {\n return;\n }\n setOpen(false);\n });\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n if (e.key === \"Enter\" && type === \"multiple\") {\n setValue(\"\");\n }\n },\n [open, selectedName, type]\n );\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n onChange?.(selectedValue);\n if (forceCloseMenu) {\n setOpen(false);\n }\n },\n [forceCloseMenu, onChange]\n );\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback(\n (option, props) => {\n if (typeof renderOption === \"function\") {\n return renderOption(option, props);\n }\n if (type === \"multiple\") {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <Checkbox {...props} />\n </>\n );\n }\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n },\n [type, renderOption]\n );\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n if (type === \"multiple\") {\n onChange?.([]);\n } else {\n onChange?.(\"\");\n }\n\n setOpen(false);\n },\n [type, onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const handleBlur = useCallback(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const renderChipAdornment = useCallback(\n (option, index) => {\n if (typeof renderChip === \"function\") {\n return renderChip(option, index);\n }\n const avatarProps: Partial<IAvatar> = {\n size: 18,\n };\n switch (size) {\n case \"big\":\n avatarProps.size = 22;\n break;\n case \"small\":\n avatarProps.size = 14;\n break;\n }\n const leftAdornment = option.image ? (\n <Avatar\n css={`\n ${tw`tw-my-0.5`}\n ${tw`tw-mr-0.5`}\n `}\n url={option.image}\n {...avatarProps}\n />\n ) : undefined;\n\n const onClose = (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (Array.isArray(selected) && selected.includes(option.id)) {\n if (typeof onChange === \"function\") {\n const newSelected = selected.filter((item) => item !== option.id);\n onChange(newSelected);\n }\n }\n };\n\n let showOnClose = true;\n if (disabled) {\n showOnClose = false;\n }\n if (option.color) {\n showOnClose = false;\n }\n\n return (\n <Chip\n className={\"c-combo-box-chip\"}\n leftAdornment={leftAdornment}\n label={option.name}\n key={index}\n backgroundColor={option.color}\n isLabel={Boolean(option.color)}\n onClose={showOnClose ? onClose : undefined}\n size={size}\n />\n );\n },\n [disabled, onChange, renderChip, selected, size]\n );\n\n const autoSize = useMemo(() => {\n if (\n type === \"multiple\" &&\n open &&\n Array.isArray(selected) &&\n selected.length > 1\n ) {\n return \"auto\";\n }\n return size;\n }, [open, selected, size, type]);\n\n const startAdornment = useMemo(() => {\n if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n const elements: JSX.Element[] = [];\n let total = 0;\n options.forEach((option, index) => {\n const isGrouped = isOptionGroup(option);\n if (selected.includes(option.id) && !isGrouped) {\n total = total + 1;\n elements.push(renderChipAdornment(option, index));\n } else if (isGrouped) {\n const groupedOptions = option.options.filter((o) =>\n selected.includes(o.id)\n );\n total = total + groupedOptions.length;\n if (groupedOptions.length > 0) {\n groupedOptions.forEach((o, _index) => {\n elements.push(renderChipAdornment(o, `${index}_${_index}`));\n });\n }\n }\n });\n let hidden = 0;\n if (!open && limitChips > 0 && elements.length > limitChips) {\n hidden = elements.splice(\n limitChips,\n elements.length - limitChips\n ).length;\n }\n\n return (\n <Fragment>\n {elements}\n {hidden > 0 && (\n <Typography\n variant={\n size === \"small\"\n ? \"Caption 1\"\n : size === \"regular\"\n ? \"Body 2\"\n : \"Body 1\"\n }\n css={`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n `}\n >\n {typeof hiddenNumberText === \"function\"\n ? hiddenNumberText(hidden)\n : `+${hidden}`}\n </Typography>\n )}\n </Fragment>\n );\n }\n return undefined;\n }, [\n type,\n selected,\n options,\n open,\n limitChips,\n hiddenNumberText,\n renderChipAdornment,\n size,\n ]);\n\n const showXIcon =\n Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n const hasSelected =\n type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n return (\n <div className=\"c-combo-box\">\n {type === \"multiple\" ? (\n <>\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n ref={comboBoxRef}\n css={`\n display: flex;\n justify-content: space-between;\n flex: 1;\n height: ${autoSize === \"auto\" ? \"auto\" : undefined};\n overflow-y: ${autoSize === \"auto\" && scrollWrapper\n ? \"scroll\"\n : undefined};\n max-height: ${autoSize === \"auto\" && scrollWrapper\n ? \"80px\"\n : undefined};\n `}\n className={classNames(\n \"c-combo-box-input-wrapper\",\n inputWrapperClassName\n )}\n onClick={() => {\n elementRef.current?.focus();\n }}\n >\n <StyledChipWrapper\n $autoSize={autoSize}\n $open={open}\n ref={chipWrapper}\n >\n {startAdornment}\n <StyledInput\n className={\"c-combo-box-input\"}\n onBlur={handleBlur}\n onFocus={onOpen}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={!hasSelected ? placeholder : undefined}\n disabled={disabled}\n $size={size}\n $loading={loading}\n style={{\n display: \"flex\",\n flex: 1,\n alignSelf: \"center\",\n width: autoSize === \"auto\" ? \"auto\" : \"100%\",\n }}\n />\n </StyledChipWrapper>\n {!disabled && (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : (\n <>\n {showXIcon && (\n <Trigger\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n data-testid={\"deselect-all\"}\n css={`\n display: flex;\n justify-content: center;\n `}\n >\n <StyledComboBoxCloseSmallIcon />\n </Trigger>\n )}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n )}\n </>\n )}\n </StyledInputWrapper>\n </>\n ) : (\n <StyledComboBoxInput\n className={classNames(\"c-combo-box-input\", inputWrapperClassName)}\n onBlur={handleBlur}\n onFocus={onOpen}\n wrapRef={comboBoxRef}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n size={size}\n invalid={invalid}\n $loading={loading}\n startAdornment={startAdornment}\n endAdornment={\n !disabled ? (\n <InputAdornment disablePointerEvents={disabled}>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size=\"small\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </InputAdornment>\n ) : null\n }\n />\n )}\n\n {!disabled ? (\n <ConditionalWrapper\n condition={inPortal}\n wrap={(children) => <Portal>{children}</Portal>}\n >\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{\n zIndex: 10,\n width: comboBoxRef.current?.clientWidth,\n }}\n ref={wrapperRef}\n strategy={\"fixed\"}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type={type}\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n </ConditionalWrapper>\n ) : null}\n </div>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
@@ -15,8 +15,12 @@ var _Card = require("../Card");
15
15
 
16
16
  var _EntityGroup = require("./EntityGroup");
17
17
 
18
+ var _classnames = _interopRequireDefault(require("classnames"));
19
+
18
20
  var _excluded = ["children", "isCollection", "background", "className", "as"];
19
21
 
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
+
20
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
25
 
22
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -38,6 +42,7 @@ var EntityCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
38
42
  var _useContext = (0, _react.useContext)(_EntityGroup.EntityGroupContext),
39
43
  renderAs = _useContext.renderAs;
40
44
 
45
+ var classSuffix = "c-entity-card-".concat(renderAs);
41
46
  var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
42
47
  var Component = as || _Card.Card;
43
48
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityCard, _extends({
@@ -45,7 +50,7 @@ var EntityCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
45
50
  $renderAs: renderAs,
46
51
  $background: background,
47
52
  paperType: paperType,
48
- className: className,
53
+ className: (0, _classnames.default)("c-entity-card", classSuffix, className),
49
54
  $isCollection: isCollection
50
55
  }, rest, {
51
56
  ref: ref
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Entity/EntityCard.tsx"],"names":["EntityCard","ref","children","isCollection","background","className","as","rest","EntityGroupContext","renderAs","paperType","Component","Card","displayName"],"mappings":";;;;;;;;;AAAA;;AAOA;;AAEA;;AAKA;;;;;;;;;;;;;;AAsBO,IAAMA,UAAsD,gBACjE,uBACE,gBASEC,GATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,MAPDC,YAOC,QAPDA,YAOC;AAAA,MANDC,UAMC,QANDA,UAMC;AAAA,MALDC,SAKC,QALDA,SAKC;AAAA,MAJDC,EAIC,QAJDA,EAIC;AAAA,MAHEC,IAGF;;AACH,oBAAqB,uBAAWC,+BAAX,CAArB;AAAA,MAAQC,QAAR,eAAQA,QAAR;;AACA,MAAMC,SAAS,GAAGD,QAAQ,KAAK,MAAb,GAAsB,SAAtB,GAAkC,SAApD;AACA,MAAME,SAAS,GAAGL,EAAE,IAAIM,UAAxB;AACA,sBACE,6BAAC,wBAAD;AACE,IAAA,EAAE,EAAED,SADN;AAEE,IAAA,SAAS,EAAEF,QAFb;AAGE,IAAA,WAAW,EAAEL,UAHf;AAIE,IAAA,SAAS,EAAEM,SAJb;AAKE,IAAA,SAAS,EAAEL,SALb;AAME,IAAA,aAAa,EAAEF;AANjB,KAOMI,IAPN;AAQE,IAAA,GAAG,EAAEN;AARP,MAUGC,QAVH,CADF;AAcD,CA7BH,CADK;;AAiCPF,UAAU,CAACa,WAAX,GAAyB,YAAzB","sourcesContent":["import React, {\n BaseHTMLAttributes,\n CSSProperties,\n forwardRef,\n ReactElement,\n useContext,\n} from \"react\";\nimport { StyledEntityCard } from \"./Styles\";\n\nimport { Card, ICardProps } from \"../Card\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\nimport { EntityGroupContext } from \"./EntityGroup\";\n\nexport interface IEntityCardProps\n extends ICardProps,\n BaseHTMLAttributes<HTMLElement> {\n /** ClassName to add on Card */\n className?: string;\n /** Show as group of Cards on grid */\n isCollection?: boolean;\n /** Background color to override for Card */\n background?: string;\n /** CSSProperties to override for Card */\n style?: CSSProperties;\n}\n\nexport type EntityCardProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, IEntityCardProps>;\n\nexport type EntityComponent = <C extends React.ElementType = typeof Card>(\n props: EntityCardProps<C>\n) => ReactElement | null;\n\nexport const EntityCard: EntityComponent & { displayName?: string } =\n forwardRef(\n <C extends React.ElementType = typeof Card>(\n {\n children,\n isCollection,\n background,\n className,\n as,\n ...rest\n }: EntityCardProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const { renderAs } = useContext(EntityGroupContext);\n const paperType = renderAs === \"grid\" ? \"paper-1\" : \"paper-2\";\n const Component = as || Card;\n return (\n <StyledEntityCard\n as={Component}\n $renderAs={renderAs}\n $background={background}\n paperType={paperType}\n className={className}\n $isCollection={isCollection}\n {...rest}\n ref={ref}\n >\n {children}\n </StyledEntityCard>\n );\n }\n );\n\nEntityCard.displayName = \"EntityCard\";\n"],"file":"EntityCard.js"}
1
+ {"version":3,"sources":["../../../../src/components/Entity/EntityCard.tsx"],"names":["EntityCard","ref","children","isCollection","background","className","as","rest","EntityGroupContext","renderAs","classSuffix","paperType","Component","Card","displayName"],"mappings":";;;;;;;;;AAAA;;AAOA;;AAEA;;AAKA;;AACA;;;;;;;;;;;;;;;;AAsBO,IAAMA,UAAsD,gBACjE,uBACE,gBASEC,GATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,MAPDC,YAOC,QAPDA,YAOC;AAAA,MANDC,UAMC,QANDA,UAMC;AAAA,MALDC,SAKC,QALDA,SAKC;AAAA,MAJDC,EAIC,QAJDA,EAIC;AAAA,MAHEC,IAGF;;AACH,oBAAqB,uBAAWC,+BAAX,CAArB;AAAA,MAAQC,QAAR,eAAQA,QAAR;;AACA,MAAMC,WAAW,2BAAoBD,QAApB,CAAjB;AACA,MAAME,SAAS,GAAGF,QAAQ,KAAK,MAAb,GAAsB,SAAtB,GAAkC,SAApD;AACA,MAAMG,SAAS,GAAGN,EAAE,IAAIO,UAAxB;AACA,sBACE,6BAAC,wBAAD;AACE,IAAA,EAAE,EAAED,SADN;AAEE,IAAA,SAAS,EAAEH,QAFb;AAGE,IAAA,WAAW,EAAEL,UAHf;AAIE,IAAA,SAAS,EAAEO,SAJb;AAKE,IAAA,SAAS,EAAE,yBAAW,eAAX,EAA4BD,WAA5B,EAAyCL,SAAzC,CALb;AAME,IAAA,aAAa,EAAEF;AANjB,KAOMI,IAPN;AAQE,IAAA,GAAG,EAAEN;AARP,MAUGC,QAVH,CADF;AAcD,CA9BH,CADK;;AAkCPF,UAAU,CAACc,WAAX,GAAyB,YAAzB","sourcesContent":["import React, {\n BaseHTMLAttributes,\n CSSProperties,\n forwardRef,\n ReactElement,\n useContext,\n} from \"react\";\nimport { StyledEntityCard } from \"./Styles\";\n\nimport { Card, ICardProps } from \"../Card\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\nimport { EntityGroupContext } from \"./EntityGroup\";\nimport classNames from \"classnames\";\n\nexport interface IEntityCardProps\n extends ICardProps,\n BaseHTMLAttributes<HTMLElement> {\n /** ClassName to add on Card */\n className?: string;\n /** Show as group of Cards on grid */\n isCollection?: boolean;\n /** Background color to override for Card */\n background?: string;\n /** CSSProperties to override for Card */\n style?: CSSProperties;\n}\n\nexport type EntityCardProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, IEntityCardProps>;\n\nexport type EntityComponent = <C extends React.ElementType = typeof Card>(\n props: EntityCardProps<C>\n) => ReactElement | null;\n\nexport const EntityCard: EntityComponent & { displayName?: string } =\n forwardRef(\n <C extends React.ElementType = typeof Card>(\n {\n children,\n isCollection,\n background,\n className,\n as,\n ...rest\n }: EntityCardProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const { renderAs } = useContext(EntityGroupContext);\n const classSuffix = `c-entity-card-${renderAs}`;\n const paperType = renderAs === \"grid\" ? \"paper-1\" : \"paper-2\";\n const Component = as || Card;\n return (\n <StyledEntityCard\n as={Component}\n $renderAs={renderAs}\n $background={background}\n paperType={paperType}\n className={classNames(\"c-entity-card\", classSuffix, className)}\n $isCollection={isCollection}\n {...rest}\n ref={ref}\n >\n {children}\n </StyledEntityCard>\n );\n }\n );\n\nEntityCard.displayName = \"EntityCard\";\n"],"file":"EntityCard.js"}
@@ -39,8 +39,9 @@ var EntityProperty = function EntityProperty(_ref) {
39
39
  var _useContext = (0, _react.useContext)(_EntityGroup.EntityGroupContext),
40
40
  renderAs = _useContext.renderAs;
41
41
 
42
+ var classSuffix = "c-entity-property-".concat(renderAs);
42
43
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityProperty, _extends({
43
- className: (0, _classnames.default)("c-entity-property", className)
44
+ className: (0, _classnames.default)("c-entity-property", classSuffix, className)
44
45
  }, props, {
45
46
  $order: listOrder,
46
47
  $width: listWidth,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Entity/EntityProperty.tsx"],"names":["EntityProperty","listOrder","listWidth","visibleFromBreakpoint","className","props","EntityGroupContext","renderAs","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAUO,IAAMA,cAAkD,GAAG,SAArDA,cAAqD,OAM5D;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,KACC;;AACJ,oBAAqB,uBAAWC,+BAAX,CAArB;AAAA,MAAQC,QAAR,eAAQA,QAAR;;AACA,sBACE,6BAAC,4BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,mBAAX,EAAgCH,SAAhC;AADb,KAEMC,KAFN;AAGE,IAAA,MAAM,EAAEJ,SAHV;AAIE,IAAA,MAAM,EAAEC,SAJV;AAKE,IAAA,sBAAsB,EAAEC,qBAL1B;AAME,IAAA,SAAS,EAAEI;AANb,KADF;AAUD,CAlBM;;;AAoBPP,cAAc,CAACQ,WAAf,GAA6B,gBAA7B","sourcesContent":["import React, { HTMLAttributes, useContext } from \"react\";\nimport { StyledEntityProperty } from \"./Styles\";\nimport classNames from \"classnames\";\nimport { EntityGroupContext } from \"./EntityGroup\";\n\nexport type VisibleFromBreakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport interface IEntityCardPropertyProps\n extends HTMLAttributes<HTMLDivElement> {\n listOrder?: number;\n listWidth?: string | number;\n visibleFromBreakpoint?: VisibleFromBreakpoint;\n}\n\nexport const EntityProperty: React.FC<IEntityCardPropertyProps> = ({\n listOrder,\n listWidth,\n visibleFromBreakpoint,\n className,\n ...props\n}) => {\n const { renderAs } = useContext(EntityGroupContext);\n return (\n <StyledEntityProperty\n className={classNames(\"c-entity-property\", className)}\n {...props}\n $order={listOrder}\n $width={listWidth}\n $visibleFromBreakpoint={visibleFromBreakpoint}\n $renderAs={renderAs}\n />\n );\n};\n\nEntityProperty.displayName = \"EntityProperty\";\n"],"file":"EntityProperty.js"}
1
+ {"version":3,"sources":["../../../../src/components/Entity/EntityProperty.tsx"],"names":["EntityProperty","listOrder","listWidth","visibleFromBreakpoint","className","props","EntityGroupContext","renderAs","classSuffix","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAUO,IAAMA,cAAkD,GAAG,SAArDA,cAAqD,OAM5D;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,KACC;;AACJ,oBAAqB,uBAAWC,+BAAX,CAArB;AAAA,MAAQC,QAAR,eAAQA,QAAR;;AACA,MAAMC,WAAW,+BAAwBD,QAAxB,CAAjB;AACA,sBACE,6BAAC,4BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,mBAAX,EAAgCC,WAAhC,EAA6CJ,SAA7C;AADb,KAEMC,KAFN;AAGE,IAAA,MAAM,EAAEJ,SAHV;AAIE,IAAA,MAAM,EAAEC,SAJV;AAKE,IAAA,sBAAsB,EAAEC,qBAL1B;AAME,IAAA,SAAS,EAAEI;AANb,KADF;AAUD,CAnBM;;;AAqBPP,cAAc,CAACS,WAAf,GAA6B,gBAA7B","sourcesContent":["import React, { HTMLAttributes, useContext } from \"react\";\nimport { StyledEntityProperty } from \"./Styles\";\nimport classNames from \"classnames\";\nimport { EntityGroupContext } from \"./EntityGroup\";\n\nexport type VisibleFromBreakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport interface IEntityCardPropertyProps\n extends HTMLAttributes<HTMLDivElement> {\n listOrder?: number;\n listWidth?: string | number;\n visibleFromBreakpoint?: VisibleFromBreakpoint;\n}\n\nexport const EntityProperty: React.FC<IEntityCardPropertyProps> = ({\n listOrder,\n listWidth,\n visibleFromBreakpoint,\n className,\n ...props\n}) => {\n const { renderAs } = useContext(EntityGroupContext);\n const classSuffix = `c-entity-property-${renderAs}`;\n return (\n <StyledEntityProperty\n className={classNames(\"c-entity-property\", classSuffix, className)}\n {...props}\n $order={listOrder}\n $width={listWidth}\n $visibleFromBreakpoint={visibleFromBreakpoint}\n $renderAs={renderAs}\n />\n );\n};\n\nEntityProperty.displayName = \"EntityProperty\";\n"],"file":"EntityProperty.js"}
@@ -41,7 +41,7 @@ var StyledEntityProperty = (0, _styledComponents.default)("div").withConfig({
41
41
  })(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref4) {
42
42
  var $renderAs = _ref4.$renderAs,
43
43
  $width = _ref4.$width;
44
- return $renderAs === "list" && (0, _styledComponents.css)(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "unset" : 1);
44
+ return $renderAs === "list" && (0, _styledComponents.css)(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "initial" : 1);
45
45
  }, function (props) {
46
46
  return props.$renderAs === "list" && props.$order && (0, _styledComponents.css)(["order:", ";"], props.$order);
47
47
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Entity/Styles.ts"],"names":["StyledEntityCard","Card","$renderAs","css","props","$background","$isCollection","PaperStyles","displayName","StyledEntityProperty","$width","$order","$visibleFromBreakpoint","StyledEntityGroup","$gap","StyledEntityActions"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Card } from \"../Card\";\nimport { PaperStyles } from \"../Paper/Styles\";\nimport { VisibleFromBreakpoint } from \"./EntityProperty\";\nimport tw from \"twin.macro\";\n\nexport const StyledEntityCard = styled(Card)<{\n $renderAs: string;\n $gap?: number;\n $background?: string;\n $isCollection?: boolean;\n}>`\n line-height: 1.375;\n ${({ $renderAs }) =>\n $renderAs === \"list\" &&\n css`\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 48px;\n margin-bottom: 4px;\n justify-content: space-between;\n padding: 0 16px 0 16px;\n `}\n\n ${({ $renderAs }) =>\n $renderAs === \"grid\" &&\n css`\n display: flex;\n flex-direction: column;\n position: relative;\n padding: 20px 24px;\n height: 280px;\n `}\n\n\n ${(props) =>\n props.$background &&\n css`\n background-color: ${props.$background};\n `}\n\n ${({ $isCollection, $background }) =>\n $isCollection &&\n css`\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n transform: rotate(-3deg);\n z-index: -1;\n ${PaperStyles};\n background-color: ${$background};\n }\n `}\n`;\nStyledEntityCard.displayName = \"StyledEntityCard\";\n\nexport const StyledEntityProperty = styled(\"div\")<{\n $renderAs?: string;\n $order?: number;\n $width?: number | string;\n $visibleFromBreakpoint?: VisibleFromBreakpoint;\n}>`\n ${({ $renderAs, $width }) =>\n $renderAs === \"list\" &&\n css`\n display: flex;\n align-items: center;\n min-width: 24px;\n flex: ${$width ? \"unset\" : 1};\n `}\n\n ${(props) =>\n props.$renderAs === \"list\" &&\n props.$order &&\n css`\n order: ${props.$order};\n `}\n\n ${(props) =>\n props.$renderAs === \"list\" &&\n props.$width &&\n css`\n width: ${props.$width};\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint &&\n css`\n ${tw`tw-hidden`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"sm\" &&\n css`\n ${tw`sm:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"md\" &&\n css`\n ${tw`md:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"lg\" &&\n css`\n ${tw`lg:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"xl\" &&\n css`\n ${tw`xl:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"2xl\" &&\n css`\n ${tw`2xl:tw-flex`}\n `}\n`;\n\nStyledEntityProperty.displayName = \"StyledEntityProperty\";\n\nexport const StyledEntityGroup = styled(\"div\")<{\n $renderAs: string;\n $gap?: number;\n}>`\n ${({ $renderAs, $gap }) =>\n $renderAs === \"grid\" &&\n css`\n display: grid;\n grid-gap: ${$gap ? `${$gap}px` : \"initial\"};\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n `}\n ${(props) =>\n props.$renderAs === \"list\" &&\n css`\n display: flex;\n flex-direction: column;\n `}\n`;\nStyledEntityGroup.displayName = \"StyledEntityGroup\";\n\nexport const StyledEntityActions = styled(\"div\")<{ $renderAs?: string }>`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${({ $renderAs }) =>\n $renderAs === \"grid\" &&\n css`\n position: absolute;\n right: 16px;\n top: 20px;\n `}\n\n ${({ $renderAs }) =>\n $renderAs === \"list\" &&\n css`\n justify-self: flex-end;\n `}\n`;\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Entity/Styles.ts"],"names":["StyledEntityCard","Card","$renderAs","css","props","$background","$isCollection","PaperStyles","displayName","StyledEntityProperty","$width","$order","$visibleFromBreakpoint","StyledEntityGroup","$gap","StyledEntityActions"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Card } from \"../Card\";\nimport { PaperStyles } from \"../Paper/Styles\";\nimport { VisibleFromBreakpoint } from \"./EntityProperty\";\nimport tw from \"twin.macro\";\n\nexport const StyledEntityCard = styled(Card)<{\n $renderAs: string;\n $gap?: number;\n $background?: string;\n $isCollection?: boolean;\n}>`\n line-height: 1.375;\n ${({ $renderAs }) =>\n $renderAs === \"list\" &&\n css`\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 48px;\n margin-bottom: 4px;\n justify-content: space-between;\n padding: 0 16px 0 16px;\n `}\n\n ${({ $renderAs }) =>\n $renderAs === \"grid\" &&\n css`\n display: flex;\n flex-direction: column;\n position: relative;\n padding: 20px 24px;\n height: 280px;\n `}\n\n\n ${(props) =>\n props.$background &&\n css`\n background-color: ${props.$background};\n `}\n\n ${({ $isCollection, $background }) =>\n $isCollection &&\n css`\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n transform: rotate(-3deg);\n z-index: -1;\n ${PaperStyles};\n background-color: ${$background};\n }\n `}\n`;\nStyledEntityCard.displayName = \"StyledEntityCard\";\n\nexport const StyledEntityProperty = styled(\"div\")<{\n $renderAs?: string;\n $order?: number;\n $width?: number | string;\n $visibleFromBreakpoint?: VisibleFromBreakpoint;\n}>`\n ${({ $renderAs, $width }) =>\n $renderAs === \"list\" &&\n css`\n display: flex;\n align-items: center;\n min-width: 24px;\n flex: ${$width ? \"initial\" : 1};\n `}\n\n ${(props) =>\n props.$renderAs === \"list\" &&\n props.$order &&\n css`\n order: ${props.$order};\n `}\n\n ${(props) =>\n props.$renderAs === \"list\" &&\n props.$width &&\n css`\n width: ${props.$width};\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint &&\n css`\n ${tw`tw-hidden`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"sm\" &&\n css`\n ${tw`sm:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"md\" &&\n css`\n ${tw`md:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"lg\" &&\n css`\n ${tw`lg:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"xl\" &&\n css`\n ${tw`xl:tw-flex`}\n `}\n ${({ $visibleFromBreakpoint }) =>\n $visibleFromBreakpoint === \"2xl\" &&\n css`\n ${tw`2xl:tw-flex`}\n `}\n`;\n\nStyledEntityProperty.displayName = \"StyledEntityProperty\";\n\nexport const StyledEntityGroup = styled(\"div\")<{\n $renderAs: string;\n $gap?: number;\n}>`\n ${({ $renderAs, $gap }) =>\n $renderAs === \"grid\" &&\n css`\n display: grid;\n grid-gap: ${$gap ? `${$gap}px` : \"initial\"};\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n `}\n ${(props) =>\n props.$renderAs === \"list\" &&\n css`\n display: flex;\n flex-direction: column;\n `}\n`;\nStyledEntityGroup.displayName = \"StyledEntityGroup\";\n\nexport const StyledEntityActions = styled(\"div\")<{ $renderAs?: string }>`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${({ $renderAs }) =>\n $renderAs === \"grid\" &&\n css`\n position: absolute;\n right: 16px;\n top: 20px;\n `}\n\n ${({ $renderAs }) =>\n $renderAs === \"list\" &&\n css`\n justify-self: flex-end;\n `}\n`;\n"],"file":"Styles.js"}
@@ -9,6 +9,8 @@ exports.StyledOptionText = exports.StyledOptionIndicator = exports.StyledOptionC
9
9
 
10
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
11
 
12
+ var _Typography = require("../../Typography");
13
+
12
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
15
 
14
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,8 +32,7 @@ var StyledOptionIndicator = _styledComponents.default.div.withConfig({
30
32
 
31
33
  exports.StyledOptionIndicator = StyledOptionIndicator;
32
34
  StyledOptionIndicator.displayName = "StyledOptionIndicator";
33
-
34
- var StyledOptionText = _styledComponents.default.span.withConfig({
35
+ var StyledOptionText = (0, _styledComponents.default)(_Typography.Body2).withConfig({
35
36
  displayName: "Styles__StyledOptionText",
36
37
  componentId: "sc-6fiqyy-2"
37
38
  })(["", " flex-grow:1;line-height:28px;padding-right:10px;", ""], {
@@ -41,7 +42,6 @@ var StyledOptionText = _styledComponents.default.span.withConfig({
41
42
  }, function (props) {
42
43
  return props.textColor && (0, _styledComponents.css)(["color:", ";"], props.textColor);
43
44
  });
44
-
45
45
  exports.StyledOptionText = StyledOptionText;
46
46
  StyledOptionText.displayName = "StyledOptionText";
47
47
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["StyledOptionContentWrapper","styled","div","displayName","StyledOptionIndicator","props","backgroundColor","children","css","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,0HAAhC;;;AAUPF,0BAA0B,CAACG,WAA3B,GAAyC,4BAAzC;;AAEO,IAAMC,qBAAqB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,QAEAC,qBAFA,8BAGsBH,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;;;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;;AAEO,IAAMM,gBAAgB,GAAGR,0BAAOS,IAAV;AAAA;AAAA;AAAA,kEACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAKzB,UAACL,KAAD;AAAA,SACAA,KAAK,CAACM,SAAN,QACAH,qBADA,mBAEWH,KAAK,CAACM,SAFjB,CADA;AAAA,CALyB,CAAtB;;;AAYPF,gBAAgB,CAACN,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMS,oBAAoB,GAAGX,0BAAOS,IAAV;AAAA;AAAA;AAAA,wDAA1B;;;AAMPE,oBAAoB,CAACT,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionContentWrapper = styled.div`\n display: flex;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n align-items: center;\n height: 100%;\n flex-grow: 1;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n height: 24px;\n width: 24px;\n border-radius: 100%;\n margin-right: 8px;\n flex-shrink: 0;\n ${(props) =>\n props.backgroundColor &&\n !props.children &&\n css`\n background-color: ${props.backgroundColor};\n `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n ${tw`tw-truncate`}\n flex-grow: 1;\n line-height: 28px;\n padding-right: 10px;\n ${(props) =>\n props.textColor &&\n css`\n color: ${props.textColor};\n `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n margin: 0 0 0 5px;\n line-height: 18px;\n flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["StyledOptionContentWrapper","styled","div","displayName","StyledOptionIndicator","props","backgroundColor","children","css","StyledOptionText","Body2","textColor","StyledAdditionalInfo","span"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;AAEO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,0HAAhC;;;AAUPF,0BAA0B,CAACG,WAA3B,GAAyC,4BAAzC;;AAEO,IAAMC,qBAAqB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,QAEAC,qBAFA,8BAGsBH,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;;;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEO,IAAMM,gBAAgB,GAAG,+BAAOC,iBAAP,CAAH;AAAA;AAAA;AAAA,kEACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAKzB,UAACL,KAAD;AAAA,SACAA,KAAK,CAACM,SAAN,QACAH,qBADA,mBAEWH,KAAK,CAACM,SAFjB,CADA;AAAA,CALyB,CAAtB;;AAYPF,gBAAgB,CAACN,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMS,oBAAoB,GAAGX,0BAAOY,IAAV;AAAA;AAAA;AAAA,wDAA1B;;;AAMPD,oBAAoB,CAACT,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledOptionContentWrapper = styled.div`\n display: flex;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n align-items: center;\n height: 100%;\n flex-grow: 1;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n height: 24px;\n width: 24px;\n border-radius: 100%;\n margin-right: 8px;\n flex-shrink: 0;\n ${(props) =>\n props.backgroundColor &&\n !props.children &&\n css`\n background-color: ${props.backgroundColor};\n `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled(Body2)<{ textColor?: string }>`\n ${tw`tw-truncate`}\n flex-grow: 1;\n line-height: 28px;\n padding-right: 10px;\n ${(props) =>\n props.textColor &&\n css`\n color: ${props.textColor};\n `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n margin: 0 0 0 5px;\n line-height: 18px;\n flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
@@ -11,9 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _Dialog = require("../Dialog");
13
13
 
14
- var _Step = require("./Step");
14
+ var _context = require("./context");
15
15
 
16
- var _WizardContext = require("./WizardContext");
16
+ var _Step = require("./Step");
17
17
 
18
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
19
 
@@ -78,7 +78,7 @@ var Wizard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
78
78
 
79
79
  return null;
80
80
  }, [activeStep, changingStepInProgress, childrenCollection, onClose, onNextButtonClick, onPreviousButtonClick, title]);
81
- return /*#__PURE__*/_react.default.createElement(_WizardContext.WizardContextProvider, {
81
+ return /*#__PURE__*/_react.default.createElement(_context.WizardContextProvider, {
82
82
  value: {
83
83
  activeStep: activeStep,
84
84
  setActiveStep: setActiveStep,