@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.16

package/dist/forks/ComplexSelector/ComplexSelector.d.ts

@@ -0,0 +1,144 @@
+import { default as React, ReactNode } from 'react';
+import { StyleXStyles } from '@stylexjs/stylex';
+import { BaseProps } from '@astryxdesign/core/BaseProps';
+import { FieldStatusVariant } from '@astryxdesign/core/Field';
+import { IconType } from '@astryxdesign/core/Icon';
+import { LayerAlignment, LayerPlacement } from '@astryxdesign/core/Layer';
+import { SizeValue } from '@astryxdesign/core/utils';
+export type ComplexSelectorVariant = "input" | "ghost";
+export type ComplexSelectorSize = "sm" | "md" | "lg";
+export interface ComplexSelectorRenderState {
+    /** Whether the selector surface is open. */
+    isOpen: boolean;
+    /** Whether changeAction/isLoading is pending. */
+    isBusy: boolean;
+    /** ID of the trigger button. */
+    triggerId: string;
+    /** ID of the popup content container. */
+    contentId: string;
+}
+/**
+ * Imperative control surface for ComplexSelector, accessed via the `handleRef`
+ * prop. Methods drive the same popover machinery as the built-in trigger, so
+ * they respect focus restoration, light dismiss, and Escape. Prefer these
+ * callbacks over mirroring open state in the parent — the selector owns its
+ * visibility, and imperative calls avoid the focus-management pitfalls of
+ * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every
+ * open and close, including the ones the selector performs itself.
+ */
+export interface ComplexSelectorHandle {
+    /** Open the selector surface. No-op when disabled or already open. */
+    open(): void;
+    /** Close the selector surface. Restores focus to the trigger. */
+    close(): void;
+    /** Toggle the selector surface open or closed. */
+    toggle(): void;
+    /** Whether the selector surface is currently open. Reads live state. */
+    isOpen(): boolean;
+}
+export interface ComplexSelectorStatus {
+    type: "warning" | "error" | "success";
+    message?: string;
+}
+export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivElement>, "children" | "onChange"> {
+    /** Label text for accessibility and the field label. */
+    label: string;
+    /** Current controlled value. */
+    value: Value;
+    /** Called when custom content commits a new value. */
+    onChange?: (value: Value) => void;
+    /** Optional async action after onChange; drives optimistic UI. */
+    changeAction?: (value: Value) => void | Promise<void>;
+    /** Custom selector surface content rendered inside a dialog popover. */
+    children: (value: Value, onChange: (value: Value) => void, close: () => void, state: ComplexSelectorRenderState) => ReactNode;
+    /** Label/content shown in the closed trigger. */
+    triggerLabel?: ReactNode;
+    /** Placeholder shown when triggerLabel is omitted. */
+    placeholder?: ReactNode;
+    /** Whether to visually hide the field label. */
+    isLabelHidden?: boolean;
+    /** Helper text displayed below the label. */
+    description?: string;
+    /** Marks the field optional. */
+    isOptional?: boolean;
+    /** Marks the field required. */
+    isRequired?: boolean;
+    /** Disables the selector. */
+    isDisabled?: boolean;
+    /** Shows loading state on the trigger. */
+    isLoading?: boolean;
+    /**
+     * Shows a clear button between the loading spinner and the chevron while
+     * `triggerLabel` is set, as `Selector`'s `hasClear` does. Activating it
+     * calls `onClear`, or `onChange(undefined)` when `onClear` is not given.
+     */
+    hasClear?: boolean;
+    /** Called when the clear button is activated. */
+    onClear?: () => void;
+    /** Validation status. */
+    status?: ComplexSelectorStatus;
+    /** Status placement. */
+    statusVariant?: FieldStatusVariant;
+    /** Tooltip text displayed next to the label. */
+    labelTooltip?: string;
+    /** Trigger and field size. */
+    size?: ComplexSelectorSize;
+    /** Visual trigger style. Ghost matches toolbar buttons. */
+    variant?: ComplexSelectorVariant;
+    /** Icon displayed at the start of the trigger. */
+    startIcon?: ReactNode | IconType;
+    /** Width of the field. */
+    width?: SizeValue;
+    /** Popup placement. */
+    placement?: LayerPlacement;
+    /** Popup alignment along the placement axis. */
+    alignment?: LayerAlignment;
+    /**
+     * Imperative handle for programmatic open/close control. Exposes open,
+     * close, toggle, and the isOpen query. Use this instead of mirroring open
+     * state in the parent — the selector owns its visibility.
+     */
+    handleRef?: React.Ref<ComplexSelectorHandle>;
+    /**
+     * Called whenever the selector surface opens or closes, however it happened
+     * — the trigger, the keyboard, a light dismiss, Escape, content that calls
+     * `close()`, or the imperative handle. Pair it with `handleRef` to drive the
+     * surface from outside without mirroring its state.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** StyleX styles for the popup content container. */
+    contentXstyle?: StyleXStyles;
+    /** Test ID for the trigger container. */
+    "data-testid"?: string;
+}
+/**
+ * A selector shell for rich, custom selection surfaces.
+ *
+ * ComplexSelector owns the field, trigger, popover, focus restore, and async
+ * change action flow. Consumers provide the dialog content as a render function,
+ * using the supplied `value`, `onChange`, and `close` helpers to compose the
+ * right accessible structure for the custom selector.
+ *
+ * @example
+ * ```
+ * <ComplexSelector
+ *   label="Fruit"
+ *   value={value}
+ *   onChange={setValue}
+ *   triggerLabel={`${value.fruit} ${value.ripeness}`}>
+ *   {(value, onChange, close) => (
+ *     <FruitGrid
+ *       value={value}
+ *       onChange={nextValue => {
+ *         onChange(nextValue);
+ *         close();
+ *       }}
+ *     />
+ *   )}
+ * </ComplexSelector>
+ * ```
+ */
+export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, hasClear, onClear, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, onOpenChange, contentXstyle, xstyle, className, style, "data-testid": testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
+export declare namespace ComplexSelector {
+    var displayName: string;
+}

