@proyecto-viviana/solid-stately 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calendar/createDateFieldState.d.ts +56 -18
- package/dist/calendar/createRangeCalendarState.d.ts +10 -0
- package/dist/calendar/createTimeFieldState.d.ts +38 -67
- package/dist/calendar/intl/index.d.ts +10 -0
- package/dist/collections/ListCollection.d.ts +8 -0
- package/dist/collections/createListState.d.ts +12 -0
- package/dist/collections/getChildNodes.d.ts +8 -0
- package/dist/collections/index.d.ts +2 -2
- package/dist/collections/types.d.ts +9 -0
- package/dist/color/intl/index.d.ts +14 -0
- package/dist/dnd/createDroppableCollectionState.d.ts +17 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3444 -1304
- package/dist/index.js.map +1 -1
- package/dist/selection/SelectionManager.d.ts +9 -0
- package/package.json +1 -1
- package/src/calendar/createCalendarState.ts +26 -4
- package/src/calendar/createDateFieldState.ts +614 -459
- package/src/calendar/createRangeCalendarState.ts +212 -11
- package/src/calendar/createTimeFieldState.ts +179 -467
- package/src/calendar/intl/index.ts +364 -0
- package/src/collections/ListCollection.ts +31 -0
- package/src/collections/createListState.ts +92 -1
- package/src/collections/getChildNodes.ts +31 -0
- package/src/collections/index.ts +3 -0
- package/src/collections/types.ts +10 -0
- package/src/color/Color.ts +104 -133
- package/src/color/intl/index.ts +1409 -0
- package/src/combobox/createComboBoxState.ts +30 -13
- package/src/dnd/createDroppableCollectionState.ts +125 -6
- package/src/index.ts +3 -0
- package/src/selection/SelectionManager.ts +15 -0
- package/src/steplist/createStepListState.ts +27 -4
|
@@ -2,20 +2,27 @@
|
|
|
2
2
|
* DateFieldState for Solid-Stately
|
|
3
3
|
*
|
|
4
4
|
* Provides state management for date field components with segment-based editing.
|
|
5
|
-
*
|
|
5
|
+
* Faithful port of @react-stately/datepicker useDateFieldState.
|
|
6
6
|
*
|
|
7
7
|
* Editing is modeled with an {@link IncompleteDate} display value so that invalid
|
|
8
8
|
* intermediate dates (e.g. February 31st, produced by editing the day before the
|
|
9
9
|
* month) are held as-typed while the field is focused and only constrained on blur
|
|
10
10
|
* via `confirmPlaceholder`, matching upstream behavior. Out-of-range values are
|
|
11
11
|
* never snapped to `minValue`/`maxValue`; they are kept and reported as invalid.
|
|
12
|
+
*
|
|
13
|
+
* The upstream "derived state during render" resync (which re-mints the display
|
|
14
|
+
* value when the committed value / calendar / hour cycle changes) is ported to a
|
|
15
|
+
* Solid `createComputed` so it runs synchronously before render effects — mirroring
|
|
16
|
+
* React's render-phase setState rather than a post-render `createEffect`.
|
|
12
17
|
*/
|
|
13
18
|
import { type Accessor } from "solid-js";
|
|
14
|
-
import { type CalendarDateTime, type DateValue } from "@internationalized/date";
|
|
19
|
+
import { type Calendar, type CalendarDateTime, type CalendarIdentifier, type DateValue, DateFormatter, Time } from "@internationalized/date";
|
|
15
20
|
import { type MaybeAccessor } from "../utils";
|
|
16
21
|
import type { ValidationState } from "./createCalendarState";
|
|
17
22
|
import { type ValidationBehavior, type ValidationFunction, type ValidationResult } from "../form";
|
|
18
23
|
export type DateSegmentType = "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod" | "era" | "timeZoneName" | "literal";
|
|
24
|
+
type Granularity = "year" | "month" | "day" | "hour" | "minute" | "second";
|
|
25
|
+
type FieldGranularity = "day" | "hour" | "minute" | "second";
|
|
19
26
|
export interface DateSegment {
|
|
20
27
|
/** The type of segment. */
|
|
21
28
|
type: DateSegmentType;
|
|
@@ -56,7 +63,9 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
|
|
|
56
63
|
/** The locale to use for formatting. */
|
|
57
64
|
locale?: string;
|
|
58
65
|
/** The granularity of the date/time (day, hour, minute, second). */
|
|
59
|
-
granularity?:
|
|
66
|
+
granularity?: FieldGranularity;
|
|
67
|
+
/** The maximum granularity (largest editable unit). Defaults to `year`. */
|
|
68
|
+
maxGranularity?: "year" | "month" | "day" | "hour" | "minute";
|
|
60
69
|
/** Whether to show the hour in 12 or 24 hour format. */
|
|
61
70
|
hourCycle?: 12 | 24;
|
|
62
71
|
/** Whether to hide the time zone. */
|
|
@@ -77,28 +86,42 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
|
|
|
77
86
|
errorMessage?: string;
|
|
78
87
|
/** Whether dates outside the min/max range are allowed. */
|
|
79
88
|
allowsNonContiguousRanges?: boolean;
|
|
80
|
-
/**
|
|
81
|
-
createCalendar?: (name:
|
|
89
|
+
/** Resolves a calendar system by its Unicode identifier. */
|
|
90
|
+
createCalendar?: (name: CalendarIdentifier) => Calendar;
|
|
82
91
|
/** Whether a date is unavailable. */
|
|
83
92
|
isDateUnavailable?: (date: DateValue) => boolean;
|
|
84
93
|
}
|
|
85
94
|
export interface DateFieldState<T extends DateValue = DateValue> {
|
|
86
|
-
/** The current value. */
|
|
87
|
-
value: Accessor<
|
|
88
|
-
/** The
|
|
89
|
-
dateValue: Accessor<
|
|
95
|
+
/** The current value, converted to the display calendar. */
|
|
96
|
+
value: Accessor<DateValue | null>;
|
|
97
|
+
/** The current value as a native JavaScript Date (may be partial during editing). */
|
|
98
|
+
dateValue: Accessor<Date>;
|
|
99
|
+
/** The display calendar system. */
|
|
100
|
+
readonly calendar: Calendar;
|
|
90
101
|
/** Sets the date value. */
|
|
91
102
|
setValue: (value: T | null) => void;
|
|
92
103
|
/** The segments that make up the date. */
|
|
93
104
|
segments: Accessor<DateSegment[]>;
|
|
94
|
-
/** The
|
|
105
|
+
/** The formatter used to render the field. */
|
|
106
|
+
readonly dateFormatter: DateFormatter;
|
|
107
|
+
/** Formats the current value with the given field options. */
|
|
95
108
|
formatValue: (fieldOptions?: Intl.DateTimeFormatOptions) => string;
|
|
109
|
+
/** Returns a formatter with the field's resolved options merged with the given ones. */
|
|
110
|
+
getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter;
|
|
96
111
|
/** Sets a segment value. */
|
|
97
112
|
setSegment: (type: DateSegmentType, value: number) => void;
|
|
98
|
-
/** Increments a segment. */
|
|
99
|
-
|
|
100
|
-
/** Decrements a segment. */
|
|
101
|
-
|
|
113
|
+
/** Increments a segment by one. */
|
|
114
|
+
increment: (type: DateSegmentType) => void;
|
|
115
|
+
/** Decrements a segment by one. */
|
|
116
|
+
decrement: (type: DateSegmentType) => void;
|
|
117
|
+
/** Increments a segment by a larger page step. */
|
|
118
|
+
incrementPage: (type: DateSegmentType) => void;
|
|
119
|
+
/** Decrements a segment by a larger page step. */
|
|
120
|
+
decrementPage: (type: DateSegmentType) => void;
|
|
121
|
+
/** Sets a segment to its maximum value. */
|
|
122
|
+
incrementToMax: (type: DateSegmentType) => void;
|
|
123
|
+
/** Sets a segment to its minimum value. */
|
|
124
|
+
decrementToMin: (type: DateSegmentType) => void;
|
|
102
125
|
/** Clears a segment. */
|
|
103
126
|
clearSegment: (type: DateSegmentType) => void;
|
|
104
127
|
/** Confirms the value (after typing). */
|
|
@@ -112,7 +135,9 @@ export interface DateFieldState<T extends DateValue = DateValue> {
|
|
|
112
135
|
/** The validation state. */
|
|
113
136
|
validationState: Accessor<ValidationState | undefined>;
|
|
114
137
|
/** The granularity. */
|
|
115
|
-
granularity:
|
|
138
|
+
readonly granularity: FieldGranularity;
|
|
139
|
+
/** The maximum granularity. */
|
|
140
|
+
readonly maxGranularity: "year" | "month" | "day" | "hour" | "minute";
|
|
116
141
|
/** Whether the value is invalid. */
|
|
117
142
|
isInvalid: Accessor<boolean>;
|
|
118
143
|
/** Realtime validation results, including native and custom constraints. */
|
|
@@ -126,14 +151,27 @@ export interface DateFieldState<T extends DateValue = DateValue> {
|
|
|
126
151
|
/** Commits realtime validation to displayed validation. */
|
|
127
152
|
commitValidation: () => void;
|
|
128
153
|
/** The locale. */
|
|
129
|
-
locale: string;
|
|
154
|
+
readonly locale: string;
|
|
130
155
|
/** The time zone. */
|
|
131
|
-
timeZone: string;
|
|
156
|
+
readonly timeZone: string;
|
|
132
157
|
/** The default value. */
|
|
133
|
-
defaultValue:
|
|
158
|
+
defaultValue: DateValue | null;
|
|
134
159
|
}
|
|
135
160
|
/**
|
|
136
161
|
* Provides state management for a date field component.
|
|
137
162
|
*/
|
|
138
163
|
export declare function createDateFieldState<T extends DateValue = DateValue>(props?: DateFieldStateProps<T>): DateFieldState<T>;
|
|
164
|
+
interface FormatterOptions {
|
|
165
|
+
timeZone?: string;
|
|
166
|
+
hideTimeZone?: boolean;
|
|
167
|
+
granularity?: Granularity;
|
|
168
|
+
maxGranularity?: "year" | "month" | "day" | "hour" | "minute";
|
|
169
|
+
hourCycle?: 12 | 24;
|
|
170
|
+
showEra?: boolean;
|
|
171
|
+
shouldForceLeadingZeros?: boolean;
|
|
172
|
+
}
|
|
173
|
+
export declare function getFormatOptions(fieldOptions: Intl.DateTimeFormatOptions | undefined, options: FormatterOptions): Intl.DateTimeFormatOptions;
|
|
174
|
+
/** The placeholder time, used by time-only fields. */
|
|
175
|
+
export declare function getPlaceholderTime(placeholderValue?: DateValue): Time | DateValue;
|
|
176
|
+
export declare function getValidationResult(value: DateValue | null, minValue: DateValue | undefined, maxValue: DateValue | undefined, isDateUnavailable: ((date: DateValue) => boolean) | undefined, options: FormatterOptions): ValidationResult;
|
|
139
177
|
export type { CalendarDateTime };
|
|
@@ -164,6 +164,16 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
|
|
|
164
164
|
isDragging: Accessor<boolean>;
|
|
165
165
|
/** Sets whether the user is dragging to select. */
|
|
166
166
|
setDragging: (dragging: boolean) => void;
|
|
167
|
+
/**
|
|
168
|
+
* Formats the selected range as a `{ start, end }` pair of localized strings,
|
|
169
|
+
* or `null` when the range is incomplete. Mirrors upstream
|
|
170
|
+
* `DateRangePickerState.formatValue` — the port collapses that state into the
|
|
171
|
+
* range calendar state, so the range picker reads its SR description from here.
|
|
172
|
+
*/
|
|
173
|
+
formatValue: (locale: string, fieldOptions: Intl.DateTimeFormatOptions) => {
|
|
174
|
+
start: string;
|
|
175
|
+
end: string;
|
|
176
|
+
} | null;
|
|
167
177
|
}
|
|
168
178
|
/**
|
|
169
179
|
* Provides state management for a range calendar component.
|
|
@@ -1,34 +1,37 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* TimeFieldState for Solid-Stately
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* Faithful port of `@react-stately/datepicker` `useTimeFieldState`, which is a
|
|
5
|
+
* thin wrapper over `useDateFieldState`: a time-only `Time` value is converted
|
|
6
|
+
* to a `CalendarDateTime` (anchored on today's date, or a zoned date when the
|
|
7
|
+
* value/default carries a time zone) and fed to the date-field state machine
|
|
8
|
+
* with `maxGranularity: 'hour'` so the date segments drop away and only
|
|
9
|
+
* hour/minute[/second]/dayPeriod remain. The returned state IS the
|
|
10
|
+
* `DateFieldState`, plus a `timeValue` accessor holding the value back in the
|
|
11
|
+
* `Time` domain. This means TimeField reuses the certified DateField segment
|
|
12
|
+
* stack (`createDateSegment`, `DateInput`, `DateSegment`) exactly as RAC's
|
|
13
|
+
* TimeField reuses `DateInput`/`DateSegment` — there is no parallel time
|
|
14
|
+
* primitive.
|
|
15
|
+
*
|
|
16
|
+
* The `timeValue` is layered on with a Proxy rather than an object spread
|
|
17
|
+
* because `DateFieldState`'s `calendar`/`dateFormatter`/`granularity`/
|
|
18
|
+
* `maxGranularity`/`locale`/`timeZone` members are getters — spreading would
|
|
19
|
+
* invoke and freeze them, breaking reactivity.
|
|
6
20
|
*/
|
|
7
21
|
import { type Accessor } from "solid-js";
|
|
8
|
-
import {
|
|
22
|
+
import { Time, type CalendarDateTime, type ZonedDateTime, type DateValue } from "@internationalized/date";
|
|
9
23
|
import { type MaybeAccessor } from "../utils";
|
|
10
24
|
import type { ValidationState } from "./createCalendarState";
|
|
11
|
-
import {
|
|
25
|
+
import type { ValidationBehavior, ValidationFunction } from "../form";
|
|
26
|
+
import { type DateFieldState, type DateSegment as DateSegmentInternal, type DateSegmentType as DateSegmentTypeInternal } from "./createDateFieldState";
|
|
12
27
|
export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
value?: number;
|
|
21
|
-
/** The minimum value for the segment. */
|
|
22
|
-
minValue?: number;
|
|
23
|
-
/** The maximum value for the segment. */
|
|
24
|
-
maxValue?: number;
|
|
25
|
-
/** Whether this segment is editable. */
|
|
26
|
-
isEditable: boolean;
|
|
27
|
-
/** Whether this segment is a placeholder. */
|
|
28
|
-
isPlaceholder: boolean;
|
|
29
|
-
/** A placeholder string for the segment. */
|
|
30
|
-
placeholder: string;
|
|
31
|
-
}
|
|
28
|
+
/**
|
|
29
|
+
* TimeField reuses the DateField segment vocabulary (RAC TimeField reuses
|
|
30
|
+
* `DateInput`/`DateSegment`); the legacy `TimeSegment`/`TimeSegmentType` names
|
|
31
|
+
* are kept as aliases of the shared date-segment types.
|
|
32
|
+
*/
|
|
33
|
+
export type TimeSegmentType = DateSegmentTypeInternal;
|
|
34
|
+
export type TimeSegment = DateSegmentInternal;
|
|
32
35
|
export interface TimeFieldStateProps<T extends TimeValue = Time> {
|
|
33
36
|
/** The current value (controlled). */
|
|
34
37
|
value?: MaybeAccessor<T | null>;
|
|
@@ -54,6 +57,8 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
|
|
|
54
57
|
granularity?: "hour" | "minute" | "second";
|
|
55
58
|
/** Whether to show 12 or 24 hour format. */
|
|
56
59
|
hourCycle?: 12 | 24;
|
|
60
|
+
/** Whether to hide the time zone. */
|
|
61
|
+
hideTimeZone?: boolean;
|
|
57
62
|
/** Whether to force leading zeroes in the hour segment. */
|
|
58
63
|
shouldForceLeadingZeros?: boolean;
|
|
59
64
|
/** Validation state. */
|
|
@@ -61,7 +66,7 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
|
|
|
61
66
|
/** Validation behavior mode. */
|
|
62
67
|
validationBehavior?: ValidationBehavior;
|
|
63
68
|
/** Custom validation function. */
|
|
64
|
-
validate?: ValidationFunction<T>;
|
|
69
|
+
validate?: ValidationFunction<T | null>;
|
|
65
70
|
/** Description text. */
|
|
66
71
|
description?: string;
|
|
67
72
|
/** Error message. */
|
|
@@ -71,49 +76,15 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
|
|
|
71
76
|
/** Whether dates outside the min/max range are unavailable. Added for API consistency. */
|
|
72
77
|
isDateUnavailable?: (date: DateValue) => boolean;
|
|
73
78
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
/** The
|
|
82
|
-
|
|
83
|
-
/** Sets a segment value. */
|
|
84
|
-
setSegment: (type: TimeSegmentType, value: number) => void;
|
|
85
|
-
/** Increments a segment. */
|
|
86
|
-
incrementSegment: (type: TimeSegmentType) => void;
|
|
87
|
-
/** Decrements a segment. */
|
|
88
|
-
decrementSegment: (type: TimeSegmentType) => void;
|
|
89
|
-
/** Clears a segment. */
|
|
90
|
-
clearSegment: (type: TimeSegmentType) => void;
|
|
91
|
-
/** Whether the field is disabled. */
|
|
92
|
-
isDisabled: Accessor<boolean>;
|
|
93
|
-
/** Whether the field is read-only. */
|
|
94
|
-
isReadOnly: Accessor<boolean>;
|
|
95
|
-
/** Whether the field is required. */
|
|
96
|
-
isRequired: Accessor<boolean>;
|
|
97
|
-
/** The validation state. */
|
|
98
|
-
validationState: Accessor<ValidationState | undefined>;
|
|
99
|
-
/** The granularity. */
|
|
100
|
-
granularity: "hour" | "minute" | "second";
|
|
101
|
-
/** Whether the value is invalid. */
|
|
102
|
-
isInvalid: Accessor<boolean>;
|
|
103
|
-
/** Realtime validation results, including native and custom constraints. */
|
|
104
|
-
realtimeValidation: Accessor<ValidationResult>;
|
|
105
|
-
/** Currently displayed validation results. */
|
|
106
|
-
displayValidation: Accessor<ValidationResult>;
|
|
107
|
-
/** Updates the current validation result. */
|
|
108
|
-
updateValidation: (result: ValidationResult) => void;
|
|
109
|
-
/** Resets displayed validation to valid. */
|
|
110
|
-
resetValidation: () => void;
|
|
111
|
-
/** Commits realtime validation to displayed validation. */
|
|
112
|
-
commitValidation: () => void;
|
|
113
|
-
/** The locale. */
|
|
114
|
-
locale: string;
|
|
115
|
-
/** The hour cycle. */
|
|
116
|
-
hourCycle: 12 | 24;
|
|
79
|
+
/**
|
|
80
|
+
* The TimeField state IS the certified DateField state (segments, validation,
|
|
81
|
+
* increment/decrement, formatter, etc.) with a `timeValue` accessor added. The
|
|
82
|
+
* `T` generic is retained for API back-compat with existing `TimeFieldState<T>`
|
|
83
|
+
* consumers.
|
|
84
|
+
*/
|
|
85
|
+
export interface TimeFieldState<T extends TimeValue = Time> extends DateFieldState {
|
|
86
|
+
/** The current value in the `Time`/`CalendarDateTime`/`ZonedDateTime` domain. */
|
|
87
|
+
timeValue: Accessor<TimeValue | null>;
|
|
117
88
|
}
|
|
118
89
|
/**
|
|
119
90
|
* Provides state management for a time field component.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export type DateFieldErrorKey = "rangeUnderflow" | "rangeOverflow" | "rangeReversed" | "unavailableDate";
|
|
2
|
+
type DateFieldErrorArgs = {
|
|
3
|
+
minValue?: string;
|
|
4
|
+
maxValue?: string;
|
|
5
|
+
};
|
|
6
|
+
/** Mirrors LocalizedStringFormatter.format for the datepicker validation messages. */
|
|
7
|
+
export declare function formatDateFieldError(locale: string, key: DateFieldErrorKey, args?: DateFieldErrorArgs): string;
|
|
8
|
+
/** Mirrors @react-stately/datepicker getPlaceholder. */
|
|
9
|
+
export declare function getPlaceholder(field: string, value: string, locale: string): string;
|
|
10
|
+
export {};
|
|
@@ -21,6 +21,14 @@ export declare class ListCollection<T = unknown> implements Collection<T> {
|
|
|
21
21
|
getLastKey(): Key | null;
|
|
22
22
|
getChildren(key: Key): Iterable<CollectionNode<T>>;
|
|
23
23
|
getTextValue(key: Key): string;
|
|
24
|
+
/**
|
|
25
|
+
* Filter the collection, returning a new `ListCollection` containing only the
|
|
26
|
+
* item nodes for which `filterFn(node.textValue, node)` returns true. Sections
|
|
27
|
+
* whose children are all filtered out are dropped; surviving sections are
|
|
28
|
+
* rebuilt with their filtered children. Node order is preserved. Mirrors the
|
|
29
|
+
* behaviour of @react-aria/collections `BaseCollection.filter`.
|
|
30
|
+
*/
|
|
31
|
+
filter(filterFn: (nodeValue: string, node: CollectionNode<T>) => boolean): ListCollection<T>;
|
|
24
32
|
/**
|
|
25
33
|
* Get all items (excluding sections, including items within sections).
|
|
26
34
|
*/
|
|
@@ -56,6 +56,18 @@ export interface ListState<T = unknown> extends SelectionState {
|
|
|
56
56
|
* Creates state for a list component with selection.
|
|
57
57
|
*/
|
|
58
58
|
export declare function createListState<T = unknown>(props: MaybeAccessor<ListStateProps<T>>): ListState<T>;
|
|
59
|
+
/** A collection filter predicate: `(nodeTextValue, node) => keep`. */
|
|
60
|
+
export type ListFilterFn<T = unknown> = (nodeValue: string, node: CollectionNode<T>) => boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Wraps a {@link ListState} so its collection is filtered by `filterFn`, returning
|
|
63
|
+
* a new (reactive) ListState. Mirrors @react-stately's `UNSTABLE_useFilteredListState`
|
|
64
|
+
* (used by Autocomplete): the filter re-runs as the predicate — which typically
|
|
65
|
+
* closes over the current input value — or the base collection changes; a single
|
|
66
|
+
* stable, collection-aware manager reads the narrowed collection live and shares
|
|
67
|
+
* the base selection/focus state; and the focused key is reset to the nearest
|
|
68
|
+
* surviving item when the current one is filtered out.
|
|
69
|
+
*/
|
|
70
|
+
export declare function createFilteredListState<T = unknown>(state: ListState<T>, filterFn: Accessor<ListFilterFn<T> | null | undefined>): ListState<T>;
|
|
59
71
|
/**
|
|
60
72
|
* Props for single selection list state.
|
|
61
73
|
*/
|
|
@@ -8,4 +8,12 @@ export declare function getChildNodes<T>(node: CollectionNode<T>, collection: Co
|
|
|
8
8
|
export declare function getFirstItem<T>(iterable: Iterable<T>): T | undefined;
|
|
9
9
|
export declare function getNthItem<T>(iterable: Iterable<T>, index: number): T | undefined;
|
|
10
10
|
export declare function getLastItem<T>(iterable: Iterable<T>): T | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Counts the item nodes (recursing into sections, ignoring section headers and
|
|
13
|
+
* other non-item nodes) in a collection. Faithful port of
|
|
14
|
+
* @react-stately/collections `getItemCount`; used by createOption to populate
|
|
15
|
+
* `aria-setsize` when the listbox is virtualized. Cached per (immutable)
|
|
16
|
+
* collection identity, exactly like upstream.
|
|
17
|
+
*/
|
|
18
|
+
export declare function getItemCount<T>(collection: Collection<T>): number;
|
|
11
19
|
export declare function compareNodeOrder<T>(collection: Collection<T>, a: CollectionNode<T>, b: CollectionNode<T>): number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export type { Key, SelectionMode, SelectionBehavior, Selection, FocusStrategy, DisabledBehavior, CollectionNode, Collection, ItemProps, SectionProps, CollectionBase, SingleSelection, MultipleSelection, } from "./types";
|
|
2
2
|
export { ListCollection, createListCollection } from "./ListCollection";
|
|
3
|
-
export { getChildNodes, getFirstItem, getNthItem, getLastItem, compareNodeOrder, } from "./getChildNodes";
|
|
3
|
+
export { getChildNodes, getFirstItem, getNthItem, getLastItem, getItemCount, compareNodeOrder, } from "./getChildNodes";
|
|
4
4
|
export { createSelectionState, type SelectionStateProps, type SelectionState, type SelectionPressEvent, } from "./createSelectionState";
|
|
5
|
-
export { createListState, createSingleSelectListState, type ListStateProps, type ListState, type SingleSelectListStateProps, type SingleSelectListState, } from "./createListState";
|
|
5
|
+
export { createListState, createFilteredListState, createSingleSelectListState, type ListStateProps, type ListState, type ListFilterFn, type SingleSelectListStateProps, type SingleSelectListState, } from "./createListState";
|
|
6
6
|
export { createMenuState, createMenuTriggerState, type MenuStateProps, type MenuState, type MenuTriggerStateProps, type MenuTriggerState, } from "./createMenuState";
|
|
@@ -70,6 +70,15 @@ export interface Collection<T = unknown> extends Iterable<CollectionNode<T>> {
|
|
|
70
70
|
getChildren(key: Key): Iterable<CollectionNode<T>>;
|
|
71
71
|
/** Get the text value for a key. */
|
|
72
72
|
getTextValue(key: Key): string;
|
|
73
|
+
/**
|
|
74
|
+
* Filter the collection, returning a new collection containing only the item
|
|
75
|
+
* nodes for which `filterFn` returns true. Sections whose children are all
|
|
76
|
+
* filtered out are dropped. Mirrors @react-aria/collections
|
|
77
|
+
* `BaseCollection.filter` (and the optional `Collection.filter` in
|
|
78
|
+
* @react-types/shared). Used by Autocomplete to narrow the collection as the
|
|
79
|
+
* user types.
|
|
80
|
+
*/
|
|
81
|
+
filter?(filterFn: (nodeValue: string, node: CollectionNode<T>) => boolean): Collection<T>;
|
|
73
82
|
}
|
|
74
83
|
/**
|
|
75
84
|
* Structural shape expected when inferring collection item properties
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export type ColorStringKey = "hue" | "saturation" | "lightness" | "brightness" | "red" | "green" | "blue" | "alpha" | "colorName" | "transparentColorName" | "very dark" | "dark" | "light" | "very light" | "pale" | "grayish" | "vibrant" | "black" | "white" | "gray" | "pink" | "pink red" | "red orange" | "brown" | "orange" | "orange yellow" | "brown yellow" | "yellow" | "yellow green" | "green cyan" | "cyan" | "cyan blue" | "blue purple" | "purple" | "purple magenta" | "magenta" | "magenta pink";
|
|
2
|
+
export declare const colorStrings: Record<string, Record<ColorStringKey, string>>;
|
|
3
|
+
/**
|
|
4
|
+
* Mirrors LocalizedStringDictionary.getStringForLocale: exact-locale match,
|
|
5
|
+
* then language-only match (e.g. "ar" for "ar-AE"), then the en-US fallback.
|
|
6
|
+
* Ported so solid-stately's Color needs no @internationalized/string dependency.
|
|
7
|
+
*/
|
|
8
|
+
export declare function getColorStringForLocale(key: ColorStringKey, locale: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* Mirrors LocalizedStringFormatter.format for the plain `{variable}` messages
|
|
11
|
+
* used by color names (colorName / transparentColorName). Substitutes each
|
|
12
|
+
* `{name}` token with the matching variable's string value.
|
|
13
|
+
*/
|
|
14
|
+
export declare function formatColorMessage(key: ColorStringKey, locale: string, variables: Record<string, string>): string;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { type Accessor } from "solid-js";
|
|
7
7
|
import type { DropItem, DropTarget, DropOperation, DragTypes, DroppableCollectionEnterEvent, DroppableCollectionActivateEvent, DroppableCollectionExitEvent, DroppableCollectionDropEvent, DroppableCollectionInsertDropEvent, DroppableCollectionRootDropEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, ItemDropTarget } from "./types";
|
|
8
|
+
import type { Collection } from "../collections/types";
|
|
8
9
|
export interface DroppableCollectionStateOptions {
|
|
9
10
|
/**
|
|
10
11
|
* The drag types that the droppable collection accepts.
|
|
@@ -35,6 +36,14 @@ export interface DroppableCollectionStateOptions {
|
|
|
35
36
|
onMove?: (e: DroppableCollectionReorderEvent) => void;
|
|
36
37
|
/** A function returning whether a given target is a valid "on" drop target. */
|
|
37
38
|
shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
|
|
39
|
+
/**
|
|
40
|
+
* The host collection. Used by the default drop-operation feature detection to
|
|
41
|
+
* confirm a reorder stays within the same parent and to prevent dropping an
|
|
42
|
+
* item onto itself or a descendant. Optional: a flat collection (e.g. a plain
|
|
43
|
+
* ListBox) is always "within parent" and has no descendants, so omitting it is
|
|
44
|
+
* faithful for flat hosts.
|
|
45
|
+
*/
|
|
46
|
+
collection?: Collection<unknown>;
|
|
38
47
|
/** Whether the droppable collection is disabled. */
|
|
39
48
|
isDisabled?: boolean;
|
|
40
49
|
}
|
|
@@ -59,8 +68,14 @@ export interface DroppableCollectionState {
|
|
|
59
68
|
activateTarget(x: number, y: number): void;
|
|
60
69
|
/** Perform a drop on the collection. */
|
|
61
70
|
drop(items: DropItem[], dropOperation: DropOperation, isInternal: boolean, draggingKeys?: Set<string | number>): void;
|
|
62
|
-
/**
|
|
63
|
-
|
|
71
|
+
/**
|
|
72
|
+
* Get the drop operation for a target. `isInternal` is true when the active
|
|
73
|
+
* drag originated from this same collection; `draggingKeys` are the keys being
|
|
74
|
+
* dragged. Both feed the handler-aware feature detection that decides whether a
|
|
75
|
+
* given drop position (before/after/on/root) is a valid target — e.g. a
|
|
76
|
+
* reorder-only collection rejects "on" targets, matching React Aria.
|
|
77
|
+
*/
|
|
78
|
+
getDropOperation(target: DropTarget, types: DragTypes, allowedOperations: DropOperation[], isInternal?: boolean, draggingKeys?: Set<string | number>): DropOperation;
|
|
64
79
|
/** Check if an item drop should be accepted. */
|
|
65
80
|
shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
|
|
66
81
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export { createTextFieldState, type TextFieldStateOptions, type TextFieldState }
|
|
|
4
4
|
export { createCheckboxGroupState, type CheckboxGroupProps, type CheckboxGroupState, } from "./checkbox";
|
|
5
5
|
export { createRadioGroupState, radioGroupSyncVersion, type RadioGroupProps, type RadioGroupState, } from "./radio";
|
|
6
6
|
export { createOverlayTriggerState, type OverlayTriggerProps, type OverlayTriggerState, } from "./overlays";
|
|
7
|
-
export { type Key, type SelectionMode, type SelectionBehavior, type Selection, type FocusStrategy, type DisabledBehavior, type CollectionNode, type Collection, type ItemProps, type SectionProps, type CollectionBase, type SingleSelection, type MultipleSelection, ListCollection, createListCollection, createSelectionState, type SelectionStateProps, type SelectionState, type SelectionPressEvent, createListState, createSingleSelectListState, type ListStateProps, type ListState, type SingleSelectListStateProps, type SingleSelectListState, createMenuState, createMenuTriggerState, type MenuStateProps, type MenuState, type MenuTriggerStateProps, type MenuTriggerState, } from "./collections";
|
|
7
|
+
export { type Key, type SelectionMode, type SelectionBehavior, type Selection, type FocusStrategy, type DisabledBehavior, type CollectionNode, type Collection, type ItemProps, type SectionProps, type CollectionBase, type SingleSelection, type MultipleSelection, ListCollection, createListCollection, getItemCount, createSelectionState, type SelectionStateProps, type SelectionState, type SelectionPressEvent, createListState, createFilteredListState, createSingleSelectListState, type ListStateProps, type ListState, type ListFilterFn, type SingleSelectListStateProps, type SingleSelectListState, createMenuState, createMenuTriggerState, type MenuStateProps, type MenuState, type MenuTriggerStateProps, type MenuTriggerState, } from "./collections";
|
|
8
8
|
export { useMultipleSelectionState, type MultipleSelectionStateProps, type MultipleSelectionState, SelectionManager, type SelectionManagerOptions, type LayoutDelegate, } from "./selection";
|
|
9
9
|
export { useMenuTriggerState } from "./menu";
|
|
10
10
|
export { useDateFieldState, useDatePickerState, useDateRangePickerState, useTimeFieldState, type DateFieldStateOptions, type DatePickerStateOptions, type DateRangePickerStateOptions, type TimeFieldStateOptions, type SegmentType, } from "./datepicker";
|