@majoo-ui/react 1.52.7 → 1.52.9

package/index.umd.js

@@ -2897,6 +2897,9 @@
         },
         failed: {
           color: '$hlFailed'
+        },
+        pending: {
+          color: '$orange500'
         }
       }
     },
@@ -3025,6 +3028,10 @@
         failed: {
           backgroundColor: '$bgFailed',
           border: '1px solid $hlFailed'
+        },
+        pending: {
+          backgroundColor: '$bgProcess',
+          border: '1px solid $orange500'
         }
       },
       hasAction: {
@@ -3052,6 +3059,9 @@
         },
         failed: {
           backgroundColor: '$hlFailed'
+        },
+        pending: {
+          backgroundColor: '$orange500'
         }
       }
     }
@@ -3124,7 +3134,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 205,
+        lineNumber: 212,
         columnNumber: 5
       }
     }, state => /*#__PURE__*/React__namespace.createElement(Root, _extends({
@@ -3136,7 +3146,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 216,
+        lineNumber: 223,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledToast, {
@@ -3146,7 +3156,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 223,
+        lineNumber: 230,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3154,7 +3164,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 224,
+        lineNumber: 231,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3162,7 +3172,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 225,
+        lineNumber: 232,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(LeftBar, {
@@ -3170,7 +3180,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 226,
+        lineNumber: 233,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3182,7 +3192,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 227,
+        lineNumber: 234,
         columnNumber: 17
       }
     }, title && /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3190,7 +3200,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 235,
+        lineNumber: 242,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__namespace.createElement(Heading, {
@@ -3205,7 +3215,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 236,
+        lineNumber: 243,
         columnNumber: 23
       }
     }, title)), /*#__PURE__*/React__namespace.createElement(DescriptionField, {
@@ -3214,7 +3224,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 250,
+        lineNumber: 257,
         columnNumber: 19
       }
     }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton$2, {
@@ -3229,7 +3239,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 254,
+        lineNumber: 261,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3238,7 +3248,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 264,
+        lineNumber: 271,
         columnNumber: 19
       }
     }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3253,7 +3263,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Z,
-        lineNumber: 268,
+        lineNumber: 275,
         columnNumber: 17
       }
     }, captionOfAction)))));
@@ -3505,6 +3515,10 @@
         failed: {
           backgroundColor: '$bgFailed',
           border: '1px solid $hlFailed'
+        },
+        pending: {
+          backgroundColor: '$bgProcess',
+          border: '1px solid $orange500'
         }
       },
       hasAction: {
@@ -3555,7 +3569,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 91,
+      lineNumber: 95,
       columnNumber: 3
     }
   }), props.children);
@@ -3577,7 +3591,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 108,
+      lineNumber: 112,
       columnNumber: 3
     }
   }), props.children);
@@ -3600,7 +3614,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 125,
+      lineNumber: 129,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3612,7 +3626,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 127,
+      lineNumber: 131,
       columnNumber: 7
     }
   }, children));
@@ -3639,7 +3653,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 154,
+      lineNumber: 158,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3651,7 +3665,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 156,
+      lineNumber: 160,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3660,7 +3674,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 163,
+      lineNumber: 167,
       columnNumber: 9
     }
   })));
@@ -3670,7 +3684,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 171,
+        lineNumber: 175,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3680,7 +3694,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 172,
+        lineNumber: 176,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3693,21 +3707,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 173,
+        lineNumber: 177,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 181,
+        lineNumber: 185,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 182,
+        lineNumber: 186,
         columnNumber: 33
       }
     }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
@@ -3716,7 +3730,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 185,
+        lineNumber: 189,
         columnNumber: 11
       }
     }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3729,7 +3743,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 190,
+        lineNumber: 194,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3738,7 +3752,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 198,
+        lineNumber: 202,
         columnNumber: 9
       }
     })));
