@tidbcloud/uikit 2.2.0 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.2.2
+
+### Patch Changes
+
+- feat: allow select all for ProMultiSelect component ([#495](https://github.com/tidbcloud/tidbcloud-uikit/pull/495))
+
+## 2.2.1
+
+### Patch Changes
+
+- Feat/search area i18n support ([#493](https://github.com/tidbcloud/tidbcloud-uikit/pull/493))
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/biz/ProMultiSelect/index.cjs

@@ -19,17 +19,18 @@ const defaultOptionsFilter = require("../../node_modules/.pnpm/@mantine_core@7.1
 const Pill = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Pill/Pill.cjs");
 const isOptionsGroup = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Combobox/OptionsDropdown/is-options-group.cjs");
 const Combobox = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Combobox/Combobox.cjs");
+const Group = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const Checkbox = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
+const Divider = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
 const InputBase = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/InputBase/InputBase.cjs");
 const Loader = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Loader/Loader.cjs");
 const Input = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Input/Input.cjs");
 const ScrollArea = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.cjs");
-const Group = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.cjs");
-const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
-const Checkbox = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.cjs");
 const Option = ({ data, withCheckIcon, value, checkIconPosition, unstyled, renderOption }) => {
   if (!isOptionsGroup.isOptionsGroup(data)) {
     const checked = helper.isValueChecked(value, data.value);
-    const check = withCheckIcon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { size: "xs", checked });
+    const check = withCheckIcon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { size: "xs", checked, "aria-checked": checked, readOnly: true });
     const defaultContent = /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { children: [
       checkIconPosition === "left" && check,
       /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flex: 1 }, children: data.label }),
@@ -75,6 +76,104 @@ const defaultProps = {
   checkIconPosition: "left",
   hiddenInputValuesDivider: ","
 };
+const ValuesVisible = ({ moreCount, readOnly, values, disabled, onRemove, optionsLockup }) => {
+  const containerRef = React.useRef(null);
+  const [valsVisible, setValsVisible] = React.useState(values);
+  const [moreVisible, setMoreVisible] = React.useState(moreCount);
+  const [isLongFirstOverflow, setIsLongFirstOverflow] = React.useState(false);
+  const isCheckOverflowEnd = React.useRef(false);
+  React.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      isCheckOverflowEnd.current = false;
+      setValsVisible(values);
+      setMoreVisible(moreCount);
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.unobserve(container);
+  }, [values, moreCount]);
+  React.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || isCheckOverflowEnd.current) {
+      return;
+    }
+    const isOverflow = container.scrollWidth > container.clientWidth;
+    if (isOverflow) {
+      if (valsVisible.length === 1) {
+        isCheckOverflowEnd.current = true;
+        setIsLongFirstOverflow(true);
+        return;
+      }
+      const newValsVisible = valsVisible.slice(0, -1);
+      const newMoreVisible = moreVisible + 1;
+      setValsVisible(newValsVisible);
+      setMoreVisible(newMoreVisible);
+    } else if (!isOverflow && isLongFirstOverflow) {
+      setIsLongFirstOverflow(false);
+    } else {
+      isCheckOverflowEnd.current = true;
+    }
+  }, [valsVisible, moreVisible, isLongFirstOverflow]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Pill.Pill.Group,
+    {
+      mah: 22,
+      sx: {
+        display: "flex",
+        flexWrap: "nowrap",
+        overflow: "hidden"
+      },
+      ref: containerRef,
+      children: [
+        valsVisible.map((item, index2) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pill.Pill,
+            {
+              withRemoveButton: !readOnly && !((_a = optionsLockup[item]) == null ? void 0 : _a.disabled),
+              onRemove: () => {
+                onRemove(item);
+              },
+              disabled,
+              styles: (theme) => ({
+                root: {
+                  backgroundColor: theme.colors.carbon[3],
+                  borderRadius: theme.radius.sm,
+                  // if the first item is too long, we need to set flex: 1 and minWidth: 0 to make it shrink
+                  flex: isLongFirstOverflow ? "1" : void 0,
+                  minWidth: isLongFirstOverflow ? 0 : void 0
+                }
+              }),
+              children: ((_b = optionsLockup[item]) == null ? void 0 : _b.label) || item
+            },
+            `${item}-${index2}`
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Pill.Pill,
+          {
+            styles: (theme) => ({
+              root: {
+                backgroundColor: theme.colors.carbon[3],
+                borderRadius: theme.radius.sm,
+                display: moreCount > 0 ? "block" : "none",
+                opacity: moreVisible > 0 ? 1 : 0,
+                flexShrink: 0
+              }
+            }),
+            children: [
+              "+",
+              moreVisible
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 const ProMultiSelect = (_props) => {
   const props = useProps.useProps("MultiSelect", defaultProps, _props);
   const {
@@ -100,6 +199,8 @@ const ProMultiSelect = (_props) => {
     loading,
     maxDropdownHeight,
     error,
+    allowSelectAll,
+    selectAllText,
     onOptionSubmit,
     renderOption,
     filter,
@@ -140,11 +241,10 @@ const ProMultiSelect = (_props) => {
     search: searchable ? _searchValue : "",
     limit: limit ?? Infinity
   }) : parsedData;
-  const [targetIndex, setTargetIndex] = React.useState(0);
-  const hideCount = _value.length - targetIndex - 1;
-  const values = _value.map((item, index2) => {
+  const [targetIndex, setTargetIndex] = React.useState(-1);
+  const valuesForCompute = _value.map((item, index2) => {
     var _a, _b;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       Pill.Pill,
       {
         withRemoveButton: !readOnly && !((_a = optionsLockup[item]) == null ? void 0 : _a.disabled),
@@ -154,23 +254,7 @@ const ProMultiSelect = (_props) => {
         },
         disabled,
         styles: (theme2) => ({ root: { backgroundColor: theme2.colors.carbon[3], borderRadius: theme2.radius.sm } }),
-        sx: { position: "relative" },
-        children: [
-          ((_b = optionsLockup[item]) == null ? void 0 : _b.label) || item,
-          targetIndex === index2 && /* @__PURE__ */ jsxRuntime.jsxs(
-            Pill.Pill,
-            {
-              styles: (theme2) => ({
-                root: { backgroundColor: theme2.colors.carbon[3], borderRadius: theme2.radius.sm, padding: "0 5px" }
-              }),
-              sx: { position: "absolute", right: 0, transform: "translateX(calc(100% + 8px))" },
-              children: [
-                "+",
-                hideCount
-              ]
-            }
-          )
-        ]
+        children: ((_b = optionsLockup[item]) == null ? void 0 : _b.label) || item
       },
       `${item}-${index2}`
     );
@@ -179,10 +263,15 @@ const ProMultiSelect = (_props) => {
   React.useLayoutEffect(() => {
     var _a;
     const child = (_a = inputRef.current) == null ? void 0 : _a.children;
-    if (!child || (child == null ? void 0 : child.length) === 0) return;
-    const index2 = Array.from(child).findIndex((child2) => child2.offsetTop > 20);
-    setTargetIndex(index2 - 1);
-  }, [values]);
+    if (!child || (child == null ? void 0 : child.length) <= 1) {
+      return;
+    }
+    const firstOffsetLeft = child[0].offsetLeft;
+    const index2 = Array.from(child).findIndex(
+      (child2, idx) => child2.offsetLeft === firstOffsetLeft && idx > 0
+    );
+    setTargetIndex(index2);
+  }, [_value]);
   const options = filteredData == null ? void 0 : filteredData.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
     Option,
     {
@@ -195,15 +284,63 @@ const ProMultiSelect = (_props) => {
     },
     isOptionsGroup.isOptionsGroup(item) ? item.group : item.value
   ));
+  const allChecked = React.useMemo(() => {
+    return parsedData.every((value2) => {
+      if (isOptionsGroup.isOptionsGroup(value2)) {
+        return value2.items.every((item) => _value.includes(item.value));
+      } else {
+        return _value.includes(value2.value);
+      }
+    });
+  }, [parsedData, _value]);
+  const indeterminate = _value.length > 0 && !allChecked;
+  const selectAll = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Combobox.Combobox.Option,
+      {
+        value: "_select_all",
+        "data-checked": allChecked,
+        "aria-selected": allChecked,
+        active: allChecked,
+        styles: (theme2) => ({
+          option: {
+            "&:hover": {
+              backgroundColor: theme2.colors.carbon[3]
+            }
+          }
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { size: "xs", checked: allChecked, indeterminate, "aria-checked": allChecked, readOnly: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flex: 1 }, children: selectAllText || "All" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { color: "carbon.3" })
+  ] });
   const handleOptionSubmit = (val) => {
-    onOptionSubmit == null ? void 0 : onOptionSubmit(val);
-    setSearchValue("");
-    combobox.updateSelectedOptionIndex("selected");
-    if (_value.includes(optionsLockup[val].value)) {
-      setValue(_value.filter((v) => v !== optionsLockup[val].value));
-      onRemove == null ? void 0 : onRemove(optionsLockup[val].value);
-    } else if (_value.length < maxValues) {
-      setValue([..._value, optionsLockup[val].value]);
+    if (val === "_select_all") {
+      if (allChecked) {
+        setValue([]);
+      } else {
+        const allValues = parsedData.reduce((acc, value2) => {
+          if (isOptionsGroup.isOptionsGroup(value2)) {
+            return [...acc, ...value2.items.map((item) => item.value)];
+          } else {
+            return [...acc, value2.value];
+          }
+        }, []);
+        setValue(allValues);
+      }
+    } else {
+      onOptionSubmit == null ? void 0 : onOptionSubmit(val);
+      setSearchValue("");
+      combobox.updateSelectedOptionIndex("selected");
+      if (_value.includes(optionsLockup[val].value)) {
+        setValue(_value.filter((v) => v !== optionsLockup[val].value));
+        onRemove == null ? void 0 : onRemove(optionsLockup[val].value);
+      } else if (_value.length < maxValues) {
+        setValue([..._value, optionsLockup[val].value]);
+      }
     }
   };
   const clearButton = /* @__PURE__ */ jsxRuntime.jsx(
@@ -217,6 +354,7 @@ const ProMultiSelect = (_props) => {
     }
   );
   const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;
+  const moreCount = targetIndex > 0 ? _value.length - targetIndex : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Combobox.Combobox,
     {
@@ -260,9 +398,27 @@ const ProMultiSelect = (_props) => {
                   sx: {
                     flexWrap: "wrap",
                     overflowY: "clip",
-                    maxWidth: `calc(100% - ${(hideCount.toString().length + 2) * 8}px)`
+                    maxWidth: "100%",
+                    opacity: 0,
+                    pointerEvents: "none",
+                    height: 0
                   },
-                  children: values
+                  children: valuesForCompute
+                }
+              ),
+              // _value.length > 0 is required. Because this component need a render cycle to synchronize props to state. So if we remove '_value.length > 0', when we uncheck the last item, the placeholder will show, but at that moment, the state in this ValuesVisible component keeps previous values
+              _value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ValuesVisible,
+                {
+                  disabled,
+                  readOnly,
+                  optionsLockup,
+                  moreCount,
+                  values: _value.slice(0, targetIndex > 0 ? targetIndex : _value.length),
+                  onRemove: (item) => {
+                    setValue(_value.filter((i) => item !== i));
+                    onRemove == null ? void 0 : onRemove(item);
+                  }
                 }
               )
             ]
@@ -282,7 +438,10 @@ const ProMultiSelect = (_props) => {
               placeholder: "Find"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea.ScrollArea.Autosize, { type: "scroll", mah: maxDropdownHeight ?? 200, children: /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Options, { children: options.length > 0 ? options : /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Empty, { children: nothingFoundMessage || "Nothing found" }) }) })
+          /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea.ScrollArea.Autosize, { type: "scroll", mah: maxDropdownHeight ?? 200, children: [
+            allowSelectAll && selectAll,
+            /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Options, { children: options.length > 0 ? options : /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Empty, { children: nothingFoundMessage || "Nothing found" }) })
+          ] })
         ] })
       ]
     }

