@activecollab/components 1.0.322 → 1.0.324

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

@@ -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
     }));
   });
@@ -14435,6 +14436,10 @@
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
+    var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
     var handleOnChange = React.useCallback(function (e) {
       return setValue(e.target.value);
     }, []);
@@ -14444,10 +14449,10 @@
     var wrapperRef = React.useRef(null);
     var chipWrapper = React.useRef(null);
     var comboBoxRef = React.useRef(null);
-    var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
+    var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      open = _useState6[0],
+      setOpen = _useState6[1];
     var isFirstRender = useIsFirstRender();
     useOnClickOutside(wrapperRef, function (e) {
       var _comboBoxRef$current;
@@ -14465,7 +14470,10 @@
       if (e.key === "Enter" && type === "multiple") {
         setValue("");
       }
-    }, [open, selectedName, type]);
+      if (e.key === "Enter" && !open && focused) {
+        setOpen(true);
+      }
+    }, [focused, open, selectedName, type]);
     React.useEffect(function () {
       var _childNode$current, _childNode$current2;
       open && (childNode === null || childNode === void 0 ? void 0 : (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
@@ -14475,12 +14483,12 @@
       setValue(selectedName);
     }, [selectedName]);
     React.useEffect(function () {
-      if (!open && !isFirstRender) {
+      if (!open && !isFirstRender && !focused) {
         if (typeof onClose === "function") {
           onClose();
         }
       }
-    }, [isFirstRender, onClose, open]);
+    }, [focused, isFirstRender, onClose, open]);
     var emptyAction = React.useCallback(function (v) {
       handleEmptyAction === null || handleEmptyAction === void 0 ? void 0 : handleEmptyAction(v);
       setOpen(false);
@@ -14533,7 +14541,8 @@
     }, []);
     var handleBlur = React.useCallback(function () {
       setValue(selectedName);
-    }, [selectedName]);
+      setFocused(!focused);
+    }, [focused, selectedName]);
     var renderChipAdornment = React.useCallback(function (option, index) {
       if (typeof renderChip === "function") {
         return renderChip(option, index);
@@ -14677,7 +14686,10 @@
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
-      onFocus: onOpen,
+      onFocus: function onFocus() {
+        setFocused(!focused);
+      },
+      onClick: onOpen,
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,
       onKeyDown: handleOnKeyDown,
@@ -14701,7 +14713,10 @@
     }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
       onBlur: handleBlur,
-      onFocus: onOpen,
+      onClick: onOpen,
+      onFocus: function onFocus() {
+        setFocused(!focused);
+      },
       wrapRef: comboBoxRef,
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,