@majoo-ui/react 1.52.7 → 1.52.8

package/components/button/Button.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type * as Stitches from '@stitches/react';
 import { CSS } from '../../config/stitches.config';
 export declare const ButtonPrimitive: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    buttonType?: "primary" | "secondary" | "ghost" | "negative" | "negative-secondary" | "headerMenu" | "tableMenu" | undefined;
+    buttonType?: "primary" | "secondary" | "ghost" | "negative" | "negative-secondary" | "negative-ghost" | "headerMenu" | "tableMenu" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
     iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
 }, {
@@ -129,7 +129,7 @@ interface AdditionalButtonProps extends React.ComponentPropsWithoutRef<'button'>
     css?: CSS;
 }
 export declare const Button: React.ForwardRefExoticComponent<import("@stitches/react/types/styled-component").TransformProps<{
-    buttonType?: "primary" | "secondary" | "ghost" | "negative" | "negative-secondary" | "headerMenu" | "tableMenu" | undefined;
+    buttonType?: "primary" | "secondary" | "ghost" | "negative" | "negative-secondary" | "negative-ghost" | "headerMenu" | "tableMenu" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
     iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
 }, {

package/components/datePicker/InputDatePicker.d.ts

@@ -63,6 +63,13 @@ export interface InputDatePickerProps {
      * Specify the maximum date.
      */
     maxDate?: Date;
+    /**
+     * Additional css styles.
+     */
     css?: CSS;
+    /**
+     * Invalid state input.
+     */
+    isInvalid?: boolean;
 }
-export declare function InputDatePicker({ type, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, }: InputDatePickerProps): JSX.Element;
+export declare function InputDatePicker({ type, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, }: InputDatePickerProps): JSX.Element;

package/components/form/components/InputResourceList/InputResourceList.d.ts

@@ -4,6 +4,7 @@ export interface IResource {
     value: string;
     label: string;
     variants?: string[];
+    description?: string;
 }
 interface IInputResourceListProps {
     data: IResource[];
@@ -21,6 +22,7 @@ interface IInputResourceListProps {
     }): void;
     onQueryChange?(query: string): void;
     css?: Stitches.CSS;
+    defaultSort?: 'asc' | 'desc';
 }
-declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, value, fetchData, onQueryChange, css, }: IInputResourceListProps): JSX.Element;
+declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, value, fetchData, onQueryChange, css, defaultSort, }: IInputResourceListProps): JSX.Element;
 export default InputResourceList;

package/index.esm.js

@@ -3847,6 +3847,20 @@ const ButtonNegativeSecondary = {
     border: '1px solid $textRed'
   }
 };
