@tidbcloud/uikit 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.2.3
+
+### Patch Changes
+
+- fix(theme): Enhance Radio and Radio.Indicator styling ([#497](https://github.com/tidbcloud/tidbcloud-uikit/pull/497))
+
+## 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

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/theme/theme.cjs

@@ -918,6 +918,7 @@ const theme = createTheme.createTheme({
             transform: "var(--radio-icon-transform, scale(0.2))"
           },
           radio: {
+            borderColor: themeColor(theme2, "carbon", 6),
             "&:disabled:not(:checked)": {
               background: themeColor(theme2, "carbon", 4),
               borderColor: themeColor(theme2, "carbon", 6),
@@ -933,6 +934,31 @@ const theme = createTheme.createTheme({
         };
       }
     },
+    RadioIndicator: {
+      styles: (theme2, props) => {
+        var _a;
+        const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
+        const shade = color.includes("carbon") ? 9 : 7;
+        return {
+          indicator: {
+            "--radio-color": themeColor(theme2, color, shade) + " !important",
+            "--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
+            borderColor: themeColor(theme2, "carbon", 6),
+            "&[data-disabled]:not([data-checked])": {
+              background: themeColor(theme2, "carbon", 4),
+              borderColor: themeColor(theme2, "carbon", 6),
+              cursor: "not-allowed"
+            },
+            "&[data-disabled][data-checked]": {
+              color: themeColor(theme2, "carbon", 2),
+              background: themeColor(theme2, "carbon", 6),
+              borderColor: themeColor(theme2, "carbon", 6),
+              cursor: "not-allowed"
+            }
+          }
+        };
+      }
+    },
     SegmentedControl: {
       styles: (theme2) => {
         return {

package/dist/theme/theme.mjs

@@ -916,6 +916,7 @@ const theme = createTheme({
             transform: "var(--radio-icon-transform, scale(0.2))"
           },
           radio: {
+            borderColor: themeColor(theme2, "carbon", 6),
             "&:disabled:not(:checked)": {
               background: themeColor(theme2, "carbon", 4),
               borderColor: themeColor(theme2, "carbon", 6),
@@ -931,6 +932,31 @@ const theme = createTheme({
         };
       }
     },
+    RadioIndicator: {
+      styles: (theme2, props) => {
+        var _a;
+        const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
+        const shade = color.includes("carbon") ? 9 : 7;
+        return {
+          indicator: {
+            "--radio-color": themeColor(theme2, color, shade) + " !important",
+            "--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
+            borderColor: themeColor(theme2, "carbon", 6),
+            "&[data-disabled]:not([data-checked])": {
+              background: themeColor(theme2, "carbon", 4),
+              borderColor: themeColor(theme2, "carbon", 6),
+              cursor: "not-allowed"
+            },
+            "&[data-disabled][data-checked]": {
+              color: themeColor(theme2, "carbon", 2),
+              background: themeColor(theme2, "carbon", 6),
+              borderColor: themeColor(theme2, "carbon", 6),
+              cursor: "not-allowed"
+            }
+          }
+        };
+      }
+    },
     SegmentedControl: {
       styles: (theme2) => {
         return {

package/package.json

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