@majoo-ui/react 1.53.0 → 1.53.1

package/components/form/components/InputCounter/InputCounter.d.ts

@@ -5,6 +5,10 @@ interface CounterProps {
      * Counter value.
      */
     value?: number;
+    /**
+     * Input counter size.
+     */
+    size: 'sm' | 'md' | 'lg';
     /**
      * Change event handler.
      */

package/index.esm.js

@@ -6303,18 +6303,39 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = '60px';
+      const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+      textareaRef.current.style.height = scrollHeight + 20 + 'px';
+    }
+  }, []);
+
+  function handleKeyDown(e) {
+    e.target.style.height = '60px';
+    e.target.style.height = `${e.target.scrollHeight + 20}px`;
+  }
+
   return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
-    ref: ref,
+    ref: node => {
+      textareaRef.current = node;
+
+      if (ref && ref.current) {
+        ref.current = node;
+      }
+    },
     disabled: disabled,
     isDisabled: disabled,
     readOnly: readOnly,
-    isReadOnly: readOnly
+    isReadOnly: readOnly,
+    onKeyDown: handleKeyDown
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$G,
-      lineNumber: 22,
-      columnNumber: 3
+      lineNumber: 38,
+      columnNumber: 5
     }
   }));
 });
@@ -6533,7 +6554,7 @@ const InputRadio = _ref => {
             letterSpacing: '$long-content-regular',
             fontWeight: '400',
             cursor: 'pointer',
-            color: disabled || readOnly ? '$textDisable' : '$textPrimary'
+            color: disabled || readOnly && checked !== props.value ? '$textDisable' : '$textPrimary'
           },
           __self: this,
           __source: {
@@ -6755,6 +6776,9 @@ const StyledInput = styled(NumberFormat, {
       sm: {
         height: 32
       },
+      md: {
+        height: 36
+      },
       lg: {
         height: 40
       }
@@ -6810,7 +6834,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 147,
+      lineNumber: 150,
       columnNumber: 3
     }
   }));
@@ -9157,7 +9181,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css"];
+const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter"];
 var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -9411,7 +9435,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     showSelectedTag,
     unremovableTags,
     helperText,
-    css
+    css,
+    showCounter,
+    labelCounter
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9534,12 +9560,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (disabled || readOnly) {
       return selectedValue;
     } else {
-      const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
-      removeSelectedItem(selected);
-      setSelectedValue(filterItems);
+      if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+        setSelectedValue([]);
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
 
-      if (selected.id !== '!all') {
-        onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+        for (let i = 0; i < selectedValue.length; i++) {
+          removeSelectedItem(selectedValue[i]);
+        }
+      } else {
+        const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
+        removeSelectedItem(selected);
+        setSelectedValue(filterItems);
+
+        if (selected.id !== '!all') {
+          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+        }
       }
     }
   };
@@ -9658,7 +9693,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 507,
+      lineNumber: 517,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9668,7 +9703,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 508,
+      lineNumber: 518,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9683,7 +9718,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 509,
+      lineNumber: 519,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9699,7 +9734,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 519,
+      lineNumber: 529,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9712,7 +9747,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 525,
+      lineNumber: 535,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9723,7 +9758,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 535,
+      lineNumber: 545,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9731,7 +9766,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 540,
+      lineNumber: 550,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9744,15 +9779,15 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 544,
+      lineNumber: 554,
       columnNumber: 11
     }
-  }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+  }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 549,
+      lineNumber: 559,
       columnNumber: 11
     }
   }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -9776,10 +9811,45 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 553,
+      lineNumber: 563,
       columnNumber: 17
     }
