impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/forms/select/components/SelectAllRow.js

@@ -0,0 +1,70 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { Checkmark as k } from "impact-nova-icons";
+import { cn as m } from "../../../../lib/utils.js";
+import { SELECT_ALL_INDEX as v } from "../select.constants.js";
+function j({
+  selectFieldId: b,
+  id: t,
+  highlightedIndex: p,
+  isDisabled: u,
+  isReadOnly: f,
+  maxSelectableOptions: i,
+  visibleStats: h,
+  selectAllLabel: o,
+  unselectAllLabel: d,
+  onSelectAll: x
+}) {
+  const { totalVisible: a, selectedVisible: r } = h, n = i ? Math.min(a, i) : a, s = a === 0 ? !1 : r > 0 && r < n ? "indeterminate" : r >= n, l = a > 0 && r >= n, c = u || f;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "pb-1",
+      "data-testid": `select-select-all-container-${t || "default"}`,
+      children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          id: `${b}-option-select-all`,
+          className: m(
+            "flex items-center justify-between cursor-pointer rounded-md hover:bg-canvas-muted transition-colors py-[6px] px-3 w-full border-0 bg-transparent text-start",
+            p === v && "ring-2 ring-inset ring-primary bg-accent",
+            c && "cursor-not-allowed opacity-75"
+          ),
+          onClick: () => {
+            x();
+          },
+          disabled: c,
+          "aria-pressed": l,
+          "aria-label": l ? d : o,
+          "data-testid": `select-select-all-button-${t || "default"}`,
+          children: /* @__PURE__ */ g("span", { className: "flex items-center flex-1", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-testid": `select-select-all-checkbox-${t || "default"}`,
+                className: m(
+                  "mr-[7px] flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated",
+                  (s === !0 || s === "indeterminate") && "border-brand bg-accent text-brand",
+                  c && "opacity-50"
+                ),
+                children: s === !0 ? /* @__PURE__ */ e(k, { className: "h-3.5 w-3.5" }) : s === "indeterminate" ? /* @__PURE__ */ e("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: "text-sm font-medium text-content",
+                "data-testid": `select-select-all-label-${t || "default"}`,
+                children: l ? d : o
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  j as SelectAllRow
+};

package/dist/components/forms/select/components/SelectMenuFooter.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface SelectMenuFooterProps {
+    footerContent?: ReactNode;
+    maxSelectableOptions?: number;
+    optionCount: number;
+}
+export declare function SelectMenuFooter({ footerContent, maxSelectableOptions, optionCount, }: SelectMenuFooterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/select/components/SelectMenuFooter.js

@@ -0,0 +1,22 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Info as a } from "impact-nova-icons";
+function o({
+  footerContent: r,
+  maxSelectableOptions: t,
+  optionCount: n
+}) {
+  return !r && !t && n <= 5e3 ? null : /* @__PURE__ */ e("div", { className: "sticky bottom-0 z-10 shrink-0 rounded-b-[12px] border-t border-solid border-stroke-subtle bg-canvas-elevated px-3 py-[10px]", children: t ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-content-secondary px-2", children: [
+    /* @__PURE__ */ e(a, { size: "12px", className: "text-content-icon" }),
+    /* @__PURE__ */ s("span", { className: "text-xs font-medium leading-4 text-secondary-foreground", children: [
+      "Maximum ",
+      t,
+      " selections"
+    ] })
+  ] }) : n > 5e3 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-content-secondary px-2", children: [
+    /* @__PURE__ */ e(a, { size: "12px", className: "text-content-icon" }),
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium leading-4 text-secondary-foreground", children: "Large dataset detected. Operations might be slower." })
+  ] }) : r });
+}
+export {
+  o as SelectMenuFooter
+};

package/dist/components/forms/select/components/SelectMenuHeader.d.ts