package/dist/biz/ProMultiSelect/index.d.cts

@@ -2,5 +2,7 @@ import { default as React } from 'react';
 import { MultiSelectProps } from '../../primitive/index.cjs';
 export interface ProMultiSelectProps extends Pick<MultiSelectProps, 'data' | 'value' | 'defaultValue' | 'limit' | 'searchable' | 'searchValue' | 'defaultSearchValue' | 'maxValues' | 'readOnly' | 'disabled' | 'size' | 'width' | 'selectFirstOptionOnChange' | 'placeholder' | 'clearable' | 'label' | 'nothingFoundMessage' | 'dropdownOpened' | 'defaultDropdownOpened' | 'maxDropdownHeight' | 'error' | 'onOptionSubmit' | 'renderOption' | 'filter' | 'onChange' | 'onSearchChange' | 'onRemove' | 'onClear'> {
     loading?: boolean;
+    allowSelectAll?: boolean;
+    selectAllText?: string;
 }
 export declare const ProMultiSelect: React.FC<ProMultiSelectProps>;

package/dist/biz/ProMultiSelect/index.d.mts

@@ -2,5 +2,7 @@ import { default as React } from 'react';
 import { MultiSelectProps } from '../../primitive/index.mjs';
 export interface ProMultiSelectProps extends Pick<MultiSelectProps, 'data' | 'value' | 'defaultValue' | 'limit' | 'searchable' | 'searchValue' | 'defaultSearchValue' | 'maxValues' | 'readOnly' | 'disabled' | 'size' | 'width' | 'selectFirstOptionOnChange' | 'placeholder' | 'clearable' | 'label' | 'nothingFoundMessage' | 'dropdownOpened' | 'defaultDropdownOpened' | 'maxDropdownHeight' | 'error' | 'onOptionSubmit' | 'renderOption' | 'filter' | 'onChange' | 'onSearchChange' | 'onRemove' | 'onClear'> {
     loading?: boolean;
+    allowSelectAll?: boolean;
+    selectAllText?: string;
 }
 export declare const ProMultiSelect: React.FC<ProMultiSelectProps>;