-  }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
+  }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+    disabled: disabled,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 585,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(Tag, {
+    css: {
+      maxWidth: '150px !important'
+    },
+    disabled: disabled,
+    isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+    size: size,
+    readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
+    ,
+    onRemove: event => {
+      if (onRemoveItem) {
+        return onRemoveItem({
+          id: 'counter'
+        });
+      } else {
+        event.stopPropagation();
+        removeItem({
+          id: 'counter'
+        });
+      }
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 586,
+      columnNumber: 13
+    }
+  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -9788,7 +9858,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 574,
+      lineNumber: 606,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9797,7 +9867,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 579,
+      lineNumber: 611,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9815,7 +9885,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 582,
+      lineNumber: 614,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9828,7 +9898,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 595,
+      lineNumber: 627,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9836,7 +9906,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 604,
+      lineNumber: 636,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9844,21 +9914,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 608,
+      lineNumber: 640,
       columnNumber: 27
     }
   }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 615,
+      lineNumber: 647,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 617,
+      lineNumber: 649,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -9868,7 +9938,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 620,
+      lineNumber: 652,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9881,14 +9951,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 625,
+      lineNumber: 657,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 626,
+      lineNumber: 658,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9898,7 +9968,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 627,
+      lineNumber: 659,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9910,7 +9980,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 628,
+      lineNumber: 660,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -9935,7 +10005,9 @@ InputSelectCheck.propTypes = {
   selectAllLabel: PropTypes.string,
   showSelectedTag: PropTypes.bool,
   css: PropTypes.object,
-  helperText: PropTypes.string
+  helperText: PropTypes.string,
+  showCounter: PropTypes.bool,
+  labelCounter: PropTypes.string
 };
 InputSelectCheck.defaultProps = {
   placeholder: 'Select Item',
@@ -9951,7 +10023,9 @@ InputSelectCheck.defaultProps = {
   textEmptyItem: 'Item tidak ditemukan',
   sortBy: 'name',
   showSelectAll: false,
-  selectAllLabel: 'Pilih Semua'
+  selectAllLabel: 'Pilih Semua',
+  showCounter: false,
+  labelCounter: 'Item terpilih'
 };
 
 var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -9984,7 +10058,9 @@ InputSelectTag.propTypes = {
   unremovableTags: PropTypes.arrayOf(PropTypes.string),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
-  helperText: PropTypes.string
+  helperText: PropTypes.string,
+  showCounter: PropTypes.bool,
+  labelCounter: PropTypes.string
 };
 InputSelectTag.defaultProps = {
   placeholder: 'Select Item',
@@ -9998,7 +10074,9 @@ InputSelectTag.defaultProps = {
   disabledOptions: [],
   unremovableTags: [],
   textEmptyItem: 'Item tidak ditemukan',
-  sortBy: 'name'
+  sortBy: 'name',
+  showCounter: false,
+  labelCounter: 'Item terpilih'
 };
 
 var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
@@ -10869,6 +10947,20 @@ const Button = styled(Button$3, {
           border: `1px solid $gray150 !important`
         }
       }
+    },
+    buttonSize: {
+      sm: {
+        height: '32px !important',
+        padding: '4px 16px !important'
+      },
+      md: {
+        height: '36px !important',
+        padding: '4px 16px !important'
+      },
+      lg: {
+        height: '40px !important',
+        padding: '7px 16px !important'
+      }
     }
   }
 });
@@ -10886,7 +10978,8 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     disabledIncrement,
     disabledDecrement,
     prefix,
