@activecollab/components 1.0.74 → 1.0.77

package/dist/esm/components/Input/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,eAAO,MAAM,WAAW;;SAqDvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,eAAO,MAAM,WAAW;;SAwDvB,CAAC"}

package/dist/esm/components/Input/Styles.js

@@ -4,8 +4,16 @@ import { FontStyle } from "../FontStyle";
 export var StyledInput = styled.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-0"
-})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
+})(["", " ", " ", " ", " ", " border:1px solid var(--border-primary);border-radius:10px;padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}"], {
   "fontSize": "0.875rem"
+}, {
+  "color": "var(--color-theme-900)"
+}, {
+  "lineHeight": "1.375"
+}, {
+  "letterSpacing": "0.02em"
+}, {
+  "fontWeight": "400"
 }, FontStyle, BoxSizingStyle, function (props) {
   return props.$size === "small" && css(["border-radius:6px;height:24px;"]);
 }, function (props) {
@@ -24,6 +32,8 @@ export var StyledInput = styled.input.withConfig({
   }, {
     "borderColor": "var(--color-primary)"
   });
+}, {
+  "color": "var(--color-theme-transparent-500)"
 });
 StyledInput.displayName = "StyledInput";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledInput","input","props","$size","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAV;AAAA;AAAA;AAAA,iTAGlB;AAAA;AAAA,CAHkB,EAcpBF,SAdoB,EAepBD,cAfoB,EAiBpB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,IACAN,GADA,oCADA;AAAA,CAjBoB,EAwBpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,IACAN,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAxBoB,EA+BpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,GACIP,GADJ,WAEU;AAAA;AAAA;AAAA;AAAA,GAFV,IAIIA,GAJJ,+CAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CA/BoB,CAAjB;AAuDPG,WAAW,CAACK,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n  $size?: InputSize;\n}>`\n  ${tw`tw-text-body-2`}\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  padding: 4px 10px 6px 8px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  outline: none;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.disabled\n      ? css`\n          ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n        `\n      : css`\n          &:hover {\n            ${tw`tw-border-primary`}\n          }\n\n          &:active {\n            ${tw`tw-border-primary`}\n          }\n\n          &:focus {\n            ${tw`tw-border-primary`}\n          }\n        `}\n\n  &::placeholder {\n    color: var(--color-theme-600);\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledInput","input","props","$size","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAV;AAAA;AAAA;AAAA,+QAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAOlB;AAAA;AAAA,CAPkB,EAiBpBF,SAjBoB,EAkBpBD,cAlBoB,EAoBpB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,IACAN,GADA,oCADA;AAAA,CApBoB,EA2BpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,IACAN,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA3BoB,EAkCpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,GACIP,GADJ,WAEU;AAAA;AAAA;AAAA;AAAA,GAFV,IAIIA,GAJJ,+CAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CAlCoB,EAsDhB;AAAA;AAAA,CAtDgB,CAAjB;AA0DPG,WAAW,CAACK,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n  $size?: InputSize;\n}>`\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  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  padding: 4px 10px 6px 8px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  outline: none;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.disabled\n      ? css`\n          ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n        `\n      : css`\n          &:hover {\n            ${tw`tw-border-primary`}\n          }\n\n          &:active {\n            ${tw`tw-border-primary`}\n          }\n\n          &:focus {\n            ${tw`tw-border-primary`}\n          }\n        `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}

package/dist/index.js

@@ -4630,8 +4630,16 @@
   var StyledInput = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-0"
-  })(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
+  })(["", " ", " ", " ", " ", " border:1px solid var(--border-primary);border-radius:10px;padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}"], {
     "fontSize": "0.875rem"
+  }, {
+    "color": "var(--color-theme-900)"
+  }, {
+    "lineHeight": "1.375"
+  }, {
+    "letterSpacing": "0.02em"
+  }, {
+    "fontWeight": "400"
   }, FontStyle, BoxSizingStyle, function (props) {
     return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
   }, function (props) {
@@ -4650,6 +4658,8 @@
     }, {
       "borderColor": "var(--color-primary)"
     });
+  }, {
+    "color": "var(--color-theme-transparent-500)"
   });
   StyledInput.displayName = "StyledInput";
 