package/dist/biz/ProMultiSelect/index.mjs

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useLayoutEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useMemo } from "react";
 import { IconSearchLg } from "../../icons/index.mjs";
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                        */
@@ -17,17 +17,18 @@ import { defaultOptionsFilter } from "../../node_modules/.pnpm/@mantine_core@7.1
 import { Pill } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Pill/Pill.mjs";
 import { isOptionsGroup } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Combobox/OptionsDropdown/is-options-group.mjs";
 import { Combobox } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Combobox/Combobox.mjs";
+import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
+import { Checkbox } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.mjs";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
+import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
 import { InputBase } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/InputBase/InputBase.mjs";
 import { Loader } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Loader/Loader.mjs";
 import { Input } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Input/Input.mjs";
 import { ScrollArea } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.mjs";
-import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
-import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
-import { Checkbox } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.mjs";
 const Option = ({ data, withCheckIcon, value, checkIconPosition, unstyled, renderOption }) => {
   if (!isOptionsGroup(data)) {
     const checked = isValueChecked(value, data.value);
-    const check = withCheckIcon && /* @__PURE__ */ jsx(Checkbox, { size: "xs", checked });
+    const check = withCheckIcon && /* @__PURE__ */ jsx(Checkbox, { size: "xs", checked, "aria-checked": checked, readOnly: true });
     const defaultContent = /* @__PURE__ */ jsxs(Group, { children: [
       checkIconPosition === "left" && check,
       /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: data.label }),
@@ -73,6 +74,104 @@ const defaultProps = {
   checkIconPosition: "left",
   hiddenInputValuesDivider: ","
 };
+const ValuesVisible = ({ moreCount, readOnly, values, disabled, onRemove, optionsLockup }) => {
+  const containerRef = useRef(null);
+  const [valsVisible, setValsVisible] = useState(values);
+  const [moreVisible, setMoreVisible] = useState(moreCount);
+  const [isLongFirstOverflow, setIsLongFirstOverflow] = useState(false);
+  const isCheckOverflowEnd = useRef(false);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      isCheckOverflowEnd.current = false;
+      setValsVisible(values);
+      setMoreVisible(moreCount);
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.unobserve(container);
+  }, [values, moreCount]);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || isCheckOverflowEnd.current) {
+      return;
+    }
+    const isOverflow = container.scrollWidth > container.clientWidth;
+    if (isOverflow) {
+      if (valsVisible.length === 1) {
+        isCheckOverflowEnd.current = true;
+        setIsLongFirstOverflow(true);
+        return;
+      }
+      const newValsVisible = valsVisible.slice(0, -1);
+      const newMoreVisible = moreVisible + 1;
+      setValsVisible(newValsVisible);
+      setMoreVisible(newMoreVisible);
+    } else if (!isOverflow && isLongFirstOverflow) {
+      setIsLongFirstOverflow(false);
+    } else {
+      isCheckOverflowEnd.current = true;
+    }
+  }, [valsVisible, moreVisible, isLongFirstOverflow]);
+  return /* @__PURE__ */ jsxs(
+    Pill.Group,
+    {
+      mah: 22,
+      sx: {
+        display: "flex",
+        flexWrap: "nowrap",
+        overflow: "hidden"
+      },
+      ref: containerRef,
+      children: [
+        valsVisible.map((item, index) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsx(
+            Pill,
+            {
+              withRemoveButton: !readOnly && !((_a = optionsLockup[item]) == null ? void 0 : _a.disabled),
+              onRemove: () => {
+                onRemove(item);
+              },
+              disabled,
+              styles: (theme) => ({
+                root: {
+                  backgroundColor: theme.colors.carbon[3],
+                  borderRadius: theme.radius.sm,
+                  // if the first item is too long, we need to set flex: 1 and minWidth: 0 to make it shrink
+                  flex: isLongFirstOverflow ? "1" : void 0,
+                  minWidth: isLongFirstOverflow ? 0 : void 0
+                }
+              }),
+              children: ((_b = optionsLockup[item]) == null ? void 0 : _b.label) || item
+            },
+            `${item}-${index}`
+          );
+        }),
+        /* @__PURE__ */ jsxs(
+          Pill,
+          {
+            styles: (theme) => ({
+              root: {
+                backgroundColor: theme.colors.carbon[3],
+                borderRadius: theme.radius.sm,
+                display: moreCount > 0 ? "block" : "none",
+                opacity: moreVisible > 0 ? 1 : 0,
+                flexShrink: 0
+              }
+            }),
+            children: [
+              "+",
+              moreVisible
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 const ProMultiSelect = (_props) => {
   const props = useProps("MultiSelect", defaultProps, _props);
   const {
@@ -98,6 +197,8 @@ const ProMultiSelect = (_props) => {
     loading,
     maxDropdownHeight,
     error,
+    allowSelectAll,
+    selectAllText,
     onOptionSubmit,
     renderOption,
     filter,
@@ -138,11 +239,10 @@ const ProMultiSelect = (_props) => {
     search: searchable ? _searchValue : "",
     limit: limit ?? Infinity
   }) : parsedData;
-  const [targetIndex, setTargetIndex] = useState(0);
-  const hideCount = _value.length - targetIndex - 1;
-  const values = _value.map((item, index) => {
+  const [targetIndex, setTargetIndex] = useState(-1);
+  const valuesForCompute = _value.map((item, index) => {
     var _a, _b;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Pill,
       {
         withRemoveButton: !readOnly && !((_a = optionsLockup[item]) == null ? void 0 : _a.disabled),
@@ -152,23 +252,7 @@ const ProMultiSelect = (_props) => {
         },
         disabled,
         styles: (theme2) => ({ root: { backgroundColor: theme2.colors.carbon[3], borderRadius: theme2.radius.sm } }),
-        sx: { position: "relative" },
-        children: [
-          ((_b = optionsLockup[item]) == null ? void 0 : _b.label) || item,
-          targetIndex === index && /* @__PURE__ */ jsxs(
-            Pill,
-            {
-              styles: (theme2) => ({
-                root: { backgroundColor: theme2.colors.carbon[3], borderRadius: theme2.radius.sm, padding: "0 5px" }
-              }),
-              sx: { position: "absolute", right: 0, transform: "translateX(calc(100% + 8px))" },
-              children: [
-                "+",
-                hideCount
-              ]
-            }
-          )
-        ]
+        children: ((_b = optionsLockup[item]) == null ? void 0 : _b.label) || item
       },
       `${item}-${index}`
     );
@@ -177,10 +261,15 @@ const ProMultiSelect = (_props) => {
   useLayoutEffect(() => {
     var _a;
     const child = (_a = inputRef.current) == null ? void 0 : _a.children;
-    if (!child || (child == null ? void 0 : child.length) === 0) return;
-    const index = Array.from(child).findIndex((child2) => child2.offsetTop > 20);
-    setTargetIndex(index - 1);
-  }, [values]);
+    if (!child || (child == null ? void 0 : child.length) <= 1) {
+      return;
+    }
+    const firstOffsetLeft = child[0].offsetLeft;
+    const index = Array.from(child).findIndex(
+      (child2, idx) => child2.offsetLeft === firstOffsetLeft && idx > 0
+    );
+    setTargetIndex(index);
+  }, [_value]);
   const options = filteredData == null ? void 0 : filteredData.map((item) => /* @__PURE__ */ jsx(
     Option,
     {
@@ -193,15 +282,63 @@ const ProMultiSelect = (_props) => {
     },
     isOptionsGroup(item) ? item.group : item.value
   ));
+  const allChecked = useMemo(() => {
+    return parsedData.every((value2) => {
+      if (isOptionsGroup(value2)) {
+        return value2.items.every((item) => _value.includes(item.value));
+      } else {
+        return _value.includes(value2.value);
+      }
+    });
+  }, [parsedData, _value]);
+  const indeterminate = _value.length > 0 && !allChecked;
+  const selectAll = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Combobox.Option,
+      {
+        value: "_select_all",
+        "data-checked": allChecked,
+        "aria-selected": allChecked,
+        active: allChecked,
+        styles: (theme2) => ({
+          option: {
+            "&:hover": {
+              backgroundColor: theme2.colors.carbon[3]
+            }
+          }
+        }),
+        children: /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(Checkbox, { size: "xs", checked: allChecked, indeterminate, "aria-checked": allChecked, readOnly: true }),
+          /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: selectAllText || "All" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { color: "carbon.3" })
+  ] });
   const handleOptionSubmit = (val) => {
-    onOptionSubmit == null ? void 0 : onOptionSubmit(val);
-    setSearchValue("");
-    combobox.updateSelectedOptionIndex("selected");
-    if (_value.includes(optionsLockup[val].value)) {
-      setValue(_value.filter((v) => v !== optionsLockup[val].value));
-      onRemove == null ? void 0 : onRemove(optionsLockup[val].value);
-    } else if (_value.length < maxValues) {
-      setValue([..._value, optionsLockup[val].value]);
+    if (val === "_select_all") {
+      if (allChecked) {
+        setValue([]);
+      } else {
+        const allValues = parsedData.reduce((acc, value2) => {
+          if (isOptionsGroup(value2)) {
+            return [...acc, ...value2.items.map((item) => item.value)];
+          } else {
+            return [...acc, value2.value];
+          }
+        }, []);
+        setValue(allValues);
+      }
+    } else {
+      onOptionSubmit == null ? void 0 : onOptionSubmit(val);
+      setSearchValue("");
+      combobox.updateSelectedOptionIndex("selected");
+      if (_value.includes(optionsLockup[val].value)) {
+        setValue(_value.filter((v) => v !== optionsLockup[val].value));
+        onRemove == null ? void 0 : onRemove(optionsLockup[val].value);
+      } else if (_value.length < maxValues) {
+        setValue([..._value, optionsLockup[val].value]);
+      }
     }
   };
   const clearButton = /* @__PURE__ */ jsx(
@@ -215,6 +352,7 @@ const ProMultiSelect = (_props) => {
     }
   );
   const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;
+  const moreCount = targetIndex > 0 ? _value.length - targetIndex : 0;
   return /* @__PURE__ */ jsxs(
     Combobox,
     {
@@ -258,9 +396,27 @@ const ProMultiSelect = (_props) => {
                   sx: {
                     flexWrap: "wrap",
                     overflowY: "clip",
-                    maxWidth: `calc(100% - ${(hideCount.toString().length + 2) * 8}px)`
+                    maxWidth: "100%",
+                    opacity: 0,
+                    pointerEvents: "none",
+                    height: 0
                   },
-                  children: values
+                  children: valuesForCompute
+                }
+              ),
+              // _value.length > 0 is required. Because this component need a render cycle to synchronize props to state. So if we remove '_value.length > 0', when we uncheck the last item, the placeholder will show, but at that moment, the state in this ValuesVisible component keeps previous values
+              _value.length > 0 && /* @__PURE__ */ jsx(
+                ValuesVisible,
+                {
+                  disabled,
+                  readOnly,
+                  optionsLockup,
+                  moreCount,
+                  values: _value.slice(0, targetIndex > 0 ? targetIndex : _value.length),
+                  onRemove: (item) => {
+                    setValue(_value.filter((i) => item !== i));
+                    onRemove == null ? void 0 : onRemove(item);
+                  }
                 }
               )
             ]
@@ -280,7 +436,10 @@ const ProMultiSelect = (_props) => {
               placeholder: "Find"
             }
           ),
-          /* @__PURE__ */ jsx(ScrollArea.Autosize, { type: "scroll", mah: maxDropdownHeight ?? 200, children: /* @__PURE__ */ jsx(Combobox.Options, { children: options.length > 0 ? options : /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage || "Nothing found" }) }) })
+          /* @__PURE__ */ jsxs(ScrollArea.Autosize, { type: "scroll", mah: maxDropdownHeight ?? 200, children: [
+            allowSelectAll && selectAll,
+            /* @__PURE__ */ jsx(Combobox.Options, { children: options.length > 0 ? options : /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage || "Nothing found" }) })
+          ] })
         ] })
       ]
     }