package/dist/forks/ComplexSelector/ComplexSelector.js

@@ -0,0 +1,157 @@
+"use client";
+import { compiledStyles as e } from "../compiled.js";
+import { interactionOverlayStyles as t, styles as n } from "./ComplexSelector.styles.js";
+import { use as r, useCallback as i, useId as a, useImperativeHandle as ee, useOptimistic as o, useRef as s, useTransition as c } from "react";
+import { useTranslator as te } from "@astryxdesign/core/i18n";
+import { layerAnimations as ne } from "@astryxdesign/core/Layer";
+import { composeEventHandlers as re, focusOutlineStyles as ie, isRenderable as ae, mergeProps as oe, themeProps as l } from "@astryxdesign/core/utils";
+import { Fragment as se, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Icon as f, renderIconSlot as p } from "@astryxdesign/core/Icon";
+import { usePopover as m } from "@astryxdesign/core/Popover";
+import * as h from "@stylexjs/stylex";
+import { Field as g, InputClearButton as ce, inputWrapperStyles as _ } from "@astryxdesign/core/Field";
+import { FormLayoutContext as v } from "@astryxdesign/core/FormLayout";
+import { Spinner as le } from "@astryxdesign/core/Spinner";
+import { spacingVars as ue } from "@astryxdesign/core/theme/tokens.stylex";
+//#region src/forks/ComplexSelector/ComplexSelector.tsx
+var y = e(n), de = e(t);
+function fe({ isRequired: e = !1, isOptional: t = !1 }) {
+	let { defaultOptionality: n } = r(v);
+	return !t && (e || n === "required");
+}
+function b({ label: e, value: t, onChange: n, changeAction: r, children: v, triggerLabel: b, placeholder: pe, isLabelHidden: me = !1, description: x, isOptional: S = !1, isRequired: C = !1, isDisabled: w = !1, isLoading: T = !1, hasClear: E = !1, onClear: D, status: O, statusVariant: k = "attached", labelTooltip: A, size: j = "md", variant: M = "input", startIcon: N, width: P, placement: F = "below", alignment: I = "start", handleRef: L, onOpenChange: R, contentXstyle: z, xstyle: he, className: ge, style: _e, "data-testid": ve, onClick: ye, ...be }) {
+	let B = te(), xe = fe({
+		isRequired: C,
+		isOptional: S
+	}), Se = pe ?? B("@astryx.selector.placeholder"), Ce = M === "ghost" && k === "attached" ? "detached" : k, V = a(), H = a(), U = a(), W = a(), G = a(), we = [x ? W : null, O?.message ? G : null].filter((e) => e != null).join(" ") || void 0, K = s(null), [Te, q] = c(), [Ee, J] = o(t), Y = T || Te, De = i(() => {
+		R?.(!0);
+	}, [R]), Oe = i(() => {
+		K.current?.focus(), R?.(!1);
+	}, [R]), X = m({
+		dialogLabel: e,
+		hasCloseButton: !1,
+		hasAutoFocus: !0,
+		surfaceTarget: "complex-selector-popup",
+		onShow: De,
+		onHide: Oe
+	}), Z = X.isOpen, Q = i(() => {
+		w || (X.isOpen ? X.hide() : X.show());
+	}, [w, X]), ke = i(() => {
+		X.hide();
+	}, [X]);
+	ee(L, () => ({
+		open: () => {
+			w || X.show();
+		},
+		close: () => X.hide(),
+		toggle: () => {
+			w || (X.isOpen ? X.hide() : X.show());
+		},
+		isOpen: () => X.isOpen
+	}), [w, X]);
+	let Ae = i((e) => {
+		n?.(e), r && q(async () => {
+			J(e), await r(e);
+		});
+	}, [
+		r,
+		n,
+		J,
+		q
+	]), je = b ?? Se, $ = p(N, {
+		size: "sm",
+		color: "secondary"
+	}), Me = /* @__PURE__ */ u("div", {
+		id: U,
+		...h.props(y.content, z),
+		children: v(Ee, Ae, ke, {
+			isOpen: Z,
+			isBusy: Y,
+			triggerId: V,
+			contentId: U
+		})
+	}), Ne = /* @__PURE__ */ d(se, { children: [/* @__PURE__ */ d("div", {
+		ref: X.triggerRef,
+		"data-testid": ve,
+		...be,
+		onClick: re(ye, Q),
+		...oe(l("complex-selector", {
+			variant: M,
+			size: j,
+			status: O?.type ?? null
+		}), h.props(_.base, y.triggerContainer, y[j], ie.focusWithin, M === "ghost" && y.triggerGhost, M === "ghost" && de.backgroundImage, w && _.disabled, M === "ghost" && w && y.triggerGhostDisabled, w && y.disabled, b == null && y.placeholder, he), ge, _e),
+		children: [
+			ae($) && $,
+			/* @__PURE__ */ u("button", {
+				ref: K,
+				id: V,
+				type: "button",
+				"aria-haspopup": "dialog",
+				"aria-expanded": Z,
+				"aria-controls": U,
+				"aria-describedby": we,
+				"aria-labelledby": H,
+				"aria-required": xe ? "true" : void 0,
+				"aria-invalid": O?.type === "error" ? "true" : void 0,
+				"aria-busy": Y || void 0,
+				disabled: w,
+				onKeyDown: (e) => {
+					e.key === "ArrowDown" && !Z && !w && (e.preventDefault(), X.show());
+				},
+				...h.props(y.trigger),
+				children: /* @__PURE__ */ u("span", {
+					...h.props(y.triggerText),
+					children: je
+				})
+			}),
+			Y && /* @__PURE__ */ u(le, { size: "sm" }),
+			E && b != null && !w && /* @__PURE__ */ u(ce, {
+				label: B("@astryx.selector.clearLabel", { label: e }),
+				onClick: (e) => {
+					e.stopPropagation(), D ? D() : n?.(void 0);
+				}
+			}),
+			/* @__PURE__ */ u(f, {
+				icon: "chevronDown",
+				size: "sm",
+				color: "secondary",
+				xstyle: [
+					y.triggerIcon,
+					y.triggerIconRotation,
+					Z && y.triggerIconOpen
+				],
+				...l("complex-selector-indicator-icon", { state: Z ? "expanded" : "collapsed" })
+			})
+		]
+	}), X.render(Me, {
+		placement: F,
+		alignment: I,
+		offset: ue["--spacing-1"],
+		xstyle: [y.popover, ne[F]]
+	})] });
+	return /* @__PURE__ */ u(g, {
+		label: e,
+		isLabelHidden: me,
+		description: x,
+		inputID: V,
+		descriptionID: x ? W : void 0,
+		labelID: H,
+		isOptional: S,
+		isRequired: C,
+		isDisabled: w,
+		status: O ? {
+			type: O.type,
+			message: O.message,
+			messageID: O.message ? G : void 0
+		} : void 0,
+		statusVariant: Ce,
+		labelTooltip: A,
+		width: P,
+		children: Ne
+	});
+}
+b.displayName = "ComplexSelector";
+//#endregion
+export { b as ComplexSelector };
+
+//# sourceMappingURL=ComplexSelector.js.map