@@ -9736,28 +9746,20 @@
   var StyledComboBox = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBox",
     componentId: "sc-5qvkpb-0"
-  })(["height:34px;border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;background-color:var(--input-background-color);cursor:text;", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
-    return props.$open && styled.css(["border-color:var(--color-primary);"]);
-  }, function (props) {
+  })(["position:relative;cursor:text;", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
     return props.$loading && styled.css(["cursor:progress;"]);
-  }, function (props) {
-    return props.$size == "small" && styled.css(["height:26px;"]);
-  }, function (props) {
-    return props.$size == "big" && styled.css(["height:42px;"]);
   });
   StyledComboBox.displayName = "StyledComboBox";
-  var StyledComboBoxWrapper = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledComboBoxWrapper",
+  var StyledComboBoxControls = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledComboBoxControls",
     componentId: "sc-5qvkpb-1"
-  })(["width:100%;height:100%;display:flex;align-items:center;", ""], function (props) {
-    return props.$loading && styled.css(["pointer-events:none;"]);
-  });
-  StyledComboBoxWrapper.displayName = "StyledComboBoxWrapper";
+  })(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
+  StyledComboBoxControls.displayName = "StyledComboBoxControls";
   var StyledIconDefaults = styled.css(["flex-shrink:0;cursor:pointer;"]);
   var StyledComboBoxCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
     displayName: "Styles__StyledComboBoxCloseSmallIcon",
     componentId: "sc-5qvkpb-2"
-  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxWrapper);
+  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBox);
   StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
   var StyledComboBoxCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
     displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
@@ -9769,7 +9771,9 @@
   var StyledComboBoxInput = styled__default["default"](Input).withConfig({
     displayName: "Styles__StyledComboBoxInput",
     componentId: "sc-5qvkpb-4"
-  })(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"]);
+  })(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
+    "borderColor": "var(--color-primary)"
+  });
   StyledComboBoxInput.displayName = "StyledComboBoxInput";
   var StyledComboBoxList = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBoxList",
@@ -9781,7 +9785,7 @@
 
   var _excluded$1 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size"];
   var ComboBox = function ComboBox(_ref) {
-    var _formRef$current;
+    var _comboBoxRef$current;
 
     var _ref$options = _ref.options,
         options = _ref$options === void 0 ? [] : _ref$options,
@@ -9794,7 +9798,8 @@
         handleEmptyAction = _ref.handleEmptyAction,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        size = _ref.size,
+        _ref$size = _ref.size,
+        size = _ref$size === void 0 ? "regular" : _ref$size,
         prop = _objectWithoutProperties(_ref, _excluded$1);
 
     var selectedName = React.useMemo(function () {
@@ -9851,7 +9856,6 @@
         e.stopPropagation();
       }
     }, [open, selectedName]);
-    var formRef = React.useRef(null);
     React.useEffect(function () {
       open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
       !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
@@ -9908,25 +9912,22 @@
         document.removeEventListener("click", clickOutsideCallback);
       };
     }, [clickOutsideCallback]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledComboBox, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledComboBox, {
       className: "c-combo-box",
       $open: open,
       $loading: loading,
-      $size: size,
-      ref: comboBoxRef
-    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxWrapper, {
+      ref: comboBoxRef,
       onClick: onOpen,
-      onFocus: onOpen,
-      ref: formRef,
-      $loading: loading
+      onFocus: onOpen
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,
       onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       placeholder: placeholder,
-      disabled: disabled
-    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
+      disabled: disabled,
+      size: size
+    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(StyledComboBoxControls, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
       variant: "text gray",
@@ -9934,7 +9935,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
     })) : null), !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
-      anchorEl: formRef.current,
+      anchorEl: comboBoxRef.current,
       open: open,
       placement: "bottom",
       style: {
@@ -9944,7 +9945,7 @@
       noIsolation: true,
       allowPinchZoom: true
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxList, {
-      $width: (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.clientWidth
+      $width: (_comboBoxRef$current = comboBoxRef.current) === null || _comboBoxRef$current === void 0 ? void 0 : _comboBoxRef$current.clientWidth
     }, /*#__PURE__*/React__default["default"].createElement(Autocomplete, _extends({}, prop, {
       inputEl: childNode,
       selected: selected,