@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/components/Dropdown/Dropdown.cjs

@@ -1,255 +1,237 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ChevronDown = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-down");
-const CheckIcon = require("@vector-im/compound-design-tokens/assets/web/icons/check");
-const ErrorIcon = require("@vector-im/compound-design-tokens/assets/web/icons/error-solid");
-const React = require("react");
-const classNames = require("classnames");
-const Dropdown_module = require("./Dropdown.module.css.cjs");
-const react = require("@floating-ui/react");
-const Dropdown = React.forwardRef(
-  function Dropdown2({
-    className,
-    label,
-    placeholder,
-    helpLabel,
-    onValueChange,
-    error,
-    value: controlledValue,
-    defaultValue,
-    values,
-    ...props
-  }, ref) {
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
-    const value = controlledValue ?? uncontrolledValue;
-    const text = React.useMemo(
-      () => value === void 0 ? placeholder : values.find(([v]) => v === value)?.[1] ?? placeholder,
-      [value, values, placeholder]
-    );
-    const setValue = React.useCallback(
-      (value2) => {
-        setUncontrolledValue(value2);
-        onValueChange?.(value2);
-      },
-      [setUncontrolledValue, onValueChange]
-    );
-    const [open, setOpen, dropdownRef] = useOpen();
-    const { listRef, onComboboxKeyDown, onOptionKeyDown } = useKeyboardShortcut(
-      open,
-      setOpen,
-      setValue
-    );
-    const buttonRef = React.useRef(null);
-    React.useEffect(() => {
-      if (value !== void 0) buttonRef.current?.focus();
-    }, [value]);
-    const hasPlaceholder = text === placeholder;
-    const buttonClasses = classNames({
-      [Dropdown_module.default.placeholder]: hasPlaceholder
-    });
-    const borderClasses = classNames(Dropdown_module.default.border, {
-      [Dropdown_module.default.open]: open
-    });
-    const contentClasses = classNames(Dropdown_module.default.content, {
-      [Dropdown_module.default.open]: open
-    });
-    const labelId = react.useId();
-    const contentId = react.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: dropdownRef,
-        className: classNames(className, Dropdown_module.default.container),
-        "aria-invalid": Boolean(error),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { id: labelId, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              className: buttonClasses,
-              role: "combobox",
-              "aria-haspopup": "listbox",
-              "aria-labelledby": labelId,
-              "aria-controls": contentId,
-              "aria-expanded": open,
-              ref: (element) => {
-                buttonRef.current = element;
-                if (typeof ref === "function") {
-                  ref(element);
-                } else if (ref) {
-                  ref.current = element;
-                }
-              },
-              onClick: () => setOpen((_open) => !_open),
-              onKeyDown: onComboboxKeyDown,
-              ...props,
-              children: [
-                text,
-                /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { width: "24", height: "24" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: borderClasses }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "ul",
-            {
-              ref: listRef,
-              id: contentId,
-              role: "listbox",
-              className: Dropdown_module.default.content,
-              children: values.map(([v, text2]) => /* @__PURE__ */ jsxRuntime.jsx(
-                DropdownItem,
-                {
-                  isDisplayed: open,
-                  isSelected: value === v,
-                  onClick: () => {
-                    setOpen(false);
-                    setValue(v);
-                  },
-                  onKeyDown: (e) => onOptionKeyDown(e, v),
-                  children: text2
-                },
-                v
-              ))
-            }
-          ) }),
-          !error && helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Dropdown_module.default.help, children: helpLabel }),
-          error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Dropdown_module.default.error, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { width: "20", height: "20" }),
-            error
-          ] })
-        ]
-      }
-    );
-  }
-);
-const DropdownItem = React.memo(function DropdownItem2({
-  children,
-  isSelected,
-  isDisplayed,
-  ...props
-}) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (isSelected && isDisplayed) {
-      ref.current?.focus();
-    }
-  }, [isSelected, isDisplayed]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "li",
-    {
-      tabIndex: 0,
-      role: "option",
-      ref,
-      "aria-selected": isSelected,
-      ...props,
-      children: [
-        children,
-        " ",
-        isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { width: "20", height: "20" })
-      ]
-    }
-  );
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Dropdown_module = require("./Dropdown.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _vector_im_compound_design_tokens_assets_web_icons_error_solid = require("@vector-im/compound-design-tokens/assets/web/icons/error-solid");
+_vector_im_compound_design_tokens_assets_web_icons_error_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_error_solid);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+let _vector_im_compound_design_tokens_assets_web_icons_check = require("@vector-im/compound-design-tokens/assets/web/icons/check");
+_vector_im_compound_design_tokens_assets_web_icons_check = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check);
+let _vector_im_compound_design_tokens_assets_web_icons_chevron_down = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-down");
+_vector_im_compound_design_tokens_assets_web_icons_chevron_down = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_chevron_down);
+//#region src/components/Dropdown/Dropdown.tsx
+/**
+* The dropdown content.
+*/
+var Dropdown = (0, react.forwardRef)(function Dropdown({ className, label, placeholder, helpLabel, onValueChange, error, value: controlledValue, defaultValue, values, ...props }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	const text = (0, react.useMemo)(() => value === void 0 ? placeholder : values.find(([v]) => v === value)?.[1] ?? placeholder, [
+		value,
+		values,
+		placeholder
+	]);
+	const setValue = (0, react.useCallback)((value) => {
+		setUncontrolledValue(value);
+		onValueChange?.(value);
+	}, [setUncontrolledValue, onValueChange]);
+	const [open, setOpen, dropdownRef] = useOpen();
+	const { listRef, onComboboxKeyDown, onOptionKeyDown } = useKeyboardShortcut(open, setOpen, setValue);
+	const buttonRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (value !== void 0) buttonRef.current?.focus();
+	}, [value]);
+	const hasPlaceholder = text === placeholder;
+	const buttonClasses = (0, classnames.default)({ [require_Dropdown_module.default.placeholder]: hasPlaceholder });
+	const borderClasses = (0, classnames.default)(require_Dropdown_module.default.border, { [require_Dropdown_module.default.open]: open });
+	const contentClasses = (0, classnames.default)(require_Dropdown_module.default.content, { [require_Dropdown_module.default.open]: open });
+	/**
+	* Ids for accessibility.
+	*/
+	const labelId = (0, _floating_ui_react.useId)();
+	const contentId = (0, _floating_ui_react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: dropdownRef,
+		className: (0, classnames.default)(className, require_Dropdown_module.default.container),
+		"aria-invalid": Boolean(error),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				id: labelId,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				className: buttonClasses,
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-labelledby": labelId,
+				"aria-controls": contentId,
+				"aria-expanded": open,
+				ref: (element) => {
+					buttonRef.current = element;
+					if (typeof ref === "function") ref(element);
+					else if (ref) ref.current = element;
+				},
+				onClick: () => setOpen((_open) => !_open),
+				onKeyDown: onComboboxKeyDown,
+				...props,
+				children: [text, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_chevron_down.default, {
+					width: "24",
+					height: "24"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: borderClasses }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: contentClasses,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					ref: listRef,
+					id: contentId,
+					role: "listbox",
+					className: require_Dropdown_module.default.content,
+					children: values.map(([v, text]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownItem, {
+						isDisplayed: open,
+						isSelected: value === v,
+						onClick: () => {
+							setOpen(false);
+							setValue(v);
+						},
+						onKeyDown: (e) => onOptionKeyDown(e, v),
+						children: text
+					}, v))
+				})
+			}),
+			!error && helpLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_Dropdown_module.default.help,
+				children: helpLabel
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: require_Dropdown_module.default.error,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_error_solid.default, {
+					width: "20",
+					height: "20"
+				}), error]
+			})
+		]
+	});
 });
