@activecollab/components 2.0.136 → 2.0.138

package/dist/esm/components/ComboBox/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","StyledInputWrapper","StyledComboBoxInput","withConfig","displayName","componentId","StyledIconDefaults","StyledComboBoxCollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","StyledComboBoxList","div","$width","_ref","$hide","StyledChipWrapper","_ref2","_ref3","$autoSize","_ref4"],"sources":["../../../../src/components/ComboBox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults};\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults};\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{\n  $width?: number;\n  $hide: boolean;\n}>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n\n  ${({ $hide }) =>\n    $hide === true &&\n    css`\n      display: none;\n    `}\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n\nexport const StyledChipWrapper = styled.div<{\n  $autoSize: string;\n  $open?: boolean;\n}>`\n  ${tw`tw-flex`};\n  ${tw`tw-gap-1`};\n  ${tw`tw-flex-1`};\n\n  overflow: ${({ $open }) => ($open ? \"auto\" : \"hidden\")};\n\n  ${({ $autoSize }) =>\n    $autoSize === \"auto\" &&\n    css`\n      ${tw`tw-flex-wrap`};\n      ${tw`tw-w-full`};\n    `}\n\n  ${({ $autoSize }) =>\n    $autoSize !== \"auto\" &&\n    css`\n      align-items: center;\n    `}\n`;\nStyledChipWrapper.displayName = \"StyledChipWrapper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,wBAAwB,EAAEC,cAAc,QAAQ,qBAAqB;AAC9E,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,OAAO,MAAMC,mBAAmB,GAAGN,MAAM,CAACI,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0DAI/C;AAEDH,mBAAmB,CAACE,WAAW,GAAG,qBAAqB;AAEvD,MAAME,kBAAkB,GAAGT,GAAG,mCAG7B;AAED,OAAO,MAAMU,sCAAsC,GAAGX,MAAM,CAC1DE,wBACF,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACGC,kBAAkB,EAIjBE,KAAK,IACNA,KAAK,CAACC,KAAK,IACXZ,GAAG,6BAEF,CACJ;AAEDU,sCAAsC,CAACH,WAAW,GAChD,wCAAwC;AAE1C,OAAO,MAAMM,4BAA4B,GAAGd,MAAM,CAACG,cAAc,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sJAC9DC,kBAAkB,EAMlBJ,mBAAmB,EAAWD,kBAAkB,CAInD;AAEDS,4BAA4B,CAACN,WAAW,GAAG,8BAA8B;AAEzE,OAAO,MAAMO,kBAAkB,GAAGf,MAAM,CAACgB,GAAG,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wLAUhCG,KAAK,IAAQA,KAAK,CAACK,MAAM,OAAI,EAErCC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OACVC,KAAK,KAAK,IAAI,IACdlB,GAAG,mBAEF;AAAA,EACJ;AAEDc,kBAAkB,CAACP,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMY,iBAAiB,GAAGpB,MAAM,CAACgB,GAAG,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+CAIrC;EAAA;AAAQ,CAAC,EACT;EAAA;AAAS,CAAC,EACV;EAAA;AAAU,CAAC,EAEHY,KAAA;EAAA,IAAC;IAAER;EAAM,CAAC,GAAAQ,KAAA;EAAA,OAAMR,KAAK,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAEpDS,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACdC,SAAS,KAAK,MAAM,IACpBtB,GAAG,iBACG;IAAA;EAAa,CAAC,EACd;IAAA;EAAU,CAAC,CAChB;AAAA,GAEDuB,KAAA;EAAA,IAAC;IAAED;EAAU,CAAC,GAAAC,KAAA;EAAA,OACdD,SAAS,KAAK,MAAM,IACpBtB,GAAG,yBAEF;AAAA,EACJ;AACDmB,iBAAiB,CAACZ,WAAW,GAAG,mBAAmB"}
+{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","StyledInputWrapper","StyledComboBoxInput","withConfig","displayName","componentId","StyledIconDefaults","StyledComboBoxCollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","StyledComboBoxList","div","$width","_ref","$hide","StyledChipWrapper","_ref2","_ref3","$autoSize","_ref4"],"sources":["../../../../src/components/ComboBox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults};\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults};\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{\n  $width?: number;\n  $hide: boolean;\n}>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n\n  ${({ $hide }) =>\n    $hide === true &&\n    css`\n      display: none;\n    `}\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n\nexport const StyledChipWrapper = styled.div<{\n  $autoSize: string;\n  $open?: boolean;\n}>`\n  ${tw`tw-flex`};\n  ${tw`tw-gap-1`};\n  ${tw`tw-flex-1`};\n\n  ${({ $open }) =>\n    !$open &&\n    css`\n      overflow: hidden;\n    `}\n\n  ${({ $autoSize }) =>\n    $autoSize === \"auto\" &&\n    css`\n      ${tw`tw-flex-wrap`};\n      ${tw`tw-w-full`};\n    `}\n\n  ${({ $autoSize }) =>\n    $autoSize !== \"auto\" &&\n    css`\n      align-items: center;\n    `}\n`;\nStyledChipWrapper.displayName = \"StyledChipWrapper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,wBAAwB,EAAEC,cAAc,QAAQ,qBAAqB;AAC9E,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,OAAO,MAAMC,mBAAmB,GAAGN,MAAM,CAACI,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0DAI/C;AAEDH,mBAAmB,CAACE,WAAW,GAAG,qBAAqB;AAEvD,MAAME,kBAAkB,GAAGT,GAAG,mCAG7B;AAED,OAAO,MAAMU,sCAAsC,GAAGX,MAAM,CAC1DE,wBACF,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACGC,kBAAkB,EAIjBE,KAAK,IACNA,KAAK,CAACC,KAAK,IACXZ,GAAG,6BAEF,CACJ;AAEDU,sCAAsC,CAACH,WAAW,GAChD,wCAAwC;AAE1C,OAAO,MAAMM,4BAA4B,GAAGd,MAAM,CAACG,cAAc,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sJAC9DC,kBAAkB,EAMlBJ,mBAAmB,EAAWD,kBAAkB,CAInD;AAEDS,4BAA4B,CAACN,WAAW,GAAG,8BAA8B;AAEzE,OAAO,MAAMO,kBAAkB,GAAGf,MAAM,CAACgB,GAAG,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wLAUhCG,KAAK,IAAQA,KAAK,CAACK,MAAM,OAAI,EAErCC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OACVC,KAAK,KAAK,IAAI,IACdlB,GAAG,mBAEF;AAAA,EACJ;AAEDc,kBAAkB,CAACP,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMY,iBAAiB,GAAGpB,MAAM,CAACgB,GAAG,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sCAIrC;EAAA;AAAQ,CAAC,EACT;EAAA;AAAS,CAAC,EACV;EAAA;AAAU,CAAC,EAEbY,KAAA;EAAA,IAAC;IAAER;EAAM,CAAC,GAAAQ,KAAA;EAAA,OACV,CAACR,KAAK,IACNZ,GAAG,sBAEF;AAAA,GAEDqB,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACdC,SAAS,KAAK,MAAM,IACpBtB,GAAG,iBACG;IAAA;EAAa,CAAC,EACd;IAAA;EAAU,CAAC,CAChB;AAAA,GAEDuB,KAAA;EAAA,IAAC;IAAED;EAAU,CAAC,GAAAC,KAAA;EAAA,OACdD,SAAS,KAAK,MAAM,IACpBtB,GAAG,yBAEF;AAAA,EACJ;AACDmB,iBAAiB,CAACZ,WAAW,GAAG,mBAAmB"}

