lecom-ui 5.4.22 → 5.4.24

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -17,7 +17,8 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
   onDrag,
   onDragEnd,
   isDragging,
-  onMouseDown
+  onMouseDown,
+  isAllSelected = false
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editValue, setEditValue] = React.useState(item.label);
@@ -102,7 +103,8 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       className: cn(
         "cursor-pointer group max-w-[15.625rem]",
         isDragging && "opacity-30 scale-95 transition-all",
-        enableReorder && "cursor-grab active:cursor-grabbing"
+        enableReorder && "cursor-grab active:cursor-grabbing",
+        isAllSelected && "!bg-grey-100 [&>*]:!text-grey-400"
       ),
       draggable: enableReorder && !readOnly,
       onDragStart: handleDragStart,
@@ -114,7 +116,10 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     enableReorder && !readOnly && /* @__PURE__ */ React.createElement(
       GripVertical,
       {
-        className: "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-blue-600 fill-none hover:stroke-blue-800 hover:scale-110",
+        className: cn(
+          "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-blue-600 fill-none hover:stroke-blue-800 hover:scale-110",
+          isAllSelected && "!stroke-grey-400"
+        ),
         onMouseDown: (e) => e.stopPropagation(),
         strokeWidth: 2
       }
@@ -132,7 +137,10 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     !readOnly && /* @__PURE__ */ React.createElement(
       X,
       {
-        className: "w-4 h-4 cursor-pointer flex-shrink-0 stroke-blue-600 stroke-2 outline-none hover:stroke-blue-800 hover:scale-110 transition-all",
+        className: cn(
+          "w-4 h-4 cursor-pointer flex-shrink-0 stroke-blue-600 stroke-2 outline-none hover:stroke-blue-800 hover:scale-110 transition-all",
+          isAllSelected && "!stroke-grey-400"
+        ),
         onClick: handleRemove,
         "aria-label": `Remover ${item.label}`,
         tabIndex: 0
@@ -158,7 +166,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
   onInlineAdd,
   onInlineCancel,
   onSpacerClick,
-  onMouseDown
+  onMouseDown,
+  isAllSelected = false
 }) {
   const showInlineInput = insertAtIndex === index;
   const showDragIndicator = dragOverIndex === index && draggedIndex !== null && draggedIndex !== index;
@@ -184,7 +193,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
       onDrag,
       onDragEnd,
       isDragging: draggedIndex === index,
-      onMouseDown
+      onMouseDown,
+      isAllSelected
     }
   ), showDragIndicator && /* @__PURE__ */ React.createElement("div", { className: "w-1 h-6 bg-blue-500 rounded-full animate-pulse self-center" }), showSpacer && /* @__PURE__ */ React.createElement(
     "div",
@@ -441,26 +451,92 @@ function useInlineInputHandlers(insertAtIndex, setInsertAtIndex, handleAddTag, r
   );
   return { handleInlineAdd, handleInlineCancel, handleSpacerClick };
 }
