@activecollab/components 1.0.323 → 1.0.325

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
+var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
 import React, { useCallback, useRef } from "react";
 import classnames from "classnames";
 import { StyledInput, StyledInputWrapper } from "./Styles";
@@ -20,13 +20,15 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     startAdornment = _ref.startAdornment,
     endAdornment = _ref.endAdornment,
     wrapRef = _ref.wrapRef,
+    wrapperClick = _ref.wrapperClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var intInputRef = useRef(null);
   var handleRef = useForkRef(ref, intInputRef);
   var handleWrapperClick = useCallback(function () {
     var _intInputRef$current;
     (_intInputRef$current = intInputRef.current) == null ? void 0 : _intInputRef$current.focus();
-  }, []);
+    wrapperClick && wrapperClick();
+  }, [wrapperClick]);
   return /*#__PURE__*/React.createElement(StyledInputWrapper, {
     $size: size,
     $invalid: invalid,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { ReactNode, Ref, useCallback, useRef } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nexport interface InputProps {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const Input = React.forwardRef<\n  HTMLInputElement,\n  InputProps & Omit<React.ComponentPropsWithoutRef<\"input\">, keyof InputProps>\n>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n    }, []);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAClE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAW/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CAInC,gBAaEC,GAAG,EACA;EAAA,0BAZDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAIT,IAAMC,WAAW,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMmB,SAAS,GAAGf,UAAU,CAACG,GAAG,EAAEW,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGrB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAmB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEV,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEY,kBAAmB;IAC5B,GAAG,EAAEJ;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEK,SAAU;IACf,IAAI,EAAET,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBI,IAAI,EACR,EACDF,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACkB,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { ReactNode, Ref, useCallback, useRef } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nexport interface InputProps {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<\n  HTMLInputElement,\n  InputProps & Omit<React.ComponentPropsWithoutRef<\"input\">, keyof InputProps>\n>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAClE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAY/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CAInC,gBAcEC,GAAG,EACA;EAAA,0BAbDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMoB,SAAS,GAAGhB,UAAU,CAACG,GAAG,EAAEY,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGtB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAoB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BN,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEa,kBAAmB;IAC5B,GAAG,EAAEL;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEM,SAAU;IACf,IAAI,EAAEV,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,IAAI,EACR,EACDH,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACmB,WAAW,GAAG,OAAO"}

package/dist/index.js

@@ -10928,7 +10928,7 @@
   });
   StyledInput$2.displayName = "StyledInput";
 
-  var _excluded$I = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
+  var _excluded$I = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
@@ -10944,13 +10944,15 @@
       startAdornment = _ref.startAdornment,
       endAdornment = _ref.endAdornment,
       wrapRef = _ref.wrapRef,
+      wrapperClick = _ref.wrapperClick,
       rest = _objectWithoutProperties(_ref, _excluded$I);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
     var handleWrapperClick = React.useCallback(function () {
       var _intInputRef$current;
       (_intInputRef$current = intInputRef.current) === null || _intInputRef$current === void 0 ? void 0 : _intInputRef$current.focus();
-    }, []);
+      wrapperClick && wrapperClick();
+    }, [wrapperClick]);
     return /*#__PURE__*/React__default["default"].createElement(StyledInputWrapper, {
       $size: size,
       $invalid: invalid,
@@ -14436,6 +14438,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);
     }, []);
@@ -14445,10 +14451,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;
@@ -14466,10 +14472,10 @@
       if (e.key === "Enter" && type === "multiple") {
         setValue("");
       }
-      if (e.key === "Enter" && !open) {
+      if (e.key === "Enter" && !open && focused) {
         setOpen(true);
       }
-    }, [open, selectedName, type]);
+    }, [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());
@@ -14479,12 +14485,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);
@@ -14537,7 +14543,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);
@@ -14669,7 +14676,7 @@
       className: classNames__default["default"]("c-combo-box-input-wrapper", inputWrapperClassName),
       onClick: function onClick() {
         var _elementRef$current;
-        (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
+        (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.click();
       },
       $_css3: autoSize === "auto" ? "auto" : undefined,
       $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
@@ -14681,6 +14688,9 @@
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
+      onFocus: function onFocus() {
+        setFocused(!focused);
+      },
       onClick: onOpen,
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,
@@ -14705,6 +14715,10 @@
     }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
       onBlur: handleBlur,
+      wrapperClick: onOpen,
+      onFocus: function onFocus() {
+        setFocused(!focused);
+      },
       onClick: onOpen,
       wrapRef: comboBoxRef,
       ref: handleRef,