package/dist/forks/ComplexSelector/ComplexSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComplexSelector.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/core 0.6.5, src/ComplexSelector/ComplexSelector.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * ComplexSelector, ui-common's copy of Astryx's, with one upstream fix\n * applied: `hasClear` / `onClear`, a clear button between the loading spinner\n * and the chevron, as `Selector`'s `hasClear` has (facebook/astryx#6362, open).\n *\n * Everything else is upstream's, line for line. Two things differ in form\n * only: the style namespaces are Astryx's compiled output (src/forks/compiled.ts),\n * and the two internals Astryx does not export are inlined —\n * `useResolvedRequired` (read through the public `FormLayoutContext`) and\n * `interactionOverlayStyles` (compiled, like the rest).\n *\n * Delete this fork, and its exports.exclude.json entry, once Astryx ships\n * the fix (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\nimport React, {\n  use,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useOptimistic,\n  useRef,\n  useTransition,\n  type ReactNode,\n} from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core/BaseProps\";\nimport {\n  Field,\n  InputClearButton,\n  inputWrapperStyles,\n  type FieldStatusVariant,\n} from \"@astryxdesign/core/Field\";\nimport { FormLayoutContext } from \"@astryxdesign/core/FormLayout\";\nimport { Icon, renderIconSlot, type IconType } from \"@astryxdesign/core/Icon\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { useTranslator } from \"@astryxdesign/core/i18n\";\nimport {\n  layerAnimations,\n  type LayerAlignment,\n  type LayerPlacement,\n} from \"@astryxdesign/core/Layer\";\nimport { usePopover } from \"@astryxdesign/core/Popover\";\nimport { spacingVars } from \"@astryxdesign/core/theme/tokens.stylex\";\nimport {\n  composeEventHandlers,\n  focusOutlineStyles,\n  isRenderable,\n  mergeProps,\n  themeProps,\n  type SizeValue,\n} from \"@astryxdesign/core/utils\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./ComplexSelector.styles\";\n\n// dist/ComplexSelector/ComplexSelector.js `styles`, and\n// dist/utils/interactionOverlay.stylex.js, which core does not export.\nconst styles = compiledStyles(compiled.styles);\nconst interactionOverlayStyles = compiledStyles(compiled.interactionOverlayStyles);\n\n// @astryxdesign/core 0.6.5 src/hooks/useResolvedRequired.ts, which core does\n// not export: a field under `FormLayout defaultOptionality=\"required\"` is\n// required unless it opts out.\nfunction useResolvedRequired({\n  isRequired = false,\n  isOptional = false,\n}: {\n  isRequired?: boolean;\n  isOptional?: boolean;\n}): boolean {\n  const { defaultOptionality } = use(FormLayoutContext);\n  return !isOptional && (isRequired || defaultOptionality === \"required\");\n}\n\nexport type ComplexSelectorVariant = \"input\" | \"ghost\";\n\nexport type ComplexSelectorSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ComplexSelectorRenderState {\n  /** Whether the selector surface is open. */\n  isOpen: boolean;\n  /** Whether changeAction/isLoading is pending. */\n  isBusy: boolean;\n  /** ID of the trigger button. */\n  triggerId: string;\n  /** ID of the popup content container. */\n  contentId: string;\n}\n\n/**\n * Imperative control surface for ComplexSelector, accessed via the `handleRef`\n * prop. Methods drive the same popover machinery as the built-in trigger, so\n * they respect focus restoration, light dismiss, and Escape. Prefer these\n * callbacks over mirroring open state in the parent — the selector owns its\n * visibility, and imperative calls avoid the focus-management pitfalls of\n * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every\n * open and close, including the ones the selector performs itself.\n */\nexport interface ComplexSelectorHandle {\n  /** Open the selector surface. No-op when disabled or already open. */\n  open(): void;\n  /** Close the selector surface. Restores focus to the trigger. */\n  close(): void;\n  /** Toggle the selector surface open or closed. */\n  toggle(): void;\n  /** Whether the selector surface is currently open. Reads live state. */\n  isOpen(): boolean;\n}\n\nexport interface ComplexSelectorStatus {\n  type: \"warning\" | \"error\" | \"success\";\n  message?: string;\n}\n\nexport interface ComplexSelectorProps<Value> extends Omit<\n  BaseProps<HTMLDivElement>,\n  \"children\" | \"onChange\"\n> {\n  /** Label text for accessibility and the field label. */\n  label: string;\n  /** Current controlled value. */\n  value: Value;\n  /** Called when custom content commits a new value. */\n  onChange?: (value: Value) => void;\n  /** Optional async action after onChange; drives optimistic UI. */\n  changeAction?: (value: Value) => void | Promise<void>;\n  /** Custom selector surface content rendered inside a dialog popover. */\n  children: (\n    value: Value,\n    onChange: (value: Value) => void,\n    close: () => void,\n    state: ComplexSelectorRenderState,\n  ) => ReactNode;\n  /** Label/content shown in the closed trigger. */\n  triggerLabel?: ReactNode;\n  /** Placeholder shown when triggerLabel is omitted. */\n  placeholder?: ReactNode;\n  /** Whether to visually hide the field label. */\n  isLabelHidden?: boolean;\n  /** Helper text displayed below the label. */\n  description?: string;\n  /** Marks the field optional. */\n  isOptional?: boolean;\n  /** Marks the field required. */\n  isRequired?: boolean;\n  /** Disables the selector. */\n  isDisabled?: boolean;\n  /** Shows loading state on the trigger. */\n  isLoading?: boolean;\n  /**\n   * Shows a clear button between the loading spinner and the chevron while\n   * `triggerLabel` is set, as `Selector`'s `hasClear` does. Activating it\n   * calls `onClear`, or `onChange(undefined)` when `onClear` is not given.\n   */\n  hasClear?: boolean;\n  /** Called when the clear button is activated. */\n  onClear?: () => void;\n  /** Validation status. */\n  status?: ComplexSelectorStatus;\n  /** Status placement. */\n  statusVariant?: FieldStatusVariant;\n  /** Tooltip text displayed next to the label. */\n  labelTooltip?: string;\n  /** Trigger and field size. */\n  size?: ComplexSelectorSize;\n  /** Visual trigger style. Ghost matches toolbar buttons. */\n  variant?: ComplexSelectorVariant;\n  /** Icon displayed at the start of the trigger. */\n  startIcon?: ReactNode | IconType;\n  /** Width of the field. */\n  width?: SizeValue;\n  /** Popup placement. */\n  placement?: LayerPlacement;\n  /** Popup alignment along the placement axis. */\n  alignment?: LayerAlignment;\n  /**\n   * Imperative handle for programmatic open/close control. Exposes open,\n   * close, toggle, and the isOpen query. Use this instead of mirroring open\n   * state in the parent — the selector owns its visibility.\n   */\n  handleRef?: React.Ref<ComplexSelectorHandle>;\n  /**\n   * Called whenever the selector surface opens or closes, however it happened\n   * — the trigger, the keyboard, a light dismiss, Escape, content that calls\n   * `close()`, or the imperative handle. Pair it with `handleRef` to drive the\n   * surface from outside without mirroring its state.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** StyleX styles for the popup content container. */\n  contentXstyle?: StyleXStyles;\n  /** Test ID for the trigger container. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A selector shell for rich, custom selection surfaces.\n *\n * ComplexSelector owns the field, trigger, popover, focus restore, and async\n * change action flow. Consumers provide the dialog content as a render function,\n * using the supplied `value`, `onChange`, and `close` helpers to compose the\n * right accessible structure for the custom selector.\n *\n * @example\n * ```\n * <ComplexSelector\n *   label=\"Fruit\"\n *   value={value}\n *   onChange={setValue}\n *   triggerLabel={`${value.fruit} ${value.ripeness}`}>\n *   {(value, onChange, close) => (\n *     <FruitGrid\n *       value={value}\n *       onChange={nextValue => {\n *         onChange(nextValue);\n *         close();\n *       }}\n *     />\n *   )}\n * </ComplexSelector>\n * ```\n */\nexport function ComplexSelector<Value>({\n  label,\n  value,\n  onChange,\n  changeAction,\n  children,\n  triggerLabel,\n  placeholder: placeholderFromProps,\n  isLabelHidden = false,\n  description,\n  isOptional = false,\n  isRequired = false,\n  isDisabled = false,\n  isLoading = false,\n  hasClear = false,\n  onClear,\n  status,\n  statusVariant = \"attached\",\n  labelTooltip,\n  size = \"md\",\n  variant = \"input\",\n  startIcon,\n  width,\n  placement = \"below\",\n  alignment = \"start\",\n  handleRef,\n  onOpenChange,\n  contentXstyle,\n  xstyle,\n  className,\n  style,\n  \"data-testid\": testId,\n  onClick: onClickProp,\n  ...props\n}: ComplexSelectorProps<Value>) {\n  const t = useTranslator();\n  const isEffectivelyRequired = useResolvedRequired({ isRequired, isOptional });\n  const placeholder = placeholderFromProps ?? t(\"@astryx.selector.placeholder\");\n  const effectiveStatusVariant =\n    variant === \"ghost\" && statusVariant === \"attached\" ? \"detached\" : statusVariant;\n\n  const triggerId = useId();\n  const labelId = useId();\n  const contentId = useId();\n  const descriptionId = useId();\n  const statusMessageId = useId();\n  const ariaDescribedBy =\n    [description ? descriptionId : null, status?.message ? statusMessageId : null]\n      .filter((id): id is string => id != null)\n      .join(\" \") || undefined;\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const [isPending, startTransition] = useTransition();\n  const [optimisticValue, setOptimisticValue] = useOptimistic(value);\n  const isBusy = isLoading || isPending;\n\n  const handlePopoverShow = useCallback(() => {\n    onOpenChange?.(true);\n  }, [onOpenChange]);\n\n  const handlePopoverHide = useCallback(() => {\n    // Focus is restored first so a consumer that moves focus elsewhere from\n    // the callback wins, instead of being overwritten a line later.\n    triggerRef.current?.focus();\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const popover = usePopover({\n    dialogLabel: label,\n    hasCloseButton: false,\n    hasAutoFocus: true,\n    surfaceTarget: \"complex-selector-popup\",\n    onShow: handlePopoverShow,\n    onHide: handlePopoverHide,\n  });\n\n  const isOpen = popover.isOpen;\n\n  const handleTriggerClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    if (popover.isOpen) {\n      popover.hide();\n    } else {\n      popover.show();\n    }\n  }, [isDisabled, popover]);\n\n  const close = useCallback(() => {\n    popover.hide();\n  }, [popover]);\n\n  useImperativeHandle(\n    handleRef,\n    () => ({\n      open: () => {\n        if (!isDisabled) {\n          popover.show();\n        }\n      },\n      close: () => popover.hide(),\n      toggle: () => {\n        if (isDisabled) {\n          return;\n        }\n        if (popover.isOpen) {\n          popover.hide();\n        } else {\n          popover.show();\n        }\n      },\n      isOpen: () => popover.isOpen,\n    }),\n    [isDisabled, popover],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: Value) => {\n      onChange?.(nextValue);\n      if (changeAction) {\n        startTransition(async () => {\n          setOptimisticValue(nextValue);\n          await changeAction(nextValue);\n        });\n      }\n    },\n    [changeAction, onChange, setOptimisticValue, startTransition],\n  );\n\n  const triggerContent = triggerLabel ?? placeholder;\n\n  const startIconSlot = renderIconSlot(startIcon, {\n    size: \"sm\",\n    color: \"secondary\",\n  });\n\n  const content = (\n    <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>\n      {children(optimisticValue, commitValue, close, {\n        isOpen,\n        isBusy,\n        triggerId,\n        contentId,\n      })}\n    </div>\n  );\n\n  const selectorContent = (\n    <>\n      <div\n        ref={popover.triggerRef}\n        data-testid={testId}\n        {...props}\n        onClick={composeEventHandlers(onClickProp, handleTriggerClick)}\n        {...mergeProps(\n          themeProps(\"complex-selector\", {\n            variant,\n            size,\n            status: status?.type ?? null,\n          }),\n          stylex.props(\n            inputWrapperStyles.base,\n            styles.triggerContainer,\n            styles[size],\n            // The ring belongs to the wrapper (the focusable `<button>` sits\n            // inside it), but it must still be a KEYBOARD ring: `:focus-within`\n            // matched a mouse click on the trigger and drew the outline for\n            // pointer users too. `focusWithin` here is `:has(:focus-visible)`.\n            focusOutlineStyles.focusWithin,\n            variant === \"ghost\" && styles.triggerGhost,\n            variant === \"ghost\" && interactionOverlayStyles.backgroundImage,\n            isDisabled && inputWrapperStyles.disabled,\n            variant === \"ghost\" && isDisabled && styles.triggerGhostDisabled,\n            isDisabled && styles.disabled,\n            triggerLabel == null && styles.placeholder,\n            xstyle,\n          ),\n          className,\n          style,\n        )}\n      >\n        {isRenderable(startIconSlot) && startIconSlot}\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={contentId}\n          aria-describedby={ariaDescribedBy}\n          aria-labelledby={labelId}\n          aria-required={isEffectivelyRequired ? \"true\" : undefined}\n          aria-invalid={status?.type === \"error\" ? \"true\" : undefined}\n          aria-busy={isBusy || undefined}\n          disabled={isDisabled}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowDown\" && !isOpen && !isDisabled) {\n              event.preventDefault();\n              popover.show();\n            }\n          }}\n          {...stylex.props(styles.trigger)}\n        >\n          <span {...stylex.props(styles.triggerText)}>{triggerContent}</span>\n        </button>\n        {isBusy && <Spinner size=\"sm\" />}\n        {/* ui-common: the clear button (facebook/astryx#6362). */}\n        {hasClear && triggerLabel != null && !isDisabled && (\n          <InputClearButton\n            label={t(\"@astryx.selector.clearLabel\", { label })}\n            // The container's own click opens the popover; a clear must not.\n            onClick={(event) => {\n              event.stopPropagation();\n              if (onClear) {\n                onClear();\n              } else {\n                // Clearing hands back \"no value\", which `Value` may not name.\n                onChange?.(undefined as Value);\n              }\n            }}\n          />\n        )}\n        <Icon\n          icon=\"chevronDown\"\n          size=\"sm\"\n          color=\"secondary\"\n          // No wrapper: Icon's own span already provides the 16px box (`sm`)\n          // and the secondary icon color the wrapper used to set, so the glyph\n          // IS the trigger's icon element — one node carrying the box, the\n          // color, the rotation, and the theme target.\n          xstyle={[\n            styles.triggerIcon,\n            styles.triggerIconRotation,\n            isOpen && styles.triggerIconOpen,\n          ]}\n          {...themeProps(\"complex-selector-indicator-icon\", {\n            state: isOpen ? \"expanded\" : \"collapsed\",\n          })}\n        />\n      </div>\n\n      {popover.render(content, {\n        placement,\n        alignment,\n        offset: spacingVars[\"--spacing-1\"],\n        xstyle: [styles.popover, layerAnimations[placement]],\n      })}\n    </>\n  );\n\n  return (\n    <Field\n      label={label}\n      isLabelHidden={isLabelHidden}\n      description={description}\n      inputID={triggerId}\n      descriptionID={description ? descriptionId : undefined}\n      labelID={labelId}\n      isOptional={isOptional}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      status={\n        status\n          ? {\n              type: status.type,\n              message: status.message,\n              messageID: status.message ? statusMessageId : undefined,\n            }\n          : undefined\n      }\n      statusVariant={effectiveStatusVariant}\n      labelTooltip={labelTooltip}\n      width={width}\n    >\n      {selectorContent}\n    </Field>\n  );\n}\n\nComplexSelector.displayName = \"ComplexSelector\";\n"],"mappings":"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"}

