@chayns-ui/core 0.9.4 → 0.10.0

package/dist/components/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAiClE,QAAA,MAAM,IAAI;;CAAkD,CAAC;AAE7D,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAiClE,QAAA,MAAM,IAAI;;CAAkD,CAAC;AAK7D,eAAe,IAAI,CAAC"}

package/dist/components/card/Card.js

@@ -28,6 +28,8 @@ var CardRoot = forwardRef(function Card({ children, className, ...cardProps }, r
 	});
 });
 var Card = Object.assign(CardRoot, { Header: CardHeader });
+CardHeader.displayName = "Card.Header";
+CardRoot.displayName = "Card";
 //#endregion
 export { Card as default };
 

package/dist/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport type { CardHeaderProps, CardProps } from './Card.types.js';\n\nconst CardHeader = forwardRef<HTMLElement, CardHeaderProps>(function CardHeader(\n  { children, className, icon, ...headerProps },\n  ref,\n) {\n  const resolvedClassName = ['chayns-card__header', className].filter(Boolean).join(' ');\n\n  return (\n    <header {...headerProps} className={resolvedClassName} ref={ref}>\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"chayns-card__header-icon\">\n          <ButtonIcon icon={icon} />\n        </span>\n      ) : null}\n      <span className=\"chayns-card__header-content\">{children}</span>\n    </header>\n  );\n});\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { children, className, ...cardProps },\n  ref,\n) {\n  const resolvedClassName = ['chayns-card', className].filter(Boolean).join(' ');\n\n  return (\n    <div {...cardProps} className={resolvedClassName} ref={ref}>\n      {children}\n    </div>\n  );\n});\n\nconst Card = Object.assign(CardRoot, { Header: CardHeader });\n\nexport default Card;\n"],"mappings":";;;;AAKA,IAAM,aAAa,WAAyC,SAAS,WACnE,EAAE,UAAU,WAAW,MAAM,GAAG,eAChC,KACA;CACA,MAAM,oBAAoB,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErF,OACE,qBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAwB;EAA5D,UAAA,CACG,OACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA,oBAAC,YAAD,EAAkB,KAAO,CAAA;EACrB,CAAA,IACJ,MACJ,oBAAC,QAAD;GAAM,WAAU;GAA+B;EAAe,CAAA,CACxD;;AAEZ,CAAC;AAED,IAAM,WAAW,WAAsC,SAAS,KAC9D,EAAE,UAAU,WAAW,GAAG,aAC1B,KACA;CACA,MAAM,oBAAoB,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE7E,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAwB;EACpD;CACE,CAAA;AAET,CAAC;AAED,IAAM,OAAO,OAAO,OAAO,UAAU,EAAE,QAAQ,WAAW,CAAC"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport type { CardHeaderProps, CardProps } from './Card.types.js';\n\nconst CardHeader = forwardRef<HTMLElement, CardHeaderProps>(function CardHeader(\n  { children, className, icon, ...headerProps },\n  ref,\n) {\n  const resolvedClassName = ['chayns-card__header', className].filter(Boolean).join(' ');\n\n  return (\n    <header {...headerProps} className={resolvedClassName} ref={ref}>\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"chayns-card__header-icon\">\n          <ButtonIcon icon={icon} />\n        </span>\n      ) : null}\n      <span className=\"chayns-card__header-content\">{children}</span>\n    </header>\n  );\n});\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { children, className, ...cardProps },\n  ref,\n) {\n  const resolvedClassName = ['chayns-card', className].filter(Boolean).join(' ');\n\n  return (\n    <div {...cardProps} className={resolvedClassName} ref={ref}>\n      {children}\n    </div>\n  );\n});\n\nconst Card = Object.assign(CardRoot, { Header: CardHeader });\n\nCardHeader.displayName = 'Card.Header';\nCardRoot.displayName = 'Card';\n\nexport default Card;\n"],"mappings":";;;;AAKA,IAAM,aAAa,WAAyC,SAAS,WACnE,EAAE,UAAU,WAAW,MAAM,GAAG,eAChC,KACA;CACA,MAAM,oBAAoB,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErF,OACE,qBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAwB;EAA5D,UAAA,CACG,OACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA,oBAAC,YAAD,EAAkB,KAAO,CAAA;EACrB,CAAA,IACJ,MACJ,oBAAC,QAAD;GAAM,WAAU;GAA+B;EAAe,CAAA,CACxD;;AAEZ,CAAC;AAED,IAAM,WAAW,WAAsC,SAAS,KAC9D,EAAE,UAAU,WAAW,GAAG,aAC1B,KACA;CACA,MAAM,oBAAoB,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE7E,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAwB;EACpD;CACE,CAAA;AAET,CAAC;AAED,IAAM,OAAO,OAAO,OAAO,UAAU,EAAE,QAAQ,WAAW,CAAC;AAE3D,WAAW,cAAc;AACzB,SAAS,cAAc"}

package/dist/components/checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,QAAQ,yHAoBZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,QAAQ,yHAoBZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -30,6 +30,7 @@ var Checkbox = forwardRef(function Checkbox({ children, className, description,
 		]
 	});
 });
+Checkbox.displayName = "Checkbox";
 //#endregion
 export { Checkbox as default };
 

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { CheckboxProps } from './Checkbox.types.js';\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { children, className, description, ...inputProps },\n  ref,\n) {\n  const inputClassName = ['chayns-checkbox__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-checkbox\">\n      <input {...inputProps} className={inputClassName} ref={ref} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-checkbox__control\">\n        <i className=\"far fa-check\" />\n      </span>\n      <span className=\"chayns-checkbox__content\">\n        <span className=\"chayns-checkbox__label\">{children}</span>\n        {description !== undefined ? (\n          <span className=\"chayns-checkbox__description\">{description}</span>\n        ) : null}\n      </span>\n    </label>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;AAIA,IAAM,WAAW,WAA4C,SAAS,SACpE,EAAE,UAAU,WAAW,aAAa,GAAG,cACvC,KACA;CACA,MAAM,iBAAiB,CAAC,0BAA0B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAqB;IAAK,MAAK;GAAY,CAAA;GAC7E,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,KAAD,EAAG,WAAU,eAAgB,CAAA;GACzB,CAAA;GACN,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAA0B;IAAe,CAAA,GACxD,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAkB,CAAA,IAChE,IACA;;EACD;;AAEX,CAAC"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { CheckboxProps } from './Checkbox.types.js';\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { children, className, description, ...inputProps },\n  ref,\n) {\n  const inputClassName = ['chayns-checkbox__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-checkbox\">\n      <input {...inputProps} className={inputClassName} ref={ref} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-checkbox__control\">\n        <i className=\"far fa-check\" />\n      </span>\n      <span className=\"chayns-checkbox__content\">\n        <span className=\"chayns-checkbox__label\">{children}</span>\n        {description !== undefined ? (\n          <span className=\"chayns-checkbox__description\">{description}</span>\n        ) : null}\n      </span>\n    </label>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;AAIA,IAAM,WAAW,WAA4C,SAAS,SACpE,EAAE,UAAU,WAAW,aAAa,GAAG,cACvC,KACA;CACA,MAAM,iBAAiB,CAAC,0BAA0B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAqB;IAAK,MAAK;GAAY,CAAA;GAC7E,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,KAAD,EAAG,WAAU,eAAgB,CAAA;GACzB,CAAA;GACN,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAA0B;IAAe,CAAA,GACxD,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAkB,CAAA,IAChE,IACA;;EACD;;AAEX,CAAC;AAED,SAAS,cAAc"}

package/dist/components/combo-box/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AAua9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAEzD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AAsb9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAKzD,eAAe,QAAQ,CAAC"}

package/dist/components/combo-box/ComboBox.js

@@ -1,4 +1,5 @@
 import ButtonIcon from "../button/button-icon/ButtonIcon.js";
+import { composeNativeRefs } from "../../utils/native-ref.js";
 import { ComboBoxContext, getOptionLabel, useComboBoxContext } from "./ComboBoxContext.js";
 import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -55,7 +56,7 @@ var Option = forwardRef(function Option({ children, className, disabled = false,
 			!comboBox.multiple && isSelected ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				className: "chayns-combo-box__checkmark",
-				children: /* @__PURE__ */ jsx("i", { className: "fas fa-check" })
+				children: /* @__PURE__ */ jsx("i", { className: "far fa-check" })
 			}) : null
 		]
 	});