@@ -3767,7 +3781,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 206,
+        lineNumber: 210,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3784,7 +3798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 208,
+        lineNumber: 212,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -3795,7 +3809,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 215,
+        lineNumber: 219,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
@@ -3809,7 +3823,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 218,
+        lineNumber: 222,
         columnNumber: 9
       }
     }));
@@ -3926,6 +3940,20 @@
       border: '1px solid $textRed'
     }
   };
+  var ButtonNegativeGhost = {
+    backgroundColor: '$btnSecondary',
+    color: '$textRed',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$red50',
+      outline: '1px solid $red50',
+      color: '$textRed'
+    },
+    '&:active': {
+      backgroundColor: '$red100',
+      outline: '1px solid $btnNegative'
+    }
+  };
   var ButtonHeaderMenu = {
     backgroundColor: '$bgWhite',
     border: '1px solid $bgBorder',
@@ -4015,6 +4043,7 @@
         ghost: __assign({}, GhostButton),
         negative: __assign({}, ButtonNegative),
         'negative-secondary': __assign({}, ButtonNegativeSecondary),
+        'negative-ghost': __assign({}, ButtonNegativeGhost),
         headerMenu: __assign({}, ButtonHeaderMenu),
         tableMenu: __assign({}, ButtonTableMenu)
       },
@@ -5709,9 +5738,9 @@
     },
     '&:disabled': {
       pointerEvents: 'none',
+      border: '1.5px solid $gray200',
       '&[data-state=checked]': {
         backgroundColor: '$gray200',
-        border: '1.5px solid $gray200',
         color: 'white'
       }
     }
@@ -9456,6 +9485,8 @@
     alignItems: 'center'
   });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+    var _selectedItems$filter;
+
     let {
       placeholder,
       option,
@@ -9820,7 +9851,7 @@
         lineNumber: 549,
         columnNumber: 11
       }
-    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+    }, 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({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
@@ -9841,8 +9872,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 551,
-        columnNumber: 15
+        lineNumber: 553,
+        columnNumber: 17
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
@@ -9853,7 +9884,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 572,
+        lineNumber: 574,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9862,7 +9893,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 577,
+        lineNumber: 579,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9880,7 +9911,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 580,
+        lineNumber: 582,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9893,7 +9924,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 593,
+        lineNumber: 595,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9901,7 +9932,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 602,
+        lineNumber: 604,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9909,21 +9940,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 606,
+        lineNumber: 608,
         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: 613,
+        lineNumber: 615,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 615,
+        lineNumber: 617,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -9933,7 +9964,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 618,
+        lineNumber: 620,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9946,14 +9977,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 623,
+        lineNumber: 625,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 624,
+        lineNumber: 626,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9963,7 +9994,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 625,
+        lineNumber: 627,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9975,7 +10006,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 626,
+        lineNumber: 628,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10324,6 +10355,17 @@
     value: ''
   };
 
+  var SortingIcon = styled('div', {
+    marginTop: 1,
+    cursor: 'pointer',
+    '&::after': {
+      size: '16px',
+      content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")",
+      margin: '0 $spacing-02 $spacing-01 0',
+      opacity: 1
+    }
+  });
+
   function InputResourceList(_a) {
     var data = _a.data,
         _b = _a.disabled,
@@ -10340,7 +10382,8 @@
         value = _a.value,
         fetchData = _a.fetchData,
         onQueryChange = _a.onQueryChange,
-        css = _a.css;
+        css = _a.css,
+        defaultSort = _a.defaultSort;
 
     var _f = React.useState([]),
         checkedResources = _f[0],
@@ -10350,6 +10393,10 @@
         query = _g[0],
         setQuery = _g[1];
 
+    var _h = React.useState('asc'),
+        sortType = _h[0],
+        setSortType = _h[1];
+
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
       var _a;
@@ -10358,6 +10405,11 @@
         top: 0
       });
     }, [query]);
