@yamada-ui/native-select 0.4.10 → 0.5.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/{chunk-KRXIZKKG.mjs → chunk-UQC6YIIC.mjs} +9 -10
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -9
- package/dist/index.mjs +1 -1
- package/dist/native-select.d.mts +17 -11
- package/dist/native-select.d.ts +17 -11
- package/dist/native-select.js +9 -9
- package/dist/native-select.mjs +1 -1
- package/package.json +1 -1
|
@@ -19,7 +19,6 @@ import {
|
|
|
19
19
|
splitObject,
|
|
20
20
|
getValidChildren,
|
|
21
21
|
isValidElement,
|
|
22
|
-
isArray,
|
|
23
22
|
pickObject
|
|
24
23
|
} from "@yamada-ui/utils";
|
|
25
24
|
import {
|
|
@@ -42,7 +41,7 @@ var NativeSelect = forwardRef(
|
|
|
42
41
|
height,
|
|
43
42
|
minH,
|
|
44
43
|
minHeight,
|
|
45
|
-
|
|
44
|
+
items = [],
|
|
46
45
|
placeholder,
|
|
47
46
|
containerProps,
|
|
48
47
|
iconProps,
|
|
@@ -52,16 +51,16 @@ var NativeSelect = forwardRef(
|
|
|
52
51
|
const formControlProps = pickObject(rest, formControlProperties);
|
|
53
52
|
const [layoutProps, selectProps] = splitObject(rest, layoutStylesProperties);
|
|
54
53
|
let computedChildren = [];
|
|
55
|
-
if (!children &&
|
|
56
|
-
computedChildren =
|
|
57
|
-
if (
|
|
54
|
+
if (!children && items.length) {
|
|
55
|
+
computedChildren = items.map((item, i) => {
|
|
56
|
+
if ("value" in item) {
|
|
57
|
+
const { label, value, ...props2 } = item;
|
|
58
58
|
return /* @__PURE__ */ jsx(NativeOption, { value, ...props2, children: label }, i);
|
|
59
|
-
} else {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
) }, i);
|
|
59
|
+
} else if ("items" in item) {
|
|
60
|
+
const { label, items: items2 = [], ...props2 } = item;
|
|
61
|
+
return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ jsx(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
|
|
63
62
|
}
|
|
64
|
-
});
|
|
63
|
+
}).filter(Boolean);
|
|
65
64
|
}
|
|
66
65
|
return /* @__PURE__ */ jsx(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ jsxs(
|
|
67
66
|
ui.div,
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect,
|
|
1
|
+
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect, NativeSelectItem, NativeSelectProps } from './native-select.mjs';
|
|
2
2
|
import '@yamada-ui/core';
|
|
3
3
|
import '@yamada-ui/form-control';
|
|
4
4
|
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect,
|
|
1
|
+
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect, NativeSelectItem, NativeSelectProps } from './native-select.js';
|
|
2
2
|
import '@yamada-ui/core';
|
|
3
3
|
import '@yamada-ui/form-control';
|
|
4
4
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -50,7 +50,7 @@ var NativeSelect = (0, import_core.forwardRef)(
|
|
|
50
50
|
height,
|
|
51
51
|
minH,
|
|
52
52
|
minHeight,
|
|
53
|
-
|
|
53
|
+
items = [],
|
|
54
54
|
placeholder,
|
|
55
55
|
containerProps,
|
|
56
56
|
iconProps,
|
|
@@ -60,16 +60,16 @@ var NativeSelect = (0, import_core.forwardRef)(
|
|
|
60
60
|
const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
|
|
61
61
|
const [layoutProps, selectProps] = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
|
|
62
62
|
let computedChildren = [];
|
|
63
|
-
if (!children &&
|
|
64
|
-
computedChildren =
|
|
65
|
-
if (
|
|
63
|
+
if (!children && items.length) {
|
|
64
|
+
computedChildren = items.map((item, i) => {
|
|
65
|
+
if ("value" in item) {
|
|
66
|
+
const { label, value, ...props2 } = item;
|
|
66
67
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
|
|
67
|
-
} else {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
) }, i);
|
|
68
|
+
} else if ("items" in item) {
|
|
69
|
+
const { label, items: items2 = [], ...props2 } = item;
|
|
70
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
|
|
71
71
|
}
|
|
72
|
-
});
|
|
72
|
+
}).filter(Boolean);
|
|
73
73
|
}
|
|
74
74
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
75
75
|
import_core.ui.div,
|
package/dist/index.mjs
CHANGED
package/dist/native-select.d.mts
CHANGED
|
@@ -3,18 +3,24 @@ import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
|
|
|
3
3
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
4
4
|
import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
|
|
5
5
|
|
|
6
|
-
type
|
|
7
|
-
type UINativeOption = Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, 'label' | 'children' | 'value'> & {
|
|
6
|
+
type NativeSelectBaseItem = Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> & {
|
|
8
7
|
label?: string;
|
|
9
|
-
value?: Value | UINativeOption[];
|
|
10
8
|
};
|
|
9
|
+
type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
|
|
10
|
+
type NativeSelectItemWithValue = NativeSelectBaseItem & {
|
|
11
|
+
value?: Value;
|
|
12
|
+
};
|
|
13
|
+
type NativeSelectItemWithItems = NativeSelectBaseItem & {
|
|
14
|
+
items?: NativeSelectItemWithValue[];
|
|
15
|
+
};
|
|
16
|
+
type NativeSelectItem = NativeSelectItemWithValue & NativeSelectItemWithItems;
|
|
11
17
|
type NativeSelectOptions = {
|
|
12
18
|
/**
|
|
13
|
-
* If provided, generate options based on
|
|
19
|
+
* If provided, generate options based on items.
|
|
14
20
|
*
|
|
15
21
|
* @default '[]'
|
|
16
22
|
*/
|
|
17
|
-
|
|
23
|
+
items?: NativeSelectItem[];
|
|
18
24
|
/**
|
|
19
25
|
* The placeholder for select.
|
|
20
26
|
*/
|
|
@@ -36,19 +42,19 @@ type NativeSelectOptions = {
|
|
|
36
42
|
/**
|
|
37
43
|
* Props for container element.
|
|
38
44
|
*/
|
|
39
|
-
containerProps?: Omit<HTMLUIProps<
|
|
45
|
+
containerProps?: Omit<HTMLUIProps<"div">, "children">;
|
|
40
46
|
/**
|
|
41
47
|
* Props for icon element.
|
|
42
48
|
*/
|
|
43
|
-
iconProps?: HTMLUIProps<
|
|
49
|
+
iconProps?: HTMLUIProps<"div">;
|
|
44
50
|
};
|
|
45
|
-
type NativeSelectProps = Omit<HTMLUIProps<
|
|
51
|
+
type NativeSelectProps = Omit<HTMLUIProps<"select">, "size"> & ThemeProps<"Select"> & NativeSelectOptions & FormControlOptions;
|
|
46
52
|
declare const NativeSelect: _yamada_ui_core.Component<"select", NativeSelectProps>;
|
|
47
|
-
type NativeOptionGroupProps = HTMLUIProps<
|
|
53
|
+
type NativeOptionGroupProps = HTMLUIProps<"optgroup">;
|
|
48
54
|
declare const NativeOptionGroup: _yamada_ui_core.Component<"optgroup", NativeOptionGroupProps>;
|
|
49
|
-
type NativeOptionProps = Omit<HTMLUIProps<
|
|
55
|
+
type NativeOptionProps = Omit<HTMLUIProps<"option">, "children"> & {
|
|
50
56
|
children?: string;
|
|
51
57
|
};
|
|
52
58
|
declare const NativeOption: _yamada_ui_core.Component<"option", NativeOptionProps>;
|
|
53
59
|
|
|
54
|
-
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect,
|
|
60
|
+
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect, NativeSelectItem, NativeSelectProps };
|
package/dist/native-select.d.ts
CHANGED
|
@@ -3,18 +3,24 @@ import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
|
|
|
3
3
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
4
4
|
import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
|
|
5
5
|
|
|
6
|
-
type
|
|
7
|
-
type UINativeOption = Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, 'label' | 'children' | 'value'> & {
|
|
6
|
+
type NativeSelectBaseItem = Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> & {
|
|
8
7
|
label?: string;
|
|
9
|
-
value?: Value | UINativeOption[];
|
|
10
8
|
};
|
|
9
|
+
type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
|
|
10
|
+
type NativeSelectItemWithValue = NativeSelectBaseItem & {
|
|
11
|
+
value?: Value;
|
|
12
|
+
};
|
|
13
|
+
type NativeSelectItemWithItems = NativeSelectBaseItem & {
|
|
14
|
+
items?: NativeSelectItemWithValue[];
|
|
15
|
+
};
|
|
16
|
+
type NativeSelectItem = NativeSelectItemWithValue & NativeSelectItemWithItems;
|
|
11
17
|
type NativeSelectOptions = {
|
|
12
18
|
/**
|
|
13
|
-
* If provided, generate options based on
|
|
19
|
+
* If provided, generate options based on items.
|
|
14
20
|
*
|
|
15
21
|
* @default '[]'
|
|
16
22
|
*/
|
|
17
|
-
|
|
23
|
+
items?: NativeSelectItem[];
|
|
18
24
|
/**
|
|
19
25
|
* The placeholder for select.
|
|
20
26
|
*/
|
|
@@ -36,19 +42,19 @@ type NativeSelectOptions = {
|
|
|
36
42
|
/**
|
|
37
43
|
* Props for container element.
|
|
38
44
|
*/
|
|
39
|
-
containerProps?: Omit<HTMLUIProps<
|
|
45
|
+
containerProps?: Omit<HTMLUIProps<"div">, "children">;
|
|
40
46
|
/**
|
|
41
47
|
* Props for icon element.
|
|
42
48
|
*/
|
|
43
|
-
iconProps?: HTMLUIProps<
|
|
49
|
+
iconProps?: HTMLUIProps<"div">;
|
|
44
50
|
};
|
|
45
|
-
type NativeSelectProps = Omit<HTMLUIProps<
|
|
51
|
+
type NativeSelectProps = Omit<HTMLUIProps<"select">, "size"> & ThemeProps<"Select"> & NativeSelectOptions & FormControlOptions;
|
|
46
52
|
declare const NativeSelect: _yamada_ui_core.Component<"select", NativeSelectProps>;
|
|
47
|
-
type NativeOptionGroupProps = HTMLUIProps<
|
|
53
|
+
type NativeOptionGroupProps = HTMLUIProps<"optgroup">;
|
|
48
54
|
declare const NativeOptionGroup: _yamada_ui_core.Component<"optgroup", NativeOptionGroupProps>;
|
|
49
|
-
type NativeOptionProps = Omit<HTMLUIProps<
|
|
55
|
+
type NativeOptionProps = Omit<HTMLUIProps<"option">, "children"> & {
|
|
50
56
|
children?: string;
|
|
51
57
|
};
|
|
52
58
|
declare const NativeOption: _yamada_ui_core.Component<"option", NativeOptionProps>;
|
|
53
59
|
|
|
54
|
-
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect,
|
|
60
|
+
export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect, NativeSelectItem, NativeSelectProps };
|
package/dist/native-select.js
CHANGED
|
@@ -48,7 +48,7 @@ var NativeSelect = (0, import_core.forwardRef)(
|
|
|
48
48
|
height,
|
|
49
49
|
minH,
|
|
50
50
|
minHeight,
|
|
51
|
-
|
|
51
|
+
items = [],
|
|
52
52
|
placeholder,
|
|
53
53
|
containerProps,
|
|
54
54
|
iconProps,
|
|
@@ -58,16 +58,16 @@ var NativeSelect = (0, import_core.forwardRef)(
|
|
|
58
58
|
const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
|
|
59
59
|
const [layoutProps, selectProps] = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
|
|
60
60
|
let computedChildren = [];
|
|
61
|
-
if (!children &&
|
|
62
|
-
computedChildren =
|
|
63
|
-
if (
|
|
61
|
+
if (!children && items.length) {
|
|
62
|
+
computedChildren = items.map((item, i) => {
|
|
63
|
+
if ("value" in item) {
|
|
64
|
+
const { label, value, ...props2 } = item;
|
|
64
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
|
|
65
|
-
} else {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
) }, i);
|
|
66
|
+
} else if ("items" in item) {
|
|
67
|
+
const { label, items: items2 = [], ...props2 } = item;
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
|
|
69
69
|
}
|
|
70
|
-
});
|
|
70
|
+
}).filter(Boolean);
|
|
71
71
|
}
|
|
72
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
73
73
|
import_core.ui.div,
|
package/dist/native-select.mjs
CHANGED