@planningcenter/tapestry 3.0.1 → 3.0.2-qa-693.0

package/dist/components/select/Select.d.ts

@@ -0,0 +1,66 @@
+import "./index.css";
+import React, { type SelectHTMLAttributes } from "react";
+export type SelectSize = "lg" | "md";
+export interface SelectOptionWithTextLabel {
+    /** Whether this option is non-interactive. */
+    disabled?: boolean;
+    divider?: never;
+    /** Displayed as the option content and used for type-ahead matching. */
+    label: string;
+    textValue?: never;
+    value: string;
+}
+export interface SelectOptionWithNodeLabel {
+    /** Whether this option is non-interactive. */
+    disabled?: boolean;
+    divider?: never;
+    /** Displayed as the option content. */
+    label: React.ReactNode;
+    /** Plain-text representation required for type-ahead matching. */
+    textValue: string;
+    value: string;
+}
+export interface SelectOptionDivider {
+    disabled?: never;
+    divider: true;
+    label?: never;
+    textValue?: never;
+    value?: never;
+}
+export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
+export interface SelectOptionsGroup {
+    /** Whether all options in this group are non-interactive. */
+    disabled?: boolean;
+    /** Visible heading displayed above the group's options. */
+    label: string;
+    /** The selectable options within this group. */
+    options: SelectOption[];
+}
+export type SelectItem = SelectOption | SelectOptionsGroup;
+export interface SelectProps {
+    /** Render as popover listbox (SelectPopover) instead of native <select>. */
+    complex?: boolean;
+    /** Helper text below the select. Red when invalid. */
+    description?: string;
+    /** Triggers invalid state (red border, red description). */
+    invalid?: boolean;
+    /** Label text displayed above the select. */
+    label: string;
+    /** A flat or mixed array of options and option groups. */
+    options: SelectItem[];
+    /** Placeholder text for the empty state. */
+    placeholder: string;
+    /** Visual size of the select. */
+    size?: SelectSize;
+}
+type BaseSelectElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectProps | "multiple" | "size">;
+export type NativeSelectElementProps = BaseSelectElementProps & SelectProps & {
+    complex?: false;
+};
+export type ComplexSelectElementProps = BaseSelectElementProps & SelectProps & {
+    complex: true;
+};
+export type SelectElementProps = NativeSelectElementProps | ComplexSelectElementProps;
+export declare const Select: React.ForwardRefExoticComponent<SelectElementProps & React.RefAttributes<HTMLSelectElement>>;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAA;AASpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpC,MAAM,WAAW,yBAAyB;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,YAAY,GACpB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,CAAA;AAE7B,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAM1D,MAAM,WAAW,WAAW;IAC1B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAA;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,KAAK,sBAAsB,GAAG,IAAI,CAChC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CACxC,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,WAAW,GAAG;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAC5D,WAAW,GAAG;IACZ,OAAO,EAAE,IAAI,CAAA;CACd,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAC1B,wBAAwB,GACxB,yBAAyB,CAAA;AAkB7B,eAAO,MAAM,MAAM,8FA0FlB,CAAA"}

package/dist/components/select/Select.js