@@ -0,0 +1,28 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { SelectAllRowVisibleStats } from './SelectAllRow';
+export interface SelectMenuHeaderProps {
+    id?: string;
+    selectFieldId: string;
+    isReadOnly: boolean;
+    isDisabled?: boolean;
+    isMulti?: boolean;
+    isSearchable: boolean;
+    searchPosition: string;
+    fetchError: unknown;
+    isLoading?: boolean;
+    isProcessing: boolean;
+    isSelectAllEnabled: boolean;
+    flatOptionsLength: number;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    searchValue: string;
+    searchPlaceholder: string;
+    highlightedIndex: number;
+    maxSelectableOptions?: number;
+    visibleStats: SelectAllRowVisibleStats;
+    selectAllLabel: string;
+    unselectAllLabel: string;
+    onSearchChange: (value: string) => void;
+    onSearchKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onSelectAll: () => void | Promise<void>;
+}
+export declare function SelectMenuHeader({ id, selectFieldId, isReadOnly, isDisabled, isMulti, isSearchable, searchPosition, fetchError, isLoading, isProcessing, isSelectAllEnabled, flatOptionsLength, searchInputRef, searchValue, searchPlaceholder, highlightedIndex, maxSelectableOptions, visibleStats, selectAllLabel, unselectAllLabel, onSearchChange, onSearchKeyDown, onSelectAll, }: SelectMenuHeaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/select/components/SelectMenuHeader.js

@@ -0,0 +1,96 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Search as H } from "impact-nova-icons";
+import { cn as $ } from "../../../../lib/utils.js";
+import { SelectAllRow as y } from "./SelectAllRow.js";
+import { hasSelectAllRow as D } from "../utils/getSelectableOptionIndices.js";
+function F({
+  id: o,
+  selectFieldId: c,
+  isReadOnly: t,
+  isDisabled: i,
+  isMulti: p,
+  isSearchable: d,
+  searchPosition: u,
+  fetchError: l,
+  isLoading: m,
+  isProcessing: x,
+  isSelectAllEnabled: h,
+  flatOptionsLength: f,
+  searchInputRef: b,
+  searchValue: v,
+  searchPlaceholder: g,
+  highlightedIndex: w,
+  maxSelectableOptions: N,
+  visibleStats: S,
+  selectAllLabel: k,
+  unselectAllLabel: A,
+  onSearchChange: j,
+  onSearchKeyDown: z,
+  onSelectAll: B
+}) {
+  const n = d && u === "menu" && !t && !l, r = D({
+    isLoading: !!m,
+    isProcessing: x,
+    fetchError: l,
+    isMulti: p,
+    isSelectAllEnabled: h,
+    isReadOnly: t,
+    flatOptionsLength: f
+  }), C = !l && (n || r);
+  return !n && !r ? null : /* @__PURE__ */ a(
+    "div",
+    {
+      className: $(
+        "sticky top-0 z-10 flex shrink-0 flex-col rounded-t-[12px] px-[6px] pt-[8px]",
+        t ? "bg-disabled-surface" : "bg-canvas-elevated",
+        C ? "border-b border-solid border-stroke-subtle" : ""
+      ),
+      children: [
+        n ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: "p-0",
+            "data-testid": `select-search-container-${o || "default"}`,
+            children: /* @__PURE__ */ a("div", { className: "relative", children: [
+              /* @__PURE__ */ e("div", { className: "absolute inset-y-0 start-[12px] flex items-center pointer-events-none", children: /* @__PURE__ */ e(H, { size: "14px", className: "text-content-placeholder" }) }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: b,
+                  type: "text",
+                  className: "block h-[35px] w-full border-0 bg-transparent ps-[34px] pe-4 text-sm text-content outline-none placeholder:text-content-placeholder focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
+                  placeholder: g,
+                  value: v,
+                  onKeyDown: z,
+                  onChange: (s) => {
+                    j(s.target.value);
+                  },
+                  onClick: (s) => s.stopPropagation(),
+                  "data-testid": `select-search-input-${o || "default"}`
+                }
+              )
+            ] })
+          }
+        ) : null,
+        r ? /* @__PURE__ */ e(
+          y,
+          {
+            selectFieldId: c,
+            id: o,
+            highlightedIndex: w,
+            isDisabled: i,
+            isReadOnly: t,
+            maxSelectableOptions: N,
+            visibleStats: S,
+            selectAllLabel: k,
+            unselectAllLabel: A,
+            onSelectAll: B
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  F as SelectMenuHeader
+};

package/dist/components/forms/select/components/SelectMenuListBody.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, RefObject } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { FlatOption } from '../hooks/useFlattenOptions';
+import { Group, MultiValue, Option } from '../select.types';
+export interface SelectMenuListBodyProps<OptionType extends Option = Option> {
+    fetchError: unknown;
+    onRefetch?: () => void;
+    flatOptions: FlatOption[];
+    isLoading?: boolean;
+    isProcessing: boolean;
+    isMulti?: boolean;
+    isReadOnly: boolean;
+    enableGroups: boolean;
+    enableSubMenus: boolean;
+    showSequence?: boolean;
+    maxSelectableOptions?: number;
+    listRef: RefObject<HTMLDivElement | null>;
+    listboxId: string;
+    listboxLabel: string;
+    rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
+    selectFieldId: string;
+    id?: string;
+    highlightedIndex: number;
+    activeSubmenu: string | null;
+    setActiveSubmenu: (value: string | null) => void;
+    internalValue: MultiValue<OptionType> | OptionType | null;
+    selectionMode: "include" | "exclude";
+    selectionSet: Set<string>;
+    resolveOptionLabel: (option: OptionType | Option) => ReactNode;
+    getSequenceForOption: (option: Option | FlatOption) => number | undefined;
+    renderOption?: (props: {
+        onClick: () => void;
+        className: string;
+        selected: boolean;
+        disabled: boolean;
+    }, option: OptionType) => ReactNode;
+    onSelect: (option: FlatOption | Option) => void;
+    getGroupStats: (original: Option | Group) => {
+        selected: number;
+        total: number;
+    } | undefined;
+    emptyMessage?: string;
+    errorMessage?: string;
+    refetchLabel?: string;
+}
+export declare function SelectMenuListBody<OptionType extends Option = Option>({ fetchError, onRefetch, flatOptions, isLoading, isProcessing, isMulti, isReadOnly, enableGroups, enableSubMenus, showSequence, maxSelectableOptions, listRef, listboxId, listboxLabel, rowVirtualizer, selectFieldId, id, highlightedIndex, activeSubmenu, setActiveSubmenu, internalValue, selectionMode, selectionSet, resolveOptionLabel, getSequenceForOption, renderOption, onSelect, getGroupStats, emptyMessage, errorMessage, refetchLabel, }: SelectMenuListBodyProps<OptionType>): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/select/components/SelectMenuListBody.js

@@ -0,0 +1,114 @@
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { Button as U } from "../../../primitives/button/button.js";
+import { isInvertedSelection as X, isOptionArray as Y } from "../utils/select.js";
+import { SelectOptionRow as Z } from "./SelectOptionRow.js";
+function te({
+  fetchError: S,
+  onRefetch: m,
+  flatOptions: p,
+  isLoading: h,
+  isProcessing: x,
+  isMulti: s,
+  isReadOnly: j,
+  enableGroups: o,
+  enableSubMenus: i,
+  showSequence: P,
+  maxSelectableOptions: u,
+  listRef: k,
+  listboxId: w,
+  listboxLabel: B,
+  rowVirtualizer: l,
+  selectFieldId: A,
+  id: C,
+  highlightedIndex: D,
+  activeSubmenu: E,
+  setActiveSubmenu: I,
+  internalValue: a,
+  selectionMode: L,
+  selectionSet: f,
+  resolveOptionLabel: T,
+  getSequenceForOption: q,
+  renderOption: H,
+  onSelect: O,
+  getGroupStats: v,
+  emptyMessage: W = "No options found",
+  errorMessage: _ = "Something went wrong",
+  refetchLabel: $ = "Refetch"
+}) {
+  const z = (n) => {
+    const e = p[n.index], g = s ? L === "exclude" ? !f.has(e.value) : f.has(e.value) : a?.value === e.value, c = a || [], F = s && u ? X(c) ? !1 : Y(c) && c.length >= u : !1, y = e.isDisabled || F && !g && !(o && e.isGroup) && !(i && e.isSubmenuParent), N = o && e.isGroup || i && e.isSubmenuParent ? v(e.original) : void 0, r = N?.selected || 0, J = N?.total || 0, K = r > 0 && r < J, Q = e.isParentSelectable !== !1, d = T(e), R = typeof d == "string" ? d : String(e.value || "");
+    return /* @__PURE__ */ t(
+      Z,
+      {
+        option: e,
+        virtualRow: n,
+        measureElement: l.measureElement,
+        selectFieldId: A,
+        id: C,
+        isMulti: s,
+        isReadOnly: j,
+        enableGroups: o,
+        enableSubMenus: i,
+        showSequence: P,
+        selected: g,
+        isOptDisabled: y,
+        indeterminate: K,
+        selectedCount: r,
+        isParentSelectable: Q,
+        highlighted: D === n.index && !y,
+        activeSubmenu: E,
+        setActiveSubmenu: I,
+        optionLabel: d,
+        optionLabelString: R,
+        sequence: q(e),
+        internalValue: a,
+        renderOption: H,
+        onSelect: O,
+        getGroupStats: v
+      },
+      n.key
+    );
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: k,
+      id: w,
+      role: "listbox",
+      "aria-label": B,
+      className: "min-h-0 flex-1 overflow-auto py-1 px-[6px]",
+      style: {
+        maxHeight: "297px",
+        overscrollBehavior: "contain"
+      },
+      onWheel: (n) => n.stopPropagation(),
+      children: S ? /* @__PURE__ */ b("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
+        /* @__PURE__ */ t("p", { className: "text-sm text-content-secondary font-medium mb-3", children: _ }),
+        m ? /* @__PURE__ */ t(U, { size: "sm", variant: "outline", onClick: () => m(), children: $ }) : null
+      ] }) : p.length === 0 && !h && !x ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-8 text-sm text-content-secondary", children: W }) : h || x ? /* @__PURE__ */ t("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((n, e) => /* @__PURE__ */ b(
+        "div",
+        {
+          className: "flex items-center gap-2 px-3 py-2 animate-pulse",
+          children: [
+            s ? /* @__PURE__ */ t("div", { className: "w-4 h-4 bg-canvas-muted rounded shrink-0" }) : null,
+            /* @__PURE__ */ t("div", { className: "h-4 bg-canvas-muted rounded w-full" })
+          ]
+        },
+        e
+      )) }) : /* @__PURE__ */ t(
+        "div",
+        {
+          style: {
+            height: `${l.getTotalSize()}px`,
+            width: "100%",
+            position: "relative"
+          },
+          children: l.getVirtualItems().map(z)
+        }
+      )
+    }
+  );
+}
+export {
+  te as SelectMenuListBody
+};