package/dist/biz/SearchArea/index.cjs

@@ -16,6 +16,7 @@ const DatePicker = require("../Form/DatePicker.cjs");
 const FormTimeRangePicker = require("../Form/FormTimeRangePicker.cjs");
 const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
 const Form = require("../Form/Form.cjs");
+const useDebouncedValue = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-value/use-debounced-value.cjs");
 const MultiSelect = require("../Form/MultiSelect.cjs");
 const Select = require("../Form/Select.cjs");
 const TextInput = require("../Form/TextInput.cjs");
@@ -29,11 +30,17 @@ function FormItemRender(props) {
     resetSeed
   } = props;
   const [keyword, setKeyword] = React.useState(defaultValue);
+  const [debouncedKeyword] = useDebouncedValue.useDebouncedValue(keyword, 800);
   React.useEffect(() => {
     if (resetSeed > 0) {
       setKeyword(defaultValue);
     }
   }, [resetSeed]);
+  React.useEffect(() => {
+    if (type === "text") {
+      triggerSubmit();
+    }
+  }, [debouncedKeyword]);
   const triggerSubmit = () => onSubmit && onSubmit();
   function onKeyDownHandler(e) {
     if (e.key === "Enter") {
@@ -125,6 +132,7 @@ function FormItemRender(props) {
           name,
           value: keyword,
           clearable: true,
+          placeholder: placeholder ?? "",
           onChange: (val) => {
             setKeyword(val);
             triggerSubmit();
@@ -162,32 +170,23 @@ function SearchArea(props) {
       handleSubmit();
     }
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
-      data.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
-        FormItemRender,
-        {
-          form,
-          data: x,
-          onSubmit: handleSubmit,
-          defaultValue: state[x.name],
-          resetSeed
-        },
-        x.name
-      )),
-      /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleReset, children: "Clear Filters" }) }),
-        onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
-      ] })
-    ] }) }),
-    props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { height: 320 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("pre", { children: [
-        "result = ",
-        JSON.stringify(form.getValues(), null, 4)
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
+    data.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormItemRender,
+      {
+        form,
+        data: x,
+        onSubmit: handleSubmit,
+        defaultValue: state[x.name],
+        resetSeed
+      },
+      x.name
+    )),
+    /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: SX_Y_MID, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleReset, children: props.clearFiltersText ?? "Clear Filters" }) }),
+      onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
     ] })