+const ButtonNegativeGhost = {
+  backgroundColor: '$btnSecondary',
+  color: '$textRed',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$red50',
+    outline: '1px solid $red50',
+    color: '$textRed'
+  },
+  '&:active': {
+    backgroundColor: '$red100',
+    outline: '1px solid $btnNegative'
+  }
+};
 const ButtonHeaderMenu = {
   backgroundColor: '$bgWhite',
   border: '1px solid $bgBorder',
@@ -3936,6 +3950,7 @@ const ButtonPrimitive = styled('button', {
       ghost: Object.assign({}, GhostButton),
       negative: Object.assign({}, ButtonNegative),
       'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
+      'negative-ghost': Object.assign({}, ButtonNegativeGhost),
       headerMenu: Object.assign({}, ButtonHeaderMenu),
       tableMenu: Object.assign({}, ButtonTableMenu)
     },
@@ -10187,6 +10202,17 @@ InputCreatable.defaultProps = {
   value: ''
 };
 
+const 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({
   data,
   disabled = false,
@@ -10199,10 +10225,12 @@ function InputResourceList({
   value,
   fetchData,
   onQueryChange,
-  css
+  css,
+  defaultSort
 }) {
   const [checkedResources, setCheckedResources] = useState([]);
   const [query, setQuery] = useState();
+  const [sortType, setSortType] = useState('asc');
   const scrollerRef = useRef(null);
   useEffect(() => {
     var _a;
@@ -10211,35 +10239,159 @@ function InputResourceList({
       top: 0
     });
   }, [query]);
+  useEffect(() => {
+    if (defaultSort) {
+      setSortType(defaultSort);
+    }
+  }, [defaultSort]);
 
   const renderCheckbox = (resource, index) => {
     var _a;
 
     const isDisabled = enabledItems && (!enabledItems.find(id => id === resource.value) || enabledItems.length === 0);
-    return jsx(InputCheckbox, {
-      label: jsxs(Flex$1, Object.assign({
-        gap: 3
-      }, {
-        children: [jsx(Paragraph, Object.assign({
-          paragraph: "longContentRegular"
-        }, {
-          children: resource.label
-        }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map((variant, index) => jsx(Tag, Object.assign({
-          type: "varian",
-          size: "lg",
-          css: {
-            color: disabled || isDisabled ? '$textDisable' : '$textGreen'
-          }
+    return jsxs(Flex$1, Object.assign({
+      direction: "column",
+      gap: 1
+    }, {
+      children: [jsx(InputCheckbox, {
+        label: jsxs(Flex$1, Object.assign({
+          gap: 3
         }, {
-          children: variant
-        }), index))]
-      }), void 0),
-      index: index,
-      value: resource.value,
-      disabled: isDisabled
-    }, `${resource.value}-${new Date().toISOString()}`);
+          children: [jsx(Paragraph, Object.assign({
+            paragraph: "longContentRegular"
+          }, {
+            children: resource.label
+          }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map((variant, index) => jsx(Tag, Object.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) && jsx(Paragraph, Object.assign({
+        css: {
+          fontSize: 12,
+          paddingLeft: 30
+        },
+        color: "secondary"
+      }, {
+        children: resource === null || resource === void 0 ? void 0 : resource.description
+      }), void 0)]
+    }), `${resource.value}-${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 jsxs(Flex$1, Object.assign({
+      direction: "column",
+      gap: 3
+    }, {
+      children: [jsx(CheckboxGroup, Object.assign({
+        onChange: (_, index) => {
+          onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck((value || checkedResources)[index]);
+          if (!value) setCheckedResources(current => current.filter(currItem => currItem.value !== checkedResources[index].value));
+        },
+        value: (value || checkedResources).map(item => item.value),
+        disabled: disabled
+      }, {
+        children: (value || checkedResources).map(renderCheckbox)
+      }), void 0), jsx(CheckboxGroup, Object.assign({
+        onChange: (_, index) => {
+          onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data[index]);
+          if (!value) setCheckedResources(current => [...current, data[index]]);
+        },
+        value: (value || checkedResources).map(item => item.value),
+        disabled: disabled
+      }, {
+        children: data.map(renderCheckbox)
+      }), void 0)]
+    }), void 0);
+  }
+
+  function renderWithSorting() {
+    const datasets = sorting(data, sortType);
+    return jsx(Flex$1, Object.assign({
+      direction: "column",
+      gap: 3
+    }, {
+      children: jsx(CheckboxGroup, Object.assign({
+        onChange: (_, index) => {
+          if (value === null || value === void 0 ? void 0 : value.some(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(item => 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 (let 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 (let 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 jsxs(Box, Object.assign({
     css: Object.assign({
       position: 'relative'
@@ -10253,7 +10405,26 @@ function InputResourceList({
         onQueryChange(query);
       }, 1000),
       disabled: disabled
-    }, void 0), isLoading && jsx(Flex$1, Object.assign({
+    }, void 0), defaultSort && jsxs(Flex$1, Object.assign({
+      align: "center",
+      gap: 4,
+      css: {
+        paddingLeft: 16,
+        marginTop: '$spacing-04'
+      }
+    }, {
+      children: [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), jsx(Paragraph, Object.assign({
+        paragraph: "shortContentBold"
+      }, {
+        children: "DATA TITLE"
+      }), void 0), jsx(SortingIcon, {
+        onClick: toggleSort
+      }, void 0)]
+    }), void 0), isLoading && jsx(Flex$1, Object.assign({
       justify: "center",
       align: "center",
       css: {
@@ -10312,30 +10483,7 @@ function InputResourceList({
           children: children
         }), void 0)
       }, {
-        children: jsxs(Flex$1, Object.assign({
-          direction: "column",
-          gap: 3
-        }, {
-          children: [jsx(CheckboxGroup, Object.assign({
-            onChange: (_, index) => {
-              onItemUncheck((value || checkedResources)[index]);
-              if (!value) setCheckedResources(current => current.filter(currItem => currItem.value !== checkedResources[index].value));
-            },
-            value: (value || checkedResources).map(item => item.value),
-            disabled: disabled
-          }, {
-            children: (value || checkedResources).map(renderCheckbox)
-          }), void 0), jsx(CheckboxGroup, Object.assign({
-            onChange: (_, index) => {
-              onItemCheck(data[index]);
-              if (!value) setCheckedResources(current => [...current, data[index]]);
-            },
-            value: (value || checkedResources).map(item => 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) && jsx(Box, Object.assign({
       css: {
@@ -15589,7 +15737,8 @@ function InputTimePicker({
   disabled,
   readOnly,
   minDate,
-  maxDate
+  maxDate,
+  isInvalid
 }) {
   const [openPicker, setOpenPicker] = useState(false);
   const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -15605,10 +15754,11 @@ function InputTimePicker({
     disabled: disabled,
     onClick: handleChange,
     readOnly: readOnly,
+    isInvalid: isInvalid,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 41,
+      lineNumber: 42,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -15616,14 +15766,14 @@ function InputTimePicker({
       __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.createElement(InputText, {
@@ -15636,7 +15786,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 43,
+      lineNumber: 44,
       columnNumber: 7
     }
   }));
@@ -15652,7 +15802,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 55,
+      lineNumber: 56,
       columnNumber: 5
     }
   });
@@ -15664,7 +15814,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 67,
+      lineNumber: 68,
       columnNumber: 5
     }
   }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
@@ -15672,14 +15822,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 69,
+      lineNumber: 70,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 71,
+      lineNumber: 72,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -15687,14 +15837,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 72,
+      lineNumber: 73,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 75,
+      lineNumber: 76,
       columnNumber: 7
     }
   }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -15702,7 +15852,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 79,
+      lineNumber: 80,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -15712,7 +15862,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 80,
+      lineNumber: 81,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -15723,7 +15873,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 81,
+      lineNumber: 82,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15735,7 +15885,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 87,
+      lineNumber: 88,
       columnNumber: 11
     }
   }, renderTimePicker()))));
@@ -15797,8 +15947,13 @@ InputTimePicker.propTypes = {
 
   /**
        Specify the maximum date.
-      */
-  maxDate: PropTypes.instanceOf(Date)
+  */
+  maxDate: PropTypes.instanceOf(Date),
+
+  /**
+   * Invalid state input.
+   */
+  isInvalid: PropTypes.bool
 };
 InputTimePicker.displayName = 'InputTimePicker';
 
@@ -16200,7 +16355,8 @@ function InputDatePicker({
   showTimePicker,
   minDate,
   maxDate,
-  readOnly
+  readOnly,
+  isInvalid
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
@@ -16236,7 +16392,8 @@ function InputDatePicker({
     disabled: disabled,
     readOnly: readOnly,
     onClick: handleChange,
-    size: size
+    size: size,
+    isInvalid: isInvalid
   }, {
     children: [jsx(InputLeftElement, {
       children: jsx(CalendarOutline, {}, void 0)

package/index.umd.js

@@ -3926,6 +3926,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 +4029,7 @@
         ghost: __assign({}, GhostButton),
         negative: __assign({}, ButtonNegative),
         'negative-secondary': __assign({}, ButtonNegativeSecondary),
+        'negative-ghost': __assign({}, ButtonNegativeGhost),
         headerMenu: __assign({}, ButtonHeaderMenu),
         tableMenu: __assign({}, ButtonTableMenu)
       },
@@ -10324,6 +10339,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 +10366,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 +10377,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 +10389,11 @@
         top: 0
       });
     }, [query]);
+    React.useEffect(function () {
+      if (defaultSort) {
+        setSortType(defaultSort);
+      }
+    }, [defaultSort]);
 
     var renderCheckbox = function renderCheckbox(resource, index) {
       var _a;
@@ -10365,32 +10401,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 +10571,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 +10651,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 +15991,8 @@
     disabled,
     readOnly,
     minDate,
-    maxDate
+    maxDate,
+    isInvalid
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
     const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -15854,10 +16008,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 +16020,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 +16040,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 43,
+        lineNumber: 44,
         columnNumber: 7
       }
     }));
@@ -15901,7 +16056,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 55,
+        lineNumber: 56,
         columnNumber: 5
       }
     });
@@ -15913,7 +16068,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 67,
+        lineNumber: 68,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15921,14 +16076,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 +16091,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 +16106,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -15961,7 +16116,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 80,
+        lineNumber: 81,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15972,7 +16127,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 81,
+        lineNumber: 82,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15984,7 +16139,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 87,
+        lineNumber: 88,
         columnNumber: 11
       }
     }, renderTimePicker()))));
@@ -16046,8 +16201,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 +16622,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 +16671,8 @@
         disabled: disabled,
         readOnly: readOnly,
         onClick: handleChange,
-        size: size
+        size: size,
+        isInvalid: isInvalid
       }, {
         children: [jsxRuntime.jsx(InputLeftElement, {
           children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)

package/package.json

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