package/dist/components/forms/select/components/SelectMenuPanel.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, RefObject } from 'react';
+export interface SelectMenuPanelProps {
+    menuRef: RefObject<HTMLDivElement | null>;
+    menuMinHeight?: number;
+    menuWidth?: string | number;
+    isReadOnly: boolean;
+    id?: string;
+    menuLabel: string;
+    children: ReactNode;
+}
+export declare function SelectMenuPanel({ menuRef, menuMinHeight, menuWidth, isReadOnly, id, menuLabel, children, }: SelectMenuPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/select/components/SelectMenuPanel.js

@@ -0,0 +1,54 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-popover";
+import { cn as r } from "../../../../lib/utils.js";
+function f({
+  menuRef: n,
+  menuMinHeight: o,
+  menuWidth: l,
+  isReadOnly: a,
+  id: d,
+  menuLabel: s,
+  children: p
+}) {
+  return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(
+    i.Content,
+    {
+      ref: n,
+      side: "bottom",
+      sideOffset: 4,
+      align: "start",
+      avoidCollisions: !0,
+      collisionPadding: 8,
+      "aria-label": s,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onWheel: (e) => e.stopPropagation(),
+      style: {
+        width: l ?? "var(--radix-popover-trigger-width)",
+        minWidth: "var(--radix-popover-trigger-width)",
+        maxHeight: "min(320px, var(--radix-popover-content-available-height, 320px))"
+      },
+      className: r(
+        "z-50 flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-elevation-select focus:outline-none sm:text-sm border-none pointer-events-auto",
+        a ? "bg-disabled-surface" : "bg-canvas-elevated"
+      ),
+      "data-testid": `select-menu-${d || "default"}`,
+      "data-component": "select-menu",
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: r(
+            "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[12px]",
+            a ? "bg-disabled-surface" : "bg-canvas-elevated"
+          ),
+          style: {
+            minHeight: o ? `${o}px` : void 0
+          },
+          children: p
+        }
+      )
+    }
+  ) });
+}
+export {
+  f as SelectMenuPanel
+};

