@clickhouse/click-ui 0.0.131 → 0.0.132

package/dist/click-ui.es.js

@@ -36469,6 +36469,8 @@ const InternalSelect = ({
   sortable = false,
   placeholder = "Select an option",
   multiple,
+  checkbox,
+  selectLabel,
   showSearch = false,
   container,
   ...props
@@ -36635,7 +36637,10 @@ const InternalSelect = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(FormElementContainer, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectPopoverRoot, { open: open2, onOpenChange, modal: true, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledSelectTrigger, { id: id ?? defaultId, $error: !!error2, disabled, "data-testid": "select-trigger", children: [
-          isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
+          isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: checkbox && selectLabel ? {
+            label: selectLabel,
+            value: selectLabel
+          } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "sort", size: "sm" })
         ] }),
         form && /* @__PURE__ */ jsxRuntimeExports.jsx(HiddenSelectElement, { multiple, name: name2, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
@@ -36657,8 +36662,16 @@ const InternalSelect = ({
               return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroup, { ...groupProps, children: itemList.map(({
                 label: label2,
                 ...itemProps
-              }, itemIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`)) }, `select-${id}-group-${index2}`);
+              }, itemIndex) => {
+                if (checkbox) {
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                }
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+              }) }, `select-${id}-group-${index2}`);
             } else {
+              if (checkbox) {
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...props2 }, `select-${id}-item-${index2}`);
+              }
               return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...props2 }, `select-${id}-item-${index2}`);
             }
           }) : children }) }),
@@ -36744,6 +36757,70 @@ const SelectItem = forwardRef(({
   ] });
 });
 SelectItem.displayName = "Select.Item";
+const MultiSelectCheckboxItem = forwardRef(({
+  disabled = false,
+  children,
+  icon,
+  iconDir = "end",
+  label,
+  onMouseOver: onMouseOverProp,
+  onSelect: onSelectProp,
+  separator,
+  value = "",
+  ...props
+}, forwardedRef) => {
+  const {
+    highlighted,
+    updateHighlighted,
+    isHidden,
+    selectedValues,
+    onSelect
+  } = useOption();
+  const onSelectValue = () => {
+    if (!disabled) {
+      onSelect(value);
+      if (typeof onSelectProp == "function") {
+        onSelectProp(value);
+      }
+    }
+  };
+  const onMouseOver = (e) => {
+    if (onMouseOverProp) {
+      onMouseOverProp(e);
+    }
+    if (!disabled) {
+      updateHighlighted(value);
+    }
+  };
+  if (isHidden(value)) {
+    return null;
+  }
+  const isChecked = selectedValues.includes(value);
+  const onChange = () => {
+    onSelect(value);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
+      icon && iconDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+        display: "flex",
+        justifyContent: "center"
+      }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+        label
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+        display: "flex",
+        justifyContent: "center"
+      }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+        children
+      ] }), onClick: onChange }),
+      icon && iconDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
+      !icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
+    ] }),
+    separator && /* @__PURE__ */ jsxRuntimeExports.jsx(Separator$1, { size: "sm" })
+  ] });
+});
+MultiSelectCheckboxItem.displayName = "Select.Item";
 const Select = ({
   value: valueProp,
   defaultValue,
@@ -36836,6 +36913,52 @@ const MultiSelect = ({
 };
 MultiSelect.Group = SelectGroup;
 MultiSelect.Item = SelectItem;
+const CheckboxMultiSelect = ({
+  value: valueProp,
+  defaultValue,
+  onSelect: onSelectProp,
+  options,
+  children,
+  onOpenChange: onOpenChangeProp,
+  selectLabel,
+  ...props
+}) => {
+  const [selectedValues, setSelectedValues] = useState(valueProp ?? defaultValue ?? []);
+  const [open2, setOpen] = useState(false);
+  const onOpenChange = useCallback((open22) => {
+    setOpen(open22);
+    if (typeof onOpenChangeProp === "function") {
+      onOpenChangeProp(open22);
+    }
+  }, [onOpenChangeProp]);
+  useEffect(() => {
+    setSelectedValues(valueProp ?? []);
+  }, [valueProp]);
+  const onChange = useCallback((values, type) => {
+    setSelectedValues(values);
+    if (typeof onSelectProp === "function") {
+      onSelectProp(values, type);
+    }
+  }, [onSelectProp]);
+  const onSelect = useCallback((value, type) => {
+    let newValues = [];
+    if (selectedValues.includes(value)) {
+      newValues = selectedValues.filter((currentValue) => currentValue !== value);
+    } else {
+      newValues = [...selectedValues, value];
+    }
+    onChange(newValues, type);
+  }, [onChange, selectedValues]);
+  const conditionalProps = {};
+  if (options) {
+    conditionalProps.options = options;
+  } else {
+    conditionalProps.children = children;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalSelect, { onChange, value: selectedValues, open: open2, onOpenChange, onSelect, checkbox: true, selectLabel, ...conditionalProps, ...props });
+};
+CheckboxMultiSelect.Group = SelectGroup;
+CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
 const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
 const $89eedd556c436f6a$var$ORIENTATIONS = [
   "horizontal",
@@ -47628,6 +47751,7 @@ export {
   CardPromotion,
   CardSecondary,
   Checkbox,
+  CheckboxMultiSelect,
   ClickUIProvider,
   CodeBlock,
   ConfirmationDialog,

package/dist/click-ui.umd.js

@@ -36486,6 +36486,8 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     sortable = false,
     placeholder = "Select an option",
     multiple,
+    checkbox,
+    selectLabel,
     showSearch = false,
     container,
     ...props
@@ -36652,7 +36654,10 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       /* @__PURE__ */ jsxRuntimeExports.jsxs(FormElementContainer, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectPopoverRoot, { open: open2, onOpenChange, modal: true, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledSelectTrigger, { id: id ?? defaultId, $error: !!error2, disabled, "data-testid": "select-trigger", children: [
-            isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
+            isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: checkbox && selectLabel ? {
+              label: selectLabel,
+              value: selectLabel
+            } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "sort", size: "sm" })
           ] }),
           form && /* @__PURE__ */ jsxRuntimeExports.jsx(HiddenSelectElement, { multiple, name: name2, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
@@ -36674,8 +36679,16 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroup, { ...groupProps, children: itemList.map(({
                   label: label2,
                   ...itemProps
-                }, itemIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`)) }, `select-${id}-group-${index2}`);
+                }, itemIndex) => {
+                  if (checkbox) {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                  }
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                }) }, `select-${id}-group-${index2}`);
               } else {
+                if (checkbox) {
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...props2 }, `select-${id}-item-${index2}`);
+                }
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...props2 }, `select-${id}-item-${index2}`);
               }
             }) : children }) }),
