@adea-ai/ui 0.79.0 → 0.80.0
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/components/ui/native-select/native-select.d.ts +7 -0
- package/dist/components/ui/native-select/native-select.d.ts.map +1 -1
- package/dist/components/ui/native-select/native-select.js +25 -14
- package/dist/components/ui/native-select/native-select.js.map +1 -1
- package/dist/r/src/components/ui/native-select/native-select.tsx +21 -3
- package/package.json +1 -1
- package/src/components/ui/native-select/native-select.tsx +21 -3
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { ComponentProps } from 'solid-js';
|
|
2
2
|
export type NativeSelectProps = ComponentProps<'select'> & {
|
|
3
|
+
/** Render the choices from data instead of raw option children. */
|
|
4
|
+
options?: readonly NativeSelectOption[];
|
|
3
5
|
/** Initialize an uncontrolled selection after its native options mount. */
|
|
4
6
|
defaultValue?: ComponentProps<'select'>['value'];
|
|
5
7
|
};
|
|
@@ -13,5 +15,10 @@ export type NativeSelectProps = ComponentProps<'select'> & {
|
|
|
13
15
|
* Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and
|
|
14
16
|
* the Adea token system; see the root NOTICE for source and attribution.
|
|
15
17
|
*/
|
|
18
|
+
export type NativeSelectOption = Readonly<{
|
|
19
|
+
value: string;
|
|
20
|
+
label: string;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
}>;
|
|
16
23
|
export declare function NativeSelect(props: NativeSelectProps): import("solid-js").JSX.Element;
|
|
17
24
|
//# sourceMappingURL=native-select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAoDpD"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { cn } from "../../../lib/utils.js";
|
|
2
|
-
import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
|
|
2
|
+
import { createComponent, effect, insert, mergeProps, spread, template, use } from "solid-js/web";
|
|
3
3
|
import { ChevronDownIcon } from "lucide-solid";
|
|
4
|
-
import { createEffect, onMount, splitProps } from "solid-js";
|
|
4
|
+
import { For, Show, createEffect, onMount, splitProps } from "solid-js";
|
|
5
5
|
//#region src/components/ui/native-select/native-select.tsx
|
|
6
6
|
var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=native-select-wrapper class="relative inline-flex min-w-0"><select data-slot=native-select>`);
|
|
7
|
+
var _tmpl$2 = /*#__PURE__*/ template(`<option>`);
|
|
7
8
|
function setSelectedValue(select, value, multiple) {
|
|
8
9
|
if (value === void 0) return;
|
|
9
10
|
if (multiple && Array.isArray(value)) {
|
|
@@ -19,21 +20,12 @@ function initializeDefaultSelection(select, value, multiple) {
|
|
|
19
20
|
for (const option of select.options) option.defaultSelected = defaultValues.has(option.value);
|
|
20
21
|
setSelectedValue(select, value, multiple);
|
|
21
22
|
}
|
|
22
|
-
/**
|
|
23
|
-
* NativeSelect.
|
|
24
|
-
*
|
|
25
|
-
* A styled native `<select>` for compact, finite choices. Use `Select` when the
|
|
26
|
-
* list needs a custom popover, typed options, or runtime filtering; this keeps
|
|
27
|
-
* the browser's built-in keyboard, form, option, and label behavior.
|
|
28
|
-
*
|
|
29
|
-
* Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and
|
|
30
|
-
* the Adea token system; see the root NOTICE for source and attribution.
|
|
31
|
-
*/
|
|
32
23
|
function NativeSelect(props) {
|
|
33
24
|
const [local, rest] = splitProps(props, [
|
|
34
25
|
"class",
|
|
35
26
|
"children",
|
|
36
|
-
"defaultValue"
|
|
27
|
+
"defaultValue",
|
|
28
|
+
"options"
|
|
37
29
|
]);
|
|
38
30
|
let select;
|
|
39
31
|
createEffect(() => {
|
|
@@ -51,7 +43,26 @@ function NativeSelect(props) {
|
|
|
51
43
|
spread(_el$2, mergeProps({ get ["class"]() {
|
|
52
44
|
return cn("h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30", local.class);
|
|
53
45
|
} }, rest), false, true);
|
|
54
|
-
insert(_el$2, (
|
|
46
|
+
insert(_el$2, createComponent(Show, {
|
|
47
|
+
get when() {
|
|
48
|
+
return local.options;
|
|
49
|
+
},
|
|
50
|
+
get fallback() {
|
|
51
|
+
return local.children;
|
|
52
|
+
},
|
|
53
|
+
children: (options) => createComponent(For, {
|
|
54
|
+
get each() {
|
|
55
|
+
return options();
|
|
56
|
+
},
|
|
57
|
+
children: (option) => (() => {
|
|
58
|
+
var _el$3 = _tmpl$2();
|
|
59
|
+
insert(_el$3, () => option.label);
|
|
60
|
+
effect(() => _el$3.disabled = option.disabled);
|
|
61
|
+
effect(() => _el$3.value = option.value);
|
|
62
|
+
return _el$3;
|
|
63
|
+
})()
|
|
64
|
+
})
|
|
65
|
+
}));
|
|
55
66
|
insert(_el$, createComponent(ChevronDownIcon, {
|
|
56
67
|
"data-slot": "native-select-icon",
|
|
57
68
|
"aria-hidden": "true",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","onMount","splitProps","cn","NativeSelectProps","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","
|
|
1
|
+
{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","cn","NativeSelectProps","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = ComponentProps<'select'> & {\n /** Render the choices from data instead of raw option children. */\n options?: readonly NativeSelectOption[]\n /** Initialize an uncontrolled selection after its native options mount. */\n defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n select: HTMLSelectElement,\n value: ComponentProps<'select'>['value'],\n multiple: boolean\n) {\n if (value === undefined) return\n\n if (multiple && Array.isArray(value)) {\n const selected = new Set(value.map(String))\n for (const option of select.options) option.selected = selected.has(option.value)\n return\n }\n\n select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n select: HTMLSelectElement,\n value: ComponentProps<'select'>['value'],\n multiple: boolean\n) {\n if (value === undefined) return\n\n const defaultValues =\n multiple && Array.isArray(value)\n ? new Set(value.map(String))\n : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n value: string\n label: string\n disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue', 'options'])\n let select: HTMLSelectElement | undefined\n\n // Set selection after native options exist; setting select.value before its\n // children are mounted makes browsers fall back to the first option.\n createEffect(() => {\n if (!select) return\n setSelectedValue(select, rest.value, Boolean(rest.multiple))\n })\n onMount(() => {\n if (select && rest.value === undefined) {\n initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n }\n })\n\n return (\n <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n <select\n ref={(element) => {\n select = element\n }}\n data-slot=\"native-select\"\n class={cn(\n 'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',\n 'transition-[color,box-shadow,border-color] ease-out outline-none',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',\n local.class\n )}\n {...rest}\n >\n <Show when={local.options} fallback={local.children}>\n {(options) => (\n <For each={options()}>\n {(option) => (\n <option value={option.value} disabled={option.disabled}>\n {option.label}\n </option>\n )}\n </For>\n )}\n </Show>\n </select>\n <ChevronDownIcon\n data-slot=\"native-select-icon\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\"\n />\n </span>\n )\n}\n"],"mappings":";;;;;;;AAYA,SAASY,iBACPC,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,IAAID,YAAYE,MAAMC,QAAQJ,KAAK,GAAG;EACpC,MAAMK,WAAW,IAAIC,IAAIN,MAAMO,IAAIC,MAAM,CAAC;EAC1C,KAAK,MAAMC,UAAUX,OAAOJ,SAASe,OAAOJ,WAAWA,SAASK,IAAID,OAAOT,KAAK;EAChF;CACF;CAEAF,OAAOE,QAAQQ,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK;AACvE;AAEA,SAASW,2BACPb,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,MAAMU,gBACJX,YAAYE,MAAMC,QAAQJ,KAAK,IAC3B,IAAIM,IAAIN,MAAMO,IAAIC,MAAM,CAAC,oBACzB,IAAIF,IAAI,CAACE,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK,CAAC,CAAC;CAEvE,KAAK,MAAMS,UAAUX,OAAOJ,SAASe,OAAOI,kBAAkBD,cAAcF,IAAID,OAAOT,KAAK;CAC5FH,iBAAiBC,QAAQE,OAAOC,QAAQ;AAC1C;AAkBA,SAAgBgB,aAAaC,OAA0B;CACrD,MAAM,CAACC,OAAOC,QAAQ7B,WAAW2B,OAAO;EAAC;EAAS;EAAY;EAAgB;CAAS,CAAC;CACxF,IAAIpB;CAIJX,mBAAmB;EACjB,IAAI,CAACW,QAAQ;EACbD,iBAAiBC,QAAQsB,KAAKpB,OAAOqB,QAAQD,KAAKnB,QAAQ,CAAC;CAC7D,CAAC;CACDZ,cAAc;EACZ,IAAIS,UAAUsB,KAAKpB,UAAUE,KAAAA,GAC3BS,2BAA2Bb,QAAQqB,MAAMvB,cAAcyB,QAAQD,KAAKnB,QAAQ,CAAC;CAEjF,CAAC;CAED,cAAA;EAAA,IAAAqB,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,KAGYC,YAAY;GAChB7B,SAAS6B;EACX,GAACH,KAAA;EAAAI,OAAAJ,OAAAK,WAAA,EAAA,KAAA,WAAA;GAAA,OAEMrC,GACL,iHACA,oEACA,oFACA,4FACA,iGACA2B,MAAMW,KACR;EAAC,EAAA,GACGV,IAAI,GAAA,OAAA,IAAA;EAAAW,OAAAP,OAAAQ,gBAEP1C,MAAI;GAAA,IAAC2C,OAAI;IAAA,OAAEd,MAAMzB;GAAO;GAAA,IAAEwC,WAAQ;IAAA,OAAEf,MAAMgB;GAAQ;GAAAA,WAC/CzC,YAAOsC,gBACN5C,KAAG;IAAA,IAACgD,OAAI;KAAA,OAAE1C,QAAQ;IAAC;IAAAyC,WAChB1B,kBAAM;KAAA,IAAA4B,QAAAC,QAAA;KAAAP,OAAAM,aAEH5B,OAAOM,KAAK;KAAAwB,aAAAF,MAAArB,WADwBP,OAAOO,QAAQ;KAAAuB,aAAAF,MAAArC,QAAvCS,OAAOT,KAAK;KAAA,OAAAqC;IAAA,EAAA,CAAA;GAG5B,CAAA;EAEJ,CAAA,CAAA;EAAAN,OAAAT,MAAAU,gBAGJ/C,iBAAe;GAAA,aAAA;GAAA,eAAA;GAAA,SAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAqC;CAAA,EAAA,CAAA;AAOtB"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { ChevronDownIcon } from 'lucide-solid'
|
|
2
2
|
import type { ComponentProps } from 'solid-js'
|
|
3
|
-
import { createEffect, onMount, splitProps } from 'solid-js'
|
|
3
|
+
import { createEffect, For, onMount, Show, splitProps } from 'solid-js'
|
|
4
4
|
import { cn } from '../../../lib/utils'
|
|
5
5
|
|
|
6
6
|
export type NativeSelectProps = ComponentProps<'select'> & {
|
|
7
|
+
/** Render the choices from data instead of raw option children. */
|
|
8
|
+
options?: readonly NativeSelectOption[]
|
|
7
9
|
/** Initialize an uncontrolled selection after its native options mount. */
|
|
8
10
|
defaultValue?: ComponentProps<'select'>['value']
|
|
9
11
|
}
|
|
@@ -50,8 +52,14 @@ function initializeDefaultSelection(
|
|
|
50
52
|
* Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and
|
|
51
53
|
* the Adea token system; see the root NOTICE for source and attribution.
|
|
52
54
|
*/
|
|
55
|
+
export type NativeSelectOption = Readonly<{
|
|
56
|
+
value: string
|
|
57
|
+
label: string
|
|
58
|
+
disabled?: boolean
|
|
59
|
+
}>
|
|
60
|
+
|
|
53
61
|
export function NativeSelect(props: NativeSelectProps) {
|
|
54
|
-
const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue'])
|
|
62
|
+
const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue', 'options'])
|
|
55
63
|
let select: HTMLSelectElement | undefined
|
|
56
64
|
|
|
57
65
|
// Set selection after native options exist; setting select.value before its
|
|
@@ -83,7 +91,17 @@ export function NativeSelect(props: NativeSelectProps) {
|
|
|
83
91
|
)}
|
|
84
92
|
{...rest}
|
|
85
93
|
>
|
|
86
|
-
{local.children}
|
|
94
|
+
<Show when={local.options} fallback={local.children}>
|
|
95
|
+
{(options) => (
|
|
96
|
+
<For each={options()}>
|
|
97
|
+
{(option) => (
|
|
98
|
+
<option value={option.value} disabled={option.disabled}>
|
|
99
|
+
{option.label}
|
|
100
|
+
</option>
|
|
101
|
+
)}
|
|
102
|
+
</For>
|
|
103
|
+
)}
|
|
104
|
+
</Show>
|
|
87
105
|
</select>
|
|
88
106
|
<ChevronDownIcon
|
|
89
107
|
data-slot="native-select-icon"
|
package/package.json
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { ChevronDownIcon } from 'lucide-solid'
|
|
2
2
|
import type { ComponentProps } from 'solid-js'
|
|
3
|
-
import { createEffect, onMount, splitProps } from 'solid-js'
|
|
3
|
+
import { createEffect, For, onMount, Show, splitProps } from 'solid-js'
|
|
4
4
|
import { cn } from '#lib/utils'
|
|
5
5
|
|
|
6
6
|
export type NativeSelectProps = ComponentProps<'select'> & {
|
|
7
|
+
/** Render the choices from data instead of raw option children. */
|
|
8
|
+
options?: readonly NativeSelectOption[]
|
|
7
9
|
/** Initialize an uncontrolled selection after its native options mount. */
|
|
8
10
|
defaultValue?: ComponentProps<'select'>['value']
|
|
9
11
|
}
|
|
@@ -50,8 +52,14 @@ function initializeDefaultSelection(
|
|
|
50
52
|
* Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and
|
|
51
53
|
* the Adea token system; see the root NOTICE for source and attribution.
|
|
52
54
|
*/
|
|
55
|
+
export type NativeSelectOption = Readonly<{
|
|
56
|
+
value: string
|
|
57
|
+
label: string
|
|
58
|
+
disabled?: boolean
|
|
59
|
+
}>
|
|
60
|
+
|
|
53
61
|
export function NativeSelect(props: NativeSelectProps) {
|
|
54
|
-
const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue'])
|
|
62
|
+
const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue', 'options'])
|
|
55
63
|
let select: HTMLSelectElement | undefined
|
|
56
64
|
|
|
57
65
|
// Set selection after native options exist; setting select.value before its
|
|
@@ -83,7 +91,17 @@ export function NativeSelect(props: NativeSelectProps) {
|
|
|
83
91
|
)}
|
|
84
92
|
{...rest}
|
|
85
93
|
>
|
|
86
|
-
{local.children}
|
|
94
|
+
<Show when={local.options} fallback={local.children}>
|
|
95
|
+
{(options) => (
|
|
96
|
+
<For each={options()}>
|
|
97
|
+
{(option) => (
|
|
98
|
+
<option value={option.value} disabled={option.disabled}>
|
|
99
|
+
{option.label}
|
|
100
|
+
</option>
|
|
101
|
+
)}
|
|
102
|
+
</For>
|
|
103
|
+
)}
|
|
104
|
+
</Show>
|
|
87
105
|
</select>
|
|
88
106
|
<ChevronDownIcon
|
|
89
107
|
data-slot="native-select-icon"
|