@activecollab/components 1.0.321 → 1.0.323

package/dist/esm/components/SelectTrigger/SelectTrigger.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "type", "size", "invalid", "open", "endAdornment"];
+var _excluded = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
 import React, { forwardRef } from "react";
 import { Typography } from "../Typography/Typography";
 import { StyledCaretIcon, StyledSelectTrigger } from "./Styles";
@@ -15,6 +15,7 @@ export var SelectTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     endAdornment = _ref.endAdornment,
+    typographyProps = _ref.typographyProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledSelectTrigger, _extends({
     ref: ref,
@@ -22,12 +23,12 @@ export var SelectTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     type: type,
     $size: size,
     $invalid: invalid
-  }, rest), /*#__PURE__*/React.createElement(Typography, {
+  }, rest), /*#__PURE__*/React.createElement(Typography, _extends({
     as: "div",
     overflow: "truncate",
     whitespace: "no-wrap",
     variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
-  }, children), endAdornment ? endAdornment : /*#__PURE__*/React.createElement(StyledCaretIcon, {
+  }, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React.createElement(StyledCaretIcon, {
     $open: open
   }));
 });

package/dist/esm/components/SelectTrigger/SelectTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.js","names":["React","forwardRef","Typography","StyledCaretIcon","StyledSelectTrigger","SelectTrigger","ref","children","type","size","invalid","open","endAdornment","rest","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n  size?: Size;\n  invalid?: boolean;\n  endAdornment?: JSX.Element;\n  open?: boolean;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      children,\n      type = \"button\",\n      size = \"regular\",\n      invalid = false,\n      open = false,\n      endAdornment,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledSelectTrigger\n        ref={ref}\n        role=\"button\"\n        type={type}\n        $size={size}\n        $invalid={invalid}\n        {...rest}\n      >\n        <Typography\n          as=\"div\"\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n        >\n          {children}\n        </Typography>\n\n        {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n      </StyledSelectTrigger>\n    );\n  }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAkC,OAAO;AACnE,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,UAAU;AAW/D,OAAO,IAAMC,aAAa,gBAAGJ,UAAU,CACrC,gBAUEK,GAAG,EACA;EAAA,IATDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IAAA,iBACfC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,iBACfC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,oBACE,oBAAC,mBAAmB;IAClB,GAAG,EAAEP,GAAI;IACT,IAAI,EAAC,QAAQ;IACb,IAAI,EAAEE,IAAK;IACX,KAAK,EAAEC,IAAK;IACZ,QAAQ,EAAEC;EAAQ,GACdG,IAAI,gBAER,oBAAC,UAAU;IACT,EAAE,EAAC,KAAK;IACR,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAEJ,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG;EAAS,GAErEF,QAAQ,CACE,EAEZK,YAAY,GAAGA,YAAY,gBAAG,oBAAC,eAAe;IAAC,KAAK,EAAED;EAAK,EAAG,CAC3C;AAE1B,CAAC,CACF;AAEDN,aAAa,CAACS,WAAW,GAAG,eAAe"}
+{"version":3,"file":"SelectTrigger.js","names":["React","forwardRef","Typography","StyledCaretIcon","StyledSelectTrigger","SelectTrigger","ref","children","type","size","invalid","open","endAdornment","typographyProps","rest","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n  size?: Size;\n  invalid?: boolean;\n  endAdornment?: JSX.Element;\n  open?: boolean;\n  typographyProps?: ITypographyProps;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      children,\n      type = \"button\",\n      size = \"regular\",\n      invalid = false,\n      open = false,\n      endAdornment,\n      typographyProps,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledSelectTrigger\n        ref={ref}\n        role=\"button\"\n        type={type}\n        $size={size}\n        $invalid={invalid}\n        {...rest}\n      >\n        <Typography\n          as=\"div\"\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n          {...typographyProps}\n        >\n          {children}\n        </Typography>\n\n        {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n      </StyledSelectTrigger>\n    );\n  }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAkC,OAAO;AACnE,SAA2BC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,UAAU;AAY/D,OAAO,IAAMC,aAAa,gBAAGJ,UAAU,CACrC,gBAWEK,GAAG,EACA;EAAA,IAVDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IAAA,iBACfC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,iBACfC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,YAAY,QAAZA,YAAY;IACZC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,oBACE,oBAAC,mBAAmB;IAClB,GAAG,EAAER,GAAI;IACT,IAAI,EAAC,QAAQ;IACb,IAAI,EAAEE,IAAK;IACX,KAAK,EAAEC,IAAK;IACZ,QAAQ,EAAEC;EAAQ,GACdI,IAAI,gBAER,oBAAC,UAAU;IACT,EAAE,EAAC,KAAK;IACR,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAEL,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG;EAAS,GAClEI,eAAe,GAElBN,QAAQ,CACE,EAEZK,YAAY,GAAGA,YAAY,gBAAG,oBAAC,eAAe;IAAC,KAAK,EAAED;EAAK,EAAG,CAC3C;AAE1B,CAAC,CACF;AAEDN,aAAa,CAACU,WAAW,GAAG,eAAe"}

package/dist/index.js

@@ -9422,10 +9422,10 @@
 
   var burstScale = styled.keyframes(["from{transform:scale(0);}to{transform:scale(1);}"]);
   var burstAnimation = styled.keyframes(["from{stroke-dashoffset:0;}to{stroke-dashoffset:8;}"]);
-  var StyledCompleteCheckbox = styled__default["default"].div.withConfig({
+  var StyledCompleteCheckbox = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledCompleteCheckbox",
     componentId: "sc-1801dzg-0"
-  })(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
+  })(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;background-color:transparent;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
     "width": "1.5rem",
     "height": "1.5rem",
     "borderRadius": "9999px",
@@ -9446,7 +9446,7 @@
       "borderStyle": "solid"
     }), props.$primary && styled.css(["box-shadow:inset 0 0 0 12px var(--color-primary);"]), props.$primary && styled.css(["stroke:var(--color-theme-100);"]));
   }, function (props) {
-    return !props.$completed && !props.$disabled && styled.css(["&:hover{border:1px solid var(--color-primary);box-shadow:inset 0 0 0 2px var(--color-primary);border-width:0px;", " svg polyline{stroke-dashoffset:0;}}"], !props.$primary && styled.css(["border:1px solid #84cc7c;box-shadow:inset 0 0 0 2px #84cc7c;"]));
+    return !props.$completed && !props.$disabled && styled.css(["&:hover,&:focus-visible{border:1px solid var(--color-primary);box-shadow:inset 0 0 0 2px var(--color-primary);border-width:0px;outline:none;", " svg polyline{stroke-dashoffset:0;}}"], !props.$primary && styled.css(["border:1px solid #84cc7c;box-shadow:inset 0 0 0 2px #84cc7c;"]));
   }, function (props) {
     return props.$animation && styled.css(["svg path{animation:", " 0.6s ease 0s 1 normal,", " 0.4s ease 0.2s 1 normal;}"], burstScale, burstAnimation);
   }, function (props) {
@@ -14071,7 +14071,7 @@
   });
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$i = ["children", "type", "size", "invalid", "open", "endAdornment"];
+  var _excluded$i = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
@@ -14083,6 +14083,7 @@
       _ref$open = _ref.open,
       open = _ref$open === void 0 ? false : _ref$open,
       endAdornment = _ref.endAdornment,
+      typographyProps = _ref.typographyProps,
       rest = _objectWithoutProperties(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
       ref: ref,
@@ -14090,12 +14091,12 @@
       type: type,
       $size: size,
       $invalid: invalid
-    }, rest), /*#__PURE__*/React__default["default"].createElement(Typography, {
+    }, rest), /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       as: "div",
       overflow: "truncate",
       whitespace: "no-wrap",
       variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
-    }, children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, {
+    }, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, {
       $open: open
     }));
   });
@@ -14465,6 +14466,9 @@
       if (e.key === "Enter" && type === "multiple") {
         setValue("");
       }
+      if (e.key === "Enter" && !open) {
+        setOpen(true);
+      }
     }, [open, selectedName, type]);
     React.useEffect(function () {
       var _childNode$current, _childNode$current2;
@@ -14677,7 +14681,7 @@
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
-      onFocus: onOpen,
+      onClick: onOpen,
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,
       onKeyDown: handleOnKeyDown,
@@ -14701,7 +14705,7 @@
     }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
       onBlur: handleBlur,
-      onFocus: onOpen,
+      onClick: onOpen,
       wrapRef: comboBoxRef,
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,