@@ -108,9 +109,27 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 		popupClosing,
 		popupMounted
 	]);
+	useEffect(() => {
+		if (open || !popupClosing || !popupMounted) return void 0;
+		const popup = popupRef.current;
+		if (popup === null) return void 0;
+		const style = window.getComputedStyle(popup);
+		const durations = style.transitionDuration.split(",").map((duration) => Number.parseFloat(duration) * 1e3 || 0);
+		const delays = style.transitionDelay.split(",").map((delay) => Number.parseFloat(delay) * 1e3 || 0);
+		const duration = Math.max(...durations.map((time, index) => time + (delays[index % delays.length] ?? 0)));
+		const timeout = window.setTimeout(() => {
+			setPopupMounted(false);
+			setPopupClosing(false);
+		}, duration);
+		return () => window.clearTimeout(timeout);
+	}, [
+		open,
+		popupClosing,
+		popupMounted
+	]);
 	useEffect(() => {
 		if (!open || activeValue === void 0) return;
-		document.getElementById(`${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, "-")}`)?.focus();
+		document.getElementById(`${listboxId}-${encodeURIComponent(activeValue)}`)?.focus();
 	}, [
 		activeValue,
 		listboxId,
@@ -145,11 +164,7 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 			document.removeEventListener("pointerdown", closeOnOutsidePress);
 		};
 	}, [open]);
-	function setTriggerElement(element) {
-		triggerRef.current = element;
-		if (typeof ref === "function") ref(element);
-		else if (ref !== null) ref.current = element;
-	}
+	const setTriggerElement = useMemo(() => composeNativeRefs(triggerRef, ref), [ref]);
 	function emitValue(nextValue) {
 		if (!isControlled) setUncontrolledValue(nextValue);
 		onValueChange?.(nextValue);
@@ -222,7 +237,7 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 			activeValue,
 			isSelected: (optionValue) => multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,
 			multiple,
-			optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+			optionId: (optionValue) => `${listboxId}-${encodeURIComponent(optionValue)}`,
 			select
 		},
 		children: /* @__PURE__ */ jsxs("div", {
@@ -259,6 +274,8 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 				}) : null,
 				popupMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
 					"aria-hidden": !open && popupClosing ? true : void 0,
+					"aria-label": ariaLabel,
+					"aria-labelledby": accessibleName,
 					"aria-multiselectable": multiple || void 0,
 					className: "chayns-combo-box__popup",
 					"data-state": popupClosing ? "closed" : "open",
@@ -282,6 +299,8 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 	});
 });
 var ComboBox = Object.assign(ComboBoxRoot, { Option });