-    suffix
+    suffix,
+    size
   } = props;
   const [inputValue, setInputValue] = useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0);
   useEffect(() => {
@@ -10936,6 +11029,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       type: "button",
       disabled: disabled || disabledDecrement,
       buttonType: "secondary",
+      buttonSize: size,
       counterType: "minus",
       icon: true,
       onClick: handleDown
@@ -10952,11 +11046,13 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       allowNegative: allowNegative,
       onChange: handleChange,
       prefix: prefix,
-      suffix: suffix
+      suffix: suffix,
+      size: size
     }, void 0), jsx(Button, Object.assign({
       type: "button",
       disabled: disabled || disabledIncrement,
       buttonType: "secondary",
+      buttonSize: size,
       counterType: "plus",
       icon: true,
       onClick: handleUp
@@ -10970,7 +11066,8 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InputCounter.defaultProps = {
   allowNegative: false,
-  disabled: false
+  disabled: false,
+  size: 'lg'
 };
 
 const _excluded$c = ["children"];

package/index.umd.js

@@ -6382,18 +6382,39 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
+    const textareaRef = React.useRef(null);
+    React.useEffect(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = '60px';
+        const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+        textareaRef.current.style.height = scrollHeight + 20 + 'px';
+      }
+    }, []);
+
+    function handleKeyDown(e) {
+      e.target.style.height = '60px';
+      e.target.style.height = `${e.target.scrollHeight + 20}px`;
+    }
+
     return /*#__PURE__*/React__default["default"].createElement(StyledTextArea, _extends({
-      ref: ref,
+      ref: node => {
+        textareaRef.current = node;
+
+        if (ref && ref.current) {
+          ref.current = node;
+        }
+      },
       disabled: disabled,
       isDisabled: disabled,
       readOnly: readOnly,
-      isReadOnly: readOnly
+      isReadOnly: readOnly,
+      onKeyDown: handleKeyDown
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 22,
-        columnNumber: 3
+        lineNumber: 38,
+        columnNumber: 5
       }
     }));
   });
@@ -6612,7 +6633,7 @@
               letterSpacing: '$long-content-regular',
               fontWeight: '400',
               cursor: 'pointer',
-              color: disabled || readOnly ? '$textDisable' : '$textPrimary'
+              color: disabled || readOnly && checked !== props.value ? '$textDisable' : '$textPrimary'
             },
             __self: this,
             __source: {
@@ -6834,6 +6855,9 @@
         sm: {
           height: 32
         },
+        md: {
+          height: 36
+        },
         lg: {
           height: 40
         }
@@ -6889,7 +6913,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 147,
+        lineNumber: 150,
         columnNumber: 3
       }
     }));
@@ -9293,7 +9317,7 @@
     }
   }));
 
-  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css"];
+  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter"];
   var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -9547,7 +9571,9 @@
       showSelectedTag,
       unremovableTags,
       helperText,
-      css
+      css,
+      showCounter,
+      labelCounter
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9670,12 +9696,21 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
-        removeSelectedItem(selected);
-        setSelectedValue(filterItems);
+        if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+          setSelectedValue([]);
+          onChange === null || onChange === void 0 ? void 0 : onChange([]);
 
-        if (selected.id !== '!all') {
-          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          for (let i = 0; i < selectedValue.length; i++) {
+            removeSelectedItem(selectedValue[i]);
+          }
+        } else {
+          const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
+          removeSelectedItem(selected);
+          setSelectedValue(filterItems);
+
+          if (selected.id !== '!all') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          }
         }
       }
     };
@@ -9794,7 +9829,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 507,
+        lineNumber: 517,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9804,7 +9839,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 508,
+        lineNumber: 518,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9819,7 +9854,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 509,
+        lineNumber: 519,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9835,7 +9870,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 519,
+        lineNumber: 529,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9848,7 +9883,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 525,
+        lineNumber: 535,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9859,7 +9894,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 535,
+        lineNumber: 545,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9867,7 +9902,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 540,
+        lineNumber: 550,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9880,15 +9915,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 544,
+        lineNumber: 554,
         columnNumber: 11
       }
-    }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 549,
+        lineNumber: 559,
         columnNumber: 11
       }
     }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -9912,10 +9947,45 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 553,
+        lineNumber: 563,
         columnNumber: 17
       }
-    }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+      disabled: disabled,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 585,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Tag, {
+      css: {
+        maxWidth: '150px !important'
+      },
+      disabled: disabled,
+      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+      size: size,
+      readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
+      ,
+      onRemove: event => {
+        if (onRemoveItem) {
+          return onRemoveItem({
+            id: 'counter'
+          });
+        } else {
+          event.stopPropagation();
+          removeItem({
+            id: 'counter'
+          });
+        }
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 586,
+        columnNumber: 13
+      }
+    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -9924,7 +9994,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 574,
+        lineNumber: 606,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9933,7 +10003,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 579,
+        lineNumber: 611,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9951,7 +10021,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 582,
+        lineNumber: 614,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9964,7 +10034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 595,
+        lineNumber: 627,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9972,7 +10042,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 604,
+        lineNumber: 636,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9980,21 +10050,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 608,
+        lineNumber: 640,
         columnNumber: 27
       }
     }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 615,