+    React.useEffect(function () {
+      if (defaultSort) {
+        setSortType(defaultSort);
+      }
+    }, [defaultSort]);
 
     var renderCheckbox = function renderCheckbox(resource, index) {
       var _a;
@@ -10365,32 +10417,163 @@
       var isDisabled = enabledItems && (!enabledItems.find(function (id) {
         return id === resource.value;
       }) || enabledItems.length === 0);
-      return jsxRuntime.jsx(InputCheckbox, {
-        label: jsxRuntime.jsxs(Flex$1, __assign({
-          gap: 3
-        }, {
-          children: [jsxRuntime.jsx(Paragraph, __assign({
-            paragraph: "longContentRegular"
+      return jsxRuntime.jsxs(Flex$1, __assign({
+        direction: "column",
+        gap: 1
+      }, {
+        children: [jsxRuntime.jsx(InputCheckbox, {
+          label: jsxRuntime.jsxs(Flex$1, __assign({
+            gap: 3
           }, {
-            children: resource.label
-          }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map(function (variant, index) {
-            return jsxRuntime.jsx(Tag, __assign({
-              type: "varian",
-              size: "lg",
-              css: {
-                color: disabled || isDisabled ? '$textDisable' : '$textGreen'
-              }
+            children: [jsxRuntime.jsx(Paragraph, __assign({
+              paragraph: "longContentRegular"
             }, {
-              children: variant
-            }), index);
-          })]
-        }), void 0),
-        index: index,
-        value: resource.value,
-        disabled: isDisabled
-      }, "".concat(resource.value, "-").concat(new Date().toISOString()));
+              children: resource.label
+            }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map(function (variant, index) {
+              return jsxRuntime.jsx(Tag, __assign({
+                type: "varian",
+                size: "lg",
+                css: {
+                  color: disabled || isDisabled ? '$textDisable' : '$textGreen'
+                }
+              }, {
+                children: variant
+              }), index);
+            })]
+          }), void 0),
+          index: index,
+          value: resource.value,
+          disabled: isDisabled
+        }, void 0), (resource === null || resource === void 0 ? void 0 : resource.description) && jsxRuntime.jsx(Paragraph, __assign({
+          css: {
+            fontSize: 12,
+            paddingLeft: 30
+          },
+          color: "secondary"
+        }, {
+          children: resource === null || resource === void 0 ? void 0 : resource.description
+        }), void 0)]
+      }), "".concat(resource.value, "-").concat(new Date().toISOString()));
     };
 
+    function sorting(data, type) {
+      function ascending(a, b) {
+        if (a.label < b.label) {
+          return -1;
+        }
+
+        if (a.label > b.label) {
+          return 1;
+        }
+
+        return 0;
+      }
+
+      function descending(a, b) {
+        if (a.label > b.label) {
+          return -1;
+        }
+
+        if (a.label < b.label) {
+          return 1;
+        }
+
+        return 0;
+      }
+
+      switch (type) {
+        case 'asc':
+          return data.sort(ascending);
+
+        case 'desc':
+          return data.sort(descending);
+
+        default:
+          return data;
+      }
+    }
+
+    function toggleSort() {
+      setSortType(sortType === 'asc' ? 'desc' : 'asc');
+    }
+
+    function renderWithoutSorting() {
+      return jsxRuntime.jsxs(Flex$1, __assign({
+        direction: "column",
+        gap: 3
+      }, {
+        children: [jsxRuntime.jsx(CheckboxGroup, __assign({
+          onChange: function (_, index) {
+            onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck((value || checkedResources)[index]);
+            if (!value) setCheckedResources(function (current) {
+              return current.filter(function (currItem) {
+                return currItem.value !== checkedResources[index].value;
+              });
+            });
+          },
+          value: (value || checkedResources).map(function (item) {
+            return item.value;
+          }),
+          disabled: disabled
+        }, {
+          children: (value || checkedResources).map(renderCheckbox)
+        }), void 0), jsxRuntime.jsx(CheckboxGroup, __assign({
+          onChange: function (_, index) {
+            onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data[index]);
+            if (!value) setCheckedResources(function (current) {
+              return __spreadArray(__spreadArray([], current, true), [data[index]], false);
+            });
+          },
+          value: (value || checkedResources).map(function (item) {
+            return item.value;
+          }),
+          disabled: disabled
+        }, {
+          children: data.map(renderCheckbox)
+        }), void 0)]
+      }), void 0);
+    }
+
+    function renderWithSorting() {
+      var datasets = sorting(data, sortType);
+      return jsxRuntime.jsx(Flex$1, __assign({
+        direction: "column",
+        gap: 3
+      }, {
+        children: jsxRuntime.jsx(CheckboxGroup, __assign({
+          onChange: function (_, index) {
+            if (value === null || value === void 0 ? void 0 : value.some(function (val) {
+              var _a;
+
+              return (val === null || val === void 0 ? void 0 : val.value) === ((_a = datasets[index]) === null || _a === void 0 ? void 0 : _a.value);
+            })) {
+              onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(datasets[index]);
+            } else {
+              onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(datasets[index]);
+            }
+          },
+          value: value === null || value === void 0 ? void 0 : value.map(function (item) {
+            return item === null || item === void 0 ? void 0 : item.value;
+          }),
+          disabled: disabled
+        }, {
+          children: datasets.map(renderCheckbox)
+        }), void 0)
+      }), void 0);
+    }
+
+    function toggleCheckAll() {
+      if ((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length) || (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length)) {
+        for (var i = 0; i < (value === null || value === void 0 ? void 0 : value.length); i++) {
+          onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(value === null || value === void 0 ? void 0 : value[i]);
+        }
+      } else {
+        for (var i = 0; i < (data === null || data === void 0 ? void 0 : data.length); i++) {
+          onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data === null || data === void 0 ? void 0 : data[i]);
+        }
+      }
+    }
+
     return jsxRuntime.jsxs(Box, __assign({
       css: __assign({
         position: 'relative'
@@ -10404,7 +10587,26 @@
           onQueryChange(query);
         }, 1000),
         disabled: disabled
-      }, void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
+      }, void 0), defaultSort && jsxRuntime.jsxs(Flex$1, __assign({
+        align: "center",
+        gap: 4,
+        css: {
+          paddingLeft: 16,
+          marginTop: '$spacing-04'
+        }
+      }, {
+        children: [jsxRuntime.jsx(InputCheckbox, {
+          checked: (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length),
+          indeterminate: Boolean((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length)),
+          onCheckedChange: toggleCheckAll
+        }, void 0), jsxRuntime.jsx(Paragraph, __assign({
+          paragraph: "shortContentBold"
+        }, {
+          children: "DATA TITLE"
+        }), void 0), jsxRuntime.jsx(SortingIcon, {
+          onClick: toggleSort
+        }, void 0)]
+      }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
         justify: "center",
         align: "center",
         css: {
@@ -10465,40 +10667,7 @@
             }), void 0);
           }
         }, {
-          children: jsxRuntime.jsxs(Flex$1, __assign({
-            direction: "column",
-            gap: 3
-          }, {
-            children: [jsxRuntime.jsx(CheckboxGroup, __assign({
-              onChange: function (_, index) {
-                onItemUncheck((value || checkedResources)[index]);
-                if (!value) setCheckedResources(function (current) {
-                  return current.filter(function (currItem) {
-                    return currItem.value !== checkedResources[index].value;
-                  });
-                });
-              },
-              value: (value || checkedResources).map(function (item) {
-                return item.value;
-              }),
-              disabled: disabled
-            }, {
-              children: (value || checkedResources).map(renderCheckbox)
-            }), void 0), jsxRuntime.jsx(CheckboxGroup, __assign({
-              onChange: function (_, index) {
-                onItemCheck(data[index]);
-                if (!value) setCheckedResources(function (current) {
-                  return __spreadArray(__spreadArray([], current, true), [data[index]], false);
-                });
-              },
-              value: (value || checkedResources).map(function (item) {
-                return item.value;
-              }),
-              disabled: disabled
-            }, {
-              children: data.map(renderCheckbox)
-            }), void 0)]
-          }), void 0)
+          children: defaultSort ? renderWithSorting() : renderWithoutSorting()
         }), void 0)]
       }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsxRuntime.jsx(Box, __assign({
         css: {
@@ -15838,7 +16007,8 @@
     disabled,
     readOnly,
     minDate,
-    maxDate
+    maxDate,
+    isInvalid
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
     const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -15854,10 +16024,11 @@
       disabled: disabled,
       onClick: handleChange,
       readOnly: readOnly,
+      isInvalid: isInvalid,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 41,
+        lineNumber: 42,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -15865,14 +16036,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 42,
+          lineNumber: 43,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 42,
+        lineNumber: 43,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -15885,7 +16056,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 43,
+        lineNumber: 44,
         columnNumber: 7
       }
     }));