package/dist/forks/ComplexSelector/ComplexSelector.styles.d.ts

@@ -0,0 +1,129 @@
+export declare const styles: {
+    triggerContainer: {
+        kVAEAm: string;
+        k1xSpc: string;
+        kGNEyG: string;
+        kjj79g: string;
+        kOIVth: string;
+        kzqmXN: string;
+        k8WAf4: string;
+        kg3NbH: string;
+        kMv6JI: string;
+        kGuDYH: string;
+        kLWn49: string;
+        kMwMTN: string;
+        kkrTdU: string;
+        $$css: boolean;
+    };
+    trigger: {
+        k1xSpc: string;
+        kGNEyG: string;
+        kjj79g: string;
+        kOIVth: string;
+        kzQI83: string;
+        kmuXW: string;
+        kCS8Yb: string;
+        k7Eaqz: string;
+        kmVPX3: string;
+        kogj98: string;
+        kMzoRj: string;
+        ksu8eU: string;
+        kWkggS: string;
+        kMv6JI: string;
+        kGuDYH: string;
+        kLWn49: string;
+        kMwMTN: string;
+        kkrTdU: string;
+        kI3sdo: string;
+        kaIpWk: string;
+        $$css: boolean;
+    };
+    triggerText: {
+        kzQI83: string;
+        k7Eaqz: string;
+        kVQacm: string;
+        kg5iWk: string;
+        khDVqt: string;
+        k9WMMc: string;
+        $$css: boolean;
+    };
+    placeholder: {
+        kMwMTN: string;
+        $$css: boolean;
+    };
+    triggerGhost: {
+        kzqmXN: string;
+        kMzoRj: string;
+        kWkggS: string;
+        kGVxlE: string;
+        k63SB2: string;
+        k1ekBW: string;
+        k3aq6I: string;
+        $$css: boolean;
+    };
+    triggerGhostDisabled: {
+        kKwaWg: string;
+        k3aq6I: string;
+        $$css: boolean;
+    };
+    triggerIcon: {
+        kmuXW: string;
+        $$css: boolean;
+    };
+    triggerIconRotation: {
+        k1ekBW: string;
+        kIyJzY: string;
+        kAMwcw: string;
+        k3nNDw: string;
+        $$css: boolean;
+    };
+    triggerIconOpen: {
+        k3aq6I: string;
+        $$css: boolean;
+    };
+    popover: {
+        k7Eaqz: string;
+        $$css: boolean;
+    };
+    content: {
+        kB7OPa: string;
+        kskxy: string;
+        kVQacm: string;
+        kmVPX3: string;
+        $$css: boolean;
+    };
+    sm: {
+        kZKoxP: string;
+        $$css: boolean;
+    };
+    md: {
+        kZKoxP: string;
+        $$css: boolean;
+    };
+    lg: {
+        kZKoxP: string;
+        $$css: boolean;
+    };
+    disabled: {
+        kkrTdU: string;
+        $$css: boolean;
+    };
+};
+export declare const interactionOverlayStyles: {
+    backgroundColor: {
+        kWkggS: string;
+        $$css: boolean;
+    };
+    backgroundImage: {
+        kKwaWg: string;
+        $$css: boolean;
+    };
+    backgroundImageOnNeutral: {
+        kKwaWg: string;
+        $$css: boolean;
+    };
+    pressedBackgroundColor: {
+        kWkggS: string;
+        $$css: boolean;
+    };
+};

