= () => {
{...{ class: twMerge(
CLASSES.slot.group,
isInvalid() && CLASSES.flag.groupInvalid,
- local.fullWidth && CLASSES.flag.groupFullWidth,
+ props.fullWidth && CLASSES.flag.groupFullWidth,
) }}
data-slot="color-field-group"
data-disabled={isDisabled() ? "true" : "false"}
diff --git a/src/components/color-picker/ColorPicker.layout.tsx b/src/components/color-picker/ColorPicker.layout.tsx
index ac4b2c3e..d43d44c3 100644
--- a/src/components/color-picker/ColorPicker.layout.tsx
+++ b/src/components/color-picker/ColorPicker.layout.tsx
@@ -1,16 +1,7 @@
import "./ColorPicker.css";
-import {
- createContext,
- createEffect,
- createMemo,
- createSignal,
- splitProps,
- useContext,
- type Accessor,
- type Component,
- type JSX,
-} from "solid-js";
-import { twMerge } from "tailwind-merge";
+import type { JSX } from "@solidjs/web";
+import {createContext, createEffect, createMemo, createSignal, omit, useContext, type Accessor, type Component} from "solid-js";
+import { twMerge } from "../../lib/twMerge";
import ColorArea, { type ColorAreaProps, type ColorAreaValue } from "../color-area";
import ColorField, { type ColorFieldProps } from "../color-field";
import ColorSlider, { type ColorSliderProps, type ColorSliderType } from "../color-slider";
@@ -168,22 +159,22 @@ export type ColorPickerAreaProps = Omit
= () => {
const ctx = useContext(ColorPickerContext);
- const [local, others] = splitProps(props, ["class", "onChange", "dataTheme"]);
+ const others = omit(props, "class", "onChange", "dataTheme");
if (!ctx) {
return (
);
}
const handleChange = (next: ColorAreaValue) => {
ctx.setFromArea(next);
- local.onChange?.(next);
+ props.onChange?.(next);
};
return (
@@ -191,8 +182,8 @@ const ColorPickerArea: Layout = ()
{...others}
value={ctx.value().hsv}
state={ctx.isDisabled() ? "disabled" : undefined}
- {...{ class: twMerge(CLASSES.slot.area, local.class) }}
- dataTheme={local.dataTheme}
+ {...{ class: twMerge(CLASSES.slot.area, props.class) }}
+ dataTheme={props.dataTheme}
onChange={handleChange}
/>
);
@@ -204,25 +195,19 @@ export type ColorPickerSliderProps = Omit = () => {
const ctx = useContext(ColorPickerContext);
- const [local, others] = splitProps(props, [
- "class",
- "onChange",
- "type",
- "style",
- "dataTheme",
- ]);
+ const others = omit(props, "class", "onChange", "type", "style", "dataTheme");
- const sliderType = () => local.type ?? "hue";
+ const sliderType = () => props.type ?? "hue";
if (!ctx) {
return (
);
}
@@ -231,11 +216,11 @@ const ColorPickerSlider: Layout
const handleChange = (next: number) => {
ctx.setFromSlider(sliderType(), next);
- local.onChange?.(next);
+ props.onChange?.(next);
};
const sliderStyle = (): JSX.CSSProperties => {
- const userStyle = local.style as JSX.CSSProperties | undefined;
+ const userStyle = props.style as JSX.CSSProperties | undefined;
if (sliderType() !== "alpha") {
return { ...userStyle };
@@ -255,8 +240,8 @@ const ColorPickerSlider: Layout
type={sliderType()}
value={value()}
state={ctx.isDisabled() ? "disabled" : undefined}
- {...{ class: twMerge(CLASSES.slot.slider, local.class) }}
- dataTheme={local.dataTheme}
+ {...{ class: twMerge(CLASSES.slot.slider, props.class) }}
+ dataTheme={props.dataTheme}
style={sliderStyle()}
onChange={handleChange}
/>
@@ -269,30 +254,24 @@ export type ColorPickerFieldProps = Omit = () => {
const ctx = useContext(ColorPickerContext);
- const [local, others] = splitProps(props, [
- "class",
- "onChange",
- "fullWidth",
- "format",
- "dataTheme",
- ]);
+ const others = omit(props, "class", "onChange", "fullWidth", "format", "dataTheme");
if (!ctx) {
return (
);
}
const handleChange = (next: string) => {
ctx.setFromField(next);
- local.onChange?.(next);
+ props.onChange?.(next);
};
return (
@@ -300,10 +279,10 @@ const ColorPickerField: Layout =
{...others}
value={ctx.value().hex}
state={ctx.isDisabled() ? "disabled" : undefined}
- {...{ class: twMerge(CLASSES.slot.field, local.class) }}
- dataTheme={local.dataTheme}
- format={local.format}
- fullWidth={local.fullWidth ?? true}
+ {...{ class: twMerge(CLASSES.slot.field, props.class) }}
+ dataTheme={props.dataTheme}
+ format={props.format}
+ fullWidth={props.fullWidth ?? true}
onChange={handleChange}
/>
);
@@ -319,7 +298,8 @@ export type ColorPickerProps = Omit, "childre
};
const ColorPickerRoot: Layout = () => {
- const [local, others] = splitProps(props, [
+ const others = omit(
+ props,
"class",
"children",
"value",
@@ -327,18 +307,18 @@ const ColorPickerRoot: Layout = () =>
"onChange",
"state",
"dataTheme",
- ]);
+ );
const [internalState, setInternalState] = createSignal(
- toColorState(local.value ?? local.defaultValue) ?? fallbackState(),
+ toColorState(props.value ?? props.defaultValue) ?? fallbackState(),
);
- const isControlled = () => local.value !== undefined;
+ const isControlled = () => props.value !== undefined;
createEffect(() => {
if (!isControlled()) return;
- const next = toColorState(local.value);
+ const next = toColorState(props.value);
if (next) {
setInternalState(next);
}
@@ -349,14 +329,14 @@ const ColorPickerRoot: Layout = () =>
return internalState();
}
- return toColorState(local.value) ?? internalState();
+ return toColorState(props.value) ?? internalState();
});
const emitChange = (next: NormalizedColorState) => {
if (!isControlled()) {
setInternalState(next);
}
- local.onChange?.(formatOutputColor(next));
+ props.onChange?.(formatOutputColor(next));
};
const setFromArea = (nextValue: ColorAreaValue) => {
@@ -398,22 +378,22 @@ const ColorPickerRoot: Layout = () =>
const context = createMemo(() => ({
value: currentState,
- isDisabled: () => Boolean((local.state === "disabled")),
+ isDisabled: () => Boolean((props.state === "disabled")),
setFromArea,
setFromField,
setFromSlider,
}));
return (
-
+
- {local.children ?? (
+ {props.children ?? (
<>
@@ -421,7 +401,7 @@ const ColorPickerRoot: Layout = () =>
)}
-
+
);
};
diff --git a/src/components/color-slider/ColorSlider.layout.tsx b/src/components/color-slider/ColorSlider.layout.tsx
index 30d8da76..994dad55 100644
--- a/src/components/color-slider/ColorSlider.layout.tsx
+++ b/src/components/color-slider/ColorSlider.layout.tsx
@@ -1,6 +1,7 @@
import "./ColorSlider.css";
-import { createEffect, createMemo, createSignal, splitProps, type Component, type JSX } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import type { JSX } from "@solidjs/web";
+import {createEffect, createMemo, createSignal, omit, type Component} from "solid-js";
+import { twMerge } from "../../lib/twMerge";
import type { UIBaseProps, State } from "../vocabulary";
import { CLASSES } from "./ColorSlider.recipe";
import type { Layout } from "../../lib/layouts";
@@ -45,7 +46,8 @@ const fromPercent = (type: ColorSliderType, percent: number) => {
};
const ColorSlider: Layout = () => {
- const [local, others] = splitProps(props, [
+ const others = omit(
+ props,
"class",
"value",
"defaultValue",
@@ -55,25 +57,25 @@ const ColorSlider: Layout = () => {
"style",
"dataTheme",
"aria-label",
- ]);
+ );
- const sliderType = () => local.type ?? "hue";
- const isDisabled = () => Boolean((local.state === "disabled"));
+ const sliderType = () => props.type ?? "hue";
+ const isDisabled = () => Boolean((props.state === "disabled"));
const initialValue = () => {
const fallback = sliderType() === "alpha" ? 1 : 0;
- return normalizeValue(sliderType(), local.value ?? local.defaultValue ?? fallback);
+ return normalizeValue(sliderType(), props.value ?? props.defaultValue ?? fallback);
};
const [internalValue, setInternalValue] = createSignal(initialValue());
const [isDragging, setIsDragging] = createSignal(false);
let sliderRef: HTMLDivElement | undefined;
- const isControlled = () => local.value !== undefined;
+ const isControlled = () => props.value !== undefined;
createEffect(() => {
const nextType = sliderType();
- const nextValue = local.value;
+ const nextValue = props.value;
if (nextValue === undefined) {
if (!isControlled()) {
@@ -87,7 +89,7 @@ const ColorSlider: Layout = () => {
const currentValue = createMemo(() => {
if (isControlled()) {
- return normalizeValue(sliderType(), local.value ?? internalValue());
+ return normalizeValue(sliderType(), props.value ?? internalValue());
}
return normalizeValue(sliderType(), internalValue());
@@ -98,13 +100,16 @@ const ColorSlider: Layout = () => {
if (!isControlled()) {
setInternalValue(normalized);
}
- local.onChange?.(normalized);
+ props.onChange?.(normalized);
};
const updateFromPointer = (clientX: number) => {
- if (!sliderRef || isDisabled()) return;
+ // Bound to a const so the guard narrows: TypeScript will not carry a
+ // narrowing on a captured `let` across the closure boundary.
+ const node = sliderRef;
+ if (!node || isDisabled()) return;
- const rect = sliderRef.getBoundingClientRect();
+ const rect = node.getBoundingClientRect();
if (rect.width <= 0) return;
const percent = ((clientX - rect.left) / rect.width) * 100;
@@ -156,7 +161,7 @@ const ColorSlider: Layout = () => {
const percent = () => toPercent(sliderType(), currentValue());
const sliderStyle = (): JSX.CSSProperties => {
- const userStyle = local.style as JSX.CSSProperties | undefined;
+ const userStyle = props.style as JSX.CSSProperties | undefined;
if (sliderType() === "hue") {
return {
@@ -191,14 +196,14 @@ const ColorSlider: Layout = () => {
CLASSES.base,
sliderType() === "alpha" && CLASSES.flag.alpha,
isDragging() && CLASSES.flag.dragging,
- local.class,
+ props.class,
) }}
- data-theme={local.dataTheme}
+ data-theme={props.dataTheme}
data-slot="color-slider"
data-type={sliderType()}
data-disabled={isDisabled() ? "true" : "false"}
role="slider"
- tabIndex={isDisabled() ? -1 : 0}
+ tabindex={isDisabled() ? -1 : 0}
aria-label={local["aria-label"] ?? (sliderType() === "alpha" ? "Alpha" : "Hue")}
aria-valuemin={sliderType() === "alpha" ? 0 : 0}
aria-valuemax={sliderType() === "alpha" ? 1 : 360}
diff --git a/src/components/color-swatch-picker/ColorSwatchPicker.layout.tsx b/src/components/color-swatch-picker/ColorSwatchPicker.layout.tsx
index 7940af4d..efb75e30 100644
--- a/src/components/color-swatch-picker/ColorSwatchPicker.layout.tsx
+++ b/src/components/color-swatch-picker/ColorSwatchPicker.layout.tsx
@@ -1,14 +1,7 @@
import "./ColorSwatchPicker.css";
-import {
- createContext,
- createMemo,
- createSignal,
- splitProps,
- type Accessor,
- type Component,
- type JSX,
-} from "solid-js";
-import { twMerge } from "tailwind-merge";
+import type { JSX } from "@solidjs/web";
+import {createContext, createMemo, createSignal, omit, type Accessor, type Component} from "solid-js";
+import { twMerge } from "../../lib/twMerge";
import type { UIBaseProps, State } from "../vocabulary";
import { CLASSES } from "./ColorSwatchPicker.recipe";
import type { Layout } from "../../lib/layouts";
@@ -43,7 +36,8 @@ export type ColorSwatchPickerProps = Omit, "o
};
const ColorSwatchPicker: Layout = () => {
- const [local, others] = splitProps(props, [
+ const others = omit(
+ props,
"class",
"children",
"value",
@@ -53,14 +47,14 @@ const ColorSwatchPicker: Layout
"dataTheme",
"role",
"onKeyDown",
- ]);
+ );
- const [internalValue, setInternalValue] = createSignal(local.defaultValue);
+ const [internalValue, setInternalValue] = createSignal(props.defaultValue);
let rootRef: HTMLDivElement | undefined;
- const isControlled = () => local.value !== undefined;
- const currentValue = () => (isControlled() ? local.value : internalValue());
- const isDisabled = () => Boolean((local.state === "disabled"));
+ const isControlled = () => props.value !== undefined;
+ const currentValue = () => (isControlled() ? props.value : internalValue());
+ const isDisabled = () => Boolean((props.state === "disabled"));
const setValue = (next: string) => {
if (isDisabled()) return;
@@ -68,7 +62,7 @@ const ColorSwatchPicker: Layout
if (!isControlled()) {
setInternalValue(next);
}
- local.onChange?.(next);
+ props.onChange?.(next);
};
const getEnabledItems = () => {
@@ -96,7 +90,7 @@ const ColorSwatchPicker: Layout
};
const handleKeyDown: JSX.EventHandlerUnion = (event) => {
- invokeEventHandler(local.onKeyDown, event);
+ invokeEventHandler(props.onKeyDown, event);
if (event.defaultPrevented || isDisabled()) return;
const key = event.key;
@@ -145,21 +139,21 @@ const ColorSwatchPicker: Layout
}));
return (
-
+
- {local.children}
+ {props.children}
-
+
);
};
diff --git a/src/components/color-swatch/ColorSwatch.layout.tsx b/src/components/color-swatch/ColorSwatch.layout.tsx
index b31af44c..b50bcdf1 100644
--- a/src/components/color-swatch/ColorSwatch.layout.tsx
+++ b/src/components/color-swatch/ColorSwatch.layout.tsx
@@ -1,6 +1,7 @@
import "./ColorSwatch.css";
-import { splitProps, useContext, type Component, type JSX } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import type { JSX } from "@solidjs/web";
+import {omit, useContext, type Component} from "solid-js";
+import { twMerge } from "../../lib/twMerge";
import { ColorSwatchPickerContext } from "../color-swatch-picker/ColorSwatchPicker.generated";
import type { UIBaseProps, State } from "../vocabulary";
import { CLASSES } from "./ColorSwatch.recipe";
@@ -36,7 +37,8 @@ export type ColorSwatchProps = Omit,
const ColorSwatch: Layout = () => {
const picker = useContext(ColorSwatchPickerContext);
- const [local, others] = splitProps(props, [
+ const others = omit(
+ props,
"class",
"color",
"colorName",
@@ -53,46 +55,46 @@ const ColorSwatch: Layout = () => {
"dataTheme",
"aria-label",
"role",
- "tabIndex",
- ]);
+ "tabindex",
+ );
const isInsidePicker = () => Boolean(picker);
const hasPickerSelection = () => (picker ? picker.value() !== undefined : false);
- const shape = () => local.shape ?? "circle";
- const size = () => local.size ?? "md";
+ const shape = () => props.shape ?? "circle";
+ const size = () => props.size ?? "md";
const isDisabled = () => {
- const localDisabled = Boolean((local.state === "disabled")) || Boolean(local.disabled);
+ const localDisabled = Boolean((props.state === "disabled")) || Boolean(props.disabled);
const pickerDisabled = picker ? picker.isDisabled() : false;
return localDisabled || pickerDisabled;
};
const isSelected = () => {
- if (local.isSelected !== undefined) {
- return Boolean(local.isSelected);
+ if (props.isSelected !== undefined) {
+ return Boolean(props.isSelected);
}
if (!picker) {
return false;
}
- return picker.value() === local.color;
+ return picker.value() === props.color;
};
const emitSelection = () => {
- local.onSelect?.(local.color);
- local.onChange?.(local.color);
- picker?.select(local.color);
+ props.onSelect?.(props.color);
+ props.onChange?.(props.color);
+ picker?.select(props.color);
};
const handleClick: JSX.EventHandlerUnion = (event) => {
- invokeEventHandler(local.onClick, event);
+ invokeEventHandler(props.onClick, event);
if (event.defaultPrevented || isDisabled()) return;
emitSelection();
};
const handleKeyDown: JSX.EventHandlerUnion = (event) => {
- invokeEventHandler(local.onKeyDown, event);
+ invokeEventHandler(props.onKeyDown, event);
if (event.defaultPrevented || isDisabled()) return;
if (event.key === "Enter" || event.key === " ") {
@@ -102,17 +104,17 @@ const ColorSwatch: Layout = () => {
};
const style = (): JSX.CSSProperties => {
- const userStyle = local.style as JSX.CSSProperties | undefined;
+ const userStyle = props.style as JSX.CSSProperties | undefined;
return {
- "--color-swatch-current": local.color,
+ "--color-swatch-current": props.color,
...userStyle,
};
};
- const tabIndex = () => {
- if (local.tabIndex !== undefined) {
- return local.tabIndex;
+ const tabindex = () => {
+ if (props.tabindex !== undefined) {
+ return props.tabindex;
}
if (!isInsidePicker()) {
@@ -134,18 +136,18 @@ const ColorSwatch: Layout = () => {
CLASSES.base,
CLASSES.shape[shape()],
CLASSES.size[size()],
- local.class,
+ props.class,
)}
- data-theme={local.dataTheme}
+ data-theme={props.dataTheme}
data-slot="color-swatch"
- data-color-value={local.color}
+ data-color-value={props.color}
data-picker-item={isInsidePicker() ? "true" : "false"}
data-selected={isSelected() ? "true" : "false"}
data-disabled={isDisabled() ? "true" : "false"}
disabled={isDisabled()}
- role={local.role ?? (isInsidePicker() ? "radio" : "option")}
- tabIndex={tabIndex()}
- aria-label={local["aria-label"] ?? local.colorName ?? `Color ${local.color}`}
+ role={props.role ?? (isInsidePicker() ? "radio" : "option")}
+ tabindex={tabindex()}
+ aria-label={local["aria-label"] ?? props.colorName ?? `Color ${props.color}`}
aria-selected={isSelected() ? "true" : "false"}
aria-checked={isInsidePicker() ? (isSelected() ? "true" : "false") : undefined}
aria-disabled={isDisabled() ? "true" : "false"}
diff --git a/src/components/color-wheel-flower/ColorWheelFlower.layout.tsx b/src/components/color-wheel-flower/ColorWheelFlower.layout.tsx
index a002e2bc..b7026822 100644
--- a/src/components/color-wheel-flower/ColorWheelFlower.layout.tsx
+++ b/src/components/color-wheel-flower/ColorWheelFlower.layout.tsx
@@ -1,15 +1,8 @@
import "./ColorWheelFlower.css";
-import {
- type JSX,
- For,
- createEffect,
- createMemo,
- createSignal,
- onCleanup,
- splitProps,
-} from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {For, createEffect, createMemo, createSignal, onCleanup, omit} from "solid-js";
import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../lib/twMerge";
import ColorSwatch from "../color-swatch";
import ColorSwatchPicker from "../color-swatch-picker";
import { useColorPickerContext } from "./colorWheelFlowerContext";
@@ -242,7 +235,7 @@ const MAX_WAVE_DISTANCE = MAX_RADIUS * 2;
const MAX_WAVE_DELAY = 0.12;
const ColorWheelFlower: Layout = () => {
- const [local] = splitProps(props, ["class", "mode", "palette"]);
+
const context = useColorPickerContext();
const [selectedIndex, setSelectedIndex] = createSignal(null);
@@ -274,9 +267,9 @@ const ColorWheelFlower: Layout =
onCleanup(() => observer.disconnect());
}
- const mode = (): ColorWheelFlowerMode => local.mode ?? currentTheme();
+ const mode = (): ColorWheelFlowerMode => props.mode ?? currentTheme();
const colors = createMemo(() =>
- buildColors(resolveColorWheelFlowerPalette(mode(), local.palette)),
+ buildColors(resolveColorWheelFlowerPalette(mode(), props.palette)),
);
const rainbowGradient = () => {
@@ -413,9 +406,11 @@ const ColorWheelFlower: Layout =
});
const handlePointerMove = (event: MouseEvent) => {
- if (!containerRef) return;
+ // Bound to a const so the guard narrows across the closure boundary.
+ const node = containerRef;
+ if (!node) return;
- const rect = containerRef.getBoundingClientRect();
+ const rect = node.getBoundingClientRect();
const x = event.clientX - rect.left - rect.width / 2;
const y = event.clientY - rect.top - rect.height / 2;
@@ -473,13 +468,15 @@ const ColorWheelFlower: Layout =
});
createEffect(() => {
- if (!outerRingRef) return;
+ // Bound to a const so the guard narrows across the closure boundary.
+ const node = outerRingRef;
+ if (!node) return;
const target = outerRingTarget();
outerRingControl?.stop();
outerRingControl = runMotion(
- outerRingRef,
- readMotionState(outerRingRef),
+ node,
+ readMotionState(node),
target,
ringTransition,
);
@@ -506,7 +503,7 @@ const ColorWheelFlower: Layout =
class: twMerge(
CLASSES.base,
clsx({ [CLASSES.flag.disabled]: context.disabled() }),
- local.class,
+ props.class,
),
}}
onMouseMove={handlePointerMove}
diff --git a/src/components/combo-box/ComboBox.layout.tsx b/src/components/combo-box/ComboBox.layout.tsx
index a469ae1e..5203a85f 100644
--- a/src/components/combo-box/ComboBox.layout.tsx
+++ b/src/components/combo-box/ComboBox.layout.tsx
@@ -1,22 +1,7 @@
import "./ComboBox.css";
-import {
- For,
- Show,
- createContext,
- createEffect,
- createMemo,
- createSignal,
- createUniqueId,
- onCleanup,
- onMount,
- splitProps,
- useContext,
- type Accessor,
- type Component,
- type JSX,
- type ParentComponent,
-} from "solid-js";
-import { twMerge } from "tailwind-merge";
+import type { JSX } from "@solidjs/web";
+import {For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onSettled, omit, useContext, type Accessor, type Component, type ParentComponent} from "solid-js";
+import { twMerge } from "../../lib/twMerge";
import type { UIBaseProps, State, Issue } from "../vocabulary";
import { CLASSES } from "./ComboBox.recipe";
@@ -216,7 +201,8 @@ export type ComboBoxListProps = Omit<
};
const ComboBoxRoot: Layout = () => {
- const [local, others] = splitProps(props, [
+ const others = omit(
+ props,
"children",
"startIcon",
"endIcon",
@@ -243,54 +229,53 @@ const ComboBoxRoot: Layout = () => {
"placeholder",
"name",
"required",
-
"defaultFilter",
"itemKey",
"itemTextValue",
"itemDisabled",
"onFocusOut",
"ref",
- ]);
+ );
const listBoxId = `${createUniqueId()}-listbox`;
const [internalSelectedKey, setInternalSelectedKey] = createSignal(
- normalizeKey(local.defaultSelectedKey),
+ normalizeKey(props.defaultSelectedKey),
);
- const [internalInputValue, setInternalInputValue] = createSignal(local.defaultInputValue ?? "");
- const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+ const [internalInputValue, setInternalInputValue] = createSignal(props.defaultInputValue ?? "");
+ const [internalOpen, setInternalOpen] = createSignal(Boolean(props.defaultOpen));
const [activeKey, setActiveKeySignal] = createSignal(null);
let rootRef: HTMLDivElement | undefined;
let inputRef: HTMLInputElement | undefined;
- const variant = () => local.variant ?? "primary";
- const menuTrigger = () => local.menuTrigger ?? "focus";
- const fullWidth = () => Boolean(local.fullWidth);
- const isDisabled = () => Boolean((local.state === "disabled")) || Boolean(local.disabled);
- const isInvalid = () => Boolean((resolveState(local.state, local.issues) === "invalid"));
- const isRequired = () => Boolean(local.required) || Boolean(local.required);
- const isOpen = () => (local.open !== undefined ? Boolean(local.open) : internalOpen());
+ const variant = () => props.variant ?? "primary";
+ const menuTrigger = () => props.menuTrigger ?? "focus";
+ const fullWidth = () => Boolean(props.fullWidth);
+ const isDisabled = () => Boolean((props.state === "disabled")) || Boolean(props.disabled);
+ const isInvalid = () => Boolean((resolveState(props.state, props.issues) === "invalid"));
+ const isRequired = () => Boolean(props.required) || Boolean(props.required);
+ const isOpen = () => (props.open !== undefined ? Boolean(props.open) : internalOpen());
const selectedKey = createMemo(() =>
- local.selectedKey !== undefined ? normalizeKey(local.selectedKey) : internalSelectedKey(),
+ props.selectedKey !== undefined ? normalizeKey(props.selectedKey) : internalSelectedKey(),
);
const inputValue = createMemo(() =>
- local.inputValue !== undefined ? local.inputValue : internalInputValue(),
+ props.inputValue !== undefined ? props.inputValue : internalInputValue(),
);
const normalizedItems = createMemo[]>(() =>
- (local.items ?? []).map((item, index) => {
+ (props.items ?? []).map((item, index) => {
const baseKey =
- local.itemKey != null
- ? String(local.itemKey(item, index))
+ props.itemKey != null
+ ? String(props.itemKey(item, index))
: extractItemKey(item, index);
const textValue =
- local.itemTextValue != null
- ? local.itemTextValue(item, index)
+ props.itemTextValue != null
+ ? props.itemTextValue(item, index)
: extractItemText(item, baseKey);
const disabled =
- local.itemDisabled != null ? Boolean(local.itemDisabled(item, index)) : extractItemDisabled(item);
+ props.itemDisabled != null ? Boolean(props.itemDisabled(item, index)) : extractItemDisabled(item);
return {
key: baseKey,
@@ -309,7 +294,7 @@ const ComboBoxRoot: Layout = () => {
const filteredItems = createMemo(() => {
const query = inputValue();
- const filter = local.defaultFilter ?? defaultFilter;
+ const filter = props.defaultFilter ?? defaultFilter;
return normalizedItems().filter((item) => filter(item.textValue, query));
});
@@ -317,29 +302,29 @@ const ComboBoxRoot: Layout = () => {
const getEnabledItems = () => filteredItems().filter((item) => !item.disabled);
const setSelectedKey = (nextKey: string | null) => {
- if (local.selectedKey === undefined) {
+ if (props.selectedKey === undefined) {
setInternalSelectedKey(nextKey);
}
- local.onSelectionChange?.(nextKey);
+ props.onSelectionChange?.(nextKey);
};
const setInputValue = (nextValue: string) => {
- if (local.inputValue === undefined) {
+ if (props.inputValue === undefined) {
setInternalInputValue(nextValue);
}
- local.onInputChange?.(nextValue);
+ props.onInputChange?.(nextValue);
};
const setOpen = (next: boolean, options?: { focusInput?: boolean }) => {
if (next && isDisabled()) return;
- if (local.open === undefined) {
+ if (props.open === undefined) {
setInternalOpen(next);
}
- local.onOpenChange?.(next);
+ props.onOpenChange?.(next);
if (!next && options?.focusInput) {
queueMicrotask(() => {
@@ -397,14 +382,14 @@ const ComboBoxRoot: Layout = () => {
setOpen(false);
setActiveKeySignal(null);
- if (!local.allowsCustomValue) {
+ if (!props.allowsCustomValue) {
const selected = selectedItem();
setInputValue(selected?.textValue ?? "");
}
};
const handleFocusOut: JSX.EventHandlerUnion = (event) => {
- invokeEventHandler(local.onFocusOut, event);
+ invokeEventHandler(props.onFocusOut, event);
if (event.defaultPrevented) return;
@@ -418,7 +403,7 @@ const ComboBoxRoot: Layout = () => {
const getOptionId = (key: string) => `${listBoxId}-${toOptionKey(key, 0)}`;
createEffect(() => {
- if (local.inputValue !== undefined) return;
+ if (props.inputValue !== undefined) return;
const selected = selectedItem();
if (!selected) return;
@@ -446,7 +431,7 @@ const ComboBoxRoot: Layout = () => {
setActiveKeySignal((selected ?? enabledItems[0]).key);
});
- onMount(() => {
+ onSettled(() => {
const handlePointerDown = (event: PointerEvent) => {
if (!rootRef) return;
if (rootRef.contains(event.target as Node)) return;
@@ -464,13 +449,13 @@ const ComboBoxRoot: Layout = () => {
const currentKey = selectedKey();
if (currentKey) return currentKey;
- if (local.allowsCustomValue) return inputValue();
+ if (props.allowsCustomValue) return inputValue();
return "";
});
return (
- = () => {
{...others}
ref={(node) => {
rootRef = node;
- if (typeof local.ref === "function") {
- local.ref(node);
+ if (typeof props.ref === "function") {
+ props.ref(node);
}
}}
{...{ class: twMerge(
CLASSES.Root.base,
CLASSES.Root.variant[variant()],
fullWidth() && CLASSES.Root.flag.fullWidth,
- local.class,
+ props.class,
) }}
data-slot="combobox"
data-open={isOpen() ? "true" : "false"}
@@ -519,27 +504,27 @@ const ComboBoxRoot: Layout = () => {
data-disabled={isDisabled() ? "true" : undefined}
aria-invalid={isInvalid() ? "true" : undefined}
aria-disabled={isDisabled() ? "true" : undefined}
- data-theme={local.dataTheme}
- style={local.style}
+ data-theme={props.dataTheme}
+ style={props.style}
onFocusOut={handleFocusOut}
>
-
-
+
+
- {local.children ?? (
+ {props.children ?? (
<>
-
+
- {local.startIcon}
+ {props.startIcon}
-
-
+
+
@@ -547,13 +532,13 @@ const ComboBoxRoot: Layout = () => {
)}