@@ -15901,7 +16072,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 55,
+        lineNumber: 56,
         columnNumber: 5
       }
     });
@@ -15913,7 +16084,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 67,
+        lineNumber: 68,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15921,14 +16092,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 69,
+        lineNumber: 70,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 71,
+        lineNumber: 72,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15936,14 +16107,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 72,
+        lineNumber: 73,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 75,
+        lineNumber: 76,
         columnNumber: 7
       }
     }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15951,7 +16122,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -15961,7 +16132,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 80,
+        lineNumber: 81,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15972,7 +16143,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 81,
+        lineNumber: 82,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15984,7 +16155,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 87,
+        lineNumber: 88,
         columnNumber: 11
       }
     }, renderTimePicker()))));
@@ -16046,8 +16217,13 @@
 
     /**
          Specify the maximum date.
-        */
-    maxDate: PropTypes__default["default"].instanceOf(Date)
+    */
+    maxDate: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+     * Invalid state input.
+     */
+    isInvalid: PropTypes__default["default"].bool
   };
   InputTimePicker.displayName = 'InputTimePicker';
 
@@ -16462,7 +16638,8 @@
         showTimePicker = _a.showTimePicker,
         minDate = _a.minDate,
         maxDate = _a.maxDate,
-        readOnly = _a.readOnly;
+        readOnly = _a.readOnly,
+        isInvalid = _a.isInvalid;
 
     var _f = React.useState(date || dateValue),
         value = _f[0],
