@exsto/ds 0.0.1-rc.22 → 0.0.1-rc.24

package/dist/ui/src/components/edyn/date-time/date-time.d.ts

@@ -0,0 +1,73 @@
+import { IDatePickerLabels, TDisabledDays } from '../date-picker';
+import { ITimeFieldLabels, TTimeFieldGranularity, TTimeFieldHourCycle } from '../time-field';
+import { Locale } from 'react-day-picker';
+export interface IDateTimeLabels {
+    /** The names of the two parts, for a screen reader. */
+    date: string;
+    time: string;
+    /** The DatePicker's and the TimeField's own words (messages, the segments' names). */
+    datePicker: Partial<IDatePickerLabels>;
+    timeField: Partial<ITimeFieldLabels>;
+}
+export declare const DEFAULT_DATE_TIME_LABELS: IDateTimeLabels;
+/**
+ * What the field holds when it reports:
+ * - `datetime`: a day and a time, both usable.
+ * - `empty`: neither part has anything in it.
+ * - `incomplete`: one part is in and the other is not (`missing` says which). The value reported is `undefined`.
+ * - `refused`: the date part holds text that is not a day; `text` and `problem` are the DatePicker's.
+ * - `out-of-range`: both parts are in, and `min`, `max` or `disabledDates` refuse the day or the time. The value IS reported, so a
+ *   form's own rule can judge it; the field is marked invalid. Check `kind` before treating the value as a usable one.
+ */
+export type TDateTimeState = {
+    kind: 'datetime';
+} | {
+    kind: 'empty';
+} | {
+    kind: 'incomplete';
+    missing: 'date' | 'time';
+} | {
+    kind: 'refused';
+    text: string;
+    problem: string;
+} | {
+    kind: 'out-of-range';
+};
+export interface IDateTimeProps {
+    /** For a Label's htmlFor: it goes to the date part, the first control. */
+    id?: string;
+    /**
+     * The chosen moment as `yyyy-mm-ddTHH:mm` (`:ss` with `granularity="second"`), or `undefined` for none: local time and no zone, as
+     * `<input type="datetime-local">`, JSON and a .NET `DateTime` of unspecified kind use. A string and not a Date, for the reason the
+     * DatePicker gives. Until both parts are in, the value is `undefined` and the parts keep what was entered.
+     */
+    value: string | undefined;
+    /** Called with a usable moment, or `undefined`; the second argument says which of the cases it was (see `TDateTimeState`). */
+    onValueChange: (value: string | undefined, state: TDateTimeState) => void;
+    /** The earliest and latest moment, `yyyy-mm-dd` or `yyyy-mm-ddTHH:mm`; a time holds on its own day. */
+    min?: string;
+    max?: string;
+    disabledDates?: TDisabledDays;
+    disabled?: boolean;
+    locale?: string;
+    calendarLocale?: Locale;
+    granularity?: TTimeFieldGranularity;
+    hourCycle?: TTimeFieldHourCycle;
+    /** Submits the moment with a form, under this name, as the value above; nothing while a part is missing. */
+    name?: string;
+    /** The group's accessible name, when there is no visible label to point at. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** The id of the text that explains it; it goes to the date part. */
+    'aria-describedby'?: string;
+    labels?: Partial<IDateTimeLabels>;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A moment typed and picked in the kit's fields: a DatePicker and a TimeField side by side, with the value of one
+ * `<input type="datetime-local">`. It has an entry of its own, `@exsto/ds/date-time`. The parts keep what was entered while the
+ * other is missing; the value is `undefined` until both are in.
+ */
+export declare const DateTime: ({ id, value, onValueChange, min, max, disabledDates, disabled, locale, calendarLocale, granularity, hourCycle, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className, }: IDateTimeProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/date-time/date-time.js

@@ -0,0 +1,119 @@
+import { cn } from "../../../lib/utils.js";
+import { DatePicker } from "../date-picker/date-picker.js";
+import { TimeField } from "../time-field/time-field.js";
+import { dayOf, joinDateTime, splitDateTime, timeLimits, timeOutside } from "./date-time-value.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../ui/src/components/edyn/date-time/date-time.tsx
+var DEFAULT_DATE_TIME_LABELS = {
+	date: "Date",
+	time: "Time",
+	datePicker: {},
+	timeField: {}
+};
+/**
+* A moment typed and picked in the kit's fields: a DatePicker and a TimeField side by side, with the value of one
+* `<input type="datetime-local">`. It has an entry of its own, `@exsto/ds/date-time`. The parts keep what was entered while the
+* other is missing; the value is `undefined` until both are in.
+*/
+var DateTime = ({ id, value, onValueChange, min, max, disabledDates, disabled = false, locale = "en-GB", calendarLocale, granularity, hourCycle, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className }) => {
+	const labels = useMemo(() => ({
+		...DEFAULT_DATE_TIME_LABELS,
+		...labelOverrides
+	}), [labelOverrides]);
+	const [parts, setParts] = useState(() => splitDateTime(value));
+	const [seen, setSeen] = useState(value);
+	const refReported = useRef(value);
+	const refDate = useRef({ kind: parts.day === "" ? "empty" : "day" });
+	if (value !== seen) {
+		setSeen(value);
+		if (value !== refReported.current) {
+			refReported.current = value;
+			setParts(splitDateTime(value));
+			refDate.current = { kind: value === void 0 ? "empty" : "day" };
+		}
+	}
+	const limits = timeLimits(parts.day, min, max);
+	const timeOut = timeOutside(parts.time, limits);
+	const report = (next, date) => {
+		const joined = joinDateTime(next);
+		let state;
+		if (date.kind === "refused") state = {
+			kind: "refused",
+			text: date.text,
+			problem: date.problem
+		};
+		else if (joined !== void 0) state = date.kind === "out-of-range" || timeOutside(next.time, timeLimits(next.day, min, max)) ? { kind: "out-of-range" } : { kind: "datetime" };
+		else if (next.day === "" && next.time === "") state = { kind: "empty" };
+		else state = {
+			kind: "incomplete",
+			missing: next.day === "" ? "date" : "time"
+		};
+		refReported.current = joined;
+		onValueChange(joined, state);
+	};
+	const onDate = (day, state) => {
+		const next = {
+			...parts,
+			day: day ?? ""
+		};
+		refDate.current = state;
+		setParts(next);
+		report(next, state);
+	};
+	const onTime = (time) => {
+		const next = {
+			...parts,
+			time
+		};
+		setParts(next);
+		report(next, refDate.current);
+	};
+	const invalid = ariaInvalid === true || ariaInvalid === "true";
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-slot": "date-time-group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className: cn("flex min-w-0 flex-wrap items-start gap-2", className),
+		children: [
+			/* @__PURE__ */ jsx(DatePicker, {
+				id,
+				value: parts.day === "" ? void 0 : parts.day,
+				onValueChange: onDate,
+				min: dayOf(min),
+				max: dayOf(max),
+				disabledDates,
+				disabled,
+				locale,
+				calendarLocale,
+				"aria-label": labels.date,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": ariaDescribedBy,
+				labels: labels.datePicker,
+				className: "w-44"
+			}),
+			/* @__PURE__ */ jsx(TimeField, {
+				value: parts.time,
+				onValueChange: onTime,
+				granularity,
+				hourCycle,
+				min: limits.min,
+				max: limits.max,
+				disabled,
+				invalid: invalid || timeOut,
+				"aria-label": labels.time,
+				labels: labels.timeField
+			}),
+			name !== void 0 && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: joinDateTime(parts) ?? "",
+				disabled
+			})
+		]
+	});
+};
+//#endregion
+export { DEFAULT_DATE_TIME_LABELS, DateTime };
+
+//# sourceMappingURL=date-time.js.map

