@j2-health/design-system 0.5.0 → 0.5.2

package/dist/src/components/select/SummarizedSelect.js

@@ -1,455 +1,387 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Dropdown, Typography, Select, Spin, Input } from "antd";
-import { useState, useRef, useMemo, useEffect } from "react";
-import { LoadingOutlined } from "@ant-design/icons";
+import { icons_exports } from "../icons/index.js";
+import { Tag as Tag$1 } from "../tag/Tag.js";
+import SummarizedSelect_module_default from "./SummarizedSelect.module.css.js";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Dropdown, Input, Select, Spin, Typography } from "antd";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
-import styles from "./SummarizedSelect.module.css.js";
-import { Tag } from "../tag/Tag.js";
-import { CaretDownIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
-const isGroupOption = (option) => {
-  return "options" in option;
+import { LoadingOutlined } from "@ant-design/icons";
+//#region src/components/select/SummarizedSelect.tsx
+var isGroupOption = (option) => {
+	return "options" in option;
 };
-const getAllOptions = (options) => {
-  if (!options) return [];
-  return options.flatMap(
-    (option) => isGroupOption(option) ? option.options : [option]
-  );
+var getAllOptions = (options) => {
+	if (!options) return [];
+	return options.flatMap((option) => isGroupOption(option) ? option.options : [option]);
 };
-const filterOptions = (options, searchValue) => {
-  if (!options) return [];
-  if (!searchValue) return options;
-  return options.map((option) => {
-    var _a;
-    if (isGroupOption(option)) {
-      const filteredSubOptions = option.options.filter(
-        (subOption) => {
-          var _a2;
-          return (_a2 = subOption.label) == null ? void 0 : _a2.toString().toLowerCase().includes(searchValue.toLowerCase());
-        }
-      );
-      return filteredSubOptions.length > 0 ? { ...option, options: filteredSubOptions } : null;
-    } else {
-      return ((_a = option.label) == null ? void 0 : _a.toString().toLowerCase().includes(searchValue.toLowerCase())) ? option : null;
-    }
-  }).filter((option) => option !== null);
+var filterOptions = (options, searchValue) => {
+	if (!options) return [];
+	if (!searchValue) return options;
+	return options.map((option) => {
+		if (isGroupOption(option)) {
+			const filteredSubOptions = option.options.filter((subOption) => subOption.label?.toString().toLowerCase().includes(searchValue.toLowerCase()));
+			return filteredSubOptions.length > 0 ? {
+				...option,
+				options: filteredSubOptions
+			} : null;
+		} else return option.label?.toString().toLowerCase().includes(searchValue.toLowerCase()) ? option : null;
+	}).filter((option) => option !== null);
 };
-function SummarizedSelect({
-  searchPlaceholder,
-  formControlPlaceholder,
-  loading,
-  multiple,
-  value,
-  onChange,
-  options,
-  renderLabel,
-  rootClassName,
-  popupClassName,
-  variant,
-  trigger = "select",
-  defaultOpen = false,
-  ...props
-}) {
-  const isHeadline = variant === "headlined";
-  const antVariant = isHeadline ? "borderless" : variant;
-  const [searchValue, setSearchValue] = useState("");
-  const [focusTrigger, setFocusTrigger] = useState(defaultOpen ? 1 : 0);
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const inputRef = useRef(null);
-  const measureSpanRef = useRef(null);
-  const [measuredWidth, setMeasuredWidth] = useState();
-  const displayText = useMemo(() => {
-    if (multiple && value.length > 0) {
-      return renderLabel(value.length);
-    }
-    if (!multiple && value) {
-      const option = getAllOptions(options).find((opt) => opt.value === value);
-      return option ? String(option.label) : String(value);
-    }
-    return formControlPlaceholder ?? "";
-  }, [multiple, value, options, renderLabel, formControlPlaceholder]);
-  useEffect(() => {
-    if (!measureSpanRef.current) return;
-    setMeasuredWidth(Math.ceil(measureSpanRef.current.offsetWidth) + 46);
-  }, [displayText]);
-  useEffect(() => {
-    if (focusTrigger > 0) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setTimeout(() => {
-            var _a;
-            (_a = inputRef.current) == null ? void 0 : _a.focus({ cursor: "end" });
-          }, 100);
-        });
-      });
-    }
-  }, [focusTrigger]);
-  const filteredOptions = useMemo(() => {
-    return filterOptions(options, searchValue);
-  }, [searchValue, options]);
-  const flatFilteredOptions = useMemo(() => {
-    return getAllOptions(filteredOptions);
-  }, [filteredOptions]);
-  const allFlatOptions = useMemo(() => {
-    return getAllOptions(options);
-  }, [options]);
-  const handleTagClose = (removedValue) => {
-    if (!multiple) return;
-    onChange(value.filter((x) => x !== removedValue));
-  };
-  const handleToggleAll = () => {
-    if (!multiple) return;
-    const allFilteredValues = getAllOptions(filteredOptions).map(
-      (opt) => opt.value
-    );
-    const someSelected = allFilteredValues.some((val) => value.includes(val));
-    if (someSelected) {
-      onChange(value.filter((val) => !allFilteredValues.includes(val)));
-    }
-  };
-  const handleSelectFirstOption = () => {
-    if (flatFilteredOptions.length === 0) return;
-    const firstOption = flatFilteredOptions[0];
-    if (!firstOption) return;
-    const optionValue = firstOption.value;
-    if (multiple) {
-      if (value.includes(optionValue)) {
-        onChange(value.filter((v) => v !== optionValue));
-      } else {
-        onChange([...value, optionValue]);
-      }
-    } else {
-      onChange(optionValue);
-      setIsOpen(false);
-    }
-  };
-  const handleOptionClick = (optionValue) => {
-    if (multiple) {
-      if (value.includes(optionValue)) {
-        onChange(value.filter((v) => v !== optionValue));
-      } else {
-        onChange([...value, optionValue]);
-      }
-    } else {
-      onChange(optionValue);
-      setIsOpen(false);
-    }
-  };
-  const handleKeyDown = (e) => {
-    const navigationKeys = ["ArrowUp", "ArrowDown"];
-    if (e.key === "Enter") {
-      e.preventDefault();
-      e.stopPropagation();
-      handleSelectFirstOption();
-      return;
-    }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsOpen(false);
-      return;
-    }
-    if (navigationKeys.includes(e.key)) {
-      e.preventDefault();
-      return;
-    }
-    e.stopPropagation();
-  };
-  const optionRender = (option) => {
-    if ("logo" in option.data && option.data.logo) {
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 shrink-0", children: option.data.logo }),
-        /* @__PURE__ */ jsx("span", { className: "overflow-ellipsis overflow-hidden", children: option.label })
-      ] });
-    }
-    return /* @__PURE__ */ jsx("div", { children: option.label });
-  };
-  const popupRender = (menu) => {
-    const valueToLabel = (val) => {
-      const option = allFlatOptions.find((opt) => opt.value === val);
-      return option ? option.label : val;
-    };
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-2 px-2 pb-2 border-b -mx-1 mt-1", children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          ref: inputRef,
-          autoFocus: true,
-          placeholder: searchPlaceholder || "Search...",
-          value: searchValue,
-          onChange: (e) => {
-            setSearchValue(e.target.value);
-            e.stopPropagation();
-            e.preventDefault();
-          },
-          onKeyDown: handleKeyDown,
-          onClick: (e) => e.stopPropagation(),
-          prefix: /* @__PURE__ */ jsx(
-            MagnifyingGlassIcon,
-            {
-              size: 16,
-              className: "text-j2-text-placeholder"
-            }
-          ),
-          allowClear: true
-        },
-        focusTrigger
-      ) }),
-      multiple && value.length > 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-1", children: value.map((value2) => /* @__PURE__ */ jsx(
-        Tag,
-        {
-          className: "opacity-100 z-10 flex max-w-full",
-          status: "default",
-          closable: true,
-          onClose: () => handleTagClose(value2),
-          children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "overflow-ellipsis overflow-hidden",
-              title: valueToLabel(value2),
-              children: valueToLabel(value2)
-            }
-          )
-        },
-        value2
-      )) }) }) : null,
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(styles.menuContainer, "rounded-lg", {
-            [styles.headlinedMenuContainer]: isHeadline,
-            [styles.menuContainerMultiple]: multiple
-          }),
-          children: menu
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center", children: multiple && /* @__PURE__ */ jsx("div", { className: "w-full mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-selected": "false",
-          className: cx(
-            "ant-select-item ant-select-item-option w-full",
-            styles.clearAllButton
-          ),
-          title: "Clear all",
-          onClick: handleToggleAll,
-          children: /* @__PURE__ */ jsx("div", { className: "ant-select-item-option-content text-center font-semibold", children: "Clear all" })
-        }
-      ) }) })
-    ] });
-  };
-  const handleOpenChange = (open) => {
-    setIsOpen(open);
-    if (open) {
-      setFocusTrigger((prev) => prev + 1);
-    } else {
-      setSearchValue("");
-    }
-  };
-  const renderDropdownOptionRow = (option) => {
-    const optionValue = option.value;
-    const isSelected = multiple ? value.includes(optionValue) : value === optionValue;
-    const hasLogo = "logo" in option && option.logo;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "option",
-        "aria-selected": isSelected,
-        onClick: () => handleOptionClick(optionValue),
-        className: cx(
-          "px-3 py-1.5 rounded cursor-pointer text-sm",
-          isSelected ? "bg-[var(--j2-color-primary)] text-white hover:bg-[var(--j2-color-primary)]" : "hover:bg-[var(--j2-color-bg-hover)]"
-        ),
-        children: hasLogo ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-4 shrink-0", children: option.logo }),
-          /* @__PURE__ */ jsx("span", { className: "overflow-hidden overflow-ellipsis", children: option.label })
-        ] }) : option.label
-      },
-      optionValue
-    );
-  };
-  const dropdownPopupRender = () => {
-    const valueToLabel = (val) => {
-      const option = allFlatOptions.find((opt) => opt.value === val);
-      return option ? option.label : val;
-    };
-    return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-md p-2 min-w-[240px]", children: [
-      /* @__PURE__ */ jsx("div", { className: "pb-2 border-b border-j2-border-secondary", children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          ref: inputRef,
-          autoFocus: true,
-          placeholder: searchPlaceholder || "Search...",
-          value: searchValue,
-          onChange: (e) => {
-            setSearchValue(e.target.value);
-            e.stopPropagation();
-          },
-          onKeyDown: handleKeyDown,
-          onClick: (e) => e.stopPropagation(),
-          prefix: /* @__PURE__ */ jsx(
-            MagnifyingGlassIcon,
-            {
-              size: 16,
-              className: "text-j2-text-placeholder"
-            }
-          ),
-          allowClear: true
-        },
-        focusTrigger
-      ) }),
-      multiple && value.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-1 pt-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-1", children: value.map((v) => /* @__PURE__ */ jsx(
-        Tag,
-        {
-          className: "opacity-100 z-10 flex max-w-full",
-          status: "default",
-          closable: true,
-          onClose: () => handleTagClose(v),
-          children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "overflow-ellipsis overflow-hidden",
-              title: valueToLabel(v),
-              children: valueToLabel(v)
-            }
-          )
-        },
-        v
-      )) }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "max-h-72 overflow-y-auto py-1",
-          role: "listbox",
-          "aria-multiselectable": multiple || void 0,
-          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--j2-color-text-secondary)]", children: "No options found" }) : filteredOptions.map((opt) => {
-            if (isGroupOption(opt)) {
-              return /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-[var(--j2-color-text-tertiary)]", children: opt.label }),
-                opt.options.map(renderDropdownOptionRow)
-              ] }, `group-${opt.label}`);
-            }
-            return renderDropdownOptionRow(opt);
-          })
-        }
-      ),
-      multiple && value.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "button",
-          "aria-label": "Clear all",
-          title: "Clear all",
-          onClick: handleToggleAll,
-          className: cx(
-            "text-center font-semibold text-sm py-1.5 rounded cursor-pointer",
-            styles.clearAllButton
-          ),
-          children: "Clear all"
-        }
-      ) })
-    ] });
-  };
-  if (trigger === "dropdown") {
-    const hasSelection = multiple ? value.length > 0 : Boolean(value);
-    const triggerContent = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-      hasSelection ? displayText : formControlPlaceholder ?? "Select",
-      loading ? /* @__PURE__ */ jsx(
-        Spin,
-        {
-          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
-          size: "small",
-          "data-testid": "loading-spinner"
-        }
-      ) : /* @__PURE__ */ jsx(CaretDownIcon, { weight: "regular", "data-testid": "caret-down" })
-    ] });
-    return /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        open: isOpen,
-        onOpenChange: handleOpenChange,
-        trigger: ["click"],
-        disabled: props.disabled,
-        popupRender: dropdownPopupRender,
-        children: /* @__PURE__ */ jsx(
-          Typography.Link,
-          {
-            disabled: props.disabled,
-            className: cx("inline-flex", rootClassName),
-            children: triggerContent
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref: measureSpanRef,
-        "aria-hidden": true,
-        style: {
-          position: "absolute",
-          visibility: "hidden",
-          whiteSpace: "nowrap",
-          fontSize: "inherit"
-        },
-        children: displayText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        open: isOpen,
-        showSearch: false,
-        style: { width: measuredWidth },
-        suffixIcon: loading ? /* @__PURE__ */ jsx(
-          Spin,
-          {
-            indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
-            size: "small",
-            "data-testid": "loading-spinner"
-          }
-        ) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
-        placeholder: formControlPlaceholder,
-        mode: multiple ? "multiple" : void 0,
-        value,
-        maxTagCount: 0,
-        maxTagPlaceholder: multiple ? () => renderLabel(value.length) : value,
-        options: filteredOptions,
-        onChange: (val) => {
-          if (multiple) {
-            if (Array.isArray(val)) {
-              onChange(val);
-            } else {
-              throw new Error("Value should be an array in multiple mode");
-            }
-          } else {
-            if (typeof val === "string") {
-              onChange(val);
-            } else {
-              throw new Error(
-                "Value should be a string in single selection mode"
-              );
-            }
-          }
-        },
-        popupRender,
-        optionRender,
-        onOpenChange: handleOpenChange,
-        classNames: {
-          root: cx(rootClassName, styles.summarizedSelect, {
-            [styles.hemisphericSelect]: variant !== "underlined" && variant !== "headlined",
-            [styles.isActive]: multiple && value.length > 0 && variant !== "underlined" && variant !== "headlined",
-            [styles.headlinedSelect]: isHeadline
-          }),
-          popup: { root: popupClassName }
-        },
-        variant: antVariant,
-        ...props
-      }
-    )
-  ] });
+function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading, multiple, value, onChange, options, renderLabel, rootClassName, popupClassName, variant, trigger = "select", defaultOpen = false, ...props }) {
+	const isHeadline = variant === "headlined";
+	const antVariant = isHeadline ? "borderless" : variant;
+	const [searchValue, setSearchValue] = useState("");
+	const [focusTrigger, setFocusTrigger] = useState(defaultOpen ? 1 : 0);
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const inputRef = useRef(null);
+	const measureSpanRef = useRef(null);
+	const [measuredWidth, setMeasuredWidth] = useState();
+	const displayText = useMemo(() => {
+		if (multiple && value.length > 0) return renderLabel(value.length);
+		if (!multiple && value) {
+			const option = getAllOptions(options).find((opt) => opt.value === value);
+			return option ? String(option.label) : String(value);
+		}
+		return formControlPlaceholder ?? "";
+	}, [
+		multiple,
+		value,
+		options,
+		renderLabel,
+		formControlPlaceholder
+	]);
+	useEffect(() => {
+		if (!measureSpanRef.current) return;
+		setMeasuredWidth(Math.ceil(measureSpanRef.current.offsetWidth) + 46);
+	}, [displayText]);
+	useEffect(() => {
+		if (focusTrigger > 0) requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				setTimeout(() => {
+					inputRef.current?.focus({ cursor: "end" });
+				}, 100);
+			});
+		});
+	}, [focusTrigger]);
+	const filteredOptions = useMemo(() => {
+		return filterOptions(options, searchValue);
+	}, [searchValue, options]);
+	const flatFilteredOptions = useMemo(() => {
+		return getAllOptions(filteredOptions);
+	}, [filteredOptions]);
+	const allFlatOptions = useMemo(() => {
+		return getAllOptions(options);
+	}, [options]);
+	const handleTagClose = (removedValue) => {
+		if (!multiple) return;
+		onChange(value.filter((x) => x !== removedValue));
+	};
+	const handleToggleAll = () => {
+		if (!multiple) return;
+		const allFilteredValues = getAllOptions(filteredOptions).map((opt) => opt.value);
+		if (allFilteredValues.some((val) => value.includes(val))) onChange(value.filter((val) => !allFilteredValues.includes(val)));
+	};
+	const handleSelectFirstOption = () => {
+		if (flatFilteredOptions.length === 0) return;
+		const firstOption = flatFilteredOptions[0];
+		if (!firstOption) return;
+		const optionValue = firstOption.value;
+		if (multiple) {
+			if (value.includes(optionValue)) onChange(value.filter((v) => v !== optionValue));
+			else onChange([...value, optionValue]);
+		} else {
+			onChange(optionValue);
+			handleOpenChange(false);
+		}
+	};
+	const handleOptionClick = (optionValue) => {
+		if (multiple) {
+			if (value.includes(optionValue)) onChange(value.filter((v) => v !== optionValue));
+			else onChange([...value, optionValue]);
+		} else {
+			onChange(optionValue);
+			handleOpenChange(false);
+		}
+	};
+	const handleKeyDown = (e) => {
+		const navigationKeys = ["ArrowUp", "ArrowDown"];
+		if (e.key === "Enter") {
+			e.preventDefault();
+			e.stopPropagation();
+			handleSelectFirstOption();
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			handleOpenChange(false);
+			return;
+		}
+		if (navigationKeys.includes(e.key)) {
+			e.preventDefault();
+			return;
+		}
+		e.stopPropagation();
+	};
+	const optionRender = (option) => {
+		if ("logo" in option.data && option.data.logo) return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "h-4 shrink-0",
+				children: option.data.logo
+			}), /* @__PURE__ */ jsx("span", {
+				className: "overflow-ellipsis overflow-hidden",
+				children: option.label
+			})]
+		});
+		return /* @__PURE__ */ jsx("div", { children: option.label });
+	};
+	const popupRender = (menu) => {
+		const valueToLabel = (val) => {
+			const option = allFlatOptions.find((opt) => opt.value === val);
+			return option ? option.label : val;
+		};
+		return /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-2 px-2 pb-2 border-b -mx-1 mt-1",
+				children: /* @__PURE__ */ jsx(Input, {
+					ref: inputRef,
+					autoFocus: true,
+					placeholder: searchPlaceholder || "Search...",
+					value: searchValue,
+					onChange: (e) => {
+						setSearchValue(e.target.value);
+						e.stopPropagation();
+						e.preventDefault();
+					},
+					onKeyDown: handleKeyDown,
+					onClick: (e) => e.stopPropagation(),
+					prefix: /* @__PURE__ */ jsx(icons_exports.MagnifyingGlassIcon, {
+						size: 16,
+						className: "text-j2-text-placeholder"
+					}),
+					allowClear: true
+				}, focusTrigger)
+			}),
+			multiple && value.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-2 pb-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-y-1",
+					children: value.map((value) => /* @__PURE__ */ jsx(Tag$1, {
+						className: "opacity-100 z-10 flex max-w-full",
+						status: "default",
+						closable: true,
+						onClose: () => handleTagClose(value),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "overflow-ellipsis overflow-hidden",
+							title: valueToLabel(value),
+							children: valueToLabel(value)
+						})
+					}, value))
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: cx(SummarizedSelect_module_default.menuContainer, "rounded-lg", {
+					[SummarizedSelect_module_default.headlinedMenuContainer]: isHeadline,
+					[SummarizedSelect_module_default.menuContainerMultiple]: multiple
+				}),
+				children: /* @__PURE__ */ jsx(Fragment, { children: menu }, searchValue)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex justify-between items-center",
+				children: multiple && /* @__PURE__ */ jsx("div", {
+					className: "w-full mt-1 pt-1 border-t border-j2-border-secondary",
+					children: /* @__PURE__ */ jsx("div", {
+						"aria-selected": "false",
+						className: cx("ant-select-item ant-select-item-option w-full", SummarizedSelect_module_default.clearAllButton),
+						title: "Clear all",
+						onClick: handleToggleAll,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "ant-select-item-option-content text-center font-semibold",
+							children: "Clear all"
+						})
+					})
+				})
+			})
+		] });
+	};
+	const handleOpenChange = (open) => {
+		setIsOpen(open);
+		if (open) setFocusTrigger((prev) => prev + 1);
+		else setSearchValue("");
+	};
+	const renderDropdownOptionRow = (option) => {
+		const optionValue = option.value;
+		const isSelected = multiple ? value.includes(optionValue) : value === optionValue;
+		const hasLogo = "logo" in option && option.logo;
+		return /* @__PURE__ */ jsx("div", {
+			role: "option",
+			"aria-selected": isSelected,
+			onClick: () => handleOptionClick(optionValue),
+			className: cx("px-3 py-1.5 rounded cursor-pointer text-sm", isSelected ? "bg-[var(--j2-color-primary)] text-white hover:bg-[var(--j2-color-primary)]" : "hover:bg-[var(--j2-color-bg-hover)]"),
+			children: hasLogo ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "h-4 shrink-0",
+					children: option.logo
+				}), /* @__PURE__ */ jsx("span", {
+					className: "overflow-hidden overflow-ellipsis",
+					children: option.label
+				})]
+			}) : option.label
+		}, optionValue);
+	};
+	const dropdownPopupRender = () => {
+		const valueToLabel = (val) => {
+			const option = allFlatOptions.find((opt) => opt.value === val);
+			return option ? option.label : val;
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "bg-white rounded-lg shadow-md p-2 min-w-[240px]",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "pb-2 border-b border-j2-border-secondary",
+					children: /* @__PURE__ */ jsx(Input, {
+						ref: inputRef,
+						autoFocus: true,
+						placeholder: searchPlaceholder || "Search...",
+						value: searchValue,
+						onChange: (e) => {
+							setSearchValue(e.target.value);
+							e.stopPropagation();
+						},
+						onKeyDown: handleKeyDown,
+						onClick: (e) => e.stopPropagation(),
+						prefix: /* @__PURE__ */ jsx(icons_exports.MagnifyingGlassIcon, {
+							size: 16,
+							className: "text-j2-text-placeholder"
+						}),
+						allowClear: true
+					}, focusTrigger)
+				}),
+				multiple && value.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "px-1 pt-2",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-y-1",
+						children: value.map((v) => /* @__PURE__ */ jsx(Tag$1, {
+							className: "opacity-100 z-10 flex max-w-full",
+							status: "default",
+							closable: true,
+							onClose: () => handleTagClose(v),
+							children: /* @__PURE__ */ jsx("span", {
+								className: "overflow-ellipsis overflow-hidden",
+								title: valueToLabel(v),
+								children: valueToLabel(v)
+							})
+						}, v))
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "max-h-72 overflow-y-auto py-1",
+					role: "listbox",
+					"aria-multiselectable": multiple || void 0,
+					children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-2 text-sm text-[var(--j2-color-text-secondary)]",
+						children: "No options found"
+					}) : filteredOptions.map((opt) => {
+						if (isGroupOption(opt)) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+							className: "px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-[var(--j2-color-text-tertiary)]",
+							children: opt.label
+						}), opt.options.map(renderDropdownOptionRow)] }, `group-${opt.label}`);
+						return renderDropdownOptionRow(opt);
+					})
+				}),
+				multiple && value.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-1 pt-1 border-t border-j2-border-secondary",
+					children: /* @__PURE__ */ jsx("div", {
+						role: "button",
+						"aria-label": "Clear all",
+						title: "Clear all",
+						onClick: handleToggleAll,
+						className: cx("text-center font-semibold text-sm py-1.5 rounded cursor-pointer", SummarizedSelect_module_default.clearAllButton),
+						children: "Clear all"
+					})
+				})
+			]
+		});
+	};
+	if (trigger === "dropdown") {
+		const hasSelection = multiple ? value.length > 0 : Boolean(value);
+		const triggerContent = /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1",
+			children: [hasSelection ? displayText : formControlPlaceholder ?? "Select", loading ? /* @__PURE__ */ jsx(Spin, {
+				indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+				size: "small",
+				"data-testid": "loading-spinner"
+			}) : /* @__PURE__ */ jsx(icons_exports.CaretDownIcon, {
+				weight: "regular",
+				"data-testid": "caret-down"
+			})]
+		});
+		return /* @__PURE__ */ jsx(Dropdown, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			trigger: ["click"],
+			disabled: props.disabled,
+			popupRender: dropdownPopupRender,
+			children: /* @__PURE__ */ jsx(Typography.Link, {
+				disabled: props.disabled,
+				className: cx("inline-flex", rootClassName),
+				children: triggerContent
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: measureSpanRef,
+		"aria-hidden": true,
+		style: {
+			position: "absolute",
+			visibility: "hidden",
+			whiteSpace: "nowrap",
+			fontSize: "inherit"
+		},
+		children: displayText
+	}), /* @__PURE__ */ jsx(Select, {
+		open: isOpen,
+		showSearch: false,
+		style: { width: measuredWidth },
+		suffixIcon: loading ? /* @__PURE__ */ jsx(Spin, {
+			indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+			size: "small",
+			"data-testid": "loading-spinner"
+		}) : /* @__PURE__ */ jsx(icons_exports.CaretDownIcon, {
+			size: 14,
+			"data-testid": "caret-down"
+		}),
+		placeholder: formControlPlaceholder,
+		mode: multiple ? "multiple" : void 0,
+		value,
+		maxTagCount: 0,
+		maxTagPlaceholder: multiple ? () => renderLabel(value.length) : value,
+		options: filteredOptions,
+		onChange: (val) => {
+			if (multiple) {
+				if (Array.isArray(val)) onChange(val);
+				else throw new Error("Value should be an array in multiple mode");
+			} else if (typeof val === "string") onChange(val);
+			else throw new Error("Value should be a string in single selection mode");
+		},
+		popupRender,
+		optionRender,
+		onOpenChange: handleOpenChange,
+		classNames: {
+			root: cx(rootClassName, SummarizedSelect_module_default.summarizedSelect, {
+				[SummarizedSelect_module_default.hemisphericSelect]: variant !== "underlined" && variant !== "headlined",
+				[SummarizedSelect_module_default.isActive]: multiple && value.length > 0 && variant !== "underlined" && variant !== "headlined",
+				[SummarizedSelect_module_default.headlinedSelect]: isHeadline
+			}),
+			popup: { root: popupClassName }
+		},
+		variant: antVariant,
+		...props
+	})] });
 }
-export {
-  SummarizedSelect
-};
-//# sourceMappingURL=SummarizedSelect.js.map
+//#endregion
+export { SummarizedSelect };
+
+//# sourceMappingURL=SummarizedSelect.js.map