@cashub/ui 0.9.2 → 0.9.4

package/datetimePicker/DatetimePicker.js

@@ -39,8 +39,14 @@ var DatetimePicker = function DatetimePicker(_ref) {
       maxDate = _ref.maxDate,
       showTimeInput = _ref.showTimeInput,
       readOnly = _ref.readOnly,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      onBlur = _ref.onBlur;
   var datepickerRef = (0, _react.useRef)(null);
+
+  var handleOnBlur = function handleOnBlur() {
+    onBlur();
+  };
+
   var datePickerProps = {
     dateFormat: dateFormat,
     disabled: disabled,
@@ -57,6 +63,10 @@ var DatetimePicker = function DatetimePicker(_ref) {
     });
   }
 
+  if (onBlur) {
+    datePickerProps.onCalendarClose = handleOnBlur;
+  }
+
   (0, _react.useEffect)(function () {
     // set input to readonly
     if (datepickerRef && datepickerRef.current && readOnly) {

package/dropzone/ImageDropzone.js

@@ -56,7 +56,8 @@ var ImageDropzone = function ImageDropzone(_ref) {
       onAddedFile = _ref.onAddedFile,
       onRemovedFile = _ref.onRemovedFile,
       setDropzoneFunc = _ref.setDropzoneFunc,
-      cropper = _ref.cropper;
+      cropper = _ref.cropper,
+      onBlur = _ref.onBlur;
   var inputRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)([]),
@@ -74,8 +75,16 @@ var ImageDropzone = function ImageDropzone(_ref) {
       addedFiles = _useState6[0],
       setAddedFiles = _useState6[1];
 
+  var refWrapper = (0, _react.useRef)(null);
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      focus = _useState8[0],
+      setFocus = _useState8[1];
+
   var handleClick = function handleClick() {
     if (files.length >= maxFiles) return;
+    setFocus(false);
     inputRef.current.click();
   };
 
@@ -157,6 +166,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
   }, [handleAddFiles]);
   var handleCrop = (0, _react.useCallback)(function (event, index, file) {
     event.stopPropagation();
+    setFocus(false);
     cropper.handler({
       file: file,
       src: file.url,
@@ -212,6 +222,14 @@ var ImageDropzone = function ImageDropzone(_ref) {
   var remove = (0, _react.useCallback)(function (index) {
     handleRemoveFile(null, index);
   }, [handleRemoveFile]);
+
+  var handleBlur = function handleBlur() {
+    if (focus) {
+      onBlur();
+      setFocus(false);
+    }
+  };
+
   (0, _react.useEffect)(function () {
     if (addedFiles.length > 0 && onAddedFile) {
       var startIndex = files.length - addedFiles.length;
@@ -244,6 +262,12 @@ var ImageDropzone = function ImageDropzone(_ref) {
     onDragOver: handleDragOver,
     onDrop: handleDrop,
     reachedLimit: files.length >= maxFiles,
+    onBlur: handleBlur,
+    onFocus: function onFocus() {
+      setFocus(true);
+    },
+    ref: refWrapper,
+    tabIndex: "-1",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
       multiple: true,
       ref: inputRef,

package/image/UploadImage.js

@@ -48,6 +48,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$current, _ref$current$files;
+
   var id = _ref.id,
       src = _ref.src,
       _ref$alt = _ref.alt,
@@ -55,7 +57,10 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$roundedCircle = _ref.roundedCircle,
       roundedCircle = _ref$roundedCircle === void 0 ? false : _ref$roundedCircle,
       cropperHandler = _ref.cropperHandler,
-      onBlur = _ref.onBlur;
+      onBlur = _ref.onBlur,
+      onClear = _ref.onClear,
+      _ref$allowClear = _ref.allowClear,
+      allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
@@ -160,7 +165,8 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var handleBlur = function handleBlur(e) {
     e.preventDefault();
-    e.stopPropagation();
+    e.stopPropagation(); // if click figure,after click button
+
     if (refWrapper.current.contains(e.relatedTarget)) return;
 
     if (e.target === refWrapper.current && onBlur) {
@@ -216,6 +222,10 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClick: handleAvatarRemove,
       roundedCircle: roundedCircle,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
+    }), allowClear && src && !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$files = _ref$current.files) !== null && _ref$current$files !== void 0 && _ref$current$files.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
+      onClick: onClear,
+      roundedCircle: roundedCircle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
     })]
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/select/Select.js

@@ -90,7 +90,8 @@ var Select = function Select(_ref) {
       fullWidth = _ref.fullWidth,
       large = _ref.large,
       fill = _ref.fill,
-      fillReverse = _ref.fillReverse;
+      fillReverse = _ref.fillReverse,
+      onBlur = _ref.onBlur;
 
   var _useState = (0, _react.useState)((0, _lodash.default)('select-')),
       _useState2 = _slicedToArray(_useState, 1),
@@ -129,20 +130,25 @@ var Select = function Select(_ref) {
       focusedOption = _useState14[0],
       setFocusedOption = _useState14[1];
 
-  var _useState15 = (0, _react.useState)([]),
+  var _useState15 = (0, _react.useState)(false),
       _useState16 = _slicedToArray(_useState15, 2),
-      selectedOptions = _useState16[0],
-      setSelectedOptions = _useState16[1];
+      isFocusCombobox = _useState16[0],
+      setIsFocusCombobox = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(options),
+  var _useState17 = (0, _react.useState)([]),
       _useState18 = _slicedToArray(_useState17, 2),
-      filteredOptions = _useState18[0],
-      setFilteredOptions = _useState18[1];
+      selectedOptions = _useState18[0],
+      setSelectedOptions = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(''),
+  var _useState19 = (0, _react.useState)(options),
       _useState20 = _slicedToArray(_useState19, 2),
-      search = _useState20[0],
-      setSearch = _useState20[1];
+      filteredOptions = _useState20[0],
+      setFilteredOptions = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(''),
+      _useState22 = _slicedToArray(_useState21, 2),
+      search = _useState22[0],
+      setSearch = _useState22[1];
 
   var _useCustomPopper = (0, _hooks.useCustomPopper)(listBoxElement, dropdownElement),
       styles = _useCustomPopper.styles,
@@ -229,9 +235,10 @@ var Select = function Select(_ref) {
     event.stopPropagation();
     if (disabled === true) return;
     onSelect(value);
+    listBoxElement.focus();
     setSearch('');
     setDisplay(false);
-  }, [disabled, onSelect]);
+  }, [disabled, onSelect, listBoxElement]);
   var handleOnDeselect = (0, _react.useCallback)(function (event, value) {
     event.stopPropagation();
     if (disabled === true) return;
@@ -407,6 +414,12 @@ var Select = function Select(_ref) {
 
   var handleSearchChange = function handleSearchChange(event) {
     setSearch(event.target.value);
+  };
+
+  var handleFocus = function handleFocus(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsFocusCombobox(true);
   }; // determine selected option(s)
 
 
@@ -541,7 +554,10 @@ var Select = function Select(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
     onOutsideClick: function onOutsideClick() {
       setDisplay(false);
+      if (onBlur) onBlur();
+      setIsFocusCombobox(false);
     },
+    disabled: !isFocusCombobox,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Combobox, {
       role: "combobox",
       tabIndex: "0",
@@ -558,6 +574,7 @@ var Select = function Select(_ref) {
       large: large,
       $fill: fill,
       fillReverse: fillReverse,
+      onFocus: handleFocus,
       children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
         onClick: function onClick() {
           onSelect('');

package/select/subComponent/SelectedMultiple.js

@@ -23,6 +23,7 @@ var SelectedMultiple = function SelectedMultiple(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Selected, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       onClick: onClick,
+      "data-testid": "removeOption",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
     }), content]
   });

package/tagify/Tags.js

@@ -49,7 +49,7 @@ var Tags = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   });
 });
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .tagify {\n    --tags-disabled-bg: var(--font-on-mute);\n    --tags-border-color: var(--border-color);\n    --tags-hover-border-color: var(--border-color);\n    --tags-focus-border-color: var(--color-primary);\n    --tag-invalid-color: var(--color-danger);\n    --tag-remove-btn-bg--hover: var(--color-danger);\n    --input-color: var(--font-on-background);\n\n    border-radius: var(--border-radius-l);\n\n    .tagify__tag {\n      > div::before {\n        border-radius: var(--border-radius-l);\n      }\n    }\n  }\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .tagify {\n    --tags-disabled-bg: var(--font-on-mute);\n    --tags-border-color: var(--border-color);\n    --tags-hover-border-color: var(--border-color);\n    --tags-focus-border-color: var(--color-primary);\n    --tag-invalid-color: var(--color-danger);\n    --tag-remove-btn-bg--hover: var(--color-danger);\n    --input-color: var(--font-on-background);\n\n    border-radius: var(--border-radius-l);\n    width: 100%;\n\n    .tagify__tag {\n      > div::before {\n        border-radius: var(--border-radius-l);\n      }\n    }\n  }\n"])));
 
 var _default = Tags;
 exports.default = _default;