@vector-im/compound-web 8.4.0 → 9.0.1

package/dist/components/Dropdown/Dropdown.js

@@ -1,255 +1,231 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import ChevronDown from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
-import { forwardRef, useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
+import Dropdown_module_default from "./Dropdown.module.js";
 import classNames from "classnames";
-import styles from "./Dropdown.module.css.js";
-import { useId } from "@floating-ui/react";
-const Dropdown = forwardRef(
-  function Dropdown2({
-    className,
-    label,
-    placeholder,
-    helpLabel,
-    onValueChange,
-    error,
-    value: controlledValue,
-    defaultValue,
-    values,
-    ...props
-  }, ref) {
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    const value = controlledValue ?? uncontrolledValue;
-    const text = useMemo(
-      () => value === void 0 ? placeholder : values.find(([v]) => v === value)?.[1] ?? placeholder,
-      [value, values, placeholder]
-    );
-    const setValue = useCallback(
-      (value2) => {
-        setUncontrolledValue(value2);
-        onValueChange?.(value2);
-      },
-      [setUncontrolledValue, onValueChange]
-    );
-    const [open, setOpen, dropdownRef] = useOpen();
-    const { listRef, onComboboxKeyDown, onOptionKeyDown } = useKeyboardShortcut(
-      open,
-      setOpen,
-      setValue
-    );
-    const buttonRef = useRef(null);
-    useEffect(() => {
-      if (value !== void 0) buttonRef.current?.focus();
-    }, [value]);
-    const hasPlaceholder = text === placeholder;
-    const buttonClasses = classNames({
-      [styles.placeholder]: hasPlaceholder
-    });
-    const borderClasses = classNames(styles.border, {
-      [styles.open]: open
-    });
-    const contentClasses = classNames(styles.content, {
-      [styles.open]: open
-    });
-    const labelId = useId();
-    const contentId = useId();
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: dropdownRef,
-        className: classNames(className, styles.container),
-        "aria-invalid": Boolean(error),
-        children: [
-          /* @__PURE__ */ jsx("label", { id: labelId, children: label }),
-          /* @__PURE__ */ 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__ */ jsx(ChevronDown, { width: "24", height: "24" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: borderClasses }),
-          /* @__PURE__ */ jsx("div", { className: contentClasses, children: /* @__PURE__ */ jsx(
-            "ul",
-            {
-              ref: listRef,
-              id: contentId,
-              role: "listbox",
-              className: styles.content,
-              children: values.map(([v, text2]) => /* @__PURE__ */ jsx(
-                DropdownItem,
-                {
-                  isDisplayed: open,
-                  isSelected: value === v,
-                  onClick: () => {
-                    setOpen(false);
-                    setValue(v);
-                  },
-                  onKeyDown: (e) => onOptionKeyDown(e, v),
-                  children: text2
-                },
-                v
-              ))
-            }
-          ) }),
-          !error && helpLabel && /* @__PURE__ */ jsx("span", { className: styles.help, children: helpLabel }),
-          error && /* @__PURE__ */ jsxs("span", { className: styles.error, children: [
-            /* @__PURE__ */ jsx(ErrorIcon, { width: "20", height: "20" }),
-            error
-          ] })
-        ]
-      }
-    );
-  }
-);
-const DropdownItem = memo(function DropdownItem2({
-  children,
-  isSelected,
-  isDisplayed,
-  ...props
-}) {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (isSelected && isDisplayed) {
-      ref.current?.focus();
-    }
-  }, [isSelected, isDisplayed]);
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      tabIndex: 0,
-      role: "option",
-      ref,
-      "aria-selected": isSelected,
-      ...props,
-      children: [
-        children,
-        " ",
-        isSelected && /* @__PURE__ */ jsx(CheckIcon, { width: "20", height: "20" })
-      ]
-    }
-  );
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId as useId$1 } from "@floating-ui/react";
+import Check from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import ChevronDown from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
+//#region src/components/Dropdown/Dropdown.tsx
+/**
+* The dropdown content.
+*/
+var Dropdown = forwardRef(function Dropdown({ className, label, placeholder, helpLabel, onValueChange, error, value: controlledValue, defaultValue, values, ...props }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	const text = useMemo(() => value === void 0 ? placeholder : values.find(([v]) => v === value)?.[1] ?? placeholder, [
+		value,
+		values,
+		placeholder
+	]);
+	const setValue = useCallback((value) => {
+		setUncontrolledValue(value);
+		onValueChange?.(value);
+	}, [setUncontrolledValue, onValueChange]);
+	const [open, setOpen, dropdownRef] = useOpen();
+	const { listRef, onComboboxKeyDown, onOptionKeyDown } = useKeyboardShortcut(open, setOpen, setValue);
+	const buttonRef = useRef(null);
+	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 });
+	/**
+	* Ids for accessibility.
+	*/
+	const labelId = useId$1();
+	const contentId = useId$1();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: dropdownRef,
+		className: classNames(className, Dropdown_module_default.container),
+		"aria-invalid": Boolean(error),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				id: labelId,
+				children: label
+			}),
+			/* @__PURE__ */ 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__ */ jsx(ChevronDown, {
+					width: "24",
+					height: "24"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", { className: borderClasses }),
+			/* @__PURE__ */ jsx("div", {
+				className: contentClasses,
+				children: /* @__PURE__ */ jsx("ul", {
+					ref: listRef,
+					id: contentId,
+					role: "listbox",
+					className: Dropdown_module_default.content,
+					children: values.map(([v, text]) => /* @__PURE__ */ jsx(DropdownItem, {
+						isDisplayed: open,
+						isSelected: value === v,
+						onClick: () => {
+							setOpen(false);
+							setValue(v);
+						},
+						onKeyDown: (e) => onOptionKeyDown(e, v),
+						children: text
+					}, v))
+				})
+			}),
+			!error && helpLabel && /* @__PURE__ */ jsx("span", {
+				className: Dropdown_module_default.help,
+				children: helpLabel
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				className: Dropdown_module_default.error,
+				children: [/* @__PURE__ */ jsx(ErrorIcon, {
+					width: "20",
+					height: "20"
+				}), error]
+			})
+		]
+	});
+});
+/**
+* A dropdown item component.
+*/
+var DropdownItem = memo(function DropdownItem({ children, isSelected, isDisplayed, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (isSelected && isDisplayed) ref.current?.focus();
+	}, [isSelected, isDisplayed]);
+	return /* @__PURE__ */ jsxs("li", {
+		tabIndex: 0,
+		role: "option",
+		ref,
+		"aria-selected": isSelected,
+		...props,
+		children: [
+			children,
+			" ",
+			isSelected && /* @__PURE__ */ jsx(Check, {
+				width: "20",
+				height: "20"
+			})
+		]
+	});
 });