+Option.displayName = "ComboBox.Option";
+ComboBoxRoot.displayName = "ComboBox";
 //#endregion
 export { ComboBox as default };
 

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, disabled = false, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isSelected = comboBox.isSelected(value);\n  const isActive = comboBox.activeValue === value;\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    isActive ? 'chayns-combo-box__option--active' : '',\n    disabled ? 'chayns-combo-box__option--disabled' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      {...optionProps}\n      aria-disabled={disabled || undefined}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onClick={(event) => {\n        optionProps.onClick?.(event);\n        if (!event.defaultPrevented && !disabled) {\n          comboBox.select(value);\n        }\n      }}\n      onKeyDown={(event) => {\n        optionProps.onKeyDown?.(event);\n        if (!event.defaultPrevented && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          comboBox.select(value);\n        }\n      }}\n      ref={ref}\n      role=\"option\"\n      tabIndex={isActive && !disabled ? 0 : -1}\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n      {!comboBox.multiple && isSelected ? (\n        <span aria-hidden=\"true\" className=\"chayns-combo-box__checkmark\">\n          <i className=\"fas fa-check\" />\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLButtonElement, ComboBoxProps>(\n  function ComboBoxRoot(props, ref) {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      className,\n      defaultValue,\n      disabled,\n      id,\n      multiple = false,\n      onClick,\n      onKeyDown,\n      onValueChange,\n      placeholder,\n      value,\n      ...buttonProps\n    } = props;\n    const generatedId = useId();\n    const triggerId = id ?? generatedId;\n    const listboxId = `${triggerId}-listbox`;\n    const labelId = `${triggerId}-label`;\n    const rootRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const [popupStyle, setPopupStyle] = useState<CSSProperties>();\n    const optionElements = useMemo(() => getOptionElements(children), [children]);\n    const optionMap = useMemo(\n      () => new Map(optionElements.map((option) => [option.props.value, option])),\n      [optionElements],\n    );\n    const focusableValues = optionElements\n      .filter((option) => !option.props.disabled)\n      .map((option) => option.props.value);\n    const defaultValues = multiple\n      ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n          (option) => option.props.value,\n        ) ?? [])\n      : [];\n    const controlledValues = multiple\n      ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n          (option) => option.props.value,\n        ) ?? [])\n      : [];\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n    );\n    const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n    const [open, setOpen] = useState(false);\n    const [popupMounted, setPopupMounted] = useState(false);\n    const [popupClosing, setPopupClosing] = useState(false);\n    const [activeValue, setActiveValue] = useState<string>();\n    const isControlled = value !== undefined;\n    const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n    const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n    const selectedOptions = selectedValues\n      .map((selected) => optionMap.get(selected))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    const selectedOption = optionMap.get(selectedValue);\n    const displayValue = multiple\n      ? selectedOptions.map((option) => getOptionLabel(option.props.children)).join(', ')\n      : selectedOption === undefined\n        ? ''\n        : getOptionLabel(selectedOption.props.children);\n    const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n      .filter(Boolean)\n      .join(' ');\n    const triggerClassName = ['chayns-combo-box__trigger', className].filter(Boolean).join(' ');\n    const accessibleName =\n      ariaLabelledBy ??\n      (ariaLabel === undefined && placeholder !== undefined ? labelId : undefined);\n\n    if (ariaLabel === undefined && ariaLabelledBy === undefined && placeholder === undefined) {\n      throw new Error('ComboBox requires placeholder, aria-label or aria-labelledby.');\n    }\n\n    useEffect(() => {\n      if (open) {\n        if (!popupMounted) {\n          setPopupMounted(true);\n          setPopupClosing(true);\n          return undefined;\n        }\n\n        if (popupClosing) {\n          const frame = requestAnimationFrame(() => setPopupClosing(false));\n          return () => cancelAnimationFrame(frame);\n        }\n      } else if (popupMounted) {\n        setPopupClosing(true);\n      }\n\n      return undefined;\n    }, [open, popupClosing, popupMounted]);\n\n    useEffect(() => {\n      if (!open || activeValue === undefined) {\n        return;\n      }\n\n      document\n        .getElementById(`${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`)\n        ?.focus();\n    }, [activeValue, listboxId, open, popupMounted]);\n\n    useEffect(() => {\n      if (!open) {\n        return undefined;\n      }\n\n      function updatePopupPosition() {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n          return;\n        }\n\n        const { bottom, left, width } = trigger.getBoundingClientRect();\n        setPopupStyle({\n          insetBlockStart: `calc(${bottom}px + var(--k4))`,\n          insetInlineStart: left,\n          inlineSize: width,\n        });\n      }\n\n      function closeOnOutsidePress(event: PointerEvent) {\n        if (\n          event.target instanceof Node &&\n          !rootRef.current?.contains(event.target) &&\n          !popupRef.current?.contains(event.target)\n        ) {\n          setOpen(false);\n          setActiveValue(undefined);\n        }\n      }\n\n      updatePopupPosition();\n      window.addEventListener('resize', updatePopupPosition);\n      window.addEventListener('scroll', updatePopupPosition, true);\n      document.addEventListener('pointerdown', closeOnOutsidePress);\n      return () => {\n        window.removeEventListener('resize', updatePopupPosition);\n        window.removeEventListener('scroll', updatePopupPosition, true);\n        document.removeEventListener('pointerdown', closeOnOutsidePress);\n      };\n    }, [open]);\n\n    function setTriggerElement(element: HTMLButtonElement | null) {\n      triggerRef.current = element;\n\n      if (typeof ref === 'function') {\n        ref(element);\n      } else if (ref !== null) {\n        ref.current = element;\n      }\n    }\n\n    function emitValue(nextValue: string) {\n      if (!isControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n    }\n\n    function emitValues(nextValues: string[]) {\n      if (!isControlled) {\n        setUncontrolledValues(nextValues);\n      }\n\n      const nextOptions = nextValues\n        .map((nextValue) => optionMap.get(nextValue))\n        .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n      (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n        nextOptions,\n      );\n    }\n\n    function closeAndFocusTrigger() {\n      setOpen(false);\n      setActiveValue(undefined);\n      triggerRef.current?.focus();\n    }\n\n    function select(nextValue: string) {\n      if (multiple) {\n        const nextValues = selectedValues.includes(nextValue)\n          ? selectedValues.filter((selected) => selected !== nextValue)\n          : [...selectedValues, nextValue];\n        emitValues(nextValues);\n      } else {\n        emitValue(nextValue);\n      }\n\n      closeAndFocusTrigger();\n    }\n\n    function openPopup() {\n      if (disabled || focusableValues.length === 0) {\n        return;\n      }\n\n      const selectedFocusableValue = focusableValues.find((optionValue) =>\n        multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n      );\n      setActiveValue(selectedFocusableValue ?? focusableValues[0]);\n      setOpen(true);\n    }\n\n    function moveActive(direction: 1 | -1) {\n      if (focusableValues.length === 0) {\n        return;\n      }\n\n      const currentIndex = activeValue === undefined ? -1 : focusableValues.indexOf(activeValue);\n      const nextIndex =\n        currentIndex === -1\n          ? direction === 1\n            ? 0\n            : focusableValues.length - 1\n          : (currentIndex + direction + focusableValues.length) % focusableValues.length;\n      setActiveValue(focusableValues[nextIndex]);\n    }\n\n    function handleTriggerClick(event: MouseEvent<HTMLButtonElement>) {\n      onClick?.(event);\n      if (!event.defaultPrevented) {\n        if (open) {\n          closeAndFocusTrigger();\n        } else {\n          openPopup();\n        }\n      }\n    }\n\n    function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (\n        event.key === 'Enter' ||\n        event.key === ' ' ||\n        event.key === 'ArrowDown' ||\n        event.key === 'ArrowUp' ||\n        (event.key === 'ArrowDown' && event.altKey)\n      ) {\n        event.preventDefault();\n        openPopup();\n      }\n    }\n\n    function handleListboxKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        moveActive(1);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        moveActive(-1);\n      } else if (event.key === 'Home') {\n        event.preventDefault();\n        setActiveValue(focusableValues[0]);\n      } else if (event.key === 'End') {\n        event.preventDefault();\n        setActiveValue(focusableValues.at(-1));\n      } else if (event.key === 'Escape') {\n        event.preventDefault();\n        closeAndFocusTrigger();\n      } else if (event.key === 'Tab') {\n        setOpen(false);\n        setActiveValue(undefined);\n      }\n    }\n\n    return (\n      <ComboBoxContext.Provider\n        value={{\n          activeValue,\n          isSelected: (optionValue) =>\n            multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n          multiple,\n          optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n          select,\n        }}\n      >\n        <div className={resolvedClassName} ref={rootRef}>\n          <button\n            {...buttonProps}\n            aria-controls={listboxId}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-label={ariaLabel}\n            aria-labelledby={accessibleName}\n            className={triggerClassName}\n            disabled={disabled}\n            id={triggerId}\n            onClick={handleTriggerClick}\n            onKeyDown={handleTriggerKeyDown}\n            ref={setTriggerElement}\n            type=\"button\"\n          >\n            <span className=\"chayns-combo-box__value\">{displayValue || placeholder}</span>\n            <span aria-hidden=\"true\" className=\"chayns-combo-box__chevron\">\n              <ButtonIcon icon=\"fa-chevron-down\" />\n            </span>\n          </button>\n          {placeholder !== undefined ? (\n            <span className=\"chayns-combo-box__label\" id={labelId}>\n              {placeholder}\n            </span>\n          ) : null}\n          {popupMounted && typeof document !== 'undefined'\n            ? createPortal(\n                <div\n                  aria-hidden={!open && popupClosing ? true : undefined}\n                  aria-multiselectable={multiple || undefined}\n                  className=\"chayns-combo-box__popup\"\n                  data-state={popupClosing ? 'closed' : 'open'}\n                  id={listboxId}\n                  inert={!open && popupClosing}\n                  onKeyDown={handleListboxKeyDown}\n                  onTransitionEnd={(event) => {\n                    if (popupClosing && event.propertyName === 'opacity') {\n                      setPopupMounted(false);\n                      setPopupClosing(false);\n                    }\n                  }}\n                  ref={popupRef}\n                  role=\"listbox\"\n                  style={popupStyle}\n                  tabIndex={-1}\n                >\n                  {children}\n                </div>,\n                document.body,\n              )\n            : null}\n        </div>\n      </ComboBoxContext.Provider>\n    );\n  },\n);\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';\n\nimport { composeNativeRefs } from '../../utils/native-ref.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, disabled = false, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isSelected = comboBox.isSelected(value);\n  const isActive = comboBox.activeValue === value;\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    isActive ? 'chayns-combo-box__option--active' : '',\n    disabled ? 'chayns-combo-box__option--disabled' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      {...optionProps}\n      aria-disabled={disabled || undefined}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onClick={(event) => {\n        optionProps.onClick?.(event);\n        if (!event.defaultPrevented && !disabled) {\n          comboBox.select(value);\n        }\n      }}\n      onKeyDown={(event) => {\n        optionProps.onKeyDown?.(event);\n        if (!event.defaultPrevented && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          comboBox.select(value);\n        }\n      }}\n      ref={ref}\n      role=\"option\"\n      tabIndex={isActive && !disabled ? 0 : -1}\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n      {!comboBox.multiple && isSelected ? (\n        <span aria-hidden=\"true\" className=\"chayns-combo-box__checkmark\">\n          <i className=\"far fa-check\" />\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLButtonElement, ComboBoxProps>(\n  function ComboBoxRoot(props, ref) {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      className,\n      defaultValue,\n      disabled,\n      id,\n      multiple = false,\n      onClick,\n      onKeyDown,\n      onValueChange,\n      placeholder,\n      value,\n      ...buttonProps\n    } = props;\n    const generatedId = useId();\n    const triggerId = id ?? generatedId;\n    const listboxId = `${triggerId}-listbox`;\n    const labelId = `${triggerId}-label`;\n    const rootRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const [popupStyle, setPopupStyle] = useState<CSSProperties>();\n    const optionElements = useMemo(() => getOptionElements(children), [children]);\n    const optionMap = useMemo(\n      () => new Map(optionElements.map((option) => [option.props.value, option])),\n      [optionElements],\n    );\n    const focusableValues = optionElements\n      .filter((option) => !option.props.disabled)\n      .map((option) => option.props.value);\n    const defaultValues = multiple\n      ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n          (option) => option.props.value,\n        ) ?? [])\n      : [];\n    const controlledValues = multiple\n      ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n          (option) => option.props.value,\n        ) ?? [])\n      : [];\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n    );\n    const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n    const [open, setOpen] = useState(false);\n    const [popupMounted, setPopupMounted] = useState(false);\n    const [popupClosing, setPopupClosing] = useState(false);\n    const [activeValue, setActiveValue] = useState<string>();\n    const isControlled = value !== undefined;\n    const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n    const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n    const selectedOptions = selectedValues\n      .map((selected) => optionMap.get(selected))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    const selectedOption = optionMap.get(selectedValue);\n    const displayValue = multiple\n      ? selectedOptions.map((option) => getOptionLabel(option.props.children)).join(', ')\n      : selectedOption === undefined\n        ? ''\n        : getOptionLabel(selectedOption.props.children);\n    const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n      .filter(Boolean)\n      .join(' ');\n    const triggerClassName = ['chayns-combo-box__trigger', className].filter(Boolean).join(' ');\n    const accessibleName =\n      ariaLabelledBy ??\n      (ariaLabel === undefined && placeholder !== undefined ? labelId : undefined);\n\n    if (ariaLabel === undefined && ariaLabelledBy === undefined && placeholder === undefined) {\n      throw new Error('ComboBox requires placeholder, aria-label or aria-labelledby.');\n    }\n\n    useEffect(() => {\n      if (open) {\n        if (!popupMounted) {\n          setPopupMounted(true);\n          setPopupClosing(true);\n          return undefined;\n        }\n\n        if (popupClosing) {\n          const frame = requestAnimationFrame(() => setPopupClosing(false));\n          return () => cancelAnimationFrame(frame);\n        }\n      } else if (popupMounted) {\n        setPopupClosing(true);\n      }\n\n      return undefined;\n    }, [open, popupClosing, popupMounted]);\n\n    useEffect(() => {\n      if (open || !popupClosing || !popupMounted) return undefined;\n\n      const popup = popupRef.current;\n      if (popup === null) return undefined;\n      const style = window.getComputedStyle(popup);\n      const durations = style.transitionDuration\n        .split(',')\n        .map((duration) => Number.parseFloat(duration) * 1000 || 0);\n      const delays = style.transitionDelay\n        .split(',')\n        .map((delay) => Number.parseFloat(delay) * 1000 || 0);\n      const duration = Math.max(\n        ...durations.map((time, index) => time + (delays[index % delays.length] ?? 0)),\n      );\n      const timeout = window.setTimeout(() => {\n        setPopupMounted(false);\n        setPopupClosing(false);\n      }, duration);\n\n      return () => window.clearTimeout(timeout);\n    }, [open, popupClosing, popupMounted]);\n\n    useEffect(() => {\n      if (!open || activeValue === undefined) {\n        return;\n      }\n\n      document.getElementById(`${listboxId}-${encodeURIComponent(activeValue)}`)?.focus();\n    }, [activeValue, listboxId, open, popupMounted]);\n\n    useEffect(() => {\n      if (!open) {\n        return undefined;\n      }\n\n      function updatePopupPosition() {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n          return;\n        }\n\n        const { bottom, left, width } = trigger.getBoundingClientRect();\n        setPopupStyle({\n          insetBlockStart: `calc(${bottom}px + var(--k4))`,\n          insetInlineStart: left,\n          inlineSize: width,\n        });\n      }\n\n      function closeOnOutsidePress(event: PointerEvent) {\n        if (\n          event.target instanceof Node &&\n          !rootRef.current?.contains(event.target) &&\n          !popupRef.current?.contains(event.target)\n        ) {\n          setOpen(false);\n          setActiveValue(undefined);\n        }\n      }\n\n      updatePopupPosition();\n      window.addEventListener('resize', updatePopupPosition);\n      window.addEventListener('scroll', updatePopupPosition, true);\n      document.addEventListener('pointerdown', closeOnOutsidePress);\n      return () => {\n        window.removeEventListener('resize', updatePopupPosition);\n        window.removeEventListener('scroll', updatePopupPosition, true);\n        document.removeEventListener('pointerdown', closeOnOutsidePress);\n      };\n    }, [open]);\n\n    const setTriggerElement = useMemo(() => composeNativeRefs(triggerRef, ref), [ref]);\n\n    function emitValue(nextValue: string) {\n      if (!isControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n    }\n\n    function emitValues(nextValues: string[]) {\n      if (!isControlled) {\n        setUncontrolledValues(nextValues);\n      }\n\n      const nextOptions = nextValues\n        .map((nextValue) => optionMap.get(nextValue))\n        .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n      (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n        nextOptions,\n      );\n    }\n\n    function closeAndFocusTrigger() {\n      setOpen(false);\n      setActiveValue(undefined);\n      triggerRef.current?.focus();\n    }\n\n    function select(nextValue: string) {\n      if (multiple) {\n        const nextValues = selectedValues.includes(nextValue)\n          ? selectedValues.filter((selected) => selected !== nextValue)\n          : [...selectedValues, nextValue];\n        emitValues(nextValues);\n      } else {\n        emitValue(nextValue);\n      }\n\n      closeAndFocusTrigger();\n    }\n\n    function openPopup() {\n      if (disabled || focusableValues.length === 0) {\n        return;\n      }\n\n      const selectedFocusableValue = focusableValues.find((optionValue) =>\n        multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n      );\n      setActiveValue(selectedFocusableValue ?? focusableValues[0]);\n      setOpen(true);\n    }\n\n    function moveActive(direction: 1 | -1) {\n      if (focusableValues.length === 0) {\n        return;\n      }\n\n      const currentIndex = activeValue === undefined ? -1 : focusableValues.indexOf(activeValue);\n      const nextIndex =\n        currentIndex === -1\n          ? direction === 1\n            ? 0\n            : focusableValues.length - 1\n          : (currentIndex + direction + focusableValues.length) % focusableValues.length;\n      setActiveValue(focusableValues[nextIndex]);\n    }\n\n    function handleTriggerClick(event: MouseEvent<HTMLButtonElement>) {\n      onClick?.(event);\n      if (!event.defaultPrevented) {\n        if (open) {\n          closeAndFocusTrigger();\n        } else {\n          openPopup();\n        }\n      }\n    }\n\n    function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (\n        event.key === 'Enter' ||\n        event.key === ' ' ||\n        event.key === 'ArrowDown' ||\n        event.key === 'ArrowUp' ||\n        (event.key === 'ArrowDown' && event.altKey)\n      ) {\n        event.preventDefault();\n        openPopup();\n      }\n    }\n\n    function handleListboxKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        moveActive(1);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        moveActive(-1);\n      } else if (event.key === 'Home') {\n        event.preventDefault();\n        setActiveValue(focusableValues[0]);\n      } else if (event.key === 'End') {\n        event.preventDefault();\n        setActiveValue(focusableValues.at(-1));\n      } else if (event.key === 'Escape') {\n        event.preventDefault();\n        closeAndFocusTrigger();\n      } else if (event.key === 'Tab') {\n        setOpen(false);\n        setActiveValue(undefined);\n      }\n    }\n\n    return (\n      <ComboBoxContext.Provider\n        value={{\n          activeValue,\n          isSelected: (optionValue) =>\n            multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n          multiple,\n          optionId: (optionValue) => `${listboxId}-${encodeURIComponent(optionValue)}`,\n          select,\n        }}\n      >\n        <div className={resolvedClassName} ref={rootRef}>\n          <button\n            {...buttonProps}\n            aria-controls={listboxId}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-label={ariaLabel}\n            aria-labelledby={accessibleName}\n            className={triggerClassName}\n            disabled={disabled}\n            id={triggerId}\n            onClick={handleTriggerClick}\n            onKeyDown={handleTriggerKeyDown}\n            ref={setTriggerElement}\n            type=\"button\"\n          >\n            <span className=\"chayns-combo-box__value\">{displayValue || placeholder}</span>\n            <span aria-hidden=\"true\" className=\"chayns-combo-box__chevron\">\n              <ButtonIcon icon=\"fa-chevron-down\" />\n            </span>\n          </button>\n          {placeholder !== undefined ? (\n            <span className=\"chayns-combo-box__label\" id={labelId}>\n              {placeholder}\n            </span>\n          ) : null}\n          {popupMounted && typeof document !== 'undefined'\n            ? createPortal(\n                <div\n                  aria-hidden={!open && popupClosing ? true : undefined}\n                  aria-label={ariaLabel}\n                  aria-labelledby={accessibleName}\n                  aria-multiselectable={multiple || undefined}\n                  className=\"chayns-combo-box__popup\"\n                  data-state={popupClosing ? 'closed' : 'open'}\n                  id={listboxId}\n                  inert={!open && popupClosing}\n                  onKeyDown={handleListboxKeyDown}\n                  onTransitionEnd={(event) => {\n                    if (popupClosing && event.propertyName === 'opacity') {\n                      setPopupMounted(false);\n                      setPopupClosing(false);\n                    }\n                  }}\n                  ref={popupRef}\n                  role=\"listbox\"\n                  style={popupStyle}\n                  tabIndex={-1}\n                >\n                  {children}\n                </div>,\n                document.body,\n              )\n            : null}\n        </div>\n      </ComboBoxContext.Provider>\n    );\n  },\n);\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nOption.displayName = 'ComboBox.Option';\nComboBoxRoot.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}

