@viasat/beam-react 2.30.0 → 2.37.0

package/lib/_Options/Option.context.es.js

@@ -1,123 +1,168 @@
-import { createContext as S, useRef as C, useState as b, useMemo as p, useCallback as i, useContext as k } from "react";
-const P = S(null), E = P.Provider, L = () => {
-  const r = k(P);
-  if (!r)
+import { createContext as H, useRef as C, useState as d, useMemo as O, useCallback as s, useContext as J } from "react";
+const S = H(null), N = S.Provider, Q = () => {
+  const o = J(S);
+  if (!o)
     throw new Error("useOptionsContext must be used within an OptionsProvider");
-  return r;
-}, B = (r) => Array.isArray(r) ? r : r !== void 0 ? [r] : [], T = (r, s, u) => {
-  const O = C(void 0), [c, x] = b(
+  return o;
+}, E = (o) => Array.isArray(o) ? o : o !== void 0 ? [o] : [], U = (o, c, p) => {
+  const w = C(void 0), [i, h] = d(
     () => /* @__PURE__ */ new Map()
-  ), [a, g] = b(() => []), w = C(c);
-  w.current = c;
-  const d = p(() => B(r), [r]), f = C(d);
-  f.current = d, p(() => {
-    if (!d.length)
-      O.current = void 0;
+  ), [u, y] = d(() => []), [D, I] = d(
+    () => /* @__PURE__ */ new Map()
+  ), [M, v] = d(
+    () => /* @__PURE__ */ new Map()
+  ), [m, g] = d(() => []), x = C(i);
+  x.current = i;
+  const a = O(() => E(o), [o]), f = C(a);
+  f.current = a, O(() => {
+    if (!a.length)
+      w.current = void 0;
     else {
-      const e = d[d.length - 1], n = a.map((t) => c.get(t)).findIndex((t) => (t == null ? void 0 : t.value) === e);
-      O.current = n;
+      const e = a[a.length - 1], n = u.map((t) => i.get(t)).findIndex((t) => (t == null ? void 0 : t.value) === e);
+      w.current = n;
     }
-  }, [d, a, c]);
-  const m = i(
+  }, [a, u, i]);
+  const G = s(
     (e) => {
-      const n = w.current.get(e), t = n == null ? void 0 : n.value, o = f.current;
-      n && t && s(u ? [...o.filter((l) => l !== t), t] : t);
+      const n = x.current.get(e), t = n == null ? void 0 : n.value, r = f.current;
+      n && t && c(p ? [...r.filter((l) => l !== t), t] : t);
     },
-    [u, s]
-  ), v = i(
+    [p, c]
+  ), k = s(
     (e) => {
-      const n = w.current.get(e), t = n == null ? void 0 : n.value, o = f.current;
+      const n = x.current.get(e), t = n == null ? void 0 : n.value, r = f.current;
       if (n && t)
-        if (u) {
-          if (!o.includes(t)) return;
-          s(o.filter((l) => l !== t));
+        if (p) {
+          if (!r.includes(t)) return;
+          c(r.filter((l) => l !== t));
         } else
           return;
     },
-    [u, s]
-  ), y = i(
+    [p, c]
+  ), L = s(
     (e) => {
-      if (!u || e === void 0) return;
-      const t = B(e)[0];
+      if (!p || e === void 0) return;
+      const t = E(e)[0];
       if (!t) return;
-      const o = f.current;
-      o.includes(t) && s(o.filter((l) => l !== t));
+      const r = f.current;
+      r.includes(t) && c(r.filter((l) => l !== t));
+    },
+    [p, c]
+  ), z = s(
+    (e, n) => {
+      y((t) => [...t, e]), v((t) => {
+        const r = new Map(t);
+        return r.set(e, n), r;
+      }), n === null && g((t) => [...t, { kind: "option", id: e }]);
+    },
+    []
+  ), P = s(
+    (e) => {
+      y((n) => n.filter((t) => t !== e)), h((n) => {
+        const t = new Map(n);
+        return t.delete(e), t;
+      }), v((n) => {
+        const t = new Map(n);
+        return t.delete(e), t;
+      }), g(
+        (n) => n.filter((t) => !(t.kind === "option" && t.id === e))
+      );
+    },
+    []
+  ), V = s(
+    (e, n) => h((t) => {
+      const r = new Map(t);
+      return r.set(e, n), r;
+    }),
+    []
+  ), A = s(
+    (e) => {
+      g((n) => [...n, { kind: "group", id: e }]);
     },
-    [u, s]
-  ), z = i(
-    (e) => g((n) => [...n, e]),
-    [g]
-  ), I = i(
+    []
+  ), B = s(
     (e) => {
-      g((n) => n.filter((t) => t !== e)), x((n) => {
+      I((n) => {
         const t = new Map(n);
         return t.delete(e), t;
-      });
+      }), g(
+        (n) => n.filter((t) => !(t.kind === "group" && t.id === e))
+      );
     },
-    [x, g]
-  ), h = i(
-    (e, n) => x((t) => {
-      const o = new Map(t);
-      return o.set(e, n), o;
+    []
+  ), R = s(
+    (e, n) => I((t) => {
+      const r = new Map(t);
+      return r.set(e, n), r;
     }),
-    [x]
-  ), M = p(
+    []
+  ), T = O(
     () => ({
-      setValue: s,
+      setValue: c,
       registerOption: z,
-      unregisterOption: I,
-      setOptionProps: h,
-      selectOption: m,
-      deselectOption: v
+      unregisterOption: P,
+      setOptionProps: V,
+      selectOption: G,
+      deselectOption: k,
+      registerGroup: A,
+      unregisterGroup: B,
+      setGroupProps: R
     }),
     [
-      s,
+      c,
       z,
-      I,
-      h,
-      m,
-      v
+      P,
+      V,
+      G,
+      k,
+      A,
+      B,
+      R
     ]
-  ), V = p(() => {
-    if (!r || !c.size) return [];
-    const e = Array.from(c.values()), n = new Map(
+  ), j = O(() => {
+    if (!o || !i.size) return [];
+    const e = Array.from(i.values()), n = new Map(
       e.map((t) => [t.value, t])
     );
     return f.current.length === 0 ? [] : f.current.map((t) => n.get(t)).filter(Boolean);
-  }, [r, c]), A = i(
-    (e) => w.current.get(e),
+  }, [o, i]), b = s(
+    (e) => x.current.get(e),
     []
-  ), R = i(
+  ), q = s(
     (e) => {
-      const n = a[e];
+      const n = u[e];
       if (n)
-        return A(n);
+        return b(n);
     },
-    [A, a]
-  );
-  return p(
-    () => ({
-      optionsContext: M,
-      selectedOptionsProps: V,
-      optionIds: a,
-      optionsProps: c,
-      deselectOptionValue: y,
-      indexOfLastSelectedOptionRef: O,
-      getOptionByIndex: R
-    }),
-    [
-      M,
-      y,
-      a,
-      c,
-      V,
-      O,
-      R
-    ]
-  );
+    [b, u]
+  ), F = O(() => {
+    const e = /* @__PURE__ */ new Map();
+    return m.forEach((n) => {
+      n.kind === "group" && e.set(n.id, []);
+    }), u.forEach((n) => {
+      const t = M.get(n);
+      if (t != null) {
+        const r = e.get(t);
+        r && r.push(n);
+      }
+    }), e;
+  }, [m, u, M]);
+  return {
+    optionsContext: T,
+    selectedOptionsProps: j,
+    optionIds: u,
+    optionsProps: i,
+    deselectOptionValue: L,
+    indexOfLastSelectedOptionRef: w,
+    getOptionByIndex: q,
+    structureIds: m,
+    groupsProps: D,
+    optionGroupOf: M,
+    optionIdsByGroup: F
+  };
 };
 export {
-  E as OptionsProvider,
-  T as useCreateOptionsContext,
-  L as useOptionsContext
+  N as OptionsProvider,
+  U as useCreateOptionsContext,
+  Q as useOptionsContext
 };

package/lib/_Options/Option.es.js

@@ -1,31 +1,33 @@
 import { jsx as x } from "react/jsx-runtime";
-import { useMemo as l, useCallback as b, useLayoutEffect as d, useEffect as g } from "react";
-import { useOptionsContext as C } from "./Option.context.es.js";
-import { extractTextFromReactNode as N } from "../../utils/functions.es.js";
-const k = ({
-  className: v,
-  label: n,
-  value: f,
-  children: e,
-  ...r
+import { useMemo as d, useCallback as g, useLayoutEffect as C, useEffect as N } from "react";
+import { useOptionsContext as b } from "./Option.context.es.js";
+import { useOptionGroupContext as v } from "./OptionGroup.context.es.js";
+import { extractTextFromReactNode as E } from "../../utils/functions.es.js";
+import { useId as I } from "../../utils/hooks/useId.es.js";
+const P = ({
+  className: j,
+  label: r,
+  value: l,
+  children: o,
+  ...n
 }) => {
-  const o = l(() => n ?? N(e), [n, e]), s = f ?? o, {
+  const e = d(() => r ?? E(o), [r, o]), s = l ?? e, {
     selectOption: i,
-    deselectOption: a,
-    registerOption: c,
+    deselectOption: p,
+    registerOption: u,
     unregisterOption: m,
-    setOptionProps: p
-  } = C(), t = l(() => Symbol("OptionId"), []), u = b(
+    setOptionProps: a
+  } = b(), { groupId: c } = v(), t = I() ?? "", f = g(
     (O) => {
-      O ? i(t) : a(t);
+      O ? i(t) : p(t);
     },
-    [a, t, i]
+    [p, t, i]
   );
-  return d(() => (c(t), () => m(t)), [t, c, m]), g(() => {
-    p(t, { ...r, label: o, value: s, children: e, onSelectionChange: u });
-  }, [e, t, o, u, r, p, s]), /* @__PURE__ */ x("option", { value: s, children: o });
+  return C(() => (u(t, c), () => m(t)), [t, c, u, m]), N(() => {
+    a(t, { ...n, label: e, value: s, children: o, onSelectionChange: f });
+  }, [o, t, e, f, n, a, s]), /* @__PURE__ */ x("option", { value: s, children: e });
 };
 export {
-  k as Option,
-  k as default
+  P as Option,
+  P as default
 };

package/lib/_Options/Option.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ActionListItemProps } from '../ActionList/ActionList.Item';
 export interface OptionProps extends Omit<ActionListItemProps, 'defaultSelected' | 'kind' | 'indent' | 'role'> {
     /**
@@ -9,3 +10,25 @@ export interface OptionProps extends Omit<ActionListItemProps, 'defaultSelected'
      */
     label?: string;
 }
+export interface OptionGroupProps {
+    /**
+     * Visible group label rendered above the group's options. Used as the source for `aria-label` on the group container.
+     */
+    heading?: string | ReactNode;
+    /**
+     * Render a visual separator below the group.
+     *
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Disables every Option inside the group. Heading remains visible; options are non-interactive.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * `Option` components. Nested `OptionGroup`s are not supported.
+     */
+    children?: ReactNode;
+}

package/lib/_Options/OptionGroup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),t=require("react"),O=require("./Option.context.cjs.js"),G=require("./OptionGroup.context.cjs.js"),a=require("../../utils/hooks/useId.cjs.js"),p=({heading:o,divider:u,disabled:r,children:c})=>{const{registerGroup:s,unregisterGroup:n,setGroupProps:i}=O.useOptionsContext(),e=a.useId()??"";t.useLayoutEffect(()=>(s(e),()=>n(e)),[e,s,n]),t.useEffect(()=>{i(e,{heading:o,divider:u,disabled:r})},[e,o,u,r,i]);const _=t.useMemo(()=>({groupId:e}),[e]);return l.jsx(G.OptionGroupProvider,{value:_,children:c})};exports.OptionGroup=p;exports.default=p;

package/lib/_Options/OptionGroup.context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),t=o.createContext({groupId:null}),e=t.Provider,r=()=>o.useContext(t);exports.OptionGroupProvider=e;exports.useOptionGroupContext=r;

package/lib/_Options/OptionGroup.context.d.ts

@@ -0,0 +1,6 @@
+interface OptionGroupContextValue {
+    groupId: string | null;
+}
+export declare const OptionGroupProvider: import('react').Provider<OptionGroupContextValue>;
+export declare const useOptionGroupContext: () => OptionGroupContextValue;
+export {};

package/lib/_Options/OptionGroup.context.es.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as r } from "react";
+const o = t({ groupId: null }), n = o.Provider, p = () => r(o);
+export {
+  n as OptionGroupProvider,
+  p as useOptionGroupContext
+};

package/lib/_Options/OptionGroup.d.ts

@@ -0,0 +1,3 @@
+import { OptionGroupProps } from './Option.types';
+export declare const OptionGroup: ({ heading, divider, disabled, children, }: OptionGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionGroup;

package/lib/_Options/OptionGroup.es.js

@@ -0,0 +1,22 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useLayoutEffect as i, useEffect as c, useMemo as G } from "react";
+import { useOptionsContext as x } from "./Option.context.es.js";
+import { OptionGroupProvider as a } from "./OptionGroup.context.es.js";
+import { useId as O } from "../../utils/hooks/useId.es.js";
+const j = ({
+  heading: r,
+  divider: t,
+  disabled: e,
+  children: m
+}) => {
+  const { registerGroup: u, unregisterGroup: p, setGroupProps: s } = x(), o = O() ?? "";
+  i(() => (u(o), () => p(o)), [o, u, p]), c(() => {
+    s(o, { heading: r, divider: t, disabled: e });
+  }, [o, r, t, e, s]);
+  const n = G(() => ({ groupId: o }), [o]);
+  return /* @__PURE__ */ f(a, { value: n, children: m });
+};
+export {
+  j as OptionGroup,
+  j as default
+};

package/lib/_Options/getLastVisibleStructureIndex.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(i,o,n={}){for(let t=i.length-1;t>=0;t--){const e=i[t];if(e.kind==="option"){if(!n[e.id])return t}else if((o.get(e.id)??[]).some(r=>!n[r]))return t}return-1}exports.getLastVisibleStructureIndex=s;

package/lib/_Options/getLastVisibleStructureIndex.d.ts

@@ -0,0 +1,15 @@
+import { StructureNode } from './Option.context';
+/**
+ * Find the index of the last visible node in an options dropdown structure.
+ *
+ * Used to determine which group should suppress its trailing divider (the one
+ * that ends up as the last visible thing in the dropdown).
+ *
+ * - For an option node: visible when not filtered out.
+ * - For a group node: visible when at least one of its options is not filtered.
+ *
+ * Pass `filteredOptionsById` when the consumer supports filtering (Autocomplete).
+ * Omit it for non-filtering consumers (Select); options are then treated as
+ * always visible and groups are treated as visible when non-empty.
+ */
+export declare function getLastVisibleStructureIndex(structureIds: StructureNode[], optionIdsByGroup: Map<string, string[]>, filteredOptionsById?: Record<string, boolean>): number;

package/lib/_Options/getLastVisibleStructureIndex.es.js

@@ -0,0 +1,14 @@
+function u(t, e, o = {}) {
+  for (let i = t.length - 1; i >= 0; i--) {
+    const n = t[i];
+    if (n.kind === "option") {
+      if (!o[n.id]) return i;
+    } else if ((e.get(n.id) ?? []).some(
+      (s) => !o[s]
+    )) return i;
+  }
+  return -1;
+}
+export {
+  u as getLastVisibleStructureIndex
+};

package/lib/_Options/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Option.context.cjs.js"),t=require("./Option.cjs.js"),o=require("./useSelectValue.cjs.js");exports.OptionsProvider=e.OptionsProvider;exports.useCreateOptionsContext=e.useCreateOptionsContext;exports.useOptionsContext=e.useOptionsContext;exports.Option=t.Option;exports.useSelectValue=o.useSelectValue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Option.context.cjs.js"),o=require("./Option.cjs.js"),i=require("./OptionGroup.cjs.js"),t=require("./OptionGroup.context.cjs.js"),n=require("./getLastVisibleStructureIndex.cjs.js"),r=require("./useRenderOption.cjs.js"),s=require("./useSelectValue.cjs.js");exports.OptionsProvider=e.OptionsProvider;exports.useCreateOptionsContext=e.useCreateOptionsContext;exports.useOptionsContext=e.useOptionsContext;exports.Option=o.Option;exports.OptionGroup=i.OptionGroup;exports.OptionGroupProvider=t.OptionGroupProvider;exports.useOptionGroupContext=t.useOptionGroupContext;exports.getLastVisibleStructureIndex=n.getLastVisibleStructureIndex;exports.useRenderOption=r.useRenderOption;exports.useSelectValue=s.useSelectValue;

package/lib/_Options/index.d.ts

@@ -1,4 +1,8 @@
 export * from './Option.types';
 export * from './Option.context';
 export * from './Option';
+export * from './OptionGroup';
+export * from './OptionGroup.context';
+export * from './getLastVisibleStructureIndex';
+export * from './useRenderOption';
 export * from './useSelectValue';

package/lib/_Options/index.es.js

@@ -1,10 +1,19 @@
 import { OptionsProvider as t, useCreateOptionsContext as r, useOptionsContext as p } from "./Option.context.es.js";
-import { Option as s } from "./Option.es.js";
-import { useSelectValue as x } from "./useSelectValue.es.js";
+import { Option as i } from "./Option.es.js";
+import { OptionGroup as x } from "./OptionGroup.es.js";
+import { OptionGroupProvider as O, useOptionGroupContext as f } from "./OptionGroup.context.es.js";
+import { getLastVisibleStructureIndex as d } from "./getLastVisibleStructureIndex.es.js";
+import { useRenderOption as a } from "./useRenderOption.es.js";
+import { useSelectValue as G } from "./useSelectValue.es.js";
 export {
-  s as Option,
+  i as Option,
+  x as OptionGroup,
+  O as OptionGroupProvider,
   t as OptionsProvider,
+  d as getLastVisibleStructureIndex,
   r as useCreateOptionsContext,
+  f as useOptionGroupContext,
   p as useOptionsContext,
-  x as useSelectValue
+  a as useRenderOption,
+  G as useSelectValue
 };

package/lib/_Options/useRenderOption.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),d=require("clsx"),S=require("../ActionList/ActionList.cjs.js");function g({optionsProps:t,selectionStrategy:n,value:r,multiple:i,optionClassName:l,filteredOptionsById:c}){return a.useCallback((s,o)=>{const e=t.get(s);if(!e)return null;const b=n.isSelected(e.value,r),u=(c==null?void 0:c[s])??!1,k=u||e.disabled||!!o;return a.createElement(S.ActionList.Item,{...e,className:d(l,e.className),disabled:k,hidden:u,defaultSelected:b,key:s,kind:i?"checkbox":"singleCheckMark",role:"option"})},[t,n,r,i,l,c])}exports.useRenderOption=g;

package/lib/_Options/useRenderOption.d.ts

@@ -0,0 +1,30 @@
+import { OptionProps } from './Option.types';
+import { SelectionStrategy, SelectValue } from './strategies/SelectionStrategy';
+export interface UseRenderOptionParams {
+    /** Live options registry from `useCreateOptionsContext`. */
+    optionsProps: Map<string, OptionProps>;
+    /** Selection strategy (single vs multi) from `createSelectionStrategy`. */
+    selectionStrategy: SelectionStrategy;
+    /** Current selected value (single string or array for multi). */
+    value: SelectValue;
+    /** Whether the parent is in multiselect mode (affects item kind). */
+    multiple: boolean;
+    /** CSS class applied to each rendered `ActionList.Item` for parent-specific styling. */
+    optionClassName?: string;
+    /**
+     * Per-option "filtered out" map (Autocomplete only). When set, filtered
+     * options render with `hidden` and `disabled` so keyboard navigation skips
+     * them while their `useListItem` index stays stable. Omit on consumers that
+     * don't filter (Select).
+     */
+    filteredOptionsById?: Record<string, boolean>;
+}
+/**
+ * Shared per-option renderer for `Autocomplete` and `Select` dropdowns.
+ *
+ * Returns a stable `(optionId, groupDisabled?)` callback the parent invokes
+ * while walking its rendered structure. Centralises the `ActionList.Item`
+ * wiring (className, disabled cascade, selection mirror, role, key) so both
+ * components stay in lockstep.
+ */
+export declare function useRenderOption({ optionsProps, selectionStrategy, value, multiple, optionClassName, filteredOptionsById, }: UseRenderOptionParams): (optionId: string, groupDisabled?: boolean) => import("react/jsx-runtime").JSX.Element | null;

package/lib/_Options/useRenderOption.es.js

@@ -0,0 +1,43 @@
+import { useCallback as b, createElement as i } from "react";
+import h from "clsx";
+import { ActionList as x } from "../ActionList/ActionList.es.js";
+function g({
+  optionsProps: s,
+  selectionStrategy: a,
+  value: l,
+  multiple: n,
+  optionClassName: m,
+  filteredOptionsById: c
+}) {
+  return b(
+    (r, u) => {
+      const e = s.get(r);
+      if (!e) return null;
+      const k = a.isSelected(e.value, l), t = (c == null ? void 0 : c[r]) ?? !1, o = t || e.disabled || !!u;
+      return /* @__PURE__ */ i(
+        x.Item,
+        {
+          ...e,
+          className: h(m, e.className),
+          disabled: o,
+          hidden: t,
+          defaultSelected: k,
+          key: r,
+          kind: n ? "checkbox" : "singleCheckMark",
+          role: "option"
+        }
+      );
+    },
+    [
+      s,
+      a,
+      l,
+      n,
+      m,
+      c
+    ]
+  );
+}
+export {
+  g as useRenderOption
+};

package/lib/wip/DateField/DateField.Segment.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("clsx");require("react");const e=require("../../../chunks/DateField.Segment.7oCeBSNo.js");require("./DateField.utils.cjs.js");exports.DateFieldSegment=e.DateFieldSegment;

package/lib/wip/DateField/DateField.Segment.d.ts

@@ -0,0 +1,2 @@
+import { DateFieldSegmentProps } from './DateField.types';
+export declare const DateFieldSegment: ({ type, value, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;

package/lib/wip/DateField/DateField.Segment.es.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "clsx";
+import "react";
+import { D as p } from "../../../chunks/DateField.Segment.DbjGMAPP.js";
+import "./DateField.utils.es.js";
+export {
+  p as DateFieldSegment
+};

package/lib/wip/DateField/DateField.Segments.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("../../../chunks/DateField.Segment.7oCeBSNo.js"),l=require("./DateField.utils.cjs.js"),i=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],F={month:"MM",day:"DD",year:"YYYY"},R=l.getSegmentOrder(i),v=({segmentText:n,segmentValues:r,focusedSegment:o,disabled:u,readOnly:c,onSegmentFocus:d,onSegmentBlur:y,onSegmentInput:m,registerSegmentRef:p})=>a.jsx("span",{className:t.styles[t.staticDateFieldClassNames.segments],children:i.map((s,D)=>{if(s.type==="literal")return a.jsx("span",{"aria-hidden":"true",className:t.styles[t.staticDateFieldClassNames.separator],children:s.value},`literal-${D}`);const e=s.type,g=F[e],{displayValue:S,isPlaceholder:_}=l.getSegmentDisplay(e,n[e],g);return a.jsx(t.DateFieldSegment,{type:e,value:r[e],displayValue:S,isPlaceholder:_,isActive:o===e,disabled:u,readOnly:c,onFocus:()=>d(e),onBlur:y,onInput:m,segmentRef:p(e)},e)})});exports.DateFieldSegments=v;exports.PARTS_ORDER=R;

package/lib/wip/DateField/DateField.Segments.d.ts

@@ -0,0 +1,17 @@
+import { FocusEvent } from 'react';
+import { FocusTarget, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+export declare const PARTS_ORDER: ReadonlyArray<SegmentType>;
+export interface DateFieldSegmentsProps {
+    /** Per-segment raw strings — the single source of truth for display. */
+    segmentText: SegmentText;
+    /** Derived per-segment numbers for `aria-valuenow`. */
+    segmentValues: SegmentValues;
+    focusedSegment: FocusTarget;
+    disabled: boolean;
+    readOnly: boolean;
+    onSegmentFocus: (segment: SegmentType) => void;
+    onSegmentBlur: (event: FocusEvent<HTMLSpanElement>) => void;
+    onSegmentInput: (segment: SegmentType, char: string) => void;
+    registerSegmentRef: (segment: SegmentType) => (element: HTMLSpanElement | null) => void;
+}
+export declare const DateFieldSegments: ({ segmentText, segmentValues, focusedSegment, disabled, readOnly, onSegmentFocus, onSegmentBlur, onSegmentInput, registerSegmentRef, }: DateFieldSegmentsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/wip/DateField/DateField.Segments.es.js

@@ -0,0 +1,61 @@
+import { jsx as a } from "react/jsx-runtime";
+import { s, a as l, D as h } from "../../../chunks/DateField.Segment.DbjGMAPP.js";
+import { getSegmentOrder as R, getSegmentDisplay as f } from "./DateField.utils.es.js";
+const n = [
+  { type: "month", value: "" },
+  { type: "literal", value: "/" },
+  { type: "day", value: "" },
+  { type: "literal", value: "/" },
+  { type: "year", value: "" }
+], A = {
+  month: "MM",
+  day: "DD",
+  year: "YYYY"
+}, P = R(n), Y = ({
+  segmentText: r,
+  segmentValues: o,
+  focusedSegment: i,
+  disabled: m,
+  readOnly: p,
+  onSegmentFocus: c,
+  onSegmentBlur: y,
+  onSegmentInput: u,
+  registerSegmentRef: d
+}) => /* @__PURE__ */ a("span", { className: s[l.segments], children: n.map((t, g) => {
+  if (t.type === "literal")
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: s[l.separator],
+        children: t.value
+      },
+      `literal-${g}`
+    );
+  const e = t.type, D = A[e], { displayValue: v, isPlaceholder: S } = f(
+    e,
+    r[e],
+    D
+  );
+  return /* @__PURE__ */ a(
+    h,
+    {
+      type: e,
+      value: o[e],
+      displayValue: v,
+      isPlaceholder: S,
+      isActive: i === e,
+      disabled: m,
+      readOnly: p,
+      onFocus: () => c(e),
+      onBlur: y,
+      onInput: u,
+      segmentRef: d(e)
+    },
+    e
+  );
+}) });
+export {
+  Y as DateFieldSegments,
+  P as PARTS_ORDER
+};