-function useInputHandlers(inputValue, setInputValue, value, onChange, handleAddTag, handleAddMultipleTags, inputRef) {
+const selectAllContent = (containerRef, inputRef) => {
+  if (!containerRef.current || !inputRef.current) return;
+  inputRef.current.focus();
+  const range = document.createRange();
+  const selection = window.getSelection();
+  range.selectNodeContents(containerRef.current);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  if (inputRef.current.textContent) {
+    const inputRange = document.createRange();
+    inputRange.selectNodeContents(inputRef.current);
+    selection?.extend(inputRange.endContainer, inputRange.endOffset);
+  }
+};
+const clearAllTags = (onChange, setInputValue, setIsAllSelected, inputRef) => {
+  setIsAllSelected(false);
+  onChange([]);
+  if (inputRef.current) {
+    inputRef.current.textContent = "";
+  }
+  setInputValue("");
+  setTimeout(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, 0);
+};
+function useInputHandlers(inputValue, setInputValue, value, onChange, handleAddTag, handleAddMultipleTags, inputRef, containerRef, setIsAllSelected, isAllSelected) {
+  const handleSelectAll = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsAllSelected(true);
+    selectAllContent(containerRef, inputRef);
+  }, [containerRef, inputRef, setIsAllSelected]);
+  const handleSubmit = React.useCallback((e) => {
+    e.preventDefault();
+    const currentValue = e.target.textContent || "";
+    if (currentValue.trim()) {
+      handleAddTag(currentValue.trim());
+      if (inputRef.current) {
+        inputRef.current.textContent = "";
+      }
+      setInputValue("");
+    }
+  }, [handleAddTag, inputRef, setInputValue]);
+  const handleDelete = React.useCallback((e) => {
+    if (isAllSelected) {
+      e.preventDefault();
+      clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+      return;
+    }
+    const selection = window.getSelection();
+    const hasSelection = selection && selection.toString().length > 0;
+    if (hasSelection && containerRef.current) {
+      const selectedText = selection.toString();
+      const hasTagsInSelection = value.some((item) => selectedText.includes(item.label));
+      if (hasTagsInSelection) {
+        e.preventDefault();
+        clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+        return;
+      }
+    }
+    if (e.key === "Backspace" && !inputValue && value.length > 0 && !hasSelection) {
+      e.preventDefault();
+      onChange(value.slice(0, -1));
+    }
+  }, [isAllSelected, onChange, setInputValue, setIsAllSelected, inputRef, containerRef, value, inputValue]);
   const handleKeyDown = React.useCallback(
     (e) => {
       const isSubmitKey = e.key === "Enter" || e.key === ";";
-      const isDeleteKey = e.key === "Backspace";
+      const isDeleteKey = e.key === "Backspace" || e.key === "Delete";
+      const isSelectAll = (e.ctrlKey || e.metaKey) && (e.key === "a" || e.key === "A");
+      if (isSelectAll) {
+        handleSelectAll(e);
+        return;
+      }
       if (isSubmitKey) {
-        e.preventDefault();
-        const currentValue = e.target.textContent || "";
-        if (currentValue.trim()) {
-          handleAddTag(currentValue.trim());
-          if (inputRef.current) {
-            inputRef.current.textContent = "";
-          }
-          setInputValue("");
-        }
-      } else if (isDeleteKey && !inputValue && value.length > 0) {
-        onChange(value.slice(0, -1));
+        handleSubmit(e);
+      } else if (isDeleteKey) {
+        handleDelete(e);
+      }
+      if (!isSelectAll && isAllSelected) {
+        setIsAllSelected(false);
       }
     },
-    [inputValue, value, onChange, handleAddTag, setInputValue, inputRef]
+    [handleSelectAll, handleSubmit, handleDelete, isAllSelected, setIsAllSelected]
   );
   const handlePaste = React.useCallback(
     (e) => {
@@ -503,7 +579,7 @@ function useTagEditHandler(value, onChange, onTagEdit) {
   );
   return { handleEdit };
 }
-function useContainerClickHandler(disabled, inputRef) {
+function useContainerClickHandler(disabled, inputRef, setIsAllSelected) {
   const handleContainerClick = React.useCallback(
     (e) => {
       const target = e.target;
@@ -511,12 +587,58 @@ function useContainerClickHandler(disabled, inputRef) {
       const isClickOnInlineInput = target.closest('[data-inline-input="true"]');
       if (isClickOnTag || isClickOnInlineInput) return;
       if (disabled || !inputRef.current) return;
+      setIsAllSelected(false);
       inputRef.current.focus();
     },
-    [disabled, inputRef]
+    [disabled, inputRef, setIsAllSelected]
   );
   return { handleContainerClick };
 }
+function useContainerKeyHandler(containerRef, value, onChange, inputRef, setInputValue, outerContainerRef, setIsAllSelected, isAllSelected) {
+  const handleContainerSelectAll = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsAllSelected(true);
+    selectAllContent(containerRef, inputRef);
+  }, [containerRef, inputRef, setIsAllSelected]);
+  const handleContainerDelete = React.useCallback((e) => {
+    if (isAllSelected) {
+      e.preventDefault();
+      e.stopPropagation();
+      clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+      return;
+    }
+    const selection = window.getSelection();
+    const hasSelection = selection && selection.toString().length > 0;
+    if (hasSelection && containerRef.current) {
+      const selectedText = selection.toString();
+      const hasTagsInSelection = value.some((item) => selectedText.includes(item.label));
+      if (hasTagsInSelection) {
+        e.preventDefault();
+        e.stopPropagation();
+        clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+      }
+    }
+  }, [isAllSelected, onChange, setInputValue, setIsAllSelected, inputRef, containerRef, value]);
+  const handleContainerKeyDown = React.useCallback(
+    (e) => {
+      const isSelectAll = (e.ctrlKey || e.metaKey) && (e.key === "a" || e.key === "A");
+      const isDeleteKey = e.key === "Backspace" || e.key === "Delete";
+      if (isSelectAll) {
+        handleContainerSelectAll(e);
+        return;
+      }
+      if (isDeleteKey) {
+        handleContainerDelete(e);
+      }
+      if (!isSelectAll && isAllSelected) {
+        setIsAllSelected(false);
+      }
+    },
+    [handleContainerSelectAll, handleContainerDelete, isAllSelected, setIsAllSelected]
+  );
+  return { handleContainerKeyDown };
+}
 function useContainerStyles(variant, radius, disabled, className, maxHeight) {
   const textareaRadius = radius === "full" ? "large" : radius;
   const containerClassNames = cn(
@@ -556,7 +678,9 @@ function CustomTagInputRenderer({
   handleKeyDown,
   handlePaste,
   setInputValue,
-  handleMouseDown
+  handleMouseDown,
+  isAllSelected,
+  setIsAllSelected
 }) {
   const showFinalInlineInput = insertAtIndex === value.length;
   const inputPlaceholder = value.length === 0 ? placeholder : "";
@@ -581,7 +705,8 @@ function CustomTagInputRenderer({
       onInlineAdd: handleInlineAdd,
       onInlineCancel: handleInlineCancel,
       onSpacerClick: handleSpacerClick,
-      onMouseDown: handleMouseDown
+      onMouseDown: handleMouseDown,
+      isAllSelected
     }
   )), showFinalInlineInput && /* @__PURE__ */ React.createElement(
     InlineInput,
@@ -602,6 +727,7 @@ function CustomTagInputRenderer({
       },
       onKeyDown: handleKeyDown,
       onPaste: handlePaste,
+      onFocus: () => setIsAllSelected(false),
       "data-placeholder": inputPlaceholder,
       className: "bg-transparent border-none outline-none body-small-400 text-grey-800 min-h-[1.5rem] empty:before:content-[attr(data-placeholder)] empty:before:text-grey-400 leading-6",
       style: { flex: "1 1 auto", minWidth: "3.75rem", wordBreak: "break-word" }
@@ -627,8 +753,10 @@ function CustomTagInput(props) {
   } = props;
   const [inputValue, setInputValue] = React.useState("");
   const [insertAtIndex, setInsertAtIndex] = React.useState(null);
+  const [isAllSelected, setIsAllSelected] = React.useState(false);
   const inputRef = React.useRef(null);
   const containerRef = React.useRef(null);
+  const outerContainerRef = React.useRef(null);
   const { handleAddTag, handleAddMultipleTags, handleRemove } = useTagManagement(
     value,
     onChange,
@@ -642,10 +770,23 @@ function CustomTagInput(props) {
     onChange,
     handleAddTag,
     handleAddMultipleTags,
-    inputRef
+    inputRef,
+    containerRef,
+    setIsAllSelected,
+    isAllSelected
   );
   const { handleEdit } = useTagEditHandler(value, onChange, onTagEdit);
-  const { handleContainerClick } = useContainerClickHandler(disabled, inputRef);
+  const { handleContainerClick } = useContainerClickHandler(disabled, inputRef, setIsAllSelected);
+  const { handleContainerKeyDown } = useContainerKeyHandler(
+    containerRef,
+    value,
+    onChange,
+    inputRef,
+    setInputValue,
+    outerContainerRef,
+    setIsAllSelected,
+    isAllSelected
+  );
   const { handleInlineAdd, handleInlineCancel, handleSpacerClick } = useInlineInputHandlers(
     insertAtIndex,
     setInsertAtIndex,
@@ -663,12 +804,14 @@ function CustomTagInput(props) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: outerContainerRef,
       className: containerClassNames,
       tabIndex: 0,
       role: "textbox",
       "aria-multiline": "true",
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
+      onKeyDown: handleContainerKeyDown,
       ...restProps
     },
     /* @__PURE__ */ React.createElement(
@@ -704,7 +847,9 @@ function CustomTagInput(props) {
           handleKeyDown,
           handlePaste,
           setInputValue,
-          handleMouseDown
+          handleMouseDown,
+          isAllSelected,
+          setIsAllSelected
         }
       )
     )

package/dist/components/DataTable/DataTable.js

@@ -107,7 +107,7 @@ function DataTable({
         });
       });
     }
-  }, [isLoading, sorting]);
+  }, [isLoading]);
   const throttle = React.useCallback(
     (func, delay) => {
       let timeoutId = null;
@@ -194,7 +194,7 @@ function DataTable({
         style: { maxHeight: styleDataTableContainer.height }
       },
       renderTable()
-    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "vertical" }))
+    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
   ), hasPagination());
 }
 const MemoizedDataTable = React.memo(DataTable);