package/dist/index.js

@@ -17043,7 +17043,7 @@
   var StyledChipWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledChipWrapper",
     componentId: "sc-5qvkpb-4"
-  })(["", ";", ";", ";overflow:", ";", " ", ""], {
+  })(["", ";", ";", ";", " ", " ", ""], {
     "display": "flex"
   }, {
     "gap": "0.25rem"
@@ -17051,7 +17051,7 @@
     "flex": "1 1 0%"
   }, function (_ref2) {
     var $open = _ref2.$open;
-    return $open ? "auto" : "hidden";
+    return !$open && styled.css(["overflow:hidden;"]);
   }, function (_ref3) {
     var $autoSize = _ref3.$autoSize;
     return $autoSize === "auto" && styled.css(["", ";", ";"], {
@@ -17197,6 +17197,12 @@
   Chip.displayName = "Chip";
 
   var _excluded$k = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue"];
+  var sizeMap = {
+    small: 18,
+    regular: 24,
+    big: 30,
+    biggest: 40
+  };
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -17502,12 +17508,12 @@
         (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.click();
       },
       $_css3: autoSize === "auto" ? "auto" : undefined,
-      $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
-      $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
-    }, /*#__PURE__*/React__default["default"].createElement(StyledChipWrapper, {
+      $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined
+    }, /*#__PURE__*/React__default["default"].createElement(_StyledStyledChipWrapper, {
       $autoSize: autoSize,
       $open: open,
-      ref: chipWrapper
+      ref: chipWrapper,
+      $_css5: autoSize === "auto" && scrollWrapper ? sizeMap[size] * 3 + 8 + "px" : undefined
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
@@ -17613,16 +17619,20 @@
   var _StyledStyledInputWrapper = styled__default["default"](StyledInputWrapper).withConfig({
     displayName: "ComboBox___StyledStyledInputWrapper",
     componentId: "sc-uvsz9l-2"
-  })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], function (p) {
+  })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";"], function (p) {
     return p.$_css3;
   }, function (p) {
     return p.$_css4;
-  }, function (p) {
+  });
+  var _StyledStyledChipWrapper = styled__default["default"](StyledChipWrapper).withConfig({
+    displayName: "ComboBox___StyledStyledChipWrapper",
+    componentId: "sc-uvsz9l-3"
+  })(["max-height:", ";"], function (p) {
     return p.$_css5;
   });
   var _StyledTrigger = styled__default["default"](Trigger).withConfig({
     displayName: "ComboBox___StyledTrigger",
-    componentId: "sc-uvsz9l-3"
+    componentId: "sc-uvsz9l-4"
   })(["display:flex;justify-content:center;"]);
 
   var StyledText = styled__default["default"](Body2).withConfig({