-  ] }) });
+  ] }) }) }) });
 }
 exports.DEFAULT_FORM_STATE_KEY = DEFAULT_FORM_STATE_KEY;
 exports.SearchArea = SearchArea;

package/dist/biz/SearchArea/index.d.cts

@@ -42,6 +42,7 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
      * CAUTIONS: must be set to different keys when using multiple SearchArea in the same page!!!
      */
     formStateQueryKey?: string;
+    clearFiltersText?: string;
 }
 /**
  * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page

package/dist/biz/SearchArea/index.d.mts

@@ -42,6 +42,7 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
      * CAUTIONS: must be set to different keys when using multiple SearchArea in the same page!!!
      */
     formStateQueryKey?: string;
+    clearFiltersText?: string;
 }
 /**
  * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page

package/dist/biz/SearchArea/index.mjs

@@ -14,6 +14,7 @@ import { FormDatePicker } from "../Form/DatePicker.mjs";
 import { FormTimeRangePicker } from "../Form/FormTimeRangePicker.mjs";
 import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
 import { Form } from "../Form/Form.mjs";
+import { useDebouncedValue } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-value/use-debounced-value.mjs";
 import { FormMultiSelect } from "../Form/MultiSelect.mjs";
 import { FormSelect } from "../Form/Select.mjs";
 import { FormTextInput } from "../Form/TextInput.mjs";
@@ -27,11 +28,17 @@ function FormItemRender(props) {
     resetSeed
   } = props;
   const [keyword, setKeyword] = useState(defaultValue);
+  const [debouncedKeyword] = useDebouncedValue(keyword, 800);
   useEffect(() => {
     if (resetSeed > 0) {
       setKeyword(defaultValue);
     }
   }, [resetSeed]);
+  useEffect(() => {
+    if (type === "text") {
+      triggerSubmit();
+    }
+  }, [debouncedKeyword]);
   const triggerSubmit = () => onSubmit && onSubmit();
   function onKeyDownHandler(e) {
     if (e.key === "Enter") {
@@ -123,6 +130,7 @@ function FormItemRender(props) {
           name,
           value: keyword,
           clearable: true,
+          placeholder: placeholder ?? "",
           onChange: (val) => {
             setKeyword(val);
             triggerSubmit();
@@ -160,32 +168,23 @@ function SearchArea(props) {
       handleSubmit();
     }
   }, []);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
-    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
-      data.map((x) => /* @__PURE__ */ jsx(
-        FormItemRender,
-        {
-          form,
-          data: x,
-          onSubmit: handleSubmit,
-          defaultValue: state[x.name],
-          resetSeed
-        },
-        x.name
-      )),
-      /* @__PURE__ */ jsxs(Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleReset, children: "Clear Filters" }) }),
-        onRefresh && /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
-      ] })
-    ] }) }),
-    props.debugEnabled && /* @__PURE__ */ jsxs(Box, { sx: { height: 320 }, children: [
-      /* @__PURE__ */ jsxs("pre", { children: [
-        "result = ",
-        JSON.stringify(form.getValues(), null, 4)
-      ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
+    data.map((x) => /* @__PURE__ */ jsx(
+      FormItemRender,
+      {
+        form,
+        data: x,
+        onSubmit: handleSubmit,
+        defaultValue: state[x.name],
+        resetSeed
+      },
+      x.name
+    )),
+    /* @__PURE__ */ jsxs(Box, { sx: SX_Y_MID, children: [
+      /* @__PURE__ */ jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleReset, children: props.clearFiltersText ?? "Clear Filters" }) }),
+      onRefresh && /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
     ] })
-  ] }) });
+  ] }) }) }) });
 }
 export {
   DEFAULT_FORM_STATE_KEY,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",