+/**
+* A dropdown item component.
+*/
+var DropdownItem = (0, react.memo)(function DropdownItem({ children, isSelected, isDisplayed, ...props }) {
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (isSelected && isDisplayed) ref.current?.focus();
+	}, [isSelected, isDisplayed]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		tabIndex: 0,
+		role: "option",
+		ref,
+		"aria-selected": isSelected,
+		...props,
+		children: [
+			children,
+			" ",
+			isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_check.default, {
+				width: "20",
+				height: "20"
+			})
+		]
+	});
+});
+/**
+* A hook to manage the open state of the dropdown.
+*/
 function useOpen() {
-  const [open, setOpen] = React.useState(false);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    const closeIfOutside = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("click", closeIfOutside);
-    return () => document.removeEventListener("click", closeIfOutside);
-  }, [setOpen]);
-  return [open, setOpen, ref];
+	const [open, setOpen] = (0, react.useState)(false);
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const closeIfOutside = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("click", closeIfOutside);
+		return () => document.removeEventListener("click", closeIfOutside);
+	}, [setOpen]);
+	return [
+		open,
+		setOpen,
+		ref
+	];
 }
+/**
+* A hook to manage the keyboard shortcuts of the dropdown.
+* @param open - the dropdown open state.
+* @param setOpen - the dropdown open state setter.
+* @param setValue - set the selected value and text
+*/
 function useKeyboardShortcut(open, setOpen, setValue) {
-  const listRef = React.useRef(null);
-  const onComboboxKeyDown = React.useCallback(
-    ({ key }) => {
-      switch (key) {
-        // Enter and Space already managed because it's a button
-        case "Escape":
-          setOpen(false);
-          break;
-        case "ArrowDown":
-          setOpen(true);
-          if (open) {
-            listRef.current?.firstElementChild?.focus();
-          }
-          break;
-        case "ArrowUp":
-          setOpen(true);
-          break;
-        case "Home": {
-          setOpen(true);
-          Promise.resolve().then(() => {
-            listRef.current?.firstElementChild?.focus();
-          });
-          break;
-        }
-        case "End": {
-          setOpen(true);
-          Promise.resolve().then(() => {
-            listRef.current?.lastElementChild?.focus();
-          });
-          break;
-        }
-      }
-    },
-    [listRef, open, setOpen]
-  );
-  const onOptionKeyDown = React.useCallback(
-    (evt, value) => {
-      const { key, altKey } = evt;
-      evt.stopPropagation();
-      evt.preventDefault();
-      switch (key) {
-        case "Enter":
-        case " ": {
-          setValue(value);
-          setOpen(false);
-          break;
-        }
-        case "Tab":
-        case "Escape":
-          setOpen(false);
-          break;
-        case "ArrowDown": {
-          const currentFocus = document.activeElement;
-          if (listRef.current?.contains(currentFocus) && currentFocus) {
-            currentFocus.nextElementSibling?.focus();
-          }
-          break;
-        }
-        case "ArrowUp": {
-          if (altKey) {
-            setValue(value);
-            setOpen(false);
-          } else {
-            const currentFocus = document.activeElement;
-            if (listRef.current?.contains(currentFocus) && currentFocus) {
-              currentFocus.previousElementSibling?.focus();
-            }
-          }
-          break;
-        }
-        case "Home": {
-          listRef.current?.firstElementChild?.focus();
-          break;
-        }
-        case "End": {
-          listRef.current?.lastElementChild?.focus();
-          break;
-        }
-      }
-    },
-    [listRef, setValue, setOpen]
-  );
-  return { listRef, onComboboxKeyDown, onOptionKeyDown };
+	const listRef = (0, react.useRef)(null);
+	return {
+		listRef,
+		onComboboxKeyDown: (0, react.useCallback)(({ key }) => {
+			switch (key) {
+				case "Escape":
+					setOpen(false);
+					break;
+				case "ArrowDown":
+					setOpen(true);
+					if (open) (listRef.current?.firstElementChild)?.focus();
+					break;
+				case "ArrowUp":
+					setOpen(true);
+					break;
+				case "Home":
+					setOpen(true);
+					Promise.resolve().then(() => {
+						(listRef.current?.firstElementChild)?.focus();
+					});
+					break;
+				case "End":
+					setOpen(true);
+					Promise.resolve().then(() => {
+						(listRef.current?.lastElementChild)?.focus();
+					});
+					break;
+			}
+		}, [
+			listRef,
+			open,
+			setOpen
+		]),
+		onOptionKeyDown: (0, react.useCallback)((evt, value) => {
+			const { key, altKey } = evt;
+			evt.stopPropagation();
+			evt.preventDefault();
+			switch (key) {
+				case "Enter":
+				case " ":
+					setValue(value);
+					setOpen(false);
+					break;
+				case "Tab":
+				case "Escape":
+					setOpen(false);
+					break;
+				case "ArrowDown": {
+					const currentFocus = document.activeElement;
+					if (listRef.current?.contains(currentFocus) && currentFocus) currentFocus.nextElementSibling?.focus();
+					break;
+				}
+				case "ArrowUp":
+					if (altKey) {
+						setValue(value);
+						setOpen(false);
+					} else {
+						const currentFocus = document.activeElement;
+						if (listRef.current?.contains(currentFocus) && currentFocus) currentFocus.previousElementSibling?.focus();
+					}
+					break;
+				case "Home":
+					(listRef.current?.firstElementChild)?.focus();
+					break;
+				case "End":
+					(listRef.current?.lastElementChild)?.focus();
+					break;
+			}
+		}, [
+			listRef,
+			setValue,
+			setOpen
+		])
+	};
 }