@@ -36761,6 +36774,70 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     ] });
   });
   SelectItem.displayName = "Select.Item";
+  const MultiSelectCheckboxItem = React.forwardRef(({
+    disabled = false,
+    children,
+    icon,
+    iconDir = "end",
+    label,
+    onMouseOver: onMouseOverProp,
+    onSelect: onSelectProp,
+    separator,
+    value = "",
+    ...props
+  }, forwardedRef) => {
+    const {
+      highlighted,
+      updateHighlighted,
+      isHidden,
+      selectedValues,
+      onSelect
+    } = useOption();
+    const onSelectValue = () => {
+      if (!disabled) {
+        onSelect(value);
+        if (typeof onSelectProp == "function") {
+          onSelectProp(value);
+        }
+      }
+    };
+    const onMouseOver = (e) => {
+      if (onMouseOverProp) {
+        onMouseOverProp(e);
+      }
+      if (!disabled) {
+        updateHighlighted(value);
+      }
+    };
+    if (isHidden(value)) {
+      return null;
+    }
+    const isChecked = selectedValues.includes(value);
+    const onChange = () => {
+      onSelect(value);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
+        icon && iconDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "center"
+        }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+          label
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "center"
+        }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+          children
+        ] }), onClick: onChange }),
+        icon && iconDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
+        !icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
+      ] }),
+      separator && /* @__PURE__ */ jsxRuntimeExports.jsx(Separator$1, { size: "sm" })
+    ] });
+  });
+  MultiSelectCheckboxItem.displayName = "Select.Item";
   const Select = ({
     value: valueProp,
     defaultValue,
@@ -36853,6 +36930,52 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   MultiSelect.Group = SelectGroup;
   MultiSelect.Item = SelectItem;
+  const CheckboxMultiSelect = ({
+    value: valueProp,
+    defaultValue,
+    onSelect: onSelectProp,
+    options: options2,
+    children,
+    onOpenChange: onOpenChangeProp,
+    selectLabel,
+    ...props
+  }) => {
+    const [selectedValues, setSelectedValues] = React.useState(valueProp ?? defaultValue ?? []);
+    const [open2, setOpen] = React.useState(false);
+    const onOpenChange = React.useCallback((open22) => {
+      setOpen(open22);
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(open22);
+      }
+    }, [onOpenChangeProp]);
+    React.useEffect(() => {
+      setSelectedValues(valueProp ?? []);
+    }, [valueProp]);
+    const onChange = React.useCallback((values, type) => {
+      setSelectedValues(values);
+      if (typeof onSelectProp === "function") {
+        onSelectProp(values, type);
+      }
+    }, [onSelectProp]);
+    const onSelect = React.useCallback((value, type) => {
+      let newValues = [];
+      if (selectedValues.includes(value)) {
+        newValues = selectedValues.filter((currentValue) => currentValue !== value);
+      } else {
+        newValues = [...selectedValues, value];
+      }
+      onChange(newValues, type);
+    }, [onChange, selectedValues]);
+    const conditionalProps = {};
+    if (options2) {
+      conditionalProps.options = options2;
+    } else {
+      conditionalProps.children = children;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalSelect, { onChange, value: selectedValues, open: open2, onOpenChange, onSelect, checkbox: true, selectLabel, ...conditionalProps, ...props });
+  };
+  CheckboxMultiSelect.Group = SelectGroup;
+  CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
   const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
   const $89eedd556c436f6a$var$ORIENTATIONS = [
     "horizontal",
@@ -47644,6 +47767,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.CardPromotion = CardPromotion;
   exports2.CardSecondary = CardSecondary;
   exports2.Checkbox = Checkbox;
+  exports2.CheckboxMultiSelect = CheckboxMultiSelect;
   exports2.ClickUIProvider = ClickUIProvider;
   exports2.CodeBlock = CodeBlock;
   exports2.ConfirmationDialog = ConfirmationDialog;

package/dist/components/Select/CheckboxMultiSelect.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MultiSelectProps } from "..";
+export interface CheckboxMultiSelectProps extends MultiSelectProps {
+    selectLabel?: string;
+}
+export declare const CheckboxMultiSelect: {
+    ({ value: valueProp, defaultValue, onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, selectLabel, ...props }: CheckboxMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+    Group: import("react").ForwardRefExoticComponent<import("./common/types").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("./common/types").SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Select/common/InternalSelect.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from "./types";
-export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, checkbox, selectLabel, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MultiSelectCheckboxItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/common/types.d.ts

@@ -60,6 +60,8 @@ interface InternalSelectProps extends PopoverProps, Omit<HTMLAttributes<HTMLDivE
     sortable?: boolean;
     onSelect: (value: string, type?: SelectionType) => void;
     multiple?: boolean;
+    checkbox?: boolean;
+    selectLabel?: string;
     placeholder?: string;
     showSearch?: boolean;
     customText?: string;

package/dist/components/index.d.ts

@@ -41,6 +41,7 @@ export { RadioGroup } from "./RadioGroup/RadioGroup";
 export { SearchField } from "./Input/SearchField";
 export { Select } from "./Select/SingleSelect";
 export { MultiSelect } from "./Select/MultiSelect";
+export { CheckboxMultiSelect } from "./Select/CheckboxMultiSelect";
 export { default as Separator } from "./Separator/Separator";
 export { SidebarNavigationItem } from "./SidebarNavigationItem/SidebarNavigationItem";
 export { SidebarCollapsibleItem } from "./SidebarCollapsibleItem/SidebarCollapsibleItem";

package/dist/components/types.d.ts

@@ -32,6 +32,7 @@ export type { Menu, SplitButtonProps } from "./SplitButton/SplitButton";
 export type { ToastProps } from "./Toast/Toast";
 export type { SelectOptionListItem } from "./Select/common/types";
 export type { MultiSelectProps } from "./Select/MultiSelect";
+export type { CheckboxMultiSelectProps } from "./Select/CheckboxMultiSelect";
 export type { PanelProps } from "./Panel/Panel";
 export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from "./Flyout/Flyout";
 export type { DialogContentProps } from "./Dialog/Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.131",
+  "version": "0.0.132",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",