package/dist/ui/src/components/edyn/date-time/date-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-time/date-time.tsx"],"sourcesContent":["import { DatePicker, type IDatePickerLabels, type TDatePickerState, type TDisabledDays } from '@edyn/ui/components/edyn/date-picker';\nimport { type ITimeFieldLabels, TimeField, type TTimeFieldGranularity, type TTimeFieldHourCycle } from '@edyn/ui/components/edyn/time-field';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { useMemo, useRef, useState } from 'react';\nimport type { Locale } from 'react-day-picker';\nimport { dayOf, joinDateTime, splitDateTime, timeLimits, timeOutside } from './date-time-value';\n\nexport interface IDateTimeLabels {\n  /** The names of the two parts, for a screen reader. */\n  date: string;\n  time: string;\n  /** The DatePicker's and the TimeField's own words (messages, the segments' names). */\n  datePicker: Partial<IDatePickerLabels>;\n  timeField: Partial<ITimeFieldLabels>;\n}\n\nexport const DEFAULT_DATE_TIME_LABELS: IDateTimeLabels = { date: 'Date', time: 'Time', datePicker: {}, timeField: {} };\n\n/**\n * What the field holds when it reports:\n * - `datetime`: a day and a time, both usable.\n * - `empty`: neither part has anything in it.\n * - `incomplete`: one part is in and the other is not (`missing` says which). The value reported is `undefined`.\n * - `refused`: the date part holds text that is not a day; `text` and `problem` are the DatePicker's.\n * - `out-of-range`: both parts are in, and `min`, `max` or `disabledDates` refuse the day or the time. The value IS reported, so a\n *   form's own rule can judge it; the field is marked invalid. Check `kind` before treating the value as a usable one.\n */\nexport type TDateTimeState =\n  | { kind: 'datetime' }\n  | { kind: 'empty' }\n  | { kind: 'incomplete'; missing: 'date' | 'time' }\n  | { kind: 'refused'; text: string; problem: string }\n  | { kind: 'out-of-range' };\n\nexport interface IDateTimeProps {\n  /** For a Label's htmlFor: it goes to the date part, the first control. */\n  id?: string;\n  /**\n   * The chosen moment as `yyyy-mm-ddTHH:mm` (`:ss` with `granularity=\"second\"`), or `undefined` for none: local time and no zone, as\n   * `<input type=\"datetime-local\">`, JSON and a .NET `DateTime` of unspecified kind use. A string and not a Date, for the reason the\n   * DatePicker gives. Until both parts are in, the value is `undefined` and the parts keep what was entered.\n   */\n  value: string | undefined;\n  /** Called with a usable moment, or `undefined`; the second argument says which of the cases it was (see `TDateTimeState`). */\n  onValueChange: (value: string | undefined, state: TDateTimeState) => void;\n  /** The earliest and latest moment, `yyyy-mm-dd` or `yyyy-mm-ddTHH:mm`; a time holds on its own day. */\n  min?: string;\n  max?: string;\n  disabledDates?: TDisabledDays;\n  disabled?: boolean;\n  locale?: string;\n  calendarLocale?: Locale;\n  granularity?: TTimeFieldGranularity;\n  hourCycle?: TTimeFieldHourCycle;\n  /** Submits the moment with a form, under this name, as the value above; nothing while a part is missing. */\n  name?: string;\n  /** The group's accessible name, when there is no visible label to point at. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /** The id of the text that explains it; it goes to the date part. */\n  'aria-describedby'?: string;\n  labels?: Partial<IDateTimeLabels>;\n  /** Layout only. */\n  className?: string;\n}\n\n/**\n * A moment typed and picked in the kit's fields: a DatePicker and a TimeField side by side, with the value of one\n * `<input type=\"datetime-local\">`. It has an entry of its own, `@exsto/ds/date-time`. The parts keep what was entered while the\n * other is missing; the value is `undefined` until both are in.\n */\nexport const DateTime = ({\n  id,\n  value,\n  onValueChange,\n  min,\n  max,\n  disabledDates,\n  disabled = false,\n  locale = 'en-GB',\n  calendarLocale,\n  granularity,\n  hourCycle,\n  name,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  labels: labelOverrides,\n  className,\n}: IDateTimeProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_DATE_TIME_LABELS, ...labelOverrides }), [labelOverrides]);\n  const [parts, setParts] = useState(() => splitDateTime(value));\n  const [seen, setSeen] = useState(value);\n  // What the parent was last told, so that its echo is not taken for a change from outside.\n  const refReported = useRef(value);\n  const refDate = useRef<TDatePickerState>({ kind: parts.day === '' ? 'empty' : 'day' });\n  if (value !== seen) {\n    setSeen(value);\n    if (value !== refReported.current) {\n      refReported.current = value;\n      setParts(splitDateTime(value));\n      refDate.current = { kind: value === undefined ? 'empty' : 'day' };\n    }\n  }\n\n  const limits = timeLimits(parts.day, min, max);\n  const timeOut = timeOutside(parts.time, limits);\n\n  const report = (next: { day: string; time: string }, date: TDatePickerState): void => {\n    const joined = joinDateTime(next);\n    let state: TDateTimeState;\n    if (date.kind === 'refused') {\n      state = { kind: 'refused', text: date.text, problem: date.problem };\n    } else if (joined !== undefined) {\n      state =\n        date.kind === 'out-of-range' || timeOutside(next.time, timeLimits(next.day, min, max)) ? { kind: 'out-of-range' } : { kind: 'datetime' };\n    } else if (next.day === '' && next.time === '') {\n      state = { kind: 'empty' };\n    } else {\n      state = { kind: 'incomplete', missing: next.day === '' ? 'date' : 'time' };\n    }\n    refReported.current = joined;\n    onValueChange(joined, state);\n  };\n\n  const onDate = (day: string | undefined, state: TDatePickerState): void => {\n    const next = { ...parts, day: day ?? '' };\n    refDate.current = state;\n    setParts(next);\n    report(next, state);\n  };\n\n  const onTime = (time: string): void => {\n    const next = { ...parts, time };\n    setParts(next);\n    report(next, refDate.current);\n  };\n\n  const invalid = ariaInvalid === true || ariaInvalid === 'true';\n  return (\n    <fieldset\n      data-slot=\"date-time-group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={cn('flex min-w-0 flex-wrap items-start gap-2', className)}\n    >\n      <DatePicker\n        id={id}\n        value={parts.day === '' ? undefined : parts.day}\n        onValueChange={onDate}\n        min={dayOf(min)}\n        max={dayOf(max)}\n        disabledDates={disabledDates}\n        disabled={disabled}\n        locale={locale}\n        calendarLocale={calendarLocale}\n        aria-label={labels.date}\n        aria-invalid={invalid || undefined}\n        aria-describedby={ariaDescribedBy}\n        labels={labels.datePicker}\n        className=\"w-44\"\n      />\n      <TimeField\n        value={parts.time}\n        onValueChange={onTime}\n        granularity={granularity}\n        hourCycle={hourCycle}\n        min={limits.min}\n        max={limits.max}\n        disabled={disabled}\n        invalid={invalid || timeOut}\n        aria-label={labels.time}\n        labels={labels.timeField}\n      />\n      {name !== undefined && <input type=\"hidden\" name={name} value={joinDateTime(parts) ?? ''} disabled={disabled} />}\n    </fieldset>\n  );\n};\n"],"mappings":";;;;;;;AAgBA,IAAa,2BAA4C;CAAE,MAAM;CAAQ,MAAM;CAAQ,YAAY,CAAC;CAAG,WAAW,CAAC;AAAE;;;;;;AAwDrH,IAAa,YAAY,EACvB,IACA,OACA,eACA,KACA,KACA,eACA,WAAW,OACX,SAAS,SACT,gBACA,aACA,WACA,MACA,cAAc,WACd,mBAAmB,gBACnB,gBAAgB,aAChB,oBAAoB,iBACpB,QAAQ,gBACR,gBACoB;CACpB,MAAM,SAAS,eAAe;EAAE,GAAG;EAA0B,GAAG;CAAe,IAAI,CAAC,cAAc,CAAC;CACnG,MAAM,CAAC,OAAO,YAAY,eAAe,cAAc,KAAK,CAAC;CAC7D,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,UAAU,OAAyB,EAAE,MAAM,MAAM,QAAQ,KAAK,UAAU,MAAM,CAAC;CACrF,IAAI,UAAU,MAAM;EAClB,QAAQ,KAAK;EACb,IAAI,UAAU,YAAY,SAAS;GACjC,YAAY,UAAU;GACtB,SAAS,cAAc,KAAK,CAAC;GAC7B,QAAQ,UAAU,EAAE,MAAM,UAAU,KAAA,IAAY,UAAU,MAAM;EAClE;CACF;CAEA,MAAM,SAAS,WAAW,MAAM,KAAK,KAAK,GAAG;CAC7C,MAAM,UAAU,YAAY,MAAM,MAAM,MAAM;CAE9C,MAAM,UAAU,MAAqC,SAAiC;EACpF,MAAM,SAAS,aAAa,IAAI;EAChC,IAAI;EACJ,IAAI,KAAK,SAAS,WAChB,QAAQ;GAAE,MAAM;GAAW,MAAM,KAAK;GAAM,SAAS,KAAK;EAAQ;OAC7D,IAAI,WAAW,KAAA,GACpB,QACE,KAAK,SAAS,kBAAkB,YAAY,KAAK,MAAM,WAAW,KAAK,KAAK,KAAK,GAAG,CAAC,IAAI,EAAE,MAAM,eAAe,IAAI,EAAE,MAAM,WAAW;OACpI,IAAI,KAAK,QAAQ,MAAM,KAAK,SAAS,IAC1C,QAAQ,EAAE,MAAM,QAAQ;OAExB,QAAQ;GAAE,MAAM;GAAc,SAAS,KAAK,QAAQ,KAAK,SAAS;EAAO;EAE3E,YAAY,UAAU;EACtB,cAAc,QAAQ,KAAK;CAC7B;CAEA,MAAM,UAAU,KAAyB,UAAkC;EACzE,MAAM,OAAO;GAAE,GAAG;GAAO,KAAK,OAAO;EAAG;EACxC,QAAQ,UAAU;EAClB,SAAS,IAAI;EACb,OAAO,MAAM,KAAK;CACpB;CAEA,MAAM,UAAU,SAAuB;EACrC,MAAM,OAAO;GAAE,GAAG;GAAO;EAAK;EAC9B,SAAS,IAAI;EACb,OAAO,MAAM,QAAQ,OAAO;CAC9B;CAEA,MAAM,UAAU,gBAAgB,QAAQ,gBAAgB;CACxD,OACE,qBAAC,YAAD;EACE,aAAU;EACV,cAAY;EACZ,mBAAiB;EACjB,WAAW,GAAG,4CAA4C,SAAS;EAJrE,UAAA;GAME,oBAAC,YAAD;IACM;IACJ,OAAO,MAAM,QAAQ,KAAK,KAAA,IAAY,MAAM;IAC5C,eAAe;IACf,KAAK,MAAM,GAAG;IACd,KAAK,MAAM,GAAG;IACC;IACL;IACF;IACQ;IAChB,cAAY,OAAO;IACnB,gBAAc,WAAW,KAAA;IACzB,oBAAkB;IAClB,QAAQ,OAAO;IACf,WAAU;GACX,CAAA;GACD,oBAAC,WAAD;IACE,OAAO,MAAM;IACb,eAAe;IACF;IACF;IACX,KAAK,OAAO;IACZ,KAAK,OAAO;IACF;IACV,SAAS,WAAW;IACpB,cAAY,OAAO;IACnB,QAAQ,OAAO;GAChB,CAAA;GACA,SAAS,KAAA,KAAa,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO,aAAa,KAAK,KAAK;IAAc;GAAW,CAAA;EACvG;;AAEd"}