@@ -16510,7 +16687,8 @@
         disabled: disabled,
         readOnly: readOnly,
         onClick: handleChange,
-        size: size
+        size: size,
+        isInvalid: isInvalid
       }, {
         children: [jsxRuntime.jsx(InputLeftElement, {
           children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
@@ -17517,6 +17695,35 @@
     return {};
   };
 
+  var stickyShadowStyling = function stickyShadowStyling(column) {
+    var cssAfter = {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      width: 5,
+      transition: 'box-shadow 0.3s',
+      content: '',
+      pointerEvents: 'none',
+      boxSizing: 'border'
+    };
+
+    if ((column === null || column === void 0 ? void 0 : column.sticky) && (column === null || column === void 0 ? void 0 : column.shadow)) {
+      return column.sticky === 'left' ? {
+        '&::after': __assign(__assign({}, cssAfter), {
+          right: 0,
+          boxShadow: 'inset 10px 0 10px -10px #00000026'
+        })
+      } : {
+        '&::after': __assign(__assign({}, cssAfter), {
+          left: 0,
+          boxShadow: 'inset -10px 0 10px -10px #00000026'
+        })
+      };
+    }
+
+    return {};
+  };
+
   var formattingData = function formattingData(rawData, groupKey) {
     if (groupKey) {
       rawData.forEach(function (item, index) {
@@ -17571,7 +17778,8 @@
         hiddenColumns = _a.hiddenColumns,
         columnOrder = _a.columnOrder,
         customRowsStyle = _a.customRowsStyle,
-        isMobileLayout = _a.isMobileLayout;
+        isMobileLayout = _a.isMobileLayout,
+        showDuplicatedData = _a.showDuplicatedData;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
@@ -17607,7 +17815,7 @@
       autoResetExpanded: true,
       autoResetPage: false,
       autoResetSelectedRows: false,
-      getRowId: function (row) {
+      getRowId: showDuplicatedData ? undefined : function (row) {
         return row[keyId] || JSON.stringify(row);
       }
     }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky, reactTable.useColumnOrder);
@@ -17786,7 +17994,7 @@
                         }
                       }];
                     }), {
-                      css: stickyPositionStyling(column)
+                      css: __assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column))
                     }, {
                       children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                         isSortedDesc: column.isSortedDesc,
@@ -17838,10 +18046,10 @@
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
                       return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                        css: __assign({
+                        css: __assign(__assign({
                           padding: cell.column.accessor ? '20px 8px' : '20px 20px',
                           verticalAlign: cell.column.accessor ? cellAlign : 'center'
-                        }, stickyPositionStyling(cell.column))
+                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column))
                       }, {
                         children: cell.render('Cell')
                       }), void 0);