package/dist/forks/ComplexSelector/ComplexSelector.styles.js

@@ -0,0 +1,133 @@
+//#region src/forks/ComplexSelector/ComplexSelector.styles.ts
+var e = {
+	triggerContainer: {
+		kVAEAm: "x1n2onr6",
+		k1xSpc: "x78zum5",
+		kGNEyG: "x6s0dn4",
+		kjj79g: "x1qughib",
+		kOIVth: "x1txdalj",
+		kzqmXN: "xh8yej3",
+		k8WAf4: "xce4md1",
+		kg3NbH: "xrrkdod",
+		kMv6JI: "x9ynric",
+		kGuDYH: "xcr08ib x1w61h2b",
+		kLWn49: "x1kq96og",
+		kMwMTN: "x1tgivj0",
+		kkrTdU: "x1ypdohk x16khyan",
+		$$css: !0
+	},
+	trigger: {
+		k1xSpc: "x78zum5",
+		kGNEyG: "x6s0dn4",
+		kjj79g: "x1qughib",
+		kOIVth: "x1txdalj",
+		kzQI83: "x1iyjqo2",
+		kmuXW: "xs83m0k",
+		kCS8Yb: "x1r8uery",
+		k7Eaqz: "xeuugli",
+		kmVPX3: "x1717udv",
+		kogj98: "x1ghz6dp",
+		kMzoRj: "xc342km",
+		ksu8eU: "xng3xce",
+		kWkggS: "xjbqb8w",
+		kMv6JI: "xjb2p0i",
+		kGuDYH: "x1qlqyl8",
+		kLWn49: "x15bjb6t",
+		kMwMTN: "x1heor9g",
+		kkrTdU: "x1ypdohk x16khyan",
+		kI3sdo: "x1a2a7pz",
+		kaIpWk: "xh6dtrn",
+		$$css: !0
+	},
+	triggerText: {
+		kzQI83: "x1iyjqo2",
+		k7Eaqz: "xeuugli",
+		kVQacm: "xb3r6kr",
+		kg5iWk: "xlyipyv",
+		khDVqt: "xuxw1ft",
+		k9WMMc: "x1yc453h",
+		$$css: !0
+	},
+	placeholder: {
+		kMwMTN: "xv1l7n4",
+		$$css: !0
+	},
+	triggerGhost: {
+		kzqmXN: "x14atkfc",
+		kMzoRj: "xc342km",
+		kWkggS: "xjbqb8w",
+		kGVxlE: "x1gnnqk1 x1s17dad x15ysqaf",
+		k63SB2: "x1e4wzip",
+		k1ekBW: "xrafxwg",
+		k3aq6I: "x3oybdh xk4oym4",
+		$$css: !0
+	},
+	triggerGhostDisabled: {
+		kKwaWg: "x18o3ruo",
+		k3aq6I: "x1c071of x1pdlv7q",
+		$$css: !0
+	},
+	triggerIcon: {
+		kmuXW: "x2lah0s",
+		$$css: !0
+	},
+	triggerIconRotation: {
+		k1ekBW: "x11xpdln",
+		kIyJzY: "xuedmi6",
+		kAMwcw: "xlr8y92",
+		k3nNDw: "x1g0ag68",
+		$$css: !0
+	},
+	triggerIconOpen: {
+		k3aq6I: "x19jd1h0",
+		$$css: !0
+	},
+	popover: {
+		k7Eaqz: "xrzjruh",
+		$$css: !0
+	},
+	content: {
+		kB7OPa: "x9f619",
+		kskxy: "xpnbb6b",
+		kVQacm: "xysyzu8",
+		kmVPX3: "x1b2ylru",
+		$$css: !0
+	},
+	sm: {
+		kZKoxP: "x6k0iem",
+		$$css: !0
+	},
+	md: {
+		kZKoxP: "x1ueg155",
+		$$css: !0
+	},
+	lg: {
+		kZKoxP: "xssyfek",
+		$$css: !0
+	},
+	disabled: {
+		kkrTdU: "xt0e3qv",
+		$$css: !0
+	}
+}, t = {
+	backgroundColor: {
+		kWkggS: "xjbqb8w x1anq1lc xoevpu5 xprvw0a",
+		$$css: !0
+	},
+	backgroundImage: {
+		kKwaWg: "x7uyq82 xmvprkv xetgvay",
+		$$css: !0
+	},
+	backgroundImageOnNeutral: {
+		kKwaWg: "x14bno8m xzmimnh x1otsd3y xo3fi6e",
+		$$css: !0
+	},
+	pressedBackgroundColor: {
+		kWkggS: "x1anq1lc",
+		$$css: !0
+	}
+};
+//#endregion
+export { t as interactionOverlayStyles, e as styles };
+
+//# sourceMappingURL=ComplexSelector.styles.js.map