package/dist/components/date-time-picker/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiC,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AA8LpG,QAAA,MAAM,cAAc,gIAyRlB,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-time-picker/DateTimePicker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiC,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEpG,QAAA,MAAM,cAAc,gIA+KlB,CAAC;AAIH,eAAe,cAAc,CAAC"}

package/dist/components/date-time-picker/DateTimePicker.js

@@ -1,137 +1,12 @@
+import { composeNativeRefs } from "../../utils/native-ref.js";
+import { dateAtMidnight } from "./date-time-picker-utils.js";
+import { useDateTimePickerValue } from "./hooks/useDateTimePickerValue.js";
+import Wheel from "./wheel/Wheel.js";
+import PickerSizer from "./sizer/PickerSizer.js";
 import { DATE_TIME_PICKER_MINUTE_STEPS } from "./DateTimePicker.types.js";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/date-time-picker/DateTimePicker.tsx
-var WHEEL_LOOP_CYCLES = 11;
-var WHEEL_CENTER_CYCLE = Math.floor(WHEEL_LOOP_CYCLES / 2);
-function dateAtMidnight(value) {
-	return new Date(value.getFullYear(), value.getMonth(), value.getDate());
-}
-function clampDate(value, minDate, maxDate) {
-	const date = dateAtMidnight(value);
-	if (minDate !== void 0 && date < dateAtMidnight(minDate)) return new Date(minDate);
-	if (maxDate !== void 0 && date > dateAtMidnight(maxDate)) return new Date(maxDate);
-	return value;
-}
-function normalizeMinute(value, minuteStep) {
-	const normalized = new Date(value);
-	normalized.setMinutes(Math.floor(normalized.getMinutes() / minuteStep) * minuteStep);
-	return normalized;
-}
-function Wheel({ ariaLabel, onEscape, onSelect, options, selected }) {
-	const wheelRef = useRef(null);
-	const selectedRef = useRef(null);
-	const dragRef = useRef(void 0);
-	const ignoreClickRef = useRef(false);
-	useEffect(() => {
-		if (typeof selectedRef.current?.scrollIntoView === "function") selectedRef.current.scrollIntoView({ block: "center" });
-	}, []);
-	function applyPerspective() {
-		const wheel = wheelRef.current;
-		const itemHeight = selectedRef.current?.offsetHeight;
-		if (!wheel || !itemHeight) return;
-		const position = wheel.scrollTop / itemHeight;
-		for (const option of wheel.querySelectorAll(".chayns-date-time-picker__wheel-option")) {
-			const index = Number(option.dataset.wheelIndex);
-			const distance = Math.max(-2.5, Math.min(2.5, index - position));
-			const progress = Math.min(1, Math.abs(distance) / 2.5);
-			option.style.color = progress < .2 ? "var(--text)" : "var(--text-3)";
-			option.style.fontWeight = progress < .2 ? "600" : "400";
-			option.style.opacity = String(1 - progress * .7);
-			option.style.transform = `rotateX(${distance * 22}deg) scale(${1 - progress * .24})`;
-		}
-	}
-	function selectCenteredValue() {
-		const wheel = wheelRef.current;
-		const itemHeight = selectedRef.current?.offsetHeight;
-		if (!wheel || !itemHeight) return;
-		const option = options[(Math.round(wheel.scrollTop / itemHeight) % options.length + options.length) % options.length];
-		if (option !== void 0 && option.value !== selected) onSelect(option.value);
-	}
-	function handleScroll() {
-		const wheel = wheelRef.current;
-		const itemHeight = selectedRef.current?.offsetHeight;
-		if (!wheel || !itemHeight) return;
-		const index = Math.round(wheel.scrollTop / itemHeight);
-		const normalizedIndex = (index % options.length + options.length) % options.length;
-		if (index < options.length * 2 || index >= options.length * 9) wheel.scrollTop = (WHEEL_CENTER_CYCLE * options.length + normalizedIndex) * itemHeight;
-		applyPerspective();
-		selectCenteredValue();
-	}
-	function handleKeyDown(event) {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			onEscape();
-			return;
-		}
-		const index = options.findIndex((option) => option.value === selected);
-		let nextIndex = index;
-		if (event.key === "ArrowDown") nextIndex = Math.min(index + 1, options.length - 1);
-		if (event.key === "ArrowUp") nextIndex = Math.max(index - 1, 0);
-		if (event.key === "Home") nextIndex = 0;
-		if (event.key === "End") nextIndex = options.length - 1;
-		const nextOption = options[nextIndex];
-		if (nextIndex !== index && nextOption !== void 0) {
-			event.preventDefault();
-			onSelect(nextOption.value);
-		}
-	}
-	function handlePointerDown(event) {
-		if (event.button !== 0) return;
-		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
-		dragRef.current = {
-			pointerId: event.pointerId,
-			scrollTop: event.currentTarget.scrollTop,
-			startY: event.clientY
-		};
-		ignoreClickRef.current = false;
-	}
-	function handlePointerMove(event) {
-		const drag = dragRef.current;
-		if (drag?.pointerId !== event.pointerId) return;
-		const distance = event.clientY - drag.startY;
-		if (Math.abs(distance) > 3) {
-			ignoreClickRef.current = true;
-			event.currentTarget.scrollTop = drag.scrollTop - distance;
-		}
-	}
-	function handlePointerUp(event) {
-		if (dragRef.current?.pointerId !== event.pointerId) return;
-		dragRef.current = void 0;
-		if (typeof event.currentTarget.releasePointerCapture === "function") event.currentTarget.releasePointerCapture(event.pointerId);
-		selectCenteredValue();
-	}
-	return /* @__PURE__ */ jsx("div", {
-		"aria-label": ariaLabel,
-		className: "chayns-date-time-picker__wheel",
-		onKeyDown: handleKeyDown,
-		onPointerDown: handlePointerDown,
-		onPointerMove: handlePointerMove,
-		onPointerUp: handlePointerUp,
-		onScroll: handleScroll,
-		ref: wheelRef,
-		role: "listbox",
-		tabIndex: 0,
-		children: Array.from({ length: WHEEL_LOOP_CYCLES }, (_, cycle) => options.map((option, optionIndex) => /* @__PURE__ */ jsx("button", {
-			"aria-selected": option.value === selected,
-			className: "chayns-date-time-picker__wheel-option",
-			"data-wheel-index": cycle * options.length + optionIndex,
-			onClick: (event) => {
-				if (ignoreClickRef.current) {
-					event.preventDefault();
-					event.stopPropagation();
-					ignoreClickRef.current = false;
-					return;
-				}
-				onSelect(option.value);
-			},
-			ref: cycle === WHEEL_CENTER_CYCLE && option.value === selected ? selectedRef : void 0,
-			role: "option",
-			type: "button",
-			children: option.label
-		}, `${cycle}-${option.value}`)))
-	});
-}
 var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, id, label, locale, maxDate, minDate, minuteStep = 1, mode = "time", onChange, onClick, onKeyDown, placeholder, value, wheelLabels, ...buttonProps }, ref) {
 	if (!DATE_TIME_PICKER_MINUTE_STEPS.includes(minuteStep)) throw new Error("DateTimePicker minuteStep must be one of: 1, 5, 15, 30.");
 	if (minDate !== void 0 && maxDate !== void 0 && dateAtMidnight(minDate) > dateAtMidnight(maxDate)) throw new Error("DateTimePicker requires minDate to be earlier than or equal to maxDate.");
@@ -140,10 +15,23 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 	const popupId = `${triggerId}-popup`;
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
+	const setTriggerElement = useMemo(() => composeNativeRefs(triggerRef, ref), [ref]);
 	const [open, setOpen] = useState(false);
-	const displayValue = value === null ? null : mode === "date" ? clampDate(value, minDate, maxDate) : normalizeMinute(value, minuteStep);
-	const activeValue = displayValue ?? /* @__PURE__ */ new Date();
-	const isTwelveHour = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hour12 === true;
+	const { displayValue, formattedValue, activeValue, isTwelveHour, hours, minutes, dayPeriods, datePartOrder, dateOptions, dateValue, dateLabel, updateDate, updateTime, updatePeriod, sizingValues } = useDateTimePickerValue({
+		value,
+		locale,
+		maxDate,
+		minDate,
+		onChange,
+		placeholder,
+		wheelLabels,
+		minuteStep,
+		mode
+	});
+	function close() {
+		setOpen(false);
+		triggerRef.current?.focus();
+	}
 	useEffect(() => {
 		if (!open) return void 0;
 		function closeOnOutsidePress(event) {
@@ -152,104 +40,6 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 		document.addEventListener("pointerdown", closeOnOutsidePress);
 		return () => document.removeEventListener("pointerdown", closeOnOutsidePress);
 	});
-	const years = useMemo(() => {
-		const today = (/* @__PURE__ */ new Date()).getFullYear();
-		const first = minDate?.getFullYear() ?? today - 100;
-		const last = maxDate?.getFullYear() ?? today + 100;
-		return Array.from({ length: last - first + 1 }, (_, index) => first + index);
-	}, [maxDate, minDate]);
-	function close() {
-		setOpen(false);
-		triggerRef.current?.focus();
-	}
-	function emit(nextValue) {
-		onChange(mode === "date" ? clampDate(nextValue, minDate, maxDate) : nextValue);
-	}
-	function updateTime(part, nextValue) {
-		const next = new Date(activeValue);
-		if (part === "hours") {
-			const hour = isTwelveHour ? nextValue % 12 + (next.getHours() >= 12 ? 12 : 0) : nextValue;
-			next.setHours(hour);
-		} else next.setMinutes(nextValue);
-		emit(next);
-	}
-	function updatePeriod(period) {
-		const next = new Date(activeValue);
-		next.setHours(next.getHours() % 12 + period * 12);
-		emit(next);
-	}
-	function updateDate(part, nextValue) {
-		const next = new Date(activeValue);
-		const originalDay = next.getDate();
-		next.setDate(1);
-		if (part === "fullYear") next.setFullYear(nextValue);
-		if (part === "month") next.setMonth(nextValue);
-		if (part === "date") next.setDate(nextValue);
-		if (part !== "date") next.setDate(Math.min(originalDay, new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()));
-		emit(next);
-	}
-	const formattedValue = displayValue === null ? placeholder : mode === "time" ? `${new Intl.DateTimeFormat(locale, {
-		hour: "numeric",
-		minute: "2-digit"
-	}).format(displayValue)}${locale.toLowerCase().startsWith("de") ? " Uhr" : ""}` : new Intl.DateTimeFormat(locale, {
-		day: "numeric",
-		month: "long",
-		year: "numeric"
-	}).format(displayValue);
-	const hours = Array.from({ length: isTwelveHour ? 12 : 24 }, (_, index) => isTwelveHour ? index + 1 : index).map((hour) => ({
-		label: String(hour).padStart(2, "0"),
-		value: hour
-	}));
-	const minutes = Array.from({ length: 60 / minuteStep }, (_, index) => {
-		const minute = index * minuteStep;
-		return {
-			label: String(minute).padStart(2, "0"),
-			value: minute
-		};
-	});
-	const months = Array.from({ length: 12 }, (_, month) => ({
-		label: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2026, month, 1)),
-		value: month
-	})).filter((month) => {
-		const first = new Date(activeValue.getFullYear(), month.value, 1);
-		const last = new Date(activeValue.getFullYear(), month.value + 1, 0);
-		return (minDate === void 0 || last >= dateAtMidnight(minDate)) && (maxDate === void 0 || first <= dateAtMidnight(maxDate));
-	});
-	const days = Array.from({ length: new Date(activeValue.getFullYear(), activeValue.getMonth() + 1, 0).getDate() }, (_, index) => ({
-		label: String(index + 1).padStart(2, "0"),
-		value: index + 1
-	})).filter((day) => {
-		const candidate = new Date(activeValue.getFullYear(), activeValue.getMonth(), day.value);
-		return (minDate === void 0 || candidate >= dateAtMidnight(minDate)) && (maxDate === void 0 || candidate <= dateAtMidnight(maxDate));
-	});
-	const datePartOrder = new Intl.DateTimeFormat(locale, {
-		day: "numeric",
-		month: "numeric",
-		year: "numeric"
-	}).formatToParts(activeValue).flatMap((part) => {
-		if (part.type === "day") return ["date"];
-		if (part.type === "month") return ["month"];
-		if (part.type === "year") return ["fullYear"];
-		return [];
-	});
-	const yearOptions = years.map((year) => ({
-		label: String(year),
-		value: year
-	}));
-	function dateOptions(part) {
-		if (part === "date") return days;
-		if (part === "month") return months;
-		return yearOptions;
-	}
-	function dateValue(part) {
-		if (part === "date") return activeValue.getDate();
-		if (part === "month") return activeValue.getMonth();
-		return activeValue.getFullYear();
-	}
-	const dayPeriods = [0, 1].map((period) => ({
-		label: new Intl.DateTimeFormat(locale, { hour: "numeric" }).formatToParts(new Date(2026, 0, 1, period === 0 ? 1 : 13)).find((part) => part.type === "dayPeriod")?.value ?? (period === 0 ? "AM" : "PM"),
-		value: period
-	}));
 	const resolvedClassName = [
 		"chayns-date-time-picker",
 		`chayns-date-time-picker--${mode}`,
@@ -260,11 +50,16 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 		className: resolvedClassName,
 		ref: rootRef,
 		children: [
+			/* @__PURE__ */ jsx(PickerSizer, {
+				values: sizingValues,
+				placeholder: displayValue === null ? placeholder : null
+			}),
 			/* @__PURE__ */ jsx("button", {
 				...buttonProps,
 				"aria-controls": open ? popupId : void 0,
 				"aria-expanded": open,
 				"aria-haspopup": "dialog",
+				"aria-label": label,
 				className: ["chayns-date-time-picker__trigger", className].filter(Boolean).join(" "),
 				disabled,
 				id: triggerId,
@@ -279,19 +74,15 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 						close();
 					}
 				},
-				ref: (element) => {
-					triggerRef.current = element;
-					if (typeof ref === "function") ref(element);
-					else if (ref !== null) ref.current = element;
-				},
+				ref: setTriggerElement,
 				type: "button",
 				children: formattedValue
 			}),
-			/* @__PURE__ */ jsx("label", {
+			displayValue === null ? /* @__PURE__ */ jsx("label", {
 				className: "chayns-date-time-picker__label",
 				htmlFor: triggerId,
 				children: label
-			}),
+			}) : null,
 			open && !disabled ? /* @__PURE__ */ jsxs("div", {
 				"aria-label": label,
 				className: "chayns-date-time-picker__popup",
@@ -322,7 +113,7 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 							selected: activeValue.getHours() >= 12 ? 1 : 0
 						}) : null
 					] }) : datePartOrder.map((part) => /* @__PURE__ */ jsx(Wheel, {
-						ariaLabel: part === "date" ? wheelLabels.day : part === "month" ? wheelLabels.month : wheelLabels.year,
+						ariaLabel: dateLabel(part),
 						onEscape: close,
 						onSelect: (nextValue) => updateDate(part, nextValue),
 						options: dateOptions(part),
@@ -333,6 +124,7 @@ var DateTimePicker = forwardRef(function DateTimePicker({ className, disabled, i
 		]
 	});
 });
+DateTimePicker.displayName = "DateTimePicker";
 //#endregion
 export { DateTimePicker as default };