@plumile/ui 0.1.187 → 0.1.188

package/lib/esm/components/select/SimpleSelect.js

@@ -1,60 +1,104 @@
 import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
 import { ChevronDownSvg as n } from "../../icons/ChevronDownSvg.js";
-import { actionsContainer as r, container as i, label as a, menu as o, menuOpen as s, menuSeparator as c, optionButton as l, optionDescription as u, optionSelected as d, trigger as f, triggerIcon as p, triggerIconBrand as ee, triggerIconOpen as te, triggerOpen as ne, valueText as re } from "./SimpleSelect.css.js";
-import { useCallback as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { getAnchoredFloatingPosition as r } from "../../shared/anchoredFloatingPosition.js";
+import { actionsContainer as i, container as a, label as o, menu as s, menuOpen as ee, menuSeparator as c, optionButton as l, optionDescription as u, optionSelected as d, trigger as f, triggerIcon as p, triggerIconBrand as te, triggerIconOpen as ne, triggerOpen as re, valueText as m } from "./SimpleSelect.css.js";
+import { useCallback as h, useEffect as g, useId as ie, useLayoutEffect as ae, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as oe, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/select/SimpleSelect.tsx
-var C = ({ ariaDescribedBy: C, ariaLabel: ie, ariaLabelledBy: ae, ariaInvalid: oe, actionsSlot: w, className: se, fullWidth: ce = !0, isDisabled: T = !1, label: E, onChange: le, options: D, placeholder: O, size: k = "medium", state: A = "default", value: j, variant: M = "default" }) => {
-	let { t: N } = t(), [P, F] = y(!1), I = O ?? N("common.select.placeholder"), [L, R] = y(-1), z = v(null), B = v(null), V = v(/* @__PURE__ */ new Map()), H = g(), U = _(() => D.find((e) => e.value === j) ?? null, [D, j]);
-	h(() => {
-		if (!P) return;
-		let e = D.findIndex((e) => e.value === j), t = 0;
-		e >= 0 && (t = e), R(t);
+var S = ({ ariaDescribedBy: S, ariaLabel: C, ariaLabelledBy: se, ariaInvalid: ce, actionsSlot: w, className: le, fullWidth: ue = !0, isDisabled: T = !1, label: E, onChange: de, options: D, placeholder: fe, size: pe = "medium", state: O = "default", value: k, variant: A = "default" }) => {
+	let { t: j } = t(), [M, N] = y(!1), P = fe ?? j("common.select.placeholder"), [F, I] = y(-1), [L, R] = y(null), z = v(null), B = v(null), V = v(/* @__PURE__ */ new Map()), H = ie(), me = _(() => D.find((e) => e.value === k) ?? null, [D, k]);
+	g(() => {
+		if (!M) return;
+		let e = D.findIndex((e) => e.value === k), t = 0;
+		e >= 0 && (t = e), I(t);
 	}, [
-		P,
+		M,
 		D,
-		j
-	]), h(() => {
-		if (!P || L < 0 || L >= D.length) return;
-		let e = D[L];
+		k
+	]), g(() => {
+		if (!M || F < 0 || F >= D.length) return;
+		let e = D[F];
 		e != null && V.current.get(e.id)?.focus();
 	}, [
-		L,
-		P,
+		F,
+		M,
 		D
-	]), h(() => {
-		if (!P) return () => {};
+	]);
+	let U = h(() => {
+		let e = B.current;
+		if (e == null) {
+			R(null);
+			return;
+		}
+		let t = e.getBoundingClientRect(), n = r({
+			anchorRect: t,
+			floatingWidth: t.width,
+			floatingHeight: 288,
+			placement: "bottom-start",
+			offset: -1,
+			matchAnchorWidth: !0,
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight,
+			viewportPadding: 8,
+			minHeight: 96,
+			maxHeight: 288
+		});
+		R({
+			top: n.top,
+			left: n.left,
+			width: n.width ?? t.width,
+			maxHeight: n.maxHeight ?? 288
+		});
+	}, []);
+	ae(() => {
+		if (!M) {
+			R(null);
+			return;
+		}
+		U();
+		let e = () => {
+			U();
+		};
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [
+		M,
+		D,
+		U
+	]), g(() => {
+		if (!M) return () => {};
 		let e = (e) => {
-			z.current?.contains(e.target) || F(!1);
+			z.current?.contains(e.target) || N(!1);
 		}, t = (e) => {
-			e.key === "Escape" && (F(!1), B.current?.focus());
+			e.key === "Escape" && (N(!1), B.current?.focus());
 		};
 		return document.addEventListener("mousedown", e), window.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), window.removeEventListener("keydown", t);
 		};
-	}, [P]), h(() => {
+	}, [M]), g(() => {
 		V.current.clear();
 	}, [D]);
-	let W = m(() => {
-		F(!1), requestAnimationFrame(() => {
+	let W = h(() => {
+		N(!1), requestAnimationFrame(() => {
 			B.current?.focus();
 		});
-	}, []), ue = () => {
-		T || F((e) => !e);
+	}, []), he = () => {
+		T || N((e) => !e);
 	}, G = (e) => {
-		le(e), W();
-	}, de = (e) => {
-		T || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), F(!0));
+		de(e), W();
+	}, ge = (e) => {
+		T || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), N(!0));
 	}, K = (e) => {
-		D.length !== 0 && R((t) => {
+		D.length !== 0 && I((t) => {
 			if (t < 0) {
 				let t = D.length - 1;
 				return e === 1 && (t = 0), t;
 			}
 			return (t + e + D.length) % D.length;
 		});
-	}, fe = (e) => {
+	}, _e = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), K(1);
@@ -63,39 +107,39 @@ var C = ({ ariaDescribedBy: C, ariaLabel: ie, ariaLabelledBy: ae, ariaInvalid: o
 				e.preventDefault(), K(-1);
 				break;
 			case "Home":
-				e.preventDefault(), R(0);
+				e.preventDefault(), I(0);
 				break;
 			case "End":
-				e.preventDefault(), R(D.length - 1);
+				e.preventDefault(), I(D.length - 1);
 				break;
 			case "Enter":
 			case " ":
-				if (e.preventDefault(), L >= 0 && L < D.length) {
-					let e = D[L];
+				if (e.preventDefault(), F >= 0 && F < D.length) {
+					let e = D[F];
 					e != null && G(e.value);
 				}
 				break;
 			case "Escape":
-				e.preventDefault(), F(!1), B.current?.focus();
+				e.preventDefault(), N(!1), B.current?.focus();
 				break;
 			default: break;
 		}
-	}, pe = (e) => (t) => {
+	}, q = (e) => (t) => {
 		V.current.set(e, t);
-	}, q;
-	E != null && (q = `${H}-label`);
-	let me = ae ?? q, he = () => typeof w == "function" ? w(W) : w ?? null, ge = D.map((t, n) => {
-		let r = t.value === j, i = `${H}-option-${n}`, a = e(l, { [d]: r }), o = -1;
-		L === n && (o = 0);
+	}, J;
+	E != null && (J = `${H}-label`);
+	let ve = se ?? J, ye = () => typeof w == "function" ? w(W) : w ?? null, be = D.map((t, n) => {
+		let r = t.value === k, i = `${H}-option-${n}`, a = e(l, { [d]: r }), o = -1;
+		F === n && (o = 0);
 		let s = null;
-		return t.description != null && t.description !== "" && (s = /* @__PURE__ */ x("span", {
+		return t.description != null && t.description !== "" && (s = /* @__PURE__ */ b("span", {
 			className: u,
 			children: t.description
-		})), /* @__PURE__ */ x("li", {
+		})), /* @__PURE__ */ b("li", {
 			role: "presentation",
-			children: /* @__PURE__ */ S("button", {
+			children: /* @__PURE__ */ x("button", {
 				id: i,
-				ref: pe(t.id),
+				ref: q(t.id),
 				type: "button",
 				role: "option",
 				"aria-selected": r,
@@ -105,89 +149,90 @@ var C = ({ ariaDescribedBy: C, ariaLabel: ie, ariaLabelledBy: ae, ariaInvalid: o
 					G(t.value);
 				},
 				onMouseEnter: () => {
-					R(n);
+					I(n);
 				},
-				children: [/* @__PURE__ */ x("span", { children: t.label }), s]
+				children: [/* @__PURE__ */ b("span", { children: t.label }), s]
 			})
 		}, t.id);
-	}), J;
-	L >= 0 && L < D.length && (J = `${H}-option-${L}`);
-	let Y = null;
-	E != null && (Y = /* @__PURE__ */ x("span", {
-		id: q,
-		className: a,
+	}), Y;
+	F >= 0 && F < D.length && (Y = `${H}-option-${F}`);
+	let X = null;
+	E != null && (X = /* @__PURE__ */ b("span", {
+		id: J,
+		className: o,
 		children: E
 	}));
-	let X;
-	P && (X = H);
-	let Z = null;
-	w != null && (Z = /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("li", {
+	let Z;
+	M && (Z = H);
+	let Q = null;
+	w != null && (Q = /* @__PURE__ */ x(oe, { children: [/* @__PURE__ */ b("li", {
 		role: "presentation",
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: c,
 			role: "separator"
 		})
-	}), /* @__PURE__ */ x("li", {
+	}), /* @__PURE__ */ b("li", {
 		role: "presentation",
-		children: /* @__PURE__ */ x("div", {
-			className: r,
-			children: he()
+		children: /* @__PURE__ */ b("div", {
+			className: i,
+			children: ye()
 		})
 	})] }));
-	let Q = null;
-	P && (Q = /* @__PURE__ */ S("ul", {
+	let $ = null;
+	M && ($ = /* @__PURE__ */ x("ul", {
 		id: H,
-		className: e(o, s),
+		className: e(s, ee),
 		role: "listbox",
-		"aria-activedescendant": J,
+		"aria-activedescendant": Y,
 		tabIndex: -1,
-		onKeyDown: fe,
-		children: [ge, Z]
+		style: L ?? void 0,
+		onKeyDown: _e,
+		children: [be, Q]
 	}));
-	let $ = e(f({
-		size: k,
-		state: A,
-		variant: M
-	}), { [ne]: P }), _e = e(p, {
-		[te]: P,
-		[ee]: M === "brand"
+	let xe = e(f({
+		size: pe,
+		state: O,
+		variant: A
+	}), { [re]: M }), Se = e(p, {
+		[ne]: M,
+		[te]: A === "brand"
 	});
-	return /* @__PURE__ */ S("div", {
-		className: e(i({ fullWidth: ce }), se),
+	return /* @__PURE__ */ x("div", {
+		className: e(a({ fullWidth: ue }), le),
 		ref: z,
 		children: [
-			Y,
-			/* @__PURE__ */ S("button", {
+			X,
+			/* @__PURE__ */ x("button", {
 				ref: B,
 				type: "button",
-				className: $,
+				className: xe,
 				"aria-haspopup": "listbox",
-				"aria-expanded": P,
-				"aria-controls": X,
-				"aria-describedby": C,
-				"aria-invalid": oe,
-				"aria-label": ie,
-				"aria-labelledby": me,
-				onClick: ue,
-				onKeyDown: de,
+				"aria-expanded": M,
+				"aria-controls": Z,
+				"aria-describedby": S,
+				"aria-invalid": ce,
+				"aria-label": C,
+				"aria-labelledby": ve,
+				onClick: he,
+				onKeyDown: ge,
 				disabled: T,
-				children: [/* @__PURE__ */ x("span", {
-					className: re,
-					children: U?.label ?? I
-				}), /* @__PURE__ */ x("span", {
-					className: _e,
-					children: /* @__PURE__ */ x(n, {
+				children: [/* @__PURE__ */ b("span", {
+					className: m,
+					children: me?.label ?? P
+				}), /* @__PURE__ */ b("span", {
+					className: Se,
+					children: /* @__PURE__ */ b(n, {
 						width: 16,
 						height: 16,
 						"aria-hidden": "true"
 					})
 				})]
 			}),
-			Q
+			$
 		]
 	});
 };
 //#endregion
-export { C as SimpleSelect };
+export { S as SimpleSelect };
 
 //# sourceMappingURL=SimpleSelect.js.map

package/lib/esm/components/select/SimpleSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleSelect.js","names":[],"sources":["../../../../src/components/select/SimpleSelect.tsx"],"sourcesContent":["import {\n  type JSX,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ChevronDownSvg } from '../../icons/ChevronDownSvg.js';\n\nimport * as styles from './SimpleSelect.css.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type SimpleSelectOption = {\n  id: string;\n  label: string;\n  value: string;\n  description?: string | null;\n};\n\ntype ActionSlot = ReactNode | ((closeMenu: () => void) => ReactNode);\n\ntype Props = {\n  options: readonly SimpleSelectOption[];\n  value: string;\n  onChange: (value: string) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  actionsSlot?: ActionSlot;\n  isDisabled?: boolean;\n  className?: string;\n  variant?: 'default' | 'brand';\n  size?: 'small' | 'medium' | 'large';\n  state?: 'default' | 'error';\n  fullWidth?: boolean;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n};\n\nexport const SimpleSelect = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaInvalid,\n  actionsSlot,\n  className,\n  fullWidth = true,\n  isDisabled = false,\n  label,\n  onChange,\n  options,\n  placeholder,\n  size = 'medium',\n  state = 'default',\n  value,\n  variant = 'default',\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const resolvedPlaceholder = placeholder ?? t('common.select.placeholder');\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const optionRefs = useRef(new Map<string, HTMLButtonElement | null>());\n  const listboxId = useId();\n\n  const selectedOption = useMemo(() => {\n    return (\n      options.find((option) => {\n        return option.value === value;\n      }) ?? null\n    );\n  }, [options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const selectedIndex = options.findIndex((option) => {\n      return option.value === value;\n    });\n    let nextIndex = 0;\n    if (selectedIndex >= 0) {\n      nextIndex = selectedIndex;\n    }\n    setFocusedIndex(nextIndex);\n  }, [isOpen, options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    if (focusedIndex < 0 || focusedIndex >= options.length) {\n      return;\n    }\n    const option = options[focusedIndex];\n    if (option == null) {\n      return;\n    }\n    const node = optionRefs.current.get(option.id);\n    node?.focus();\n  }, [focusedIndex, isOpen, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return () => {};\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (containerRef.current?.contains(event.target as Node)) {\n        return;\n      }\n      setIsOpen(false);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    optionRefs.current.clear();\n  }, [options]);\n\n  const closeMenu = useCallback(() => {\n    setIsOpen(false);\n    requestAnimationFrame(() => {\n      triggerRef.current?.focus();\n    });\n  }, []);\n\n  const handleToggle = (): void => {\n    if (isDisabled) {\n      return;\n    }\n    setIsOpen((prev) => {\n      return !prev;\n    });\n  };\n\n  const handleSelect = (nextValue: string): void => {\n    onChange(nextValue);\n    closeMenu();\n  };\n\n  const handleTriggerKeyDown = (\n    event: ReactKeyboardEvent<HTMLButtonElement>,\n  ) => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setIsOpen(true);\n    }\n  };\n\n  const moveFocus = (direction: 1 | -1): void => {\n    if (options.length === 0) {\n      return;\n    }\n    setFocusedIndex((prev) => {\n      if (prev < 0) {\n        let fallbackIndex = options.length - 1;\n        if (direction === 1) {\n          fallbackIndex = 0;\n        }\n        return fallbackIndex;\n      }\n      const nextIndex = (prev + direction + options.length) % options.length;\n      return nextIndex;\n    });\n  };\n\n  const handleListKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>) => {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        moveFocus(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        moveFocus(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        setFocusedIndex(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        setFocusedIndex(options.length - 1);\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        if (focusedIndex >= 0 && focusedIndex < options.length) {\n          const option = options[focusedIndex];\n          if (option != null) {\n            handleSelect(option.value);\n          }\n        }\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        setIsOpen(false);\n        triggerRef.current?.focus();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const registerOptionRef = (optionId: string) => {\n    return (node: HTMLButtonElement | null) => {\n      optionRefs.current.set(optionId, node);\n    };\n  };\n\n  let labelId: string | undefined;\n  if (label != null) {\n    labelId = `${listboxId}-label`;\n  }\n  const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;\n\n  const renderActionsSlot = (): ReactNode | null => {\n    if (typeof actionsSlot === 'function') {\n      return actionsSlot(closeMenu);\n    }\n    return actionsSlot ?? null;\n  };\n\n  const optionItems = options.map((option, index) => {\n    const isSelected = option.value === value;\n    const optionDomId = `${listboxId}-option-${index}`;\n    const optionClassName = cx(styles.optionButton, {\n      [styles.optionSelected]: isSelected,\n    });\n    let optionTabIndex = -1;\n    if (focusedIndex === index) {\n      optionTabIndex = 0;\n    }\n\n    let descriptionNode: JSX.Element | null = null;\n    if (option.description != null && option.description !== '') {\n      descriptionNode = (\n        <span className={styles.optionDescription}>{option.description}</span>\n      );\n    }\n\n    return (\n      <li key={option.id} role=\"presentation\">\n        <button\n          id={optionDomId}\n          ref={registerOptionRef(option.id)}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          className={optionClassName}\n          tabIndex={optionTabIndex}\n          onClick={() => {\n            handleSelect(option.value);\n          }}\n          onMouseEnter={() => {\n            setFocusedIndex(index);\n          }}\n        >\n          <span>{option.label}</span>\n          {descriptionNode}\n        </button>\n      </li>\n    );\n  });\n\n  let activeOptionId: string | undefined;\n  if (focusedIndex >= 0 && focusedIndex < options.length) {\n    activeOptionId = `${listboxId}-option-${focusedIndex}`;\n  }\n\n  let labelNode: JSX.Element | null = null;\n  if (label != null) {\n    labelNode = (\n      <span id={labelId} className={styles.label}>\n        {label}\n      </span>\n    );\n  }\n\n  let ariaControls: string | undefined;\n  if (isOpen) {\n    ariaControls = listboxId;\n  }\n\n  let actionsSlotNode: ReactNode | null = null;\n  if (actionsSlot != null) {\n    actionsSlotNode = (\n      <>\n        <li role=\"presentation\">\n          <div className={styles.menuSeparator} role=\"separator\" />\n        </li>\n        <li role=\"presentation\">\n          <div className={styles.actionsContainer}>{renderActionsSlot()}</div>\n        </li>\n      </>\n    );\n  }\n\n  let menuNode: JSX.Element | null = null;\n  if (isOpen) {\n    menuNode = (\n      <ul\n        id={listboxId}\n        className={cx(styles.menu, styles.menuOpen)}\n        role=\"listbox\"\n        aria-activedescendant={activeOptionId}\n        tabIndex={-1}\n        onKeyDown={handleListKeyDown}\n      >\n        {optionItems}\n        {actionsSlotNode}\n      </ul>\n    );\n  }\n\n  const triggerClassName = cx(styles.trigger({ size, state, variant }), {\n    [styles.triggerOpen]: isOpen,\n  });\n  const triggerIconClassName = cx(styles.triggerIcon, {\n    [styles.triggerIconOpen]: isOpen,\n    [styles.triggerIconBrand]: variant === 'brand',\n  });\n\n  return (\n    <div\n      className={cx(styles.container({ fullWidth }), className)}\n      ref={containerRef}\n    >\n      {labelNode}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={triggerClassName}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedAriaLabelledBy}\n        onClick={handleToggle}\n        onKeyDown={handleTriggerKeyDown}\n        disabled={isDisabled}\n      >\n        <span className={styles.valueText}>\n          {selectedOption?.label ?? resolvedPlaceholder}\n        </span>\n        <span className={triggerIconClassName}>\n          <ChevronDownSvg width={16} height={16} aria-hidden=\"true\" />\n        </span>\n      </button>\n      {menuNode}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SimpleSelect.js","names":[],"sources":["../../../../src/components/select/SimpleSelect.tsx"],"sourcesContent":["import {\n  type JSX,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ChevronDownSvg } from '../../icons/ChevronDownSvg.js';\nimport { getAnchoredFloatingPosition } from '../../shared/anchoredFloatingPosition.js';\n\nimport * as styles from './SimpleSelect.css.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type SimpleSelectOption = {\n  id: string;\n  label: string;\n  value: string;\n  description?: string | null;\n};\n\ntype ActionSlot = ReactNode | ((closeMenu: () => void) => ReactNode);\n\ntype MenuPosition = {\n  top: number;\n  left: number;\n  width: number;\n  maxHeight: number;\n};\n\ntype Props = {\n  options: readonly SimpleSelectOption[];\n  value: string;\n  onChange: (value: string) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  actionsSlot?: ActionSlot;\n  isDisabled?: boolean;\n  className?: string;\n  variant?: 'default' | 'brand';\n  size?: 'small' | 'medium' | 'large';\n  state?: 'default' | 'error';\n  fullWidth?: boolean;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n};\n\nexport const SimpleSelect = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaInvalid,\n  actionsSlot,\n  className,\n  fullWidth = true,\n  isDisabled = false,\n  label,\n  onChange,\n  options,\n  placeholder,\n  size = 'medium',\n  state = 'default',\n  value,\n  variant = 'default',\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const resolvedPlaceholder = placeholder ?? t('common.select.placeholder');\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const optionRefs = useRef(new Map<string, HTMLButtonElement | null>());\n  const listboxId = useId();\n\n  const selectedOption = useMemo(() => {\n    return (\n      options.find((option) => {\n        return option.value === value;\n      }) ?? null\n    );\n  }, [options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const selectedIndex = options.findIndex((option) => {\n      return option.value === value;\n    });\n    let nextIndex = 0;\n    if (selectedIndex >= 0) {\n      nextIndex = selectedIndex;\n    }\n    setFocusedIndex(nextIndex);\n  }, [isOpen, options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    if (focusedIndex < 0 || focusedIndex >= options.length) {\n      return;\n    }\n    const option = options[focusedIndex];\n    if (option == null) {\n      return;\n    }\n    const node = optionRefs.current.get(option.id);\n    node?.focus();\n  }, [focusedIndex, isOpen, options]);\n\n  const updateMenuPosition = useCallback(() => {\n    const trigger = triggerRef.current;\n    if (trigger == null) {\n      setMenuPosition(null);\n      return;\n    }\n\n    const rect = trigger.getBoundingClientRect();\n    const nextPosition = getAnchoredFloatingPosition({\n      anchorRect: rect,\n      floatingWidth: rect.width,\n      floatingHeight: 288,\n      placement: 'bottom-start',\n      offset: -1,\n      matchAnchorWidth: true,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n      viewportPadding: 8,\n      minHeight: 96,\n      maxHeight: 288,\n    });\n\n    setMenuPosition({\n      top: nextPosition.top,\n      left: nextPosition.left,\n      width: nextPosition.width ?? rect.width,\n      maxHeight: nextPosition.maxHeight ?? 288,\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) {\n      setMenuPosition(null);\n      return undefined;\n    }\n\n    updateMenuPosition();\n\n    const handleViewportChange = () => {\n      updateMenuPosition();\n    };\n\n    window.addEventListener('resize', handleViewportChange);\n    window.addEventListener('scroll', handleViewportChange, true);\n\n    return () => {\n      window.removeEventListener('resize', handleViewportChange);\n      window.removeEventListener('scroll', handleViewportChange, true);\n    };\n  }, [isOpen, options, updateMenuPosition]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return () => {};\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (containerRef.current?.contains(event.target as Node)) {\n        return;\n      }\n      setIsOpen(false);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    optionRefs.current.clear();\n  }, [options]);\n\n  const closeMenu = useCallback(() => {\n    setIsOpen(false);\n    requestAnimationFrame(() => {\n      triggerRef.current?.focus();\n    });\n  }, []);\n\n  const handleToggle = (): void => {\n    if (isDisabled) {\n      return;\n    }\n    setIsOpen((prev) => {\n      return !prev;\n    });\n  };\n\n  const handleSelect = (nextValue: string): void => {\n    onChange(nextValue);\n    closeMenu();\n  };\n\n  const handleTriggerKeyDown = (\n    event: ReactKeyboardEvent<HTMLButtonElement>,\n  ) => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setIsOpen(true);\n    }\n  };\n\n  const moveFocus = (direction: 1 | -1): void => {\n    if (options.length === 0) {\n      return;\n    }\n    setFocusedIndex((prev) => {\n      if (prev < 0) {\n        let fallbackIndex = options.length - 1;\n        if (direction === 1) {\n          fallbackIndex = 0;\n        }\n        return fallbackIndex;\n      }\n      const nextIndex = (prev + direction + options.length) % options.length;\n      return nextIndex;\n    });\n  };\n\n  const handleListKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>) => {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        moveFocus(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        moveFocus(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        setFocusedIndex(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        setFocusedIndex(options.length - 1);\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        if (focusedIndex >= 0 && focusedIndex < options.length) {\n          const option = options[focusedIndex];\n          if (option != null) {\n            handleSelect(option.value);\n          }\n        }\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        setIsOpen(false);\n        triggerRef.current?.focus();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const registerOptionRef = (optionId: string) => {\n    return (node: HTMLButtonElement | null) => {\n      optionRefs.current.set(optionId, node);\n    };\n  };\n\n  let labelId: string | undefined;\n  if (label != null) {\n    labelId = `${listboxId}-label`;\n  }\n  const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;\n\n  const renderActionsSlot = (): ReactNode | null => {\n    if (typeof actionsSlot === 'function') {\n      return actionsSlot(closeMenu);\n    }\n    return actionsSlot ?? null;\n  };\n\n  const optionItems = options.map((option, index) => {\n    const isSelected = option.value === value;\n    const optionDomId = `${listboxId}-option-${index}`;\n    const optionClassName = cx(styles.optionButton, {\n      [styles.optionSelected]: isSelected,\n    });\n    let optionTabIndex = -1;\n    if (focusedIndex === index) {\n      optionTabIndex = 0;\n    }\n\n    let descriptionNode: JSX.Element | null = null;\n    if (option.description != null && option.description !== '') {\n      descriptionNode = (\n        <span className={styles.optionDescription}>{option.description}</span>\n      );\n    }\n\n    return (\n      <li key={option.id} role=\"presentation\">\n        <button\n          id={optionDomId}\n          ref={registerOptionRef(option.id)}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          className={optionClassName}\n          tabIndex={optionTabIndex}\n          onClick={() => {\n            handleSelect(option.value);\n          }}\n          onMouseEnter={() => {\n            setFocusedIndex(index);\n          }}\n        >\n          <span>{option.label}</span>\n          {descriptionNode}\n        </button>\n      </li>\n    );\n  });\n\n  let activeOptionId: string | undefined;\n  if (focusedIndex >= 0 && focusedIndex < options.length) {\n    activeOptionId = `${listboxId}-option-${focusedIndex}`;\n  }\n\n  let labelNode: JSX.Element | null = null;\n  if (label != null) {\n    labelNode = (\n      <span id={labelId} className={styles.label}>\n        {label}\n      </span>\n    );\n  }\n\n  let ariaControls: string | undefined;\n  if (isOpen) {\n    ariaControls = listboxId;\n  }\n\n  let actionsSlotNode: ReactNode | null = null;\n  if (actionsSlot != null) {\n    actionsSlotNode = (\n      <>\n        <li role=\"presentation\">\n          <div className={styles.menuSeparator} role=\"separator\" />\n        </li>\n        <li role=\"presentation\">\n          <div className={styles.actionsContainer}>{renderActionsSlot()}</div>\n        </li>\n      </>\n    );\n  }\n\n  let menuNode: JSX.Element | null = null;\n  if (isOpen) {\n    menuNode = (\n      <ul\n        id={listboxId}\n        className={cx(styles.menu, styles.menuOpen)}\n        role=\"listbox\"\n        aria-activedescendant={activeOptionId}\n        tabIndex={-1}\n        style={menuPosition ?? undefined}\n        onKeyDown={handleListKeyDown}\n      >\n        {optionItems}\n        {actionsSlotNode}\n      </ul>\n    );\n  }\n\n  const triggerClassName = cx(styles.trigger({ size, state, variant }), {\n    [styles.triggerOpen]: isOpen,\n  });\n  const triggerIconClassName = cx(styles.triggerIcon, {\n    [styles.triggerIconOpen]: isOpen,\n    [styles.triggerIconBrand]: variant === 'brand',\n  });\n\n  return (\n    <div\n      className={cx(styles.container({ fullWidth }), className)}\n      ref={containerRef}\n    >\n      {labelNode}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={triggerClassName}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedAriaLabelledBy}\n        onClick={handleToggle}\n        onKeyDown={handleTriggerKeyDown}\n        disabled={isDisabled}\n      >\n        <span className={styles.valueText}>\n          {selectedOption?.label ?? resolvedPlaceholder}\n        </span>\n        <span className={triggerIconClassName}>\n          <ChevronDownSvg width={16} height={16} aria-hidden=\"true\" />\n        </span>\n      </button>\n      {menuNode}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/components/tile/InfoTile.css.js

@@ -1,7 +1,7 @@
 /* empty css                                   */
 /* empty css                        */
 //#region src/components/tile/InfoTile.css.ts
-var e = "_1mkg78a0 txvbqb19uf txvbqb2uc txvbqb1b81 txvbqbwwy txvbqbfpn txvbqbh4x txvbqbhdy", t = "_1mkg78a3 _1mkg78a1 txvbqb7g txvbqb77 txvbqb7t _1mkg78a2 txvbqb1e31 qbwcue6 txvbqb1gg6 txvbqb1ggf qbwcue0 txvbqb1ffs txvbqb1ga0", n = "_1mkg78a4 txvbqb3f txvbqb19uf txvbqbfqq", r = "_1mkg78a5 txvbqb4 txvbqbv txvbqbfqq txvbqb19uf", i = "_1mkg78a6 txvbqbfpn txvbqbh7g txvbqbel txvbqblt7 txvbqbhdy", a = "_1mkg78a7 txvbqbfpn txvbqbh4x txvbqbhd8 txvbqbv7x", o = "_1mkg78a8 txvbqb9w txvbqbnxe txvbqbhbf txvbqb1bg1 txvbqbo7v", s = "_1mkg78a9 txvbqbo7v txvbqb9j txvbqbhc5", c = "_1mkg78aa txvbqb9j txvbqb1bg3 txvbqbfpn txvbqbh7g txvbqbhdl", l = "_1mkg78ab txvbqb9w txvbqb1bg1 txvbqbfpn txvbqbh4x txvbqbhdl", u = "_1mkg78ac txvbqbfpn txvbqbh7g txvbqbhdy txvbqbey txvbqblt7 txvbqb9j txvbqb1bg3", d = "_1mkg78ad txvbqbfpn txvbqbey txvbqbhdl txvbqbqhu";
+var e = "_1mkg78a0 txvbqb19us txvbqb2uc txvbqb1b8r txvbqbwxb txvbqbfpn txvbqbh4x txvbqbhdy", t = "_1mkg78a3 _1mkg78a1 txvbqb7g txvbqb77 txvbqb7t _1mkg78a2 txvbqb1e3r qbwcue6 txvbqb1ggw txvbqb1gh5 qbwcue0 txvbqb1fgi txvbqb1gaq", n = "_1mkg78a4 txvbqb3f txvbqb19us txvbqbfqq", r = "_1mkg78a5 txvbqb4 txvbqbv txvbqbfqq txvbqb19us", i = "_1mkg78a6 txvbqbfpn txvbqbh7g txvbqbel txvbqblt7 txvbqbhdy", a = "_1mkg78a7 txvbqbfpn txvbqbh4x txvbqbhd8 txvbqbv7x", o = "_1mkg78a8 txvbqb9w txvbqbnxe txvbqbhbf txvbqb1bgr txvbqbo7v", s = "_1mkg78a9 txvbqbo7v txvbqb9j txvbqbhc5", c = "_1mkg78aa txvbqb9j txvbqb1bgt txvbqbfpn txvbqbh7g txvbqbhdl", l = "_1mkg78ab txvbqb9w txvbqb1bgr txvbqbfpn txvbqbh4x txvbqbhdl", u = "_1mkg78ac txvbqbfpn txvbqbh7g txvbqbhdy txvbqbey txvbqblt7 txvbqb9j txvbqb1bgt", d = "_1mkg78ad txvbqbfpn txvbqbey txvbqbhdl txvbqbqhu";
 //#endregion
 export { d as actions, l as body, u as footer, i as header, a as headingGroup, t as interactive, r as interactiveButton, n as interactiveLink, c as meta, s as subtitle, e as tile, o as title };
 

package/lib/esm/components/tile/InfoTile.js

@@ -37,7 +37,7 @@ var p = (e) => e == null ? null : u(typeof e == "string" || typeof e == "number"
 			}),
 			w,
 			(h != null || g != null) && /* @__PURE__ */ d("div", {
-				className: "_1mkg78ab txvbqb9w txvbqb1bg1 txvbqbfpn txvbqbh4x txvbqbhdl",
+				className: "_1mkg78ab txvbqb9w txvbqb1bgr txvbqbfpn txvbqbh4x txvbqbhdl",
 				children: [h, g]
 			}),
 			T