@@ -18691,7 +18899,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 35,
+          lineNumber: 36,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -18699,7 +18907,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18712,7 +18920,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18720,17 +18928,24 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 70
         }
-      })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
+      })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$d,
+          lineNumber: 42,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
         onInteractOutside: () => setOpenDrop(false),
         css: Object.assign({
           width: 'auto',
@@ -18750,16 +18965,16 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 41,
-          columnNumber: 11
+          lineNumber: 43,
+          columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: `${option.title}dd-${index}`,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 61,
-          columnNumber: 15
+          lineNumber: 63,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
         onClick: () => {
@@ -18770,8 +18985,8 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 62,
-          columnNumber: 17
+          lineNumber: 64,
+          columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
         key: `${option.title}ds`,
@@ -18781,10 +18996,10 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 71,
-          columnNumber: 17
+          lineNumber: 73,
+          columnNumber: 19
         }
-      }))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+      })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
         isMobile: true,
         modal: true,
         open: openModal,
@@ -18792,7 +19007,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 76,
+          lineNumber: 79,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -18800,7 +19015,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 77,
+          lineNumber: 80,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18813,28 +19028,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 78,
+          lineNumber: 81,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 82,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 82,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 85,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -18844,7 +19059,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 83,
+          lineNumber: 86,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18859,7 +19074,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 84,
+          lineNumber: 87,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -18867,7 +19082,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 86,
+          lineNumber: 89,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18883,7 +19098,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 87,
+          lineNumber: 90,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18892,7 +19107,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 98,
+          lineNumber: 101,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18900,7 +19115,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 102,
+          lineNumber: 105,
           columnNumber: 19
         }
       })))))));
@@ -20039,6 +20254,7 @@
 
   const DropdownMenu = DropdownMenuContext;
   const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+  const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
   const DropdownMenuContent = DropdownMenuContentContext;
   const DropdownMenuItem = StyledItem;
   const DropdownMenuCheckboxItem = StyledCheckboxItem;
@@ -23042,7 +23258,7 @@
           lineNumber: 745,
           columnNumber: 15
         }
-      }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
+      }, "Simpan")))));
     }
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23055,7 +23271,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 756,
+        lineNumber: 754,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23064,7 +23280,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 757,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -32416,6 +32632,7 @@
   exports.DropdownMenuItem = DropdownMenuItem;
   exports.DropdownMenuItemIndicator = DropdownMenuItemIndicator;
   exports.DropdownMenuLabel = DropdownMenuLabel;
+  exports.DropdownMenuPortal = DropdownMenuPortal;
   exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
   exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
   exports.DropdownMenuSeparator = DropdownMenuSeparator;