package/dist/components/forms/select/components/SelectOptionRow.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { VirtualItem } from '@tanstack/react-virtual';
+import { FlatOption } from '../hooks/useFlattenOptions';
+import { Group, MultiValue, Option } from '../select.types';
+export interface SelectOptionRowProps<OptionType extends Option = Option> {
+    option: FlatOption;
+    virtualRow: VirtualItem;
+    measureElement: (node: Element | null) => void;
+    selectFieldId: string;
+    id?: string;
+    isMulti?: boolean;
+    isReadOnly: boolean;
+    enableGroups: boolean;
+    enableSubMenus: boolean;
+    showSequence?: boolean;
+    selected: boolean;
+    isOptDisabled: boolean;
+    indeterminate: boolean;
+    selectedCount: number;
+    isParentSelectable: boolean;
+    highlighted: boolean;
+    activeSubmenu: string | null;
+    setActiveSubmenu: (value: string | null) => void;
+    optionLabel: ReactNode;
+    optionLabelString: string;
+    sequence?: number;
+    internalValue: MultiValue<OptionType> | OptionType | null;
+    renderOption?: (props: {
+        onClick: () => void;
+        className: string;
+        selected: boolean;
+        disabled: boolean;
+    }, option: OptionType) => ReactNode;
+    onSelect: (option: FlatOption | Option) => void;
+    getGroupStats: (original: Option | Group) => {
+        selected: number;
+        total: number;
+    } | undefined;
+}
+export declare function SelectOptionRowInner<OptionType extends Option = Option>({ option, virtualRow, measureElement, selectFieldId, id, isMulti, isReadOnly, enableGroups, enableSubMenus, showSequence, selected, isOptDisabled, indeterminate, selectedCount, isParentSelectable, highlighted, activeSubmenu, setActiveSubmenu, optionLabel, optionLabelString, sequence, internalValue, renderOption, onSelect, getGroupStats, }: SelectOptionRowProps<OptionType>): import("react/jsx-runtime").JSX.Element;
+export declare const SelectOptionRow: typeof SelectOptionRowInner;