package/dist/forks/ComplexSelector/ComplexSelector.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComplexSelector.styles.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/core 0.6.5, reused by the\n// ComplexSelector fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/ComplexSelector/ComplexSelector.js\nexport const styles = {\n  triggerContainer: {\n    kVAEAm: \"x1n2onr6\",\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"xce4md1\",\n    kg3NbH: \"xrrkdod\",\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xcr08ib x1w61h2b\",\n    kLWn49: \"x1kq96og\",\n    kMwMTN: \"x1tgivj0\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    $$css: true,\n  },\n  trigger: {\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kCS8Yb: \"x1r8uery\",\n    k7Eaqz: \"xeuugli\",\n    kmVPX3: \"x1717udv\",\n    kogj98: \"x1ghz6dp\",\n    kMzoRj: \"xc342km\",\n    ksu8eU: \"xng3xce\",\n    kWkggS: \"xjbqb8w\",\n    kMv6JI: \"xjb2p0i\",\n    kGuDYH: \"x1qlqyl8\",\n    kLWn49: \"x15bjb6t\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    kI3sdo: \"x1a2a7pz\",\n    kaIpWk: \"xh6dtrn\",\n    $$css: true,\n  },\n  triggerText: {\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true,\n  },\n  placeholder: {\n    kMwMTN: \"xv1l7n4\",\n    $$css: true,\n  },\n  triggerGhost: {\n    kzqmXN: \"x14atkfc\",\n    kMzoRj: \"xc342km\",\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1 x1s17dad x15ysqaf\",\n    k63SB2: \"x1e4wzip\",\n    k1ekBW: \"xrafxwg\",\n    k3aq6I: \"x3oybdh xk4oym4\",\n    $$css: true,\n  },\n  triggerGhostDisabled: {\n    kKwaWg: \"x18o3ruo\",\n    k3aq6I: \"x1c071of x1pdlv7q\",\n    $$css: true,\n  },\n  triggerIcon: {\n    kmuXW: \"x2lah0s\",\n    $$css: true,\n  },\n  triggerIconRotation: {\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"xuedmi6\",\n    kAMwcw: \"xlr8y92\",\n    k3nNDw: \"x1g0ag68\",\n    $$css: true,\n  },\n  triggerIconOpen: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true,\n  },\n  popover: {\n    k7Eaqz: \"xrzjruh\",\n    $$css: true,\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    kskxy: \"xpnbb6b\",\n    kVQacm: \"xysyzu8\",\n    kmVPX3: \"x1b2ylru\",\n    $$css: true,\n  },\n  sm: {\n    kZKoxP: \"x6k0iem\",\n    $$css: true,\n  },\n  md: {\n    kZKoxP: \"x1ueg155\",\n    $$css: true,\n  },\n  lg: {\n    kZKoxP: \"xssyfek\",\n    $$css: true,\n  },\n  disabled: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true,\n  },\n};\n\n// dist/utils/interactionOverlay.stylex.js\nexport const interactionOverlayStyles = {\n  backgroundColor: {\n    kWkggS: \"xjbqb8w x1anq1lc xoevpu5 xprvw0a\",\n    $$css: true,\n  },\n  backgroundImage: {\n    kKwaWg: \"x7uyq82 xmvprkv xetgvay\",\n    $$css: true,\n  },\n  backgroundImageOnNeutral: {\n    kKwaWg: \"x14bno8m xzmimnh x1otsd3y xo3fi6e\",\n    $$css: true,\n  },\n  pressedBackgroundColor: {\n    kWkggS: \"x1anq1lc\",\n    $$css: true,\n  },\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,OAAO;EACP,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF,GAGa,IAA2B;CACtC,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/forks/ComplexSelector/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `@lablup/ui-common/ComplexSelector`: ui-common's copy of Astryx's
+ * ComplexSelector, same names and types, plus `hasClear` / `onClear`
+ * (facebook/astryx#6362). Astryx's is excluded (exports.exclude.json).
+ */
+export { ComplexSelector } from './ComplexSelector';
+export type { ComplexSelectorHandle, ComplexSelectorProps, ComplexSelectorRenderState, ComplexSelectorSize, ComplexSelectorStatus, ComplexSelectorVariant, } from './ComplexSelector';

package/dist/forks/ComplexSelector/index.js

@@ -0,0 +1,2 @@
+import { ComplexSelector as e } from "./ComplexSelector.js";
+export { e as ComplexSelector };