+        lineNumber: 647,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 617,
+        lineNumber: 649,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -10004,7 +10074,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 620,
+        lineNumber: 652,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10017,14 +10087,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 625,
+        lineNumber: 657,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 626,
+        lineNumber: 658,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10034,7 +10104,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 627,
+        lineNumber: 659,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10046,7 +10116,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 628,
+        lineNumber: 660,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10071,7 +10141,9 @@
     selectAllLabel: PropTypes__default["default"].string,
     showSelectedTag: PropTypes__default["default"].bool,
     css: PropTypes__default["default"].object,
-    helperText: PropTypes__default["default"].string
+    helperText: PropTypes__default["default"].string,
+    showCounter: PropTypes__default["default"].bool,
+    labelCounter: PropTypes__default["default"].string
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -10087,7 +10159,9 @@
     textEmptyItem: 'Item tidak ditemukan',
     sortBy: 'name',
     showSelectAll: false,
-    selectAllLabel: 'Pilih Semua'
+    selectAllLabel: 'Pilih Semua',
+    showCounter: false,
+    labelCounter: 'Item terpilih'
   };
 
   var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -10120,7 +10194,9 @@
     unremovableTags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
-    helperText: PropTypes__default["default"].string
+    helperText: PropTypes__default["default"].string,
+    showCounter: PropTypes__default["default"].bool,
+    labelCounter: PropTypes__default["default"].string
   };
   InputSelectTag.defaultProps = {
     placeholder: 'Select Item',
@@ -10134,7 +10210,9 @@
     disabledOptions: [],
     unremovableTags: [],
     textEmptyItem: 'Item tidak ditemukan',
-    sortBy: 'name'
+    sortBy: 'name',
+    showCounter: false,
+    labelCounter: 'Item terpilih'
   };
 
   var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
@@ -11042,6 +11120,20 @@
             border: "1px solid $gray150 !important"
           }
         }
+      },
+      buttonSize: {
+        sm: {
+          height: '32px !important',
+          padding: '4px 16px !important'
+        },
+        md: {
+          height: '36px !important',
+          padding: '4px 16px !important'
+        },
+        lg: {
+          height: '40px !important',
+          padding: '7px 16px !important'
+        }
       }
     }
   });
@@ -11058,7 +11150,8 @@
         disabledIncrement = props.disabledIncrement,
         disabledDecrement = props.disabledDecrement,
         prefix = props.prefix,
-        suffix = props.suffix;
+        suffix = props.suffix,
+        size = props.size;
 
     var _b = React.useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0),
         inputValue = _b[0],
@@ -11111,6 +11204,7 @@
         type: "button",
         disabled: disabled || disabledDecrement,
         buttonType: "secondary",
+        buttonSize: size,
         counterType: "minus",
         icon: true,
         onClick: handleDown
@@ -11127,11 +11221,13 @@
         allowNegative: allowNegative,
         onChange: handleChange,
         prefix: prefix,
-        suffix: suffix
+        suffix: suffix,
+        size: size
       }, void 0), jsxRuntime.jsx(Button, __assign({
         type: "button",
         disabled: disabled || disabledIncrement,
         buttonType: "secondary",
+        buttonSize: size,
         counterType: "plus",
         icon: true,
         onClick: handleUp
@@ -11145,7 +11241,8 @@
   });
   InputCounter.defaultProps = {
     allowNegative: false,
-    disabled: false
+    disabled: false,
+    size: 'lg'
   };
 
   const _excluded$c = ["children"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.53.0",
+  "version": "1.53.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",