package/dist/components/forms/select/components/SelectOptionRow.js

@@ -0,0 +1,145 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { memo as z } from "react";
+import { Checkmark as E, ChevronRight as W } from "impact-nova-icons";
+import { cn as x } from "../../../../lib/utils.js";
+import { selectOptionVariants as Y } from "../select.variants.js";
+import { isSelected as B } from "../utils/select.js";
+import { LabelWithSequence as F } from "./LabelWithSequence.js";
+import { Submenu as G } from "./Submenu.js";
+function H({
+  option: e,
+  virtualRow: s,
+  measureElement: S,
+  selectFieldId: y,
+  id: k,
+  isMulti: l,
+  isReadOnly: m,
+  enableGroups: n,
+  enableSubMenus: t,
+  showSequence: j,
+  selected: a,
+  isOptDisabled: c,
+  indeterminate: f,
+  selectedCount: p,
+  isParentSelectable: g,
+  highlighted: C,
+  activeSubmenu: I,
+  setActiveSubmenu: N,
+  optionLabel: v,
+  optionLabelString: b,
+  sequence: V,
+  internalValue: q,
+  renderOption: w,
+  onSelect: $,
+  getGroupStats: P
+}) {
+  const u = k || "default", o = String(e.value || "");
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-index": s.index,
+      ref: S,
+      className: "absolute start-0 w-full pb-[2px]",
+      style: {
+        transform: `translateY(${s.start}px)`,
+        width: "100%"
+      },
+      "data-testid": `select-option-wrapper-${u}-${o}`,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            id: `${y}-option-${s.index}`,
+            className: x(
+              Y({
+                disabled: c,
+                readOnly: m,
+                selected: a && !c && !(n && e.isGroup) && !(t && e.isSubmenuParent),
+                highlighted: C && !c
+              })
+            ),
+            style: {
+              paddingInlineStart: `${e.depth * 16 + 12}px`
+            },
+            onClick: () => {
+              c || (n && e.isGroup || t && e.isSubmenuParent) && !g || $(e);
+            },
+            onMouseEnter: () => {
+              t && e.isSubmenuParent ? N(e.value) : N(null);
+            },
+            "data-testid": `select-option-${u}-${o}`,
+            "data-state": a ? "checked" : "unchecked",
+            "data-disabled": c || void 0,
+            "data-component": "select-option",
+            role: "option",
+            "aria-selected": a,
+            "aria-disabled": c || void 0,
+            children: w ? w(
+              {
+                onClick: () => {
+                },
+                className: "w-full",
+                selected: a,
+                disabled: c
+              },
+              e
+            ) : /* @__PURE__ */ h("div", { className: "flex items-center flex-1 overflow-hidden", children: [
+              l && (n && e.isGroup || t && e.isSubmenuParent ? g : !0) && /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: x(
+                    "mr-[7px] flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated",
+                    (a || f) && "border-brand bg-accent text-brand",
+                    (c || m) && "opacity-50"
+                  ),
+                  children: a && !f ? /* @__PURE__ */ r(E, { className: "h-3.5 w-3.5" }) : f ? /* @__PURE__ */ r("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
+                }
+              ),
+              j && !(n && e.isGroup) && !(t && e.isSubmenuParent) ? /* @__PURE__ */ r(F, { label: v, sequence: V }) : /* @__PURE__ */ h("div", { className: "flex items-center gap-2 overflow-hidden w-full", children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: x(
+                      "block truncate",
+                      n && e.isGroup ? "text-xs font-semibold text-content-icon uppercase tracking-wider" : a && !(t && e.isSubmenuParent) ? "font-medium" : "font-normal",
+                      !(n && e.isGroup) && "text-[14px]"
+                    ),
+                    "data-testid": `select-option-label-${u}-${o}`,
+                    "data-state": a ? "checked" : "unchecked",
+                    title: b,
+                    children: v
+                  }
+                ),
+                (n && e.isGroup || t && e.isSubmenuParent) && p > 0 && /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-brand-tint text-brand-on-subtle", children: p })
+              ] }),
+              t && e.isSubmenuParent && /* @__PURE__ */ r(W, { size: "12px", className: "text-content-icon" })
+            ] })
+          }
+        ),
+        t && I === e.value && e.isSubmenuParent && /* @__PURE__ */ r(
+          G,
+          {
+            parentOption: e,
+            isMulti: !!l,
+            isReadOnly: !!m,
+            isSelected: (d) => B(d, q, !!l),
+            getIndeterminateState: (d) => {
+              const i = P(d);
+              return i ? i.selected > 0 && i.selected < i.total : !1;
+            },
+            getSelectedCount: (d) => P(d)?.selected || 0,
+            handleSelect: $,
+            id: k
+          }
+        )
+      ]
+    },
+    s.key
+  );
+}
+const _ = z(H);
+export {
+  _ as SelectOptionRow,
+  H as SelectOptionRowInner
+};