package/dist/ui/src/components/edyn/date-time/date-time.state.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * What a DateTime tells the page: the value is one string while both parts are in, `undefined` while one is missing, and the
+ * second argument of `onValueChange` says which case it was. happy-dom is enough: the report does not depend on layout.
+ * `e2e/date-time.spec.ts` covers the same in a browser, with the calendar.
+ */
+export {};

package/dist/ui/src/components/edyn/date-time/index.d.ts

@@ -0,0 +1 @@
+export * from './date-time';

package/dist/ui/src/components/edyn/multi-select/multi-select.js

@@ -265,6 +265,8 @@ var MultiSelect = ({ placeholder, searchPlaceholder, searchFrom = 8, options, va
 			className: POPUP_LAYER_CLASS,
 			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 				"data-slot": "multi-select-content",
+				"aria-label": rest["aria-labelledby"] === void 0 ? rest["aria-label"] ?? placeholder : void 0,
+				"aria-labelledby": rest["aria-labelledby"],
 				className: POPUP,
 				children: [
 					/* @__PURE__ */ jsxs("div", {

package/dist/ui/src/components/edyn/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/multi-select/multi-select.tsx"],"sourcesContent":["import { Combobox } from '@base-ui/react/combobox';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@edyn/ui/components/ui/tooltip';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_FRAME_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\n/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */\nexport type TMultiSelectOption = { value: string; label: string; count?: number; leading?: ReactNode };\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IMultiSelectLabels {\n  noMatches: string;\n  loading: string;\n  /** Shown when `error` is `true`; a string `error` replaces it. */\n  error: string;\n  retry: string;\n  loadMore: string;\n  loadingMore: string;\n  clear: string;\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels = {\n  noMatches: 'No matches.',\n  loading: 'Loading…',\n  error: 'Could not load the options.',\n  retry: 'Try again',\n  loadMore: 'Load more',\n  loadingMore: 'Loading…',\n  clear: 'Clear',\n  selectedCount: (count) => `${count} selected`,\n};\n\n/** Above this many options a list draws only the rows on screen. */\nexport const VIRTUALIZE_FROM = 100;\n\n/** The number of options up to which a MultiSelect does not show its search field (see `searchFrom`). */\nexport const SEARCH_FROM = 8;\n\nconst ITEM_HEIGHT = 32;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IMultiSelectProps\n  extends Omit<\n    ComponentPropsWithoutRef<'button'>,\n    'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'\n  > {\n  /** The trigger's text with nothing picked, which means no filter (\"All dealer groups\"). */\n  placeholder: string;\n  /** The search field's prompt (\"Search dealer groups…\"). */\n  searchPlaceholder: string;\n  /**\n   * How many options a list must have before it shows its search field: it is there for a list too long to scan, and over a short\n   * one it is a box in the way. Above this many (default 8, the rows a popup shows at once) the field shows; at or under, it\n   * does not. In async mode it always shows, because the field is how the caller is told what to fetch. `0` always shows it.\n   *\n   * Hidden, the field is still in the popup, out of sight and not typable, because it is what Base UI moves the highlight\n   * from: the arrow keys, Home, End and Enter work as ever, and a screen reader still finds it by its label.\n   */\n  searchFrom?: number;\n  /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */\n  options: readonly TMultiSelectOption[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  /**\n   * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;\n   * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is\n   * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.\n   */\n  summary?: 'selection' | 'label';\n  /** For a Label's htmlFor. */\n  id?: string;\n  'aria-label'?: string;\n  /**\n   * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use\n   * Field; inside one, its invalid state already does this.\n   */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /**\n   * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.\n   */\n  'aria-describedby'?: string;\n  /** Shown but not changeable (a read-only form). */\n  disabled?: boolean;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n  /**\n   * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must\n   * be searched by the API rather than loaded whole and filtered in the browser. The\n   * component then never filters: it reports the typed text (after `searchDelay`) and shows\n   * whatever `options` the caller supplies for it. It is also called with '' each time the\n   * list opens, so the first page is fetched on demand, not at page load.\n   */\n  onSearchChange?: (text: string) => void;\n  /** How long typing must pause before `onSearchChange` is called. Async mode only. */\n  searchDelay?: number;\n  /**\n   * The options behind the chosen values, for the ones not in the current `options`. A\n   * search that no longer returns a chosen value must not make it vanish from the trigger\n   * or the count, so the caller says what it is called. Without a label a value shows as\n   * itself.\n   */\n  selectedOptions?: readonly TMultiSelectOption[];\n  /** The options for the typed text are on their way. The old ones stay until they arrive. */\n  loading?: boolean;\n  /** The request failed: `true` for the default message, or the message itself. */\n  error?: boolean | string;\n  onRetry?: () => void;\n  /** There is another page after `options`. */\n  hasMore?: boolean;\n  onLoadMore?: () => void;\n  /** The next page is on its way. */\n  loadingMore?: boolean;\n  labels?: Partial<IMultiSelectLabels>;\n}\n\n/**\n * The options behind the chosen values, in the order they were chosen. A value with no\n * known option is kept and shown as itself rather than dropped: a selection must never\n * change just because a list did.\n */\nexport const resolveChosen = (\n  value: readonly string[],\n  options: readonly TMultiSelectOption[],\n  selectedOptions: readonly TMultiSelectOption[] = [],\n): TMultiSelectOption[] => {\n  const known = new Map<string, TMultiSelectOption>();\n  for (const option of [...selectedOptions, ...options]) {\n    known.set(option.value, option);\n  }\n  return value.map((entry) => known.get(entry) ?? { value: entry, label: entry });\n};\n\n/** What the trigger says: the placeholder, the one picked, or a count. */\nexport const summarize = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string => {\n  if (chosen.length === 0) {\n    return placeholder;\n  }\n  if (summary === 'label') {\n    return labels.selectedCount(chosen.length);\n  }\n  return chosen.length === 1 ? (chosen[0]?.label ?? '') : labels.selectedCount(chosen.length);\n};\n\n/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */\nexport const fullSelection = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string =>\n  summary === 'selection' && chosen.length > 0 ? chosen.map((option) => option.label).join(', ') : summarize(chosen, placeholder, labels, summary);\n\nconst POPUP = cn(\n  'flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n  POPUP_FRAME_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n);\n\nconst TRIGGER =\n  'flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-control bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:outline-solid dark:bg-input/30';\n\nconst Option = ({\n  option,\n  index,\n  style,\n  measure,\n  highlighted,\n}: {\n  option: TMultiSelectOption;\n  index: number;\n  style?: CSSProperties;\n  measure?: (node: Element | null) => void;\n  highlighted: boolean;\n}) => {\n  const [cut, setCut] = useState(false);\n  // A callback ref, so measuring starts when the label mounts and stops when it goes; the key on the label below mounts a fresh one\n  // when the text changes, which a resize observer alone would miss at an unchanged width.\n  const measureLabel = useCallback((element: HTMLSpanElement | null) => {\n    if (!element) {\n      return;\n    }\n    const measureCut = (): void => setCut(element.scrollWidth > element.clientWidth);\n    measureCut();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measureCut);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Combobox.Item\n      value={option}\n      index={index}\n      ref={measure}\n      data-index={index}\n      style={style}\n      data-slot=\"multi-select-item\"\n      className={cn(popupItemClass('base-ui'), 'group')}\n    >\n      {/* A checkbox, filled when chosen: a set of toggles reads as one. */}\n      <span\n        data-slot=\"multi-select-item-indicator\"\n        aria-hidden=\"true\"\n        className=\"flex size-4 shrink-0 items-center justify-center rounded-sm border border-control text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary\"\n      >\n        <IconCheck className=\"size-3 opacity-0 group-data-[selected]:opacity-100\" stroke={3} />\n      </span>\n      {option.leading}\n      {/* The option is the highlighted one under the pointer and under the keyboard alike, so one controlled tooltip serves both: the full label while the text is cut. */}\n      <Tooltip open={highlighted && cut}>\n        <TooltipTrigger\n          key={option.label}\n          data-slot=\"multi-select-item-label\"\n          data-overflowing={cut ? '' : undefined}\n          render={<span ref={measureLabel} className=\"min-w-0 flex-1 truncate\" />}\n        >\n          {option.label}\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{option.label}</TooltipContent>\n      </Tooltip>\n      {/* Muted grey is 4.2:1 on the highlighted row (6% of the foreground), under the 4.5:1 small text needs, so the count turns to the foreground with its row, as a CommandShortcut does. */}\n      {option.count !== undefined && (\n        <span className=\"text-xs text-muted-foreground tabular-nums group-data-highlighted:text-foreground\">{option.count}</span>\n      )}\n    </Combobox.Item>\n  );\n};\n\n// The options on offer, every one drawn, or past VIRTUALIZE_FROM only those on screen. The\n// list is the listbox itself (the options its direct children), sized to the whole list\n// when virtualized; the ScrollArea wraps it.\nconst Options = ({\n  scroller,\n  scrollTo,\n  busy,\n  highlightedValue,\n}: {\n  scroller: RefObject<HTMLDivElement | null>;\n  scrollTo: RefObject<(index: number) => void>;\n  busy: boolean;\n  highlightedValue: string | null;\n}) => {\n  const items = Combobox.useFilteredItems<TMultiSelectOption>();\n  const virtual = items.length > VIRTUALIZE_FROM;\n  // The scroller is an ancestor, so its ref is set only after this list's own effects:\n  // one more render once mounted gives the virtualizer its element.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scroller.current,\n    estimateSize: () => ITEM_HEIGHT,\n    overscan: 12,\n    enabled: virtual && mounted,\n  });\n  useEffect(() => {\n    scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: 'auto' }) : () => undefined;\n  }, [scrollTo, virtual, virtualizer]);\n  if (!virtual) {\n    return (\n      <Combobox.List aria-busy={busy || undefined} className=\"px-1 outline-none\">\n        {items.map((option, index) => (\n          <Option key={option.value} option={option} index={index} highlighted={highlightedValue === option.value} />\n        ))}\n      </Combobox.List>\n    );\n  }\n  return (\n    <Combobox.List\n      data-virtualized=\"\"\n      aria-busy={busy || undefined}\n      className=\"relative mx-1 outline-none\"\n      style={{ height: virtualizer.getTotalSize() }}\n    >\n      {virtualizer.getVirtualItems().map((row) => {\n        const option = items[row.index];\n        return option === undefined ? null : (\n          <Option\n            key={option.value}\n            option={option}\n            index={row.index}\n            highlighted={highlightedValue === option.value}\n            measure={virtualizer.measureElement}\n            style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${row.start}px)` }}\n          />\n        );\n      })}\n    </Combobox.List>\n  );\n};\n\n/** Rendered inside the portal, so it exists only while the list is open: the focus guards around the list are not aria-hidden. */\nconst ExposedFocusGuards = () => {\n  useExposedFocusGuards();\n  return null;\n};\n\n/**\n * A choice of several from a list: a trigger shaped like a Select that says what is picked\n * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox\n * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization\n * past VIRTUALIZE_FROM options. Nothing chosen means no filter.\n *\n * For a short fixed list pass `options` and nothing else: the component filters them as the\n * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a\n * server: the caller fetches the options for the typed text, and says when they are loading,\n * failed, or have another page.\n */\nexport const MultiSelect = ({\n  placeholder,\n  searchPlaceholder,\n  searchFrom = SEARCH_FROM,\n  options,\n  value,\n  onValueChange,\n  id,\n  disabled = false,\n  className,\n  onSearchChange,\n  searchDelay = 250,\n  selectedOptions,\n  loading = false,\n  error = false,\n  onRetry,\n  hasMore = false,\n  onLoadMore,\n  loadingMore = false,\n  labels: labelOverrides,\n  summary = 'selection',\n  ...rest\n}: IMultiSelectProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_MULTI_SELECT_LABELS, ...labelOverrides }), [labelOverrides]);\n  const isAsync = onSearchChange !== undefined;\n  const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [value, options, selectedOptions]);\n  // Chosen options the current page does not contain stay on offer at the top, so they can\n  // still be unchecked after a search has moved on.\n  const items = useMemo(() => {\n    const offered = new Set(options.map((option) => option.value));\n    return [...chosen.filter((option) => !offered.has(option.value)), ...options];\n  }, [chosen, options]);\n  const refScroller = useRef<HTMLDivElement | null>(null);\n  const refScrollTo = useRef<(index: number) => void>(() => undefined);\n  const refTimer = useRef<number | undefined>(undefined);\n  const refTriggerText = useRef<HTMLSpanElement | null>(null);\n  const refSearch = useRef<HTMLInputElement | null>(null);\n  // The popup and the trigger's tooltip are two hover surfaces on one element, so the tooltip stands down while the popup is open.\n  const [popupOpen, setPopupOpen] = useState(false);\n  // The option under the pointer or the keyboard, whichever moved last, for the tooltip that shows a cut label in full.\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // The text last reported through onSearchChange, and whether the popup is open. Base UI\n  // reports the input as empty when the popup opens and again when it closes; reporting\n  // those would fetch the first page twice on every open, and again while closed.\n  const refReported = useRef<string | undefined>(undefined);\n  const refOpen = useRef(false);\n  // Over a short list the search is a box in the way; the list still counts what was offered, so a chosen option the page lacks\n  // does not hide the field.\n  const searchable = isAsync || items.length > searchFrom;\n  const errorMessage = typeof error === 'string' ? error : labels.error;\n  const failed = error !== false;\n\n  useEffect(() => () => window.clearTimeout(refTimer.current), []);\n\n  // Base UI gives the search field a key handler that closes the popup on Escape and keeps the key from the page, but not\n  // the trigger: with focus back on the trigger and the popup still open (a click that landed while a Sheet slid in,\n  // `focus()`, Shift+Tab) Escape reached the document, where an enclosing Sheet or Dialog closed along with the popup.\n  // So the trigger hands Escape to the search field, the path that already works, and the key goes no further.\n  const closeFromTrigger = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || !popupOpen || refSearch.current === null) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n    refSearch.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  return (\n    <Combobox.Root\n      multiple\n      disabled={disabled}\n      items={items}\n      filter={isAsync ? null : undefined}\n      value={chosen}\n      onValueChange={(next: TMultiSelectOption[]) => onValueChange(next.map((option) => option.value))}\n      onInputValueChange={(text) => {\n        if (onSearchChange === undefined || !refOpen.current) {\n          return;\n        }\n        window.clearTimeout(refTimer.current);\n        if (text === refReported.current) {\n          return;\n        }\n        refTimer.current = window.setTimeout(() => {\n          refReported.current = text;\n          onSearchChange(text);\n        }, searchDelay);\n      }}\n      onOpenChange={(open) => {\n        window.clearTimeout(refTimer.current);\n        setPopupOpen(open);\n        if (!open) {\n          setHighlightedValue(null);\n        }\n        refOpen.current = open;\n        refReported.current = open ? '' : undefined;\n        if (open && onSearchChange !== undefined) {\n          onSearchChange('');\n        }\n      }}\n      itemToStringLabel={(option: TMultiSelectOption) => option.label}\n      isItemEqualToValue={(a: TMultiSelectOption, b: TMultiSelectOption) => a.value === b.value}\n      virtualized={items.length > VIRTUALIZE_FROM}\n      onItemHighlighted={(item, details) => {\n        setHighlightedValue(item?.value ?? null);\n        if (details.reason === 'keyboard' && details.index >= 0) {\n          refScrollTo.current(details.index);\n        }\n      }}\n    >\n      {/* A tooltip only when the text is really cut, which is known when it is about to open. */}\n      <Tooltip\n        disabled={popupOpen}\n        onOpenChange={(open, details) => {\n          const element = refTriggerText.current;\n          if (open && !(element && element.scrollWidth > element.clientWidth)) {\n            details.cancel();\n          }\n        }}\n      >\n        <TooltipTrigger\n          data-slot=\"multi-select-trigger\"\n          render={\n            <Combobox.Trigger\n              {...rest}\n              id={id}\n              data-set={chosen.length > 0 ? '' : undefined}\n              onKeyDown={closeFromTrigger}\n              className={cn(TRIGGER, className)}\n            />\n          }\n        >\n          <span ref={refTriggerText} className={cn('min-w-0 flex-1 truncate text-left', chosen.length === 0 && 'text-muted-foreground')}>\n            {summarize(chosen, placeholder, labels, summary)}\n          </span>\n          <IconChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>{fullSelection(chosen, placeholder, labels, summary)}</TooltipContent>\n      </Tooltip>\n      <Combobox.Portal>\n        <ExposedFocusGuards />\n        <Combobox.Positioner sideOffset={4} align=\"start\" className={POPUP_LAYER_CLASS}>\n          <Combobox.Popup data-slot=\"multi-select-content\" className={POPUP}>\n            <div className={searchable ? 'flex shrink-0 items-center gap-2 border-b border-border px-3' : 'sr-only'}>\n              <IconSearch aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n              <Combobox.Input\n                ref={refSearch}\n                readOnly={!searchable}\n                placeholder={searchPlaceholder}\n                aria-label={searchPlaceholder.replace(/…$/, '')}\n                className=\"h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n            {/* The live region stays mounted and only its words change, which is what makes a\n                screen reader announce them. */}\n            <Combobox.Status data-slot=\"multi-select-status\" className=\"px-3 py-2 text-sm text-muted-foreground empty:p-0\">\n              {failed ? (\n                <span className=\"flex items-center justify-between gap-2 text-destructive\">\n                  {errorMessage}\n                  {onRetry !== undefined && (\n                    <button type=\"button\" onClick={onRetry} className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\">\n                      {labels.retry}\n                    </button>\n                  )}\n                </span>\n              ) : loading ? (\n                labels.loading\n              ) : null}\n            </Combobox.Status>\n            <Combobox.Empty className=\"px-3 py-6 text-center text-sm text-muted-foreground empty:p-0\">\n              {loading || failed ? null : labels.noMatches}\n            </Combobox.Empty>\n            <ScrollArea type=\"always\" fade viewportRef={refScroller} className={POPUP_LIST_HEIGHT_CLASS}>\n              <Options scroller={refScroller} scrollTo={refScrollTo} busy={loading} highlightedValue={highlightedValue} />\n            </ScrollArea>\n            {hasMore && onLoadMore !== undefined && (\n              <div className=\"shrink-0 border-t border-border p-1\">\n                <button\n                  type=\"button\"\n                  disabled={loadingMore}\n                  onClick={onLoadMore}\n                  className=\"h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {loadingMore ? labels.loadingMore : labels.loadMore}\n                </button>\n              </div>\n            )}\n            {chosen.length > 0 && (\n              <div className=\"flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground\">\n                <span className=\"tabular-nums\">{labels.selectedCount(chosen.length)}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onValueChange([])}\n                  className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            )}\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/multi-select/multi-select.tsx"],"sourcesContent":["import { Combobox } from '@base-ui/react/combobox';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@edyn/ui/components/ui/tooltip';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_FRAME_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\n/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */\nexport type TMultiSelectOption = { value: string; label: string; count?: number; leading?: ReactNode };\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IMultiSelectLabels {\n  noMatches: string;\n  loading: string;\n  /** Shown when `error` is `true`; a string `error` replaces it. */\n  error: string;\n  retry: string;\n  loadMore: string;\n  loadingMore: string;\n  clear: string;\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels = {\n  noMatches: 'No matches.',\n  loading: 'Loading…',\n  error: 'Could not load the options.',\n  retry: 'Try again',\n  loadMore: 'Load more',\n  loadingMore: 'Loading…',\n  clear: 'Clear',\n  selectedCount: (count) => `${count} selected`,\n};\n\n/** Above this many options a list draws only the rows on screen. */\nexport const VIRTUALIZE_FROM = 100;\n\n/** The number of options up to which a MultiSelect does not show its search field (see `searchFrom`). */\nexport const SEARCH_FROM = 8;\n\nconst ITEM_HEIGHT = 32;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IMultiSelectProps\n  extends Omit<\n    ComponentPropsWithoutRef<'button'>,\n    'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'\n  > {\n  /** The trigger's text with nothing picked, which means no filter (\"All dealer groups\"). */\n  placeholder: string;\n  /** The search field's prompt (\"Search dealer groups…\"). */\n  searchPlaceholder: string;\n  /**\n   * How many options a list must have before it shows its search field: it is there for a list too long to scan, and over a short\n   * one it is a box in the way. Above this many (default 8, the rows a popup shows at once) the field shows; at or under, it\n   * does not. In async mode it always shows, because the field is how the caller is told what to fetch. `0` always shows it.\n   *\n   * Hidden, the field is still in the popup, out of sight and not typable, because it is what Base UI moves the highlight\n   * from: the arrow keys, Home, End and Enter work as ever, and a screen reader still finds it by its label.\n   */\n  searchFrom?: number;\n  /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */\n  options: readonly TMultiSelectOption[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  /**\n   * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;\n   * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is\n   * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.\n   */\n  summary?: 'selection' | 'label';\n  /** For a Label's htmlFor. */\n  id?: string;\n  'aria-label'?: string;\n  /**\n   * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use\n   * Field; inside one, its invalid state already does this.\n   */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /**\n   * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.\n   */\n  'aria-describedby'?: string;\n  /** Shown but not changeable (a read-only form). */\n  disabled?: boolean;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n  /**\n   * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must\n   * be searched by the API rather than loaded whole and filtered in the browser. The\n   * component then never filters: it reports the typed text (after `searchDelay`) and shows\n   * whatever `options` the caller supplies for it. It is also called with '' each time the\n   * list opens, so the first page is fetched on demand, not at page load.\n   */\n  onSearchChange?: (text: string) => void;\n  /** How long typing must pause before `onSearchChange` is called. Async mode only. */\n  searchDelay?: number;\n  /**\n   * The options behind the chosen values, for the ones not in the current `options`. A\n   * search that no longer returns a chosen value must not make it vanish from the trigger\n   * or the count, so the caller says what it is called. Without a label a value shows as\n   * itself.\n   */\n  selectedOptions?: readonly TMultiSelectOption[];\n  /** The options for the typed text are on their way. The old ones stay until they arrive. */\n  loading?: boolean;\n  /** The request failed: `true` for the default message, or the message itself. */\n  error?: boolean | string;\n  onRetry?: () => void;\n  /** There is another page after `options`. */\n  hasMore?: boolean;\n  onLoadMore?: () => void;\n  /** The next page is on its way. */\n  loadingMore?: boolean;\n  labels?: Partial<IMultiSelectLabels>;\n}\n\n/**\n * The options behind the chosen values, in the order they were chosen. A value with no\n * known option is kept and shown as itself rather than dropped: a selection must never\n * change just because a list did.\n */\nexport const resolveChosen = (\n  value: readonly string[],\n  options: readonly TMultiSelectOption[],\n  selectedOptions: readonly TMultiSelectOption[] = [],\n): TMultiSelectOption[] => {\n  const known = new Map<string, TMultiSelectOption>();\n  for (const option of [...selectedOptions, ...options]) {\n    known.set(option.value, option);\n  }\n  return value.map((entry) => known.get(entry) ?? { value: entry, label: entry });\n};\n\n/** What the trigger says: the placeholder, the one picked, or a count. */\nexport const summarize = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string => {\n  if (chosen.length === 0) {\n    return placeholder;\n  }\n  if (summary === 'label') {\n    return labels.selectedCount(chosen.length);\n  }\n  return chosen.length === 1 ? (chosen[0]?.label ?? '') : labels.selectedCount(chosen.length);\n};\n\n/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */\nexport const fullSelection = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string =>\n  summary === 'selection' && chosen.length > 0 ? chosen.map((option) => option.label).join(', ') : summarize(chosen, placeholder, labels, summary);\n\nconst POPUP = cn(\n  'flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n  POPUP_FRAME_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n);\n\nconst TRIGGER =\n  'flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-control bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:outline-solid dark:bg-input/30';\n\nconst Option = ({\n  option,\n  index,\n  style,\n  measure,\n  highlighted,\n}: {\n  option: TMultiSelectOption;\n  index: number;\n  style?: CSSProperties;\n  measure?: (node: Element | null) => void;\n  highlighted: boolean;\n}) => {\n  const [cut, setCut] = useState(false);\n  // A callback ref, so measuring starts when the label mounts and stops when it goes; the key on the label below mounts a fresh one\n  // when the text changes, which a resize observer alone would miss at an unchanged width.\n  const measureLabel = useCallback((element: HTMLSpanElement | null) => {\n    if (!element) {\n      return;\n    }\n    const measureCut = (): void => setCut(element.scrollWidth > element.clientWidth);\n    measureCut();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measureCut);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Combobox.Item\n      value={option}\n      index={index}\n      ref={measure}\n      data-index={index}\n      style={style}\n      data-slot=\"multi-select-item\"\n      className={cn(popupItemClass('base-ui'), 'group')}\n    >\n      {/* A checkbox, filled when chosen: a set of toggles reads as one. */}\n      <span\n        data-slot=\"multi-select-item-indicator\"\n        aria-hidden=\"true\"\n        className=\"flex size-4 shrink-0 items-center justify-center rounded-sm border border-control text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary\"\n      >\n        <IconCheck className=\"size-3 opacity-0 group-data-[selected]:opacity-100\" stroke={3} />\n      </span>\n      {option.leading}\n      {/* The option is the highlighted one under the pointer and under the keyboard alike, so one controlled tooltip serves both: the full label while the text is cut. */}\n      <Tooltip open={highlighted && cut}>\n        <TooltipTrigger\n          key={option.label}\n          data-slot=\"multi-select-item-label\"\n          data-overflowing={cut ? '' : undefined}\n          render={<span ref={measureLabel} className=\"min-w-0 flex-1 truncate\" />}\n        >\n          {option.label}\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{option.label}</TooltipContent>\n      </Tooltip>\n      {/* Muted grey is 4.2:1 on the highlighted row (6% of the foreground), under the 4.5:1 small text needs, so the count turns to the foreground with its row, as a CommandShortcut does. */}\n      {option.count !== undefined && (\n        <span className=\"text-xs text-muted-foreground tabular-nums group-data-highlighted:text-foreground\">{option.count}</span>\n      )}\n    </Combobox.Item>\n  );\n};\n\n// The options on offer, every one drawn, or past VIRTUALIZE_FROM only those on screen. The\n// list is the listbox itself (the options its direct children), sized to the whole list\n// when virtualized; the ScrollArea wraps it.\nconst Options = ({\n  scroller,\n  scrollTo,\n  busy,\n  highlightedValue,\n}: {\n  scroller: RefObject<HTMLDivElement | null>;\n  scrollTo: RefObject<(index: number) => void>;\n  busy: boolean;\n  highlightedValue: string | null;\n}) => {\n  const items = Combobox.useFilteredItems<TMultiSelectOption>();\n  const virtual = items.length > VIRTUALIZE_FROM;\n  // The scroller is an ancestor, so its ref is set only after this list's own effects:\n  // one more render once mounted gives the virtualizer its element.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scroller.current,\n    estimateSize: () => ITEM_HEIGHT,\n    overscan: 12,\n    enabled: virtual && mounted,\n  });\n  useEffect(() => {\n    scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: 'auto' }) : () => undefined;\n  }, [scrollTo, virtual, virtualizer]);\n  if (!virtual) {\n    return (\n      <Combobox.List aria-busy={busy || undefined} className=\"px-1 outline-none\">\n        {items.map((option, index) => (\n          <Option key={option.value} option={option} index={index} highlighted={highlightedValue === option.value} />\n        ))}\n      </Combobox.List>\n    );\n  }\n  return (\n    <Combobox.List\n      data-virtualized=\"\"\n      aria-busy={busy || undefined}\n      className=\"relative mx-1 outline-none\"\n      style={{ height: virtualizer.getTotalSize() }}\n    >\n      {virtualizer.getVirtualItems().map((row) => {\n        const option = items[row.index];\n        return option === undefined ? null : (\n          <Option\n            key={option.value}\n            option={option}\n            index={row.index}\n            highlighted={highlightedValue === option.value}\n            measure={virtualizer.measureElement}\n            style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${row.start}px)` }}\n          />\n        );\n      })}\n    </Combobox.List>\n  );\n};\n\n/** Rendered inside the portal, so it exists only while the list is open: the focus guards around the list are not aria-hidden. */\nconst ExposedFocusGuards = () => {\n  useExposedFocusGuards();\n  return null;\n};\n\n/**\n * A choice of several from a list: a trigger shaped like a Select that says what is picked\n * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox\n * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization\n * past VIRTUALIZE_FROM options. Nothing chosen means no filter.\n *\n * For a short fixed list pass `options` and nothing else: the component filters them as the\n * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a\n * server: the caller fetches the options for the typed text, and says when they are loading,\n * failed, or have another page.\n */\nexport const MultiSelect = ({\n  placeholder,\n  searchPlaceholder,\n  searchFrom = SEARCH_FROM,\n  options,\n  value,\n  onValueChange,\n  id,\n  disabled = false,\n  className,\n  onSearchChange,\n  searchDelay = 250,\n  selectedOptions,\n  loading = false,\n  error = false,\n  onRetry,\n  hasMore = false,\n  onLoadMore,\n  loadingMore = false,\n  labels: labelOverrides,\n  summary = 'selection',\n  ...rest\n}: IMultiSelectProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_MULTI_SELECT_LABELS, ...labelOverrides }), [labelOverrides]);\n  const isAsync = onSearchChange !== undefined;\n  const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [value, options, selectedOptions]);\n  // Chosen options the current page does not contain stay on offer at the top, so they can\n  // still be unchecked after a search has moved on.\n  const items = useMemo(() => {\n    const offered = new Set(options.map((option) => option.value));\n    return [...chosen.filter((option) => !offered.has(option.value)), ...options];\n  }, [chosen, options]);\n  const refScroller = useRef<HTMLDivElement | null>(null);\n  const refScrollTo = useRef<(index: number) => void>(() => undefined);\n  const refTimer = useRef<number | undefined>(undefined);\n  const refTriggerText = useRef<HTMLSpanElement | null>(null);\n  const refSearch = useRef<HTMLInputElement | null>(null);\n  // The popup and the trigger's tooltip are two hover surfaces on one element, so the tooltip stands down while the popup is open.\n  const [popupOpen, setPopupOpen] = useState(false);\n  // The option under the pointer or the keyboard, whichever moved last, for the tooltip that shows a cut label in full.\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // The text last reported through onSearchChange, and whether the popup is open. Base UI\n  // reports the input as empty when the popup opens and again when it closes; reporting\n  // those would fetch the first page twice on every open, and again while closed.\n  const refReported = useRef<string | undefined>(undefined);\n  const refOpen = useRef(false);\n  // Over a short list the search is a box in the way; the list still counts what was offered, so a chosen option the page lacks\n  // does not hide the field.\n  const searchable = isAsync || items.length > searchFrom;\n  const errorMessage = typeof error === 'string' ? error : labels.error;\n  const failed = error !== false;\n\n  useEffect(() => () => window.clearTimeout(refTimer.current), []);\n\n  // Base UI gives the search field a key handler that closes the popup on Escape and keeps the key from the page, but not\n  // the trigger: with focus back on the trigger and the popup still open (a click that landed while a Sheet slid in,\n  // `focus()`, Shift+Tab) Escape reached the document, where an enclosing Sheet or Dialog closed along with the popup.\n  // So the trigger hands Escape to the search field, the path that already works, and the key goes no further.\n  const closeFromTrigger = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || !popupOpen || refSearch.current === null) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n    refSearch.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  return (\n    <Combobox.Root\n      multiple\n      disabled={disabled}\n      items={items}\n      filter={isAsync ? null : undefined}\n      value={chosen}\n      onValueChange={(next: TMultiSelectOption[]) => onValueChange(next.map((option) => option.value))}\n      onInputValueChange={(text) => {\n        if (onSearchChange === undefined || !refOpen.current) {\n          return;\n        }\n        window.clearTimeout(refTimer.current);\n        if (text === refReported.current) {\n          return;\n        }\n        refTimer.current = window.setTimeout(() => {\n          refReported.current = text;\n          onSearchChange(text);\n        }, searchDelay);\n      }}\n      onOpenChange={(open) => {\n        window.clearTimeout(refTimer.current);\n        setPopupOpen(open);\n        if (!open) {\n          setHighlightedValue(null);\n        }\n        refOpen.current = open;\n        refReported.current = open ? '' : undefined;\n        if (open && onSearchChange !== undefined) {\n          onSearchChange('');\n        }\n      }}\n      itemToStringLabel={(option: TMultiSelectOption) => option.label}\n      isItemEqualToValue={(a: TMultiSelectOption, b: TMultiSelectOption) => a.value === b.value}\n      virtualized={items.length > VIRTUALIZE_FROM}\n      onItemHighlighted={(item, details) => {\n        setHighlightedValue(item?.value ?? null);\n        if (details.reason === 'keyboard' && details.index >= 0) {\n          refScrollTo.current(details.index);\n        }\n      }}\n    >\n      {/* A tooltip only when the text is really cut, which is known when it is about to open. */}\n      <Tooltip\n        disabled={popupOpen}\n        onOpenChange={(open, details) => {\n          const element = refTriggerText.current;\n          if (open && !(element && element.scrollWidth > element.clientWidth)) {\n            details.cancel();\n          }\n        }}\n      >\n        <TooltipTrigger\n          data-slot=\"multi-select-trigger\"\n          render={\n            <Combobox.Trigger\n              {...rest}\n              id={id}\n              data-set={chosen.length > 0 ? '' : undefined}\n              onKeyDown={closeFromTrigger}\n              className={cn(TRIGGER, className)}\n            />\n          }\n        >\n          <span ref={refTriggerText} className={cn('min-w-0 flex-1 truncate text-left', chosen.length === 0 && 'text-muted-foreground')}>\n            {summarize(chosen, placeholder, labels, summary)}\n          </span>\n          <IconChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>{fullSelection(chosen, placeholder, labels, summary)}</TooltipContent>\n      </Tooltip>\n      <Combobox.Portal>\n        <ExposedFocusGuards />\n        <Combobox.Positioner sideOffset={4} align=\"start\" className={POPUP_LAYER_CLASS}>\n          {/* A dialog needs a name: the trigger's own label, or what it says when nothing is chosen. */}\n          <Combobox.Popup\n            data-slot=\"multi-select-content\"\n            aria-label={rest['aria-labelledby'] === undefined ? (rest['aria-label'] ?? placeholder) : undefined}\n            aria-labelledby={rest['aria-labelledby']}\n            className={POPUP}\n          >\n            <div className={searchable ? 'flex shrink-0 items-center gap-2 border-b border-border px-3' : 'sr-only'}>\n              <IconSearch aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n              <Combobox.Input\n                ref={refSearch}\n                readOnly={!searchable}\n                placeholder={searchPlaceholder}\n                aria-label={searchPlaceholder.replace(/…$/, '')}\n                className=\"h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n            {/* The live region stays mounted and only its words change, which is what makes a\n                screen reader announce them. */}\n            <Combobox.Status data-slot=\"multi-select-status\" className=\"px-3 py-2 text-sm text-muted-foreground empty:p-0\">\n              {failed ? (\n                <span className=\"flex items-center justify-between gap-2 text-destructive\">\n                  {errorMessage}\n                  {onRetry !== undefined && (\n                    <button type=\"button\" onClick={onRetry} className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\">\n                      {labels.retry}\n                    </button>\n                  )}\n                </span>\n              ) : loading ? (\n                labels.loading\n              ) : null}\n            </Combobox.Status>\n            <Combobox.Empty className=\"px-3 py-6 text-center text-sm text-muted-foreground empty:p-0\">\n              {loading || failed ? null : labels.noMatches}\n            </Combobox.Empty>\n            <ScrollArea type=\"always\" fade viewportRef={refScroller} className={POPUP_LIST_HEIGHT_CLASS}>\n              <Options scroller={refScroller} scrollTo={refScrollTo} busy={loading} highlightedValue={highlightedValue} />\n            </ScrollArea>\n            {hasMore && onLoadMore !== undefined && (\n              <div className=\"shrink-0 border-t border-border p-1\">\n                <button\n                  type=\"button\"\n                  disabled={loadingMore}\n                  onClick={onLoadMore}\n                  className=\"h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {loadingMore ? labels.loadingMore : labels.loadMore}\n                </button>\n              </div>\n            )}\n            {chosen.length > 0 && (\n              <div className=\"flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground\">\n                <span className=\"tabular-nums\">{labels.selectedCount(chosen.length)}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onValueChange([])}\n                  className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            )}\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js

@@ -99,6 +99,7 @@ var LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange
 			children: /* @__PURE__ */ jsx(IconLink, { "aria-hidden": true })
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
+			"aria-label": labels.link,
 			className: "w-80",
 			children: /* @__PURE__ */ jsxs("form", {
 				className: "flex flex-col gap-2",

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/toolbar.tsx"],"sourcesContent":["import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\nimport { isAllowedRichTextHref } from '@edyn/ui/components/edyn/rich-text-content/allow-list';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@edyn/ui/components/ui/dropdown-menu';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { toggleVariants } from '@edyn/ui/components/ui/toggle';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconSeparatorHorizontal, IconUnderline, IconVariable } from '@tabler/icons-react';\nimport type { Editor } from '@tiptap/core';\nimport { useEditorState } from '@tiptap/react';\nimport { type FormEvent, type ReactNode, type RefObject, useEffect, useState } from 'react';\nimport type { IRichTextField, IRichTextLabels } from './types';\n\nconst BUTTON_CLASS = cn(toggleVariants({ variant: 'default', size: 'sm' }), 'size-7 px-0');\n\n/** A typed address becomes a link: \"name@example.test\" a mailto, \"example.test\" an https address. */\nexport const normalizeHref = (raw: string): string => {\n  const value = raw.trim();\n  if (value === '' || /^[a-z][a-z0-9+.-]*:/i.test(value)) {\n    return value;\n  }\n  return /^[^\\s@/]+@[^\\s@/]+\\.[^\\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;\n};\n\ninterface IToolbarButtonProps {\n  label: string;\n  pressed?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  children: ReactNode;\n}\n\nconst ToolbarButton = ({ label, pressed, disabled, onClick, children }: IToolbarButtonProps) => (\n  <ToolbarPrimitive.Button\n    type=\"button\"\n    aria-label={label}\n    title={label}\n    aria-pressed={pressed}\n    data-pressed={pressed ? '' : undefined}\n    disabled={disabled}\n    className={BUTTON_CLASS}\n    onMouseDown={(event) => event.preventDefault()}\n    onClick={onClick}\n  >\n    {children}\n  </ToolbarPrimitive.Button>\n);\n\n/** Where the writer's selection was when the link box opened: moving focus into the box must not lose it. */\nexport interface ILinkRange {\n  from: number;\n  to: number;\n}\n\nconst hrefAt = (editor: Editor, range: ILinkRange): string => {\n  const { doc } = editor.state;\n  const marks = range.from < range.to ? (doc.nodeAt(range.from)?.marks ?? []) : doc.resolve(range.from).marks();\n  return String(marks.find((mark) => mark.type.name === 'link')?.attrs.href ?? '');\n};\n\ninterface ILinkControlProps {\n  range: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  active: boolean;\n  disabled: boolean;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }: ILinkControlProps) => {\n  const [address, setAddress] = useState('');\n  const [invalid, setInvalid] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setAddress(range.current ? hrefAt(editor, range.current) : '');\n      setInvalid(false);\n    }\n  }, [editor, open, range]);\n\n  const apply = (event: FormEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const href = normalizeHref(address);\n    if (!isAllowedRichTextHref(href)) {\n      setInvalid(true);\n      return;\n    }\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    const chain = editor.chain().focus().setTextSelection(saved);\n    if (saved.from === saved.to && !hrefAt(editor, saved)) {\n      chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run();\n    } else {\n      chain.extendMarkRange('link').setLink({ href }).run();\n    }\n    onOpenChange(false);\n  };\n\n  const remove = () => {\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    editor.chain().focus().setTextSelection(saved).extendMarkRange('link').unsetLink().run();\n    onOpenChange(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger\n        render={\n          <ToolbarPrimitive.Button\n            type=\"button\"\n            aria-label={labels.link}\n            title={labels.link}\n            aria-pressed={active}\n            data-pressed={active ? '' : undefined}\n            disabled={disabled}\n            className={BUTTON_CLASS}\n          />\n        }\n      >\n        <IconLink aria-hidden />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-80\">\n        <form className=\"flex flex-col gap-2\" onSubmit={apply}>\n          <Input\n            type=\"text\"\n            inputMode=\"url\"\n            aria-label={labels.linkAddress}\n            aria-invalid={invalid || undefined}\n            value={address}\n            onChange={(event) => {\n              setAddress(event.target.value);\n              setInvalid(false);\n            }}\n          />\n          {invalid ? <p className=\"text-xs text-destructive\">{labels.linkInvalid}</p> : null}\n          <div className=\"flex justify-end gap-2\">\n            {active ? (\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n                {labels.linkRemove}\n              </Button>\n            ) : null}\n            <Button type=\"submit\" size=\"sm\">\n              {labels.linkApply}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport interface IRichTextToolbarProps {\n  linkRange: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  fields: IRichTextField[] | undefined;\n  disabled: boolean;\n  linkOpen: boolean;\n  onLinkOpenChange: (open: boolean) => void;\n}\n\nexport const RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }: IRichTextToolbarProps) => {\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: current }) => ({\n      bold: current.isActive('bold'),\n      italic: current.isActive('italic'),\n      underline: current.isActive('underline'),\n      bullets: current.isActive('bulletList'),\n      numbers: current.isActive('orderedList'),\n      link: current.isActive('link'),\n    }),\n  });\n\n  return (\n    <ToolbarPrimitive.Root\n      data-slot=\"rich-text-toolbar\"\n      aria-label={labels.toolbar}\n      className=\"flex flex-wrap items-center gap-0.5 border-b border-control p-1\"\n    >\n      <ToolbarButton label={labels.bold} pressed={state.bold} disabled={disabled} onClick={() => editor.chain().focus().toggleBold().run()}>\n        <IconBold aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton label={labels.italic} pressed={state.italic} disabled={disabled} onClick={() => editor.chain().focus().toggleItalic().run()}>\n        <IconItalic aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.underline}\n        pressed={state.underline}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleUnderline().run()}\n      >\n        <IconUnderline aria-hidden />\n      </ToolbarButton>\n      <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n      <ToolbarButton\n        label={labels.bulletList}\n        pressed={state.bullets}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n      >\n        <IconList aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.numberedList}\n        pressed={state.numbers}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n      >\n        <IconListNumbers aria-hidden />\n      </ToolbarButton>\n      <LinkControl\n        range={linkRange}\n        editor={editor}\n        labels={labels}\n        active={state.link}\n        disabled={disabled}\n        open={linkOpen}\n        onOpenChange={onLinkOpenChange}\n      />\n      <ToolbarButton label={labels.horizontalRule} disabled={disabled} onClick={() => editor.chain().focus().setHorizontalRule().run()}>\n        <IconSeparatorHorizontal aria-hidden />\n      </ToolbarButton>\n      {fields && fields.length > 0 ? (\n        <>\n          <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <ToolbarPrimitive.Button\n                  type=\"button\"\n                  aria-label={labels.insertField}\n                  title={labels.insertField}\n                  disabled={disabled}\n                  className={BUTTON_CLASS}\n                />\n              }\n            >\n              <IconVariable aria-hidden />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-56\">\n              {fields.map((field) => (\n                <DropdownMenuItem\n                  key={field.id}\n                  onClick={() =>\n                    editor\n                      .chain()\n                      .focus()\n                      .insertContent({ type: 'text', text: `{{${field.id}}}` })\n                      .run()\n                  }\n                >\n                  {field.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </>\n      ) : null}\n    </ToolbarPrimitive.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/toolbar.tsx"],"sourcesContent":["import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\nimport { isAllowedRichTextHref } from '@edyn/ui/components/edyn/rich-text-content/allow-list';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@edyn/ui/components/ui/dropdown-menu';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { toggleVariants } from '@edyn/ui/components/ui/toggle';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconSeparatorHorizontal, IconUnderline, IconVariable } from '@tabler/icons-react';\nimport type { Editor } from '@tiptap/core';\nimport { useEditorState } from '@tiptap/react';\nimport { type FormEvent, type ReactNode, type RefObject, useEffect, useState } from 'react';\nimport type { IRichTextField, IRichTextLabels } from './types';\n\nconst BUTTON_CLASS = cn(toggleVariants({ variant: 'default', size: 'sm' }), 'size-7 px-0');\n\n/** A typed address becomes a link: \"name@example.test\" a mailto, \"example.test\" an https address. */\nexport const normalizeHref = (raw: string): string => {\n  const value = raw.trim();\n  if (value === '' || /^[a-z][a-z0-9+.-]*:/i.test(value)) {\n    return value;\n  }\n  return /^[^\\s@/]+@[^\\s@/]+\\.[^\\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;\n};\n\ninterface IToolbarButtonProps {\n  label: string;\n  pressed?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  children: ReactNode;\n}\n\nconst ToolbarButton = ({ label, pressed, disabled, onClick, children }: IToolbarButtonProps) => (\n  <ToolbarPrimitive.Button\n    type=\"button\"\n    aria-label={label}\n    title={label}\n    aria-pressed={pressed}\n    data-pressed={pressed ? '' : undefined}\n    disabled={disabled}\n    className={BUTTON_CLASS}\n    onMouseDown={(event) => event.preventDefault()}\n    onClick={onClick}\n  >\n    {children}\n  </ToolbarPrimitive.Button>\n);\n\n/** Where the writer's selection was when the link box opened: moving focus into the box must not lose it. */\nexport interface ILinkRange {\n  from: number;\n  to: number;\n}\n\nconst hrefAt = (editor: Editor, range: ILinkRange): string => {\n  const { doc } = editor.state;\n  const marks = range.from < range.to ? (doc.nodeAt(range.from)?.marks ?? []) : doc.resolve(range.from).marks();\n  return String(marks.find((mark) => mark.type.name === 'link')?.attrs.href ?? '');\n};\n\ninterface ILinkControlProps {\n  range: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  active: boolean;\n  disabled: boolean;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }: ILinkControlProps) => {\n  const [address, setAddress] = useState('');\n  const [invalid, setInvalid] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setAddress(range.current ? hrefAt(editor, range.current) : '');\n      setInvalid(false);\n    }\n  }, [editor, open, range]);\n\n  const apply = (event: FormEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const href = normalizeHref(address);\n    if (!isAllowedRichTextHref(href)) {\n      setInvalid(true);\n      return;\n    }\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    const chain = editor.chain().focus().setTextSelection(saved);\n    if (saved.from === saved.to && !hrefAt(editor, saved)) {\n      chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run();\n    } else {\n      chain.extendMarkRange('link').setLink({ href }).run();\n    }\n    onOpenChange(false);\n  };\n\n  const remove = () => {\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    editor.chain().focus().setTextSelection(saved).extendMarkRange('link').unsetLink().run();\n    onOpenChange(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger\n        render={\n          <ToolbarPrimitive.Button\n            type=\"button\"\n            aria-label={labels.link}\n            title={labels.link}\n            aria-pressed={active}\n            data-pressed={active ? '' : undefined}\n            disabled={disabled}\n            className={BUTTON_CLASS}\n          />\n        }\n      >\n        <IconLink aria-hidden />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" aria-label={labels.link} className=\"w-80\">\n        <form className=\"flex flex-col gap-2\" onSubmit={apply}>\n          <Input\n            type=\"text\"\n            inputMode=\"url\"\n            aria-label={labels.linkAddress}\n            aria-invalid={invalid || undefined}\n            value={address}\n            onChange={(event) => {\n              setAddress(event.target.value);\n              setInvalid(false);\n            }}\n          />\n          {invalid ? <p className=\"text-xs text-destructive\">{labels.linkInvalid}</p> : null}\n          <div className=\"flex justify-end gap-2\">\n            {active ? (\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n                {labels.linkRemove}\n              </Button>\n            ) : null}\n            <Button type=\"submit\" size=\"sm\">\n              {labels.linkApply}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport interface IRichTextToolbarProps {\n  linkRange: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  fields: IRichTextField[] | undefined;\n  disabled: boolean;\n  linkOpen: boolean;\n  onLinkOpenChange: (open: boolean) => void;\n}\n\nexport const RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }: IRichTextToolbarProps) => {\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: current }) => ({\n      bold: current.isActive('bold'),\n      italic: current.isActive('italic'),\n      underline: current.isActive('underline'),\n      bullets: current.isActive('bulletList'),\n      numbers: current.isActive('orderedList'),\n      link: current.isActive('link'),\n    }),\n  });\n\n  return (\n    <ToolbarPrimitive.Root\n      data-slot=\"rich-text-toolbar\"\n      aria-label={labels.toolbar}\n      className=\"flex flex-wrap items-center gap-0.5 border-b border-control p-1\"\n    >\n      <ToolbarButton label={labels.bold} pressed={state.bold} disabled={disabled} onClick={() => editor.chain().focus().toggleBold().run()}>\n        <IconBold aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton label={labels.italic} pressed={state.italic} disabled={disabled} onClick={() => editor.chain().focus().toggleItalic().run()}>\n        <IconItalic aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.underline}\n        pressed={state.underline}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleUnderline().run()}\n      >\n        <IconUnderline aria-hidden />\n      </ToolbarButton>\n      <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n      <ToolbarButton\n        label={labels.bulletList}\n        pressed={state.bullets}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n      >\n        <IconList aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.numberedList}\n        pressed={state.numbers}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n      >\n        <IconListNumbers aria-hidden />\n      </ToolbarButton>\n      <LinkControl\n        range={linkRange}\n        editor={editor}\n        labels={labels}\n        active={state.link}\n        disabled={disabled}\n        open={linkOpen}\n        onOpenChange={onLinkOpenChange}\n      />\n      <ToolbarButton label={labels.horizontalRule} disabled={disabled} onClick={() => editor.chain().focus().setHorizontalRule().run()}>\n        <IconSeparatorHorizontal aria-hidden />\n      </ToolbarButton>\n      {fields && fields.length > 0 ? (\n        <>\n          <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <ToolbarPrimitive.Button\n                  type=\"button\"\n                  aria-label={labels.insertField}\n                  title={labels.insertField}\n                  disabled={disabled}\n                  className={BUTTON_CLASS}\n                />\n              }\n            >\n              <IconVariable aria-hidden />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-56\">\n              {fields.map((field) => (\n                <DropdownMenuItem\n                  key={field.id}\n                  onClick={() =>\n                    editor\n                      .chain()\n                      .focus()\n                      .insertContent({ type: 'text', text: `{{${field.id}}}` })\n                      .run()\n                  }\n                >\n                  {field.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </>\n      ) : null}\n    </ToolbarPrimitive.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/time-field/time-field.js

@@ -275,9 +275,8 @@ var TimeField = ({ value, defaultValue = "", onValueChange, granularity = "minut
 		className: cn("w-fit", className),
 		...rest,
 		children: [
-			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(IconClock, { "aria-hidden": "true" }) }),
 			/* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-0.5 pr-2",
+				className: "flex items-center gap-0.5 pr-3.25 pl-2.5",
 				children: segments.map((segment, index) => {
 					const numeric = segment !== "period";
 					const range = numeric ? rangeOf(segment, hourCycle) : {
@@ -313,7 +312,7 @@ var TimeField = ({ value, defaultValue = "", onValueChange, granularity = "minut
 							"aria-valuemax": range.max,
 							"aria-valuenow": current ?? void 0,
 							"aria-valuetext": current === null ? labels.empty : segment === "period" ? parts.period ?? labels.empty : two(current),
-							className: cn(SEGMENT_CLASS, segment === "period" ? "w-7" : "w-5"),
+							className: cn(SEGMENT_CLASS, index === 0 ? "w-6 text-left" : "w-7"),
 							onKeyDown: (event) => onKeyDown(segment, event),
 							onChange: (event) => onChange(segment, event),
 							onFocus: (event) => event.currentTarget.select(),
@@ -322,6 +321,11 @@ var TimeField = ({ value, defaultValue = "", onValueChange, granularity = "minut
 					}, segment);
 				})
 			}),
+			/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				className: "pr-1.75",
+				children: /* @__PURE__ */ jsx(IconClock, { "aria-hidden": "true" })
+			}),
 			name !== void 0 && /* @__PURE__ */ jsx("input", {
 				type: "hidden",
 				name,