+//#endregion
 exports.Dropdown = Dropdown;
-//# sourceMappingURL=Dropdown.cjs.map
+
+//# sourceMappingURL=Dropdown.cjs.map

package/dist/components/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport ChevronDown from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-down\";\nimport Check from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport Error from \"@vector-im/compound-design-tokens/assets/web/icons/error-solid\";\n\nimport React, {\n  type Dispatch,\n  forwardRef,\n  type HTMLProps,\n  memo,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  useMemo,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport styles from \"./Dropdown.module.css\";\nimport { useId } from \"@floating-ui/react\";\n\ntype DropdownProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The controlled value of the dropdown.\n   */\n  value?: string;\n  /**\n   * The default value of the dropdown, used when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * The values of the dropdown.\n   * [value, text]\n   */\n  values: [string, string][];\n  /**\n   * The placeholder text.\n   */\n  placeholder: string;\n  /**\n   * The label to display at the top of the dropdown\n   */\n  label: string;\n  /**\n   * The help label to display at the bottom of the dropdown\n   */\n  helpLabel?: string;\n  /**\n   * Callback for when the value changes.\n   * @param value\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The error message to display.\n   */\n  error?: string;\n};\n\n/**\n * The dropdown content.\n */\nexport const Dropdown = forwardRef<HTMLButtonElement, DropdownProps>(\n  function Dropdown(\n    {\n      className,\n      label,\n      placeholder,\n      helpLabel,\n      onValueChange,\n      error,\n      value: controlledValue,\n      defaultValue,\n      values,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const value = controlledValue ?? uncontrolledValue;\n    const text = useMemo(\n      () =>\n        value === undefined\n          ? placeholder\n          : (values.find(([v]) => v === value)?.[1] ?? placeholder),\n      [value, values, placeholder],\n    );\n\n    const setValue = useCallback(\n      (value: string) => {\n        setUncontrolledValue(value);\n        onValueChange?.(value);\n      },\n      [setUncontrolledValue, onValueChange],\n    );\n\n    const [open, setOpen, dropdownRef] = useOpen();\n    const { listRef, onComboboxKeyDown, onOptionKeyDown } = useKeyboardShortcut(\n      open,\n      setOpen,\n      setValue,\n    );\n\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    useEffect(() => {\n      // Focus the button when the value is set\n      // Test if the value is undefined to avoid focusing on the first render\n      if (value !== undefined) buttonRef.current?.focus();\n    }, [value]);\n\n    const hasPlaceholder = text === placeholder;\n    const buttonClasses = classNames({\n      [styles.placeholder]: hasPlaceholder,\n    });\n    const borderClasses = classNames(styles.border, {\n      [styles.open]: open,\n    });\n    const contentClasses = classNames(styles.content, {\n      [styles.open]: open,\n    });\n\n    /**\n     * Ids for accessibility.\n     */\n    const labelId = useId();\n    const contentId = useId();\n\n    return (\n      <div\n        ref={dropdownRef}\n        className={classNames(className, styles.container)}\n        aria-invalid={Boolean(error)}\n      >\n        <label id={labelId}>{label}</label>\n        <button\n          className={buttonClasses}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-labelledby={labelId}\n          aria-controls={contentId}\n          aria-expanded={open}\n          ref={(element) => {\n            // Private ref to focus the button\n            buttonRef.current = element;\n            // Handle forwarded ref\n            if (typeof ref === \"function\") {\n              ref(element);\n            } else if (ref) {\n              ref.current = element;\n            }\n          }}\n          onClick={() => setOpen((_open) => !_open)}\n          onKeyDown={onComboboxKeyDown}\n          {...props}\n        >\n          {text}\n          <ChevronDown width=\"24\" height=\"24\" />\n        </button>\n        <div className={borderClasses} />\n        <div className={contentClasses}>\n          <ul\n            ref={listRef}\n            id={contentId}\n            role=\"listbox\"\n            className={styles.content}\n          >\n            {values.map(([v, text]) => (\n              <DropdownItem\n                key={v}\n                isDisplayed={open}\n                isSelected={value === v}\n                onClick={() => {\n                  setOpen(false);\n                  setValue(v);\n                }}\n                onKeyDown={(e) => onOptionKeyDown(e, v)}\n              >\n                {text}\n              </DropdownItem>\n            ))}\n          </ul>\n        </div>\n        {!error && helpLabel && (\n          <span className={styles.help}>{helpLabel}</span>\n        )}\n        {error && (\n          <span className={styles.error}>\n            <Error width=\"20\" height=\"20\" />\n            {error}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\ntype DropdownItemProps = HTMLProps<HTMLLIElement> & {\n  /**\n   * Whether the dropdown item is selected.\n   */\n  isSelected: boolean;\n  /**\n   * Whether the dropdown item is displayed.\n   */\n  isDisplayed: boolean;\n  /**\n   * The text to display in the dropdown item.\n   */\n  children: string;\n};\n\n/**\n * A dropdown item component.\n */\nconst DropdownItem = memo(function DropdownItem({\n  children,\n  isSelected,\n  isDisplayed,\n  ...props\n}: DropdownItemProps) {\n  const ref = useRef<HTMLLIElement>(null);\n\n  // Focus the item if the dropdown is open and the item is already selected\n  useEffect(() => {\n    if (isSelected && isDisplayed) {\n      ref.current?.focus();\n    }\n  }, [isSelected, isDisplayed]);\n\n  return (\n    <li\n      tabIndex={0}\n      role=\"option\"\n      ref={ref}\n      aria-selected={isSelected}\n      {...props}\n    >\n      {children} {isSelected && <Check width=\"20\" height=\"20\" />}\n    </li>\n  );\n});\n\n/**\n * A hook to manage the open state of the dropdown.\n */\nfunction useOpen(): [\n  boolean,\n  Dispatch<SetStateAction<boolean>>,\n  RefObject<HTMLDivElement | null>,\n] {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  // If the user clicks outside the dropdown, close it\n  useEffect(() => {\n    const closeIfOutside = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"click\", closeIfOutside);\n    return () => document.removeEventListener(\"click\", closeIfOutside);\n  }, [setOpen]);\n\n  return [open, setOpen, ref];\n}\n\n/**\n * A hook to manage the keyboard shortcuts of the dropdown.\n * @param open - the dropdown open state.\n * @param setOpen - the dropdown open state setter.\n * @param setValue - set the selected value and text\n */\nfunction useKeyboardShortcut(\n  open: boolean,\n  setOpen: Dispatch<SetStateAction<boolean>>,\n  setValue: (value: string) => void,\n) {\n  const listRef = useRef<HTMLUListElement>(null);\n  const onComboboxKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      switch (key) {\n        // Enter and Space already managed because it's a button\n        case \"Escape\":\n          setOpen(false);\n          break;\n        case \"ArrowDown\":\n          setOpen(true);\n          // If open, focus the first element\n          if (open) {\n            (listRef.current?.firstElementChild as HTMLElement)?.focus();\n          }\n          break;\n        case \"ArrowUp\":\n          setOpen(true);\n          break;\n        case \"Home\": {\n          setOpen(true);\n          // Wait for the dropdown to be opened\n          Promise.resolve().then(() => {\n            (listRef.current?.firstElementChild as HTMLElement)?.focus();\n          });\n          break;\n        }\n        case \"End\": {\n          setOpen(true);\n          // Wait for the dropdown to be opened\n          Promise.resolve().then(() => {\n            (listRef.current?.lastElementChild as HTMLElement)?.focus();\n          });\n          break;\n        }\n      }\n    },\n    [listRef, open, setOpen],\n  );\n\n  const onOptionKeyDown = useCallback(\n    (evt: KeyboardEvent, value: string) => {\n      const { key, altKey } = evt;\n      evt.stopPropagation();\n      evt.preventDefault();\n\n      switch (key) {\n        case \"Enter\":\n        case \" \": {\n          setValue(value);\n          setOpen(false);\n          break;\n        }\n        case \"Tab\":\n        case \"Escape\":\n          setOpen(false);\n          break;\n        case \"ArrowDown\": {\n          const currentFocus = document.activeElement;\n          if (listRef.current?.contains(currentFocus) && currentFocus) {\n            (currentFocus.nextElementSibling as HTMLElement)?.focus();\n          }\n          break;\n        }\n        case \"ArrowUp\": {\n          if (altKey) {\n            setValue(value);\n            setOpen(false);\n          } else {\n            const currentFocus = document.activeElement;\n            if (listRef.current?.contains(currentFocus) && currentFocus) {\n              (currentFocus.previousElementSibling as HTMLElement)?.focus();\n            }\n          }\n          break;\n        }\n        case \"Home\": {\n          (listRef.current?.firstElementChild as HTMLElement)?.focus();\n          break;\n        }\n        case \"End\": {\n          (listRef.current?.lastElementChild as HTMLElement)?.focus();\n          break;\n        }\n      }\n    },\n    [listRef, setValue, setOpen],\n  );\n\n  return { listRef, onComboboxKeyDown, onOptionKeyDown };\n}\n"],"names":["forwardRef","Dropdown","useState","useMemo","useCallback","value","useRef","useEffect","styles","useId","jsxs","jsx","text","Error","memo","DropdownItem","Check"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport ChevronDown from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-down\";\nimport Check from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport Error from \"@vector-im/compound-design-tokens/assets/web/icons/error-solid\";\n\nimport React, {\n  type Dispatch,\n  forwardRef,\n  type HTMLProps,\n  memo,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  useMemo,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport styles from \"./Dropdown.module.css\";\nimport { useId } from \"@floating-ui/react\";\n\ntype DropdownProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The controlled value of the dropdown.\n   */\n  value?: string;\n  /**\n   * The default value of the dropdown, used when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * The values of the dropdown.\n   * [value, text]\n   */\n  values: [string, string][];\n  /**\n   * The placeholder text.\n   */\n  placeholder: string;\n  /**\n   * The label to display at the top of the dropdown\n   */\n  label: string;\n  /**\n   * The help label to display at the bottom of the dropdown\n   */\n  helpLabel?: string;\n  /**\n   * Callback for when the value changes.\n   * @param value\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The error message to display.\n   */\n  error?: string;\n};\n\n/**\n * The dropdown content.\n */\nexport const Dropdown = forwardRef<HTMLButtonElement, DropdownProps>(\n  function Dropdown(\n    {\n      className,\n      label,\n      placeholder,\n      helpLabel,\n      onValueChange,\n      error,\n      value: controlledValue,\n      defaultValue,\n      values,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const value = controlledValue ?? uncontrolledValue;\n    const text = useMemo(\n      () =>\n        value === undefined\n          ? placeholder\n          : (values.find(([v]) => v === value)?.[1] ?? placeholder),\n      [value, values, placeholder],\n    );\n\n    const setValue = useCallback(\n      (value: string) => {\n        setUncontrolledValue(value);\n        onValueChange?.(value);\n      },\n      [setUncontrolledValue, onValueChange],\n    );\n\n    const [open, setOpen, dropdownRef] = useOpen();\n    const { listRef, onComboboxKeyDown, onOptionKeyDown } = useKeyboardShortcut(\n      open,\n      setOpen,\n      setValue,\n    );\n\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    useEffect(() => {\n      // Focus the button when the value is set\n      // Test if the value is undefined to avoid focusing on the first render\n      if (value !== undefined) buttonRef.current?.focus();\n    }, [value]);\n\n    const hasPlaceholder = text === placeholder;\n    const buttonClasses = classNames({\n      [styles.placeholder]: hasPlaceholder,\n    });\n    const borderClasses = classNames(styles.border, {\n      [styles.open]: open,\n    });\n    const contentClasses = classNames(styles.content, {\n      [styles.open]: open,\n    });\n\n    /**\n     * Ids for accessibility.\n     */\n    const labelId = useId();\n    const contentId = useId();\n\n    return (\n      <div\n        ref={dropdownRef}\n        className={classNames(className, styles.container)}\n        aria-invalid={Boolean(error)}\n      >\n        <label id={labelId}>{label}</label>\n        <button\n          className={buttonClasses}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-labelledby={labelId}\n          aria-controls={contentId}\n          aria-expanded={open}\n          ref={(element) => {\n            // Private ref to focus the button\n            buttonRef.current = element;\n            // Handle forwarded ref\n            if (typeof ref === \"function\") {\n              ref(element);\n            } else if (ref) {\n              ref.current = element;\n            }\n          }}\n          onClick={() => setOpen((_open) => !_open)}\n          onKeyDown={onComboboxKeyDown}\n          {...props}\n        >\n          {text}\n          <ChevronDown width=\"24\" height=\"24\" />\n        </button>\n        <div className={borderClasses} />\n        <div className={contentClasses}>\n          <ul\n            ref={listRef}\n            id={contentId}\n            role=\"listbox\"\n            className={styles.content}\n          >\n            {values.map(([v, text]) => (\n              <DropdownItem\n                key={v}\n                isDisplayed={open}\n                isSelected={value === v}\n                onClick={() => {\n                  setOpen(false);\n                  setValue(v);\n                }}\n                onKeyDown={(e) => onOptionKeyDown(e, v)}\n              >\n                {text}\n              </DropdownItem>\n            ))}\n          </ul>\n        </div>\n        {!error && helpLabel && (\n          <span className={styles.help}>{helpLabel}</span>\n        )}\n        {error && (\n          <span className={styles.error}>\n            <Error width=\"20\" height=\"20\" />\n            {error}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\ntype DropdownItemProps = HTMLProps<HTMLLIElement> & {\n  /**\n   * Whether the dropdown item is selected.\n   */\n  isSelected: boolean;\n  /**\n   * Whether the dropdown item is displayed.\n   */\n  isDisplayed: boolean;\n  /**\n   * The text to display in the dropdown item.\n   */\n  children: string;\n};\n\n/**\n * A dropdown item component.\n */\nconst DropdownItem = memo(function DropdownItem({\n  children,\n  isSelected,\n  isDisplayed,\n  ...props\n}: DropdownItemProps) {\n  const ref = useRef<HTMLLIElement>(null);\n\n  // Focus the item if the dropdown is open and the item is already selected\n  useEffect(() => {\n    if (isSelected && isDisplayed) {\n      ref.current?.focus();\n    }\n  }, [isSelected, isDisplayed]);\n\n  return (\n    <li\n      tabIndex={0}\n      role=\"option\"\n      ref={ref}\n      aria-selected={isSelected}\n      {...props}\n    >\n      {children} {isSelected && <Check width=\"20\" height=\"20\" />}\n    </li>\n  );\n});\n\n/**\n * A hook to manage the open state of the dropdown.\n */\nfunction useOpen(): [\n  boolean,\n  Dispatch<SetStateAction<boolean>>,\n  RefObject<HTMLDivElement | null>,\n] {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  // If the user clicks outside the dropdown, close it\n  useEffect(() => {\n    const closeIfOutside = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"click\", closeIfOutside);\n    return () => document.removeEventListener(\"click\", closeIfOutside);\n  }, [setOpen]);\n\n  return [open, setOpen, ref];\n}\n\n/**\n * A hook to manage the keyboard shortcuts of the dropdown.\n * @param open - the dropdown open state.\n * @param setOpen - the dropdown open state setter.\n * @param setValue - set the selected value and text\n */\nfunction useKeyboardShortcut(\n  open: boolean,\n  setOpen: Dispatch<SetStateAction<boolean>>,\n  setValue: (value: string) => void,\n) {\n  const listRef = useRef<HTMLUListElement>(null);\n  const onComboboxKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      switch (key) {\n        // Enter and Space already managed because it's a button\n        case \"Escape\":\n          setOpen(false);\n          break;\n        case \"ArrowDown\":\n          setOpen(true);\n          // If open, focus the first element\n          if (open) {\n            (listRef.current?.firstElementChild as HTMLElement)?.focus();\n          }\n          break;\n        case \"ArrowUp\":\n          setOpen(true);\n          break;\n        case \"Home\": {\n          setOpen(true);\n          // Wait for the dropdown to be opened\n          Promise.resolve().then(() => {\n            (listRef.current?.firstElementChild as HTMLElement)?.focus();\n          });\n          break;\n        }\n        case \"End\": {\n          setOpen(true);\n          // Wait for the dropdown to be opened\n          Promise.resolve().then(() => {\n            (listRef.current?.lastElementChild as HTMLElement)?.focus();\n          });\n          break;\n        }\n      }\n    },\n    [listRef, open, setOpen],\n  );\n\n  const onOptionKeyDown = useCallback(\n    (evt: KeyboardEvent, value: string) => {\n      const { key, altKey } = evt;\n      evt.stopPropagation();\n      evt.preventDefault();\n\n      switch (key) {\n        case \"Enter\":\n        case \" \": {\n          setValue(value);\n          setOpen(false);\n          break;\n        }\n        case \"Tab\":\n        case \"Escape\":\n          setOpen(false);\n          break;\n        case \"ArrowDown\": {\n          const currentFocus = document.activeElement;\n          if (listRef.current?.contains(currentFocus) && currentFocus) {\n            (currentFocus.nextElementSibling as HTMLElement)?.focus();\n          }\n          break;\n        }\n        case \"ArrowUp\": {\n          if (altKey) {\n            setValue(value);\n            setOpen(false);\n          } else {\n            const currentFocus = document.activeElement;\n            if (listRef.current?.contains(currentFocus) && currentFocus) {\n              (currentFocus.previousElementSibling as HTMLElement)?.focus();\n            }\n          }\n          break;\n        }\n        case \"Home\": {\n          (listRef.current?.firstElementChild as HTMLElement)?.focus();\n          break;\n        }\n        case \"End\": {\n          (listRef.current?.lastElementChild as HTMLElement)?.focus();\n          break;\n        }\n      }\n    },\n    [listRef, setValue, setOpen],\n  );\n\n  return { listRef, onComboboxKeyDown, onOptionKeyDown };\n}\n"],"mappings":"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"}