package/dist/components/DataTable/DataTable.utils.js

@@ -122,7 +122,7 @@ function buildColumns({
           variant: size === "small" ? "body-medium-500" : "body-large-500",
           textColor: "text-grey-950",
           className: "whitespace-normal break-words max-sm:truncate",
-          title: externalColumn.showHeaderTooltip ? externalColumn.title : void 0
+          title: externalColumn.title
         },
         externalColumn.title
       ) : title, hasSort && renderSortArrow({ column, externalColumn, table }));

package/dist/components/DataTable/Table.js

@@ -71,7 +71,7 @@ function Table({
     "tr",
     {
       "data-state": onIsSelected?.(row) ? "selected" : "",
-      className: "[&_td]:hover:!bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
+      className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
     },
     row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
       "td",

package/dist/components/Header/SearchInput.js

@@ -9,7 +9,6 @@ const SearchInput = ({
   customStyles,
   placeholder,
   isActiveButton,
-  value,
   onChangeValue,
   onClickButton
 }) => {
@@ -45,11 +44,9 @@ const SearchInput = ({
     {
       id: "header-search-input-lecom-ui",
       placeholder,
-      size: "small",
       radius: "full",
-      value,
       prefixInset: /* @__PURE__ */ React.createElement(Search, { size: 20, color: mappedCustomStyles.color }),
-      className: "body-small-400 border-none h-8",
+      className: "body-small-400 border-none",
       containerClassName: "grow",
       onMouseOver: handleOver,
       onMouseOut: handleOut,

package/dist/components/Input/Input.js

@@ -3,7 +3,7 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const inputVariants = cva(
-  `flex w-full rounded-sm border border-grey-400 bg-background px-3 py-2
+  `flex h-8 w-full rounded-sm border border-grey-400 bg-background px-3 py-2
   placeholder:text-grey-500 outline-none
   hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
   disabled:cursor-not-allowed disabled:bg-grey-100 disabled:border-grey-400
@@ -16,7 +16,7 @@ const inputVariants = cva(
         borderless: "border-none bg-transparent focus:bg-transparent focus:ring-0"
       },
       size: {
-        small: "h-8 body-small-400 px-4 py-1 placeholder:body-small-400",
+        small: "h-8 body-small-400 px-3 py-0 placeholder:body-small-400",
         default: "h-10 body-medium-400 px-3 py-2 placeholder:body-medium-400",
         large: "h-12  body-large-400 px-3 py-2 placeholder:body-large-400"
       },

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,8 +56,7 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium",
-    disabled = false
+    size = "medium"
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -515,11 +514,9 @@ const MultiSelect = React.forwardRef(
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
-            disabled && "opacity-50 cursor-not-allowed pointer-events-none",
             className
           ),
-          "aria-expanded": isPopoverOpen,
-          disabled
+          "aria-expanded": isPopoverOpen
         },
         selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, selectedValues.slice(0, dynamicMaxCount).map((value2) => {
           const selectedOption = options.find((option) => option.value === value2);
@@ -540,7 +537,7 @@ const MultiSelect = React.forwardRef(
               className: "truncate"
             },
             label
-          )), !disabled && /* @__PURE__ */ React.createElement(
+          )), /* @__PURE__ */ React.createElement(
             X,
             {
               className: "h-4 w-4 cursor-pointer flex-shrink-0",
@@ -550,7 +547,7 @@ const MultiSelect = React.forwardRef(
               }
             }
           ));
-        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -565,7 +562,7 @@ const MultiSelect = React.forwardRef(
             orientation: "vertical",
             className: "flex min-h-4 mx-1 h-full"
           }
-        )), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: getFontVariant(size),

package/dist/components/Table/Table.js

@@ -0,0 +1,80 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+
+const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/hooks/use-mobile.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(
+    void 0
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+export { useIsMobile };

package/dist/i18n/locales/en_us.js

@@ -9,7 +9,7 @@ const language = {
     },
     pagination: {
       show: "Show:",
-      selectedProcess: "Item(s) selected"
+      selectedProcess: "selected process"
     },
     upload: {
       label: "Drag and drop the file here or click to select it.",

package/dist/index.d.ts

@@ -384,7 +384,6 @@ interface Column<TData, TValue> {
     headerClassName?: string;
     headerStyle?: React.CSSProperties;
     cellClassName?: string;
-    showHeaderTooltip?: boolean;
     customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
@@ -727,7 +726,6 @@ interface SearchInputProps {
     customStyles: CustomStyles$2;
     placeholder?: string;
     isActiveButton?: boolean;
-    value?: string;
     onChangeValue?: (value: string) => void;
     onClickButton?: () => void;
 }
@@ -1230,8 +1228,10 @@ type ComboboxProps = {
     rounded?: ComboboxRounded;
     showSearch?: boolean;
     size?: ComboboxSize;
+    allowCreate?: boolean;
+    onCreateOption?: (inputValue: string) => void;
 };
-declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, }: ComboboxProps): React$1.JSX.Element;
+declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, allowCreate, onCreateOption, }: ComboboxProps): React$1.JSX.Element;
 
 interface TagItem {
     label: string;