+/**
+* A hook to manage the open state of the dropdown.
+*/
 function useOpen() {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  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] = useState(false);
+	const ref = useRef(null);
+	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 = useRef(null);
-  const onComboboxKeyDown = 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 = 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 = useRef(null);
+	return {
+		listRef,
+		onComboboxKeyDown: 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: 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
+		])
+	};
 }
-export {
-  Dropdown
-};
-//# sourceMappingURL=Dropdown.js.map
+//#endregion
+export { Dropdown };
+
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","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":["Dropdown","value","text","Error","DropdownItem","Check"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","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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"}

package/dist/components/Dropdown/Dropdown.module.cjs

@@ -0,0 +1,13 @@
+var Dropdown_module_default = {
+	container: "_container_gn3xc_8",
+	placeholder: "_placeholder_gn3xc_47",
+	border: "_border_gn3xc_51",
+	content: "_content_gn3xc_60",
+	open: "_open_gn3xc_108",
+	help: "_help_gn3xc_112",
+	error: "_error_gn3xc_117"
+};
+//#endregion
+exports.default = Dropdown_module_default;
+
+//# sourceMappingURL=Dropdown.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.module.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"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\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      transition: transform 0.1s linear;\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Dropdown/Dropdown.module.js

@@ -0,0 +1,13 @@
+var Dropdown_module_default = {
+	container: "_container_gn3xc_8",
+	placeholder: "_placeholder_gn3xc_47",
+	border: "_border_gn3xc_51",
+	content: "_content_gn3xc_60",
+	open: "_open_gn3xc_108",
+	help: "_help_gn3xc_112",
+	error: "_error_gn3xc_117"
+};
+//#endregion
+export { Dropdown_module_default as default };
+
+//# sourceMappingURL=Dropdown.module.js.map

package/dist/components/Dropdown/Dropdown.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.module.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"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\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      transition: transform 0.1s linear;\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}