@@ -0,0 +1,58 @@
+import Icon from '../../utilities/Icon.js';
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React__default, { forwardRef } from 'react';
+import { SelectNative } from './SelectNative.js';
+import { SelectPopover } from './SelectPopover.js';
+
+function normalizeSelectValue(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (Array.isArray(value))
+        return value[0];
+    return String(value);
+}
+// ---------------------------------------------------------------------------
+// Select (public)
+// ---------------------------------------------------------------------------
+const Select = forwardRef(function Select(props, ref) {
+    const { "aria-label": userAriaLabel, "aria-labelledby": userAriaLabelledBy, className, complex, defaultValue, description, id, invalid, label, onChange, options, placeholder, required, size, value, ...restProps } = props;
+    const stableId = useId();
+    const controlId = id || `tds-select-${stableId}`;
+    const labelId = `${controlId}-label`;
+    const descriptionId = description ? `${controlId}-description` : undefined;
+    const computedClassName = classNames("tds-select", {
+        "tds-select--invalid": invalid,
+        "tds-select--lg": size === "lg",
+        "tds-select--required": required,
+    }, className);
+    const normalizedDefaultValue = normalizeSelectValue(defaultValue);
+    const normalizedValue = normalizeSelectValue(value);
+    const computedDefaultValue = normalizedDefaultValue === undefined && normalizedValue === undefined
+        ? ""
+        : normalizedDefaultValue;
+    const computedAriaLabelledBy = userAriaLabelledBy ?? (userAriaLabel ? undefined : labelId);
+    const sharedControlProps = {
+        ...restProps,
+        "aria-describedby": descriptionId,
+        "aria-label": userAriaLabel,
+        "aria-labelledby": computedAriaLabelledBy,
+        defaultValue: computedDefaultValue,
+        invalid,
+        options,
+        placeholder,
+        required,
+        value: normalizedValue,
+    };
+    const SelectComponent = complex ? SelectPopover : SelectNative;
+    return (React__default.createElement("div", { className: computedClassName },
+        complex ? (React__default.createElement("div", { className: "tds-select-label", id: labelId }, label)) : (React__default.createElement("label", { htmlFor: controlId, id: labelId }, label)),
+        React__default.createElement(SelectComponent, { ...sharedControlProps, ref: ref, id: controlId, onChange: onChange }),
+        description && descriptionId && (React__default.createElement("p", { className: "tds-select-description", id: descriptionId },
+            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-select-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            description))));
+});
+Select.displayName = "Select";
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\nexport interface SelectOptionWithTextLabel {\n  /** Whether this option is non-interactive. */\n  disabled?: boolean\n  divider?: never\n  /** Displayed as the option content and used for type-ahead matching. */\n  label: string\n  textValue?: never\n  value: string\n}\n\nexport interface SelectOptionWithNodeLabel {\n  /** Whether this option is non-interactive. */\n  disabled?: boolean\n  divider?: never\n  /** Displayed as the option content. */\n  label: React.ReactNode\n  /** Plain-text representation required for type-ahead matching. */\n  textValue: string\n  value: string\n}\n\nexport interface SelectOptionDivider {\n  disabled?: never\n  divider: true\n  label?: never\n  textValue?: never\n  value?: never\n}\n\nexport type SelectOption =\n  | SelectOptionDivider\n  | SelectOptionWithNodeLabel\n  | SelectOptionWithTextLabel\n\nexport interface SelectOptionsGroup {\n  /** Whether all options in this group are non-interactive. */\n  disabled?: boolean\n  /** Visible heading displayed above the group's options. */\n  label: string\n  /** The selectable options within this group. */\n  options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\nexport interface SelectProps {\n  /** Render as popover listbox (SelectPopover) instead of native <select>. */\n  complex?: boolean\n  /** Helper text below the select. Red when invalid. */\n  description?: string\n  /** Triggers invalid state (red border, red description). */\n  invalid?: boolean\n  /** Label text displayed above the select. */\n  label: string\n  /** A flat or mixed array of options and option groups. */\n  options: SelectItem[]\n  /** Placeholder text for the empty state. */\n  placeholder: string\n  /** Visual size of the select. */\n  size?: SelectSize\n}\n\ntype BaseSelectElementProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n  SelectProps & {\n    complex?: false\n  }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n  SelectProps & {\n    complex: true\n  }\n\nexport type SelectElementProps =\n  | NativeSelectElementProps\n  | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n  value:\n    | NativeSelectElementProps[\"defaultValue\"]\n    | NativeSelectElementProps[\"value\"]\n    | ComplexSelectElementProps[\"defaultValue\"]\n    | ComplexSelectElementProps[\"value\"]\n) {\n  if (value === undefined || value === null) return undefined\n  if (Array.isArray(value)) return value[0]\n  return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n  function Select(props: SelectElementProps, ref) {\n    const {\n      \"aria-label\": userAriaLabel,\n      \"aria-labelledby\": userAriaLabelledBy,\n      className,\n      complex,\n      defaultValue,\n      description,\n      id,\n      invalid,\n      label,\n      onChange,\n      options,\n      placeholder,\n      required,\n      size,\n      value,\n      ...restProps\n    } = props\n\n    const stableId = useId()\n    const controlId = id || `tds-select-${stableId}`\n    const labelId = `${controlId}-label`\n    const descriptionId = description ? `${controlId}-description` : undefined\n    const computedClassName = classNames(\n      \"tds-select\",\n      {\n        \"tds-select--invalid\": invalid,\n        \"tds-select--lg\": size === \"lg\",\n        \"tds-select--required\": required,\n      },\n      className\n    )\n\n    const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n    const normalizedValue = normalizeSelectValue(value)\n\n    const computedDefaultValue =\n      normalizedDefaultValue === undefined && normalizedValue === undefined\n        ? \"\"\n        : normalizedDefaultValue\n    const computedAriaLabelledBy =\n      userAriaLabelledBy ?? (userAriaLabel ? undefined : labelId)\n\n    const sharedControlProps = {\n      ...restProps,\n      \"aria-describedby\": descriptionId,\n      \"aria-label\": userAriaLabel,\n      \"aria-labelledby\": computedAriaLabelledBy,\n      defaultValue: computedDefaultValue,\n      invalid,\n      options,\n      placeholder,\n      required,\n      value: normalizedValue,\n    }\n\n    const SelectComponent = complex ? SelectPopover : SelectNative\n\n    return (\n      <div className={computedClassName}>\n        {complex ? (\n          <div className=\"tds-select-label\" id={labelId}>\n            {label}\n          </div>\n        ) : (\n          <label htmlFor={controlId} id={labelId}>\n            {label}\n          </label>\n        )}\n        <SelectComponent\n          {...sharedControlProps}\n          ref={ref}\n          id={controlId}\n          onChange={onChange}\n        />\n        {description && descriptionId && (\n          <p className=\"tds-select-description\" id={descriptionId}>\n            <Icon\n              aria-hidden\n              className=\"tds-select-description-invalid-icon\"\n              symbol=\"general#exclamation-triangle\"\n            />\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/select/SelectNative.d.ts

@@ -1,5 +1,5 @@
 import React, { type SelectHTMLAttributes } from "react";
-import type { SelectItem } from "./SelectPopover";
+import type { SelectItem } from "./Select";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -8,6 +8,8 @@ declare global {
     }
 }
 export interface SelectNativeProps {
+    /** Triggers invalid state (maps to aria-invalid). */
+    invalid?: boolean;
     /** Options to render inside the select. */
     options: SelectItem[];
     /** Placeholder text rendered as a disabled hidden option. */

package/dist/components/select/SelectNative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAG1B,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAsBjD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,CAAA;SACF;KACF;CACF;AAMD,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,iBAAiB,GAAG,UAAU,CACrC,GACC,iBAAiB,CAAA;AAEnB,eAAO,MAAM,YAAY,yLA+BvB,CAAA"}
+{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAG1B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAuB1C,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,CAAA;SACF;KACF;CACF;AAMD,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,iBAAiB,GAAG,UAAU,CACrC,GACC,iBAAiB,CAAA;AAEnB,eAAO,MAAM,YAAY,yLAmCvB,CAAA"}

package/dist/components/select/SelectNative.js

@@ -0,0 +1,34 @@
+import React__default, { forwardRef, useState, useEffect } from 'react';
+import { SelectOptions } from './SelectOptions.js';
+
+// ---------------------------------------------------------------------------
+// base-select feature detection (cached)
+// ---------------------------------------------------------------------------
+let _supportsBaseSelect = null;
+function supportsBaseSelect() {
+    if (_supportsBaseSelect === null) {
+        _supportsBaseSelect =
+            typeof CSS !== "undefined" &&
+                typeof CSS.supports === "function" &&
+                CSS.supports("appearance", "base-select");
+    }
+    return _supportsBaseSelect;
+}
+const SelectNative = forwardRef(function SelectNative({ invalid, options, placeholder, ...restProps }, ref) {
+    // Keep first render deterministic for SSR/hydration, then detect support on mount.
+    const [isCustom, setIsCustom] = useState(false);
+    useEffect(() => {
+        if (supportsBaseSelect()) {
+            setIsCustom(true);
+        }
+    }, []);
+    return (React__default.createElement("select", { ...restProps, "aria-invalid": invalid ? "true" : undefined, ref: ref },
+        isCustom && (React__default.createElement("button", null,
+            React__default.createElement("selectedcontent", null))),
+        placeholder && (React__default.createElement("option", { disabled: true, hidden: true, value: "" }, placeholder)),
+        React__default.createElement(SelectOptions, { items: options, supportsBaseSelect: isCustom })));
+});
+SelectNative.displayName = "SelectNative";
+
+export { SelectNative };
+//# sourceMappingURL=SelectNative.js.map

package/dist/components/select/SelectNative.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectNative.js","sources":["../../../src/components/select/SelectNative.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  type SelectHTMLAttributes,\n  useEffect,\n  useState,\n} from \"react\"\n\nimport type { SelectItem } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\n// ---------------------------------------------------------------------------\n// base-select feature detection (cached)\n// ---------------------------------------------------------------------------\n\nlet _supportsBaseSelect: boolean | null = null\n\nfunction supportsBaseSelect(): boolean {\n  if (_supportsBaseSelect === null) {\n    _supportsBaseSelect =\n      typeof CSS !== \"undefined\" &&\n      typeof CSS.supports === \"function\" &&\n      CSS.supports(\"appearance\", \"base-select\")\n  }\n  return _supportsBaseSelect\n}\n\n// ---------------------------------------------------------------------------\n// JSX augmentation for <selectedcontent>\n// ---------------------------------------------------------------------------\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      selectedcontent: React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      >\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------\n// SelectNative\n// ---------------------------------------------------------------------------\n\nexport interface SelectNativeProps {\n  /** Triggers invalid state (maps to aria-invalid). */\n  invalid?: boolean\n  /** Options to render inside the select. */\n  options: SelectItem[]\n  /** Placeholder text rendered as a disabled hidden option. */\n  placeholder: string\n}\n\nexport type SelectNativeElementProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  keyof SelectNativeProps | \"multiple\"\n> &\n  SelectNativeProps\n\nexport const SelectNative = forwardRef<\n  HTMLSelectElement,\n  SelectNativeElementProps\n>(function SelectNative(\n  { invalid, options, placeholder, ...restProps }: SelectNativeElementProps,\n  ref\n) {\n  // Keep first render deterministic for SSR/hydration, then detect support on mount.\n  const [isCustom, setIsCustom] = useState(false)\n\n  useEffect(() => {\n    if (supportsBaseSelect()) {\n      setIsCustom(true)\n    }\n  }, [])\n\n  return (\n    <select\n      {...restProps}\n      aria-invalid={invalid ? \"true\" : undefined}\n      ref={ref}\n    >\n      {isCustom && (\n        <button>\n          <selectedcontent />\n        </button>\n      )}\n      {placeholder && (\n        <option disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      <SelectOptions items={options} supportsBaseSelect={isCustom} />\n    </select>\n  )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":["React"],"mappings":";;;AAUA;AACA;AACA;AAEA,IAAI,mBAAmB,GAAmB,IAAI;AAE9C,SAAS,kBAAkB,GAAA;AACzB,IAAA,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAChC,mBAAmB;YACjB,OAAO,GAAG,KAAK,WAAW;AAC1B,gBAAA,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU;AAClC,gBAAA,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IAC7C;AACA,IAAA,OAAO,mBAAmB;AAC5B;MAqCa,YAAY,GAAG,UAAU,CAGpC,SAAS,YAAY,CACrB,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAA4B,EACzE,GAAG,EAAA;;IAGH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,kBAAkB,EAAE,EAAE;YACxB,WAAW,CAAC,IAAI,CAAC;QACnB;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,QAAQ,EAAA,IAAA,EAAC,MAAM,EAAA,IAAA,EAAC,KAAK,EAAC,EAAE,EAAA,EAC7B,WAAW,CACL,CACV;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAA,CAAI,CACxD;AAEb,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/select/SelectOptions.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { SelectItem } from "./SelectPopover";
+import type { SelectItem } from "./Select";
 interface SelectOptionsProps {
     items: SelectItem[];
     supportsBaseSelect?: boolean;

package/dist/components/select/SelectOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOptions.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,iBAAiB,CAAA;AAsBrE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,kBAA0B,GAC3B,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA8BtC"}
+{"version":3,"file":"SelectOptions.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,UAAU,EAIX,MAAM,UAAU,CAAA;AAMjB,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,kBAA0B,GAC3B,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA8BtC"}

package/dist/components/select/SelectOptions.js

@@ -0,0 +1,35 @@
+import React__default from 'react';
+
+function isGroup(item) {
+    return "options" in item;
+}
+function getOptionLabel(option) {
+    if (typeof option.label === "string")
+        return option.label;
+    return option.textValue ?? option.value ?? "";
+}
+function Option({ option }) {
+    return (React__default.createElement("option", { disabled: option.disabled, value: option.value }, getOptionLabel(option)));
+}
+function SelectOptions({ items, supportsBaseSelect = false, }) {
+    return items.map((item, index) => {
+        if (isGroup(item)) {
+            return (React__default.createElement("optgroup", { key: `${item.label}-${index}`, disabled: item.disabled, label: item.label },
+                supportsBaseSelect && (React__default.createElement("legend", null,
+                    React__default.createElement("span", null, item.label))),
+                item.options.map((opt, optIndex) => {
+                    if (opt.divider) {
+                        return React__default.createElement("hr", { key: `divider-${optIndex}` });
+                    }
+                    return React__default.createElement(Option, { key: opt.value ?? `opt-${optIndex}`, option: opt });
+                })));
+        }
+        if (item.divider) {
+            return React__default.createElement("hr", { key: `divider-${index}` });
+        }
+        return React__default.createElement(Option, { key: item.value ?? `opt-${index}`, option: item });
+    });
+}
+
+export { SelectOptions };
+//# sourceMappingURL=SelectOptions.js.map

package/dist/components/select/SelectOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptions.js","sources":["../../../src/components/select/SelectOptions.tsx"],"sourcesContent":["import React from \"react\"\n\nimport type {\n  SelectItem,\n  SelectOptionsGroup,\n  SelectOptionWithNodeLabel,\n  SelectOptionWithTextLabel,\n} from \"./Select\"\n\ninterface OptionProps {\n  option: SelectOptionWithNodeLabel | SelectOptionWithTextLabel\n}\n\ninterface SelectOptionsProps {\n  items: SelectItem[]\n  supportsBaseSelect?: boolean\n}\n\nfunction isGroup(item: SelectItem): item is SelectOptionsGroup {\n  return \"options\" in item\n}\n\nfunction getOptionLabel(option: {\n  label: React.ReactNode\n  textValue?: string\n  value?: string\n}): string {\n  if (typeof option.label === \"string\") return option.label\n  return option.textValue ?? option.value ?? \"\"\n}\n\nfunction Option({ option }: OptionProps) {\n  return (\n    <option disabled={option.disabled} value={option.value}>\n      {getOptionLabel(option)}\n    </option>\n  )\n}\n\nexport function SelectOptions({\n  items,\n  supportsBaseSelect = false,\n}: SelectOptionsProps): React.ReactNode {\n  return items.map((item, index) => {\n    if (isGroup(item)) {\n      return (\n        <optgroup\n          key={`${item.label}-${index}`}\n          disabled={item.disabled}\n          label={item.label}\n        >\n          {supportsBaseSelect && (\n            <legend>\n              <span>{item.label}</span>\n            </legend>\n          )}\n          {item.options.map((opt, optIndex) => {\n            if (opt.divider) {\n              return <hr key={`divider-${optIndex}`} />\n            }\n            return <Option key={opt.value ?? `opt-${optIndex}`} option={opt} />\n          })}\n        </optgroup>\n      )\n    }\n\n    if (item.divider) {\n      return <hr key={`divider-${index}`} />\n    }\n\n    return <Option key={item.value ?? `opt-${index}`} option={item} />\n  })\n}\n"],"names":["React"],"mappings":";;AAkBA,SAAS,OAAO,CAAC,IAAgB,EAAA;IAC/B,OAAO,SAAS,IAAI,IAAI;AAC1B;AAEA,SAAS,cAAc,CAAC,MAIvB,EAAA;AACC,IAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,KAAK;IACzD,OAAO,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE;AAC/C;AAEA,SAAS,MAAM,CAAC,EAAE,MAAM,EAAe,EAAA;IACrC,QACEA,yCAAQ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACnD,cAAc,CAAC,MAAM,CAAC,CAChB;AAEb;AAEM,SAAU,aAAa,CAAC,EAC5B,KAAK,EACL,kBAAkB,GAAG,KAAK,GACP,EAAA;IACnB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,QAAA,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;YACjB,QACEA,2CACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;AAEhB,gBAAA,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,CACV;gBACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;AAClC,oBAAA,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,wBAAA,OAAOA,qCAAI,GAAG,EAAE,WAAW,QAAQ,CAAA,CAAE,GAAI;oBAC3C;AACA,oBAAA,OAAOA,6BAAC,MAAM,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,QAAQ,CAAA,CAAE,EAAE,MAAM,EAAE,GAAG,GAAI;gBACrE,CAAC,CAAC,CACO;QAEf;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,OAAOA,qCAAI,GAAG,EAAE,WAAW,KAAK,CAAA,CAAE,GAAI;QACxC;AAEA,QAAA,OAAOA,6BAAC,MAAM,EAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAE,EAAE,MAAM,EAAE,IAAI,GAAI;AACpE,IAAA,CAAC,CAAC;AACJ;;;;"}

package/dist/components/select/SelectPopover.d.ts

@@ -1,63 +1,19 @@
-import "./index.css";
-import { ButtonHTMLAttributes } from "react";
-import * as React from "react";
-export type SelectPopoverSize = "lg" | "md";
-interface SelectOptionWithTextLabel {
-    /** Whether this option is non-interactive. */
-    disabled?: boolean;
-    divider?: never;
-    /** Displayed as the option content and used for type-ahead matching. */
-    label: string;
-    textValue?: never;
-    value: string;
-}
-interface SelectOptionWithNodeLabel {
-    /** Whether this option is non-interactive. */
-    disabled?: boolean;
-    divider?: never;
-    /** Displayed as the option content. */
-    label: React.ReactNode;
-    /** Plain-text representation required for type-ahead matching. */
-    textValue: string;
-    value: string;
-}
-export interface SelectOptionDivider {
-    disabled?: never;
-    divider: true;
-    label?: never;
-    textValue?: never;
-    value?: never;
-}
-export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
-export interface SelectOptionsGroup {
-    /** Whether all options in this group are non-interactive. */
-    disabled?: boolean;
-    /** Visible heading displayed above the group's options. */
-    label: string;
-    /** The selectable options within this group. */
-    options: SelectOption[];
-}
-export type SelectItem = SelectOption | SelectOptionsGroup;
-interface SelectPopoverBaseProps {
+import React, { type SelectHTMLAttributes } from "react";
+import type { SelectItem } from "./Select";
+export interface SelectPopoverProps {
+    "aria-describedby"?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     defaultValue?: string;
-    description?: string;
+    disabled?: boolean;
+    id?: string;
     invalid?: boolean;
     /** A flat or mixed array of options and option groups. */
     options: SelectItem[];
     placeholder: string;
     required?: boolean;
-    size?: SelectPopoverSize;
-}
-interface SelectPopoverWithLabel extends SelectPopoverBaseProps {
-    "aria-labelledby"?: never;
-    label: React.ReactNode;
-}
-interface SelectPopoverWithAriaLabelledBy extends SelectPopoverBaseProps {
-    "aria-labelledby": string;
-    label?: never;
+    value?: string;
 }
-export type SelectPopoverProps = SelectPopoverWithAriaLabelledBy | SelectPopoverWithLabel;
-export type SelectPopoverElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof SelectPopoverProps> & SelectPopoverProps;
-export declare const SelectPopover: React.ForwardRefExoticComponent<SelectPopoverElementProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export type SelectPopoverElementProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof SelectPopoverProps | "multiple"> & SelectPopoverProps;
+export declare const SelectPopover: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | keyof SelectPopoverProps> & SelectPopoverProps & React.RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=SelectPopover.d.ts.map

package/dist/components/select/SelectPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAMpB,OAAO,EACL,oBAAoB,EAKrB,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,UAAU,yBAAyB;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,yBAAyB;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,YAAY,GACpB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,CAAA;AAE7B,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAE1D,UAAU,sBAAsB;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,UAAU,sBAAuB,SAAQ,sBAAsB;IAC7D,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,+BAAgC,SAAQ,sBAAsB;IACtE,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,kBAAkB,GAC1B,+BAA+B,GAC/B,sBAAsB,CAAA;AAE1B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAqDpB,eAAO,MAAM,aAAa,qGA2IzB,CAAA"}
+{"version":3,"file":"SelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/select/SelectPopover.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,EAEZ,KAAK,oBAAoB,EAM1B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAA;AAQxD,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC,GACC,kBAAkB,CAAA;AAqDpB,eAAO,MAAM,aAAa,2LA0ZzB,CAAA"}

package/dist/components/select/SelectPopover.js

@@ -0,0 +1,237 @@
+import { getComboboxActionFromKey, ComboboxAction, getUpdatedIndex } from '../../utilities/keyboardUtils.js';
+import { normalizeOptions, getSelectableOptionsFromSegments, getIndexByLetter } from '../../utilities/selectUtils.js';
+import { useId } from '../../utilities/useId.js';
+import React__default, { forwardRef, useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { SelectOptions } from './SelectOptions.js';
+
+const Group = ({ children, disabled, id, label, }) => (React__default.createElement("ul", { "aria-disabled": disabled || undefined, "aria-labelledby": id, role: "group" },
+    React__default.createElement("li", { id: id, role: "presentation" },
+        React__default.createElement("span", null, label)),
+    children));
+function renderListSegments(segments, baseId, renderItem) {
+    let flatIndex = 0;
+    return segments.map((segment, segmentIndex) => {
+        const startIndex = flatIndex;
+        flatIndex += segment.options.length;
+        if (segment.type === "group") {
+            return (React__default.createElement(Group, { key: `${segment.label}-${segmentIndex}`, disabled: segment.disabled, id: `${baseId}-group-${segmentIndex}`, label: segment.label }, segment.options.map((opt, i) => renderItem(opt, startIndex + i))));
+        }
+        return (React__default.createElement("ul", { key: `options-${segmentIndex}`, role: "presentation" }, segment.options.map((opt, i) => renderItem(opt, startIndex + i))));
+    });
+}
+const SelectPopover = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, defaultValue, disabled, id, invalid, onBlur, onChange, onClick, onFocus, options, placeholder, required, value, ...props }, ref) => {
+    const stableId = useId();
+    const baseId = id || `tds-select-popover-${stableId}`;
+    const [isOpen, setIsOpen] = useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? null);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? (value ?? null) : uncontrolledValue;
+    const { allOptions, segments } = useMemo(() => {
+        const segments = normalizeOptions(options);
+        const allOptions = getSelectableOptionsFromSegments(segments);
+        return { allOptions, segments };
+    }, [options]);
+    const selectedOption = allOptions.find((opt) => opt.value === selectedValue);
+    const activeOption = activeIndex >= 0 ? allOptions[activeIndex] : undefined;
+    const activeOptionId = activeOption
+        ? `${baseId}-option-${activeOption.value}`
+        : undefined;
+    const popoverRef = useRef(null);
+    const triggerButtonRef = useRef(null);
+    const hiddenSelectRef = useRef(null);
+    const pendingChangeValueRef = useRef(null);
+    const searchStringRef = useRef("");
+    const searchTimeoutRef = useRef();
+    const setHiddenSelectRef = useCallback((element) => {
+        hiddenSelectRef.current = element;
+        if (typeof ref === "function") {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+    }, [ref]);
+    useEffect(() => {
+        const popoverEl = popoverRef.current;
+        if (!popoverEl)
+            return;
+        const handleToggle = (e) => {
+            const newIsOpen = e.newState === "open";
+            setIsOpen(newIsOpen);
+            if (newIsOpen) {
+                const index = allOptions.findIndex((opt) => opt.value === selectedValue && !opt.disabled);
+                if (index >= 0) {
+                    setActiveIndex(index);
+                }
+                else {
+                    // Find first non-disabled option
+                    const firstEnabledIndexOrFirstIndex = Math.max(allOptions.findIndex((opt) => !opt.disabled), 0);
+                    setActiveIndex(firstEnabledIndexOrFirstIndex);
+                }
+            }
+            else {
+                setActiveIndex(-1);
+            }
+        };
+        popoverEl.addEventListener("toggle", handleToggle);
+        return () => popoverEl.removeEventListener("toggle", handleToggle);
+    }, [allOptions, selectedValue]);
+    useEffect(() => {
+        if (activeOptionId) {
+            document
+                .getElementById(activeOptionId)
+                ?.scrollIntoView({ block: "nearest" });
+        }
+    }, [activeOptionId]);
+    useEffect(() => () => {
+        clearTimeout(searchTimeoutRef.current);
+    }, []);
+    const openPopover = () => popoverRef.current?.showPopover({ source: triggerButtonRef.current });
+    const closePopover = () => popoverRef.current?.hidePopover();
+    const commitSelection = useCallback((nextValue) => {
+        if (nextValue === selectedValue) {
+            closePopover();
+            return;
+        }
+        if (!isControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        const hiddenEl = hiddenSelectRef.current;
+        if (hiddenEl) {
+            pendingChangeValueRef.current = nextValue;
+            hiddenEl.value = nextValue;
+            hiddenEl.dispatchEvent(new Event("change", { bubbles: true }));
+            if (isControlled) {
+                hiddenEl.value = value ?? "";
+            }
+        }
+        closePopover();
+    }, [isControlled, selectedValue, value]);
+    const selectActiveOption = useCallback(() => {
+        if (activeOption && !activeOption.disabled) {
+            commitSelection(activeOption.value);
+            return true;
+        }
+        return false;
+    }, [activeOption, commitSelection]);
+    const commitActiveOptionOrClose = useCallback(() => {
+        if (!selectActiveOption()) {
+            closePopover();
+        }
+    }, [selectActiveOption]);
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        // Tab must not be prevented — allow native focus movement
+        if (e.key === "Tab" && isOpen) {
+            commitActiveOptionOrClose();
+            return;
+        }
+        const action = getComboboxActionFromKey(e, isOpen);
+        if (!action)
+            return;
+        e.preventDefault();
+        switch (action) {
+            case ComboboxAction.OpenPopup:
+                openPopover();
+                break;
+            case ComboboxAction.CommitAndClose:
+                commitActiveOptionOrClose();
+                break;
+            case ComboboxAction.MoveFirst:
+            case ComboboxAction.MoveLast:
+                if (!isOpen)
+                    openPopover();
+                setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions));
+                break;
+            case ComboboxAction.MoveNext:
+            case ComboboxAction.MovePrevious:
+                setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions));
+                break;
+            case ComboboxAction.TypeCharacter: {
+                if (!isOpen)
+                    openPopover();
+                clearTimeout(searchTimeoutRef.current);
+                searchStringRef.current += e.key;
+                searchTimeoutRef.current = setTimeout(() => {
+                    searchStringRef.current = "";
+                }, 500);
+                const searchIndex = getIndexByLetter(allOptions, searchStringRef.current, activeIndex);
+                if (searchIndex >= 0) {
+                    setActiveIndex(searchIndex);
+                }
+                break;
+            }
+            case ComboboxAction.ClosePopup:
+                closePopover();
+                break;
+        }
+    };
+    const createStableEventTarget = (target, valueSnapshot) => {
+        const proxy = Object.create(target);
+        Object.defineProperties(proxy, {
+            disabled: {
+                configurable: true,
+                enumerable: true,
+                value: target.disabled,
+            },
+            form: { configurable: true, enumerable: true, value: target.form },
+            name: { configurable: true, enumerable: true, value: target.name },
+            type: { configurable: true, enumerable: true, value: target.type },
+            value: { configurable: true, enumerable: true, value: valueSnapshot },
+        });
+        return proxy;
+    };
+    const withSelectTarget = useCallback((event, target, currentTarget = target) => {
+        return Object.defineProperties(Object.create(event), {
+            currentTarget: { value: currentTarget },
+            target: { value: target },
+        });
+    }, []);
+    const handleHiddenSelectChange = useCallback((event) => {
+        if (!onChange)
+            return;
+        const valueSnapshot = pendingChangeValueRef.current ?? event.currentTarget.value;
+        pendingChangeValueRef.current = null;
+        const stableEvent = withSelectTarget(event, createStableEventTarget(event.target, valueSnapshot), createStableEventTarget(event.currentTarget, valueSnapshot));
+        onChange(stableEvent);
+    }, [onChange, withSelectTarget]);
+    const forwardEventToSelect = useCallback((event, handler) => {
+        if (!handler)
+            return;
+        const hiddenEl = hiddenSelectRef.current;
+        if (!hiddenEl)
+            return;
+        const stableEvent = withSelectTarget(event, hiddenEl);
+        handler(stableEvent);
+    }, [withSelectTarget]);
+    const handleButtonBlur = useCallback((event) => {
+        forwardEventToSelect(event, onBlur);
+    }, [forwardEventToSelect, onBlur]);
+    const handleButtonClick = useCallback((event) => {
+        forwardEventToSelect(event, onClick);
+    }, [forwardEventToSelect, onClick]);
+    const handleButtonFocus = useCallback((event) => {
+        forwardEventToSelect(event, onFocus);
+    }, [forwardEventToSelect, onFocus]);
+    const renderListOption = ({ disabled, divider, label, value }, index) => {
+        if (divider)
+            return React__default.createElement("li", { key: index, role: "separator" });
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard events are handled on the combobox button
+        React__default.createElement("li", { key: value, "aria-disabled": disabled || undefined, "aria-selected": value === selectedValue, className: value === activeOption?.value
+                ? "tds-select-option--active"
+                : undefined, id: `${baseId}-option-${value}`, onClick: disabled ? undefined : () => commitSelection(value), role: "option" }, label));
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("button", { ref: triggerButtonRef, popovertarget: baseId, "aria-activedescendant": activeOptionId, "aria-controls": baseId, "aria-describedby": ariaDescribedBy, "aria-disabled": disabled ? "true" : undefined, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-invalid": invalid ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-required": required ? "true" : undefined, disabled: disabled, onBlur: handleButtonBlur, onClick: handleButtonClick, onFocus: handleButtonFocus, onKeyDown: handleKeyDown, role: "combobox", type: "button" }, selectedOption ? selectedOption.label : placeholder),
+        React__default.createElement("div", { ref: popoverRef, popover: "", id: baseId, role: "listbox", "aria-describedby": ariaDescribedBy, "aria-invalid": invalid ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-required": required ? "true" : undefined }, renderListSegments(segments, baseId, renderListOption)),
+        React__default.createElement("select", { ...props, ref: setHiddenSelectRef, "aria-hidden": true, className: "tds-select-hidden-select", disabled: disabled, id: `${baseId}-control`, onChange: handleHiddenSelectChange, required: required, tabIndex: -1, value: selectedValue ?? "" },
+            React__default.createElement("option", { value: "" }),
+            React__default.createElement(SelectOptions, { items: options }))));
+});
+SelectPopover.displayName = "SelectPopover";
+
+export { SelectPopover };
+//# sourceMappingURL=SelectPopover.js.map