@yamada-ui/native-select 0.2.5 → 0.2.7

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.
Files changed (7) hide show
  1. package/dist/chunk-ZRKOXHIU.mjs +154 -0
  2. package/dist/index.js +92 -69
  3. package/dist/index.mjs +1 -1
  4. package/dist/native-select.js +92 -69
  5. package/dist/native-select.mjs +1 -1
  6. package/package.json +5 -5
  7. package/dist/chunk-XYKDET4Z.mjs +0 -129
package/dist/chunk-ZRKOXHIU.mjs ADDED
@@ -0,0 +1,154 @@
1
+ // src/native-select.tsx
2
+ import {
3
+ ui,
4
+ forwardRef,
5
+ useMultiComponentStyle,
6
+ omitThemeProps,
7
+ layoutStylesProperties
8
+ } from "@yamada-ui/core";
9
+ import {
10
+ useFormControlProps,
11
+ formControlProperties
12
+ } from "@yamada-ui/form-control";
13
+ import { ChevronIcon } from "@yamada-ui/icon";
14
+ import {
15
+ createContext,
16
+ cx,
17
+ splitObject,
18
+ getValidChildren,
19
+ isValidElement,
20
+ isArray,
21
+ pickObject
22
+ } from "@yamada-ui/utils";
23
+ import {
24
+ cloneElement
25
+ } from "react";
26
+ import { jsx, jsxs } from "react/jsx-runtime";
27
+ var [NativeSelectProvider, useNativeSelect] = createContext({
28
+ name: "NativeSelectContext",
29
+ errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
30
+ });
31
+ var NativeSelect = forwardRef(
32
+ (props, ref) => {
33
+ const [styles, mergedProps] = useMultiComponentStyle("Select", props);
34
+ let {
35
+ className,
36
+ children,
37
+ placeholderInOptions = true,
38
+ color,
39
+ h,
40
+ height,
41
+ minH,
42
+ minHeight,
43
+ options = [],
44
+ value,
45
+ placeholder,
46
+ containerProps,
47
+ iconProps,
48
+ ...rest
49
+ } = omitThemeProps(mergedProps);
50
+ rest = useFormControlProps(rest);
51
+ const formControlProps = pickObject(rest, formControlProperties);
52
+ const [layoutProps, selectPorps] = splitObject(rest, layoutStylesProperties);
53
+ let computedChildren = [];
54
+ if (!children && options.length) {
55
+ computedChildren = options.map(({ label, value: value2, ...props2 }, i) => {
56
+ if (!isArray(value2)) {
57
+ return /* @__PURE__ */ jsx(NativeOption, { value: value2, ...props2, children: label }, i);
58
+ } else {
59
+ return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: value2.map(
60
+ ({ label: label2, value: value3, ...props3 }, i2) => !isArray(value3) ? /* @__PURE__ */ jsx(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
61
+ ) }, i);
62
+ }
63
+ });
64
+ }
65
+ return /* @__PURE__ */ jsx(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ jsxs(
66
+ ui.div,
67
+ {
68
+ className: "ui-native-select",
69
+ __css: {
70
+ position: "relative",
71
+ w: "100%",
72
+ h: "fit-content",
73
+ color,
74
+ ...styles.container
75
+ },
76
+ ...layoutProps,
77
+ ...containerProps,
78
+ ...formControlProps,
79
+ children: [
80
+ /* @__PURE__ */ jsxs(
81
+ ui.select,
82
+ {
83
+ ref,
84
+ className: cx("ui-native-select-field", className),
85
+ value,
86
+ __css: {
87
+ paddingEnd: "2rem",
88
+ h: h != null ? h : height,
89
+ minH: minH != null ? minH : minHeight,
90
+ ...styles.field
91
+ },
92
+ ...selectPorps,
93
+ children: [
94
+ placeholder ? /* @__PURE__ */ jsx(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
95
+ children != null ? children : computedChildren
96
+ ]
97
+ }
98
+ ),
99
+ /* @__PURE__ */ jsx(NativeSelectIcon, { ...iconProps, ...formControlProps })
100
+ ]
101
+ }
102
+ ) });
103
+ }
104
+ );
105
+ var NativeSelectIcon = ({
106
+ className,
107
+ children,
108
+ ...rest
109
+ }) => {
110
+ const styles = useNativeSelect();
111
+ const css = {
112
+ position: "absolute",
113
+ display: "inline-flex",
114
+ alignItems: "center",
115
+ justifyContent: "center",
116
+ pointerEvents: "none",
117
+ top: "50%",
118
+ transform: "translateY(-50%)",
119
+ ...styles.icon
120
+ };
121
+ const validChildren = getValidChildren(children);
122
+ const cloneChildren = validChildren.map(
123
+ (child) => cloneElement(child, {
124
+ focusable: false,
125
+ "aria-hidden": true,
126
+ style: {
127
+ width: "1em",
128
+ height: "1em",
129
+ color: "currentColor"
130
+ }
131
+ })
132
+ );
133
+ return /* @__PURE__ */ jsx(
134
+ ui.div,
135
+ {
136
+ className: cx("ui-native-select-icon", className),
137
+ __css: css,
138
+ ...rest,
139
+ children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {})
140
+ }
141
+ );
142
+ };
143
+ var NativeOptionGroup = forwardRef(
144
+ (props, ref) => /* @__PURE__ */ jsx(ui.optgroup, { ref, ...props })
145
+ );
146
+ var NativeOption = forwardRef(
147
+ (props, ref) => /* @__PURE__ */ jsx(ui.option, { ref, ...props })
148
+ );
149
+
150
+ export {
151
+ NativeSelect,
152
+ NativeOptionGroup,
153
+ NativeOption
154
+ };
package/dist/index.js CHANGED
@@ -37,74 +37,85 @@ var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
37
37
  name: "NativeSelectContext",
38
38
  errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
39
39
  });
40
- var NativeSelect = (0, import_core.forwardRef)((props, ref) => {
41
- const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Select", props);
42
- let {
43
- className,
44
- children,
45
- placeholderInOptions = true,
46
- color,
47
- h,
48
- height,
49
- minH,
50
- minHeight,
51
- options = [],
52
- value,
53
- placeholder,
54
- containerProps,
55
- iconProps,
56
- ...rest
57
- } = (0, import_core.omitThemeProps)(mergedProps);
58
- rest = (0, import_form_control.useFormControlProps)(rest);
59
- const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
60
- const [layoutProps, selectPorps] = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
61
- let computedChildren = [];
62
- if (!children && options.length) {
63
- computedChildren = options.map(({ label, value: value2, ...props2 }, i) => {
64
- if (!(0, import_utils.isArray)(value2)) {
65
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value2, ...props2, children: label }, i);
66
- } else {
67
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: value2.map(
68
- ({ label: label2, value: value3, ...props3 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
69
- ) }, i);
40
+ var NativeSelect = (0, import_core.forwardRef)(
41
+ (props, ref) => {
42
+ const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Select", props);
43
+ let {
44
+ className,
45
+ children,
46
+ placeholderInOptions = true,
47
+ color,
48
+ h,
49
+ height,
50
+ minH,
51
+ minHeight,
52
+ options = [],
53
+ value,
54
+ placeholder,
55
+ containerProps,
56
+ iconProps,
57
+ ...rest
58
+ } = (0, import_core.omitThemeProps)(mergedProps);
59
+ rest = (0, import_form_control.useFormControlProps)(rest);
60
+ const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
61
+ const [layoutProps, selectPorps] = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
62
+ let computedChildren = [];
63
+ if (!children && options.length) {
64
+ computedChildren = options.map(({ label, value: value2, ...props2 }, i) => {
65
+ if (!(0, import_utils.isArray)(value2)) {
66
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value2, ...props2, children: label }, i);
67
+ } else {
68
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: value2.map(
69
+ ({ label: label2, value: value3, ...props3 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
70
+ ) }, i);
71
+ }
72
+ });
73
+ }
74
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
75
+ import_core.ui.div,
76
+ {
77
+ className: "ui-native-select",
78
+ __css: {
79
+ position: "relative",
80
+ w: "100%",
81
+ h: "fit-content",
82
+ color,
83
+ ...styles.container
84
+ },
85
+ ...layoutProps,
86
+ ...containerProps,
87
+ ...formControlProps,
88
+ children: [
89
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
90
+ import_core.ui.select,
91
+ {
92
+ ref,
93
+ className: (0, import_utils.cx)("ui-native-select-field", className),
94
+ value,
95
+ __css: {
96
+ paddingEnd: "2rem",
97
+ h: h != null ? h : height,
98
+ minH: minH != null ? minH : minHeight,
99
+ ...styles.field
100
+ },
101
+ ...selectPorps,
102
+ children: [
103
+ placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
104
+ children != null ? children : computedChildren
105
+ ]
106
+ }
107
+ ),
108
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
109
+ ]
70
110
  }
71
- });
111
+ ) });
72
112
  }
73
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
74
- import_core.ui.div,
75
- {
76
- className: "ui-native-select",
77
- __css: {
78
- position: "relative",
79
- w: "100%",
80
- h: "fit-content",
81
- color,
82
- ...styles.container
83
- },
84
- ...layoutProps,
85
- ...containerProps,
86
- ...formControlProps,
87
- children: [
88
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
89
- import_core.ui.select,
90
- {
91
- ref,
92
- className: (0, import_utils.cx)("ui-native-select-field", className),
93
- value,
94
- __css: { paddingEnd: "2rem", h: h != null ? h : height, minH: minH != null ? minH : minHeight, ...styles.field },
95
- ...selectPorps,
96
- children: [
97
- placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
98
- children != null ? children : computedChildren
99
- ]
100
- }
101
- ),
102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
103
- ]
104
- }
105
- ) });
106
- });
107
- var NativeSelectIcon = ({ className, children, ...rest }) => {
113
+ );
114
+ var NativeSelectIcon = ({
115
+ className,
116
+ children,
117
+ ...rest
118
+ }) => {
108
119
  const styles = useNativeSelect();
109
120
  const css = {
110
121
  position: "absolute",
@@ -128,10 +139,22 @@ var NativeSelectIcon = ({ className, children, ...rest }) => {
128
139
  }
129
140
  })
130
141
  );
131
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-native-select-icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
142
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
143
+ import_core.ui.div,
144
+ {
145
+ className: (0, import_utils.cx)("ui-native-select-icon", className),
146
+ __css: css,
147
+ ...rest,
148
+ children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
149
+ }
150
+ );
132
151
  };
133
- var NativeOptionGroup = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props }));
134
- var NativeOption = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props }));
152
+ var NativeOptionGroup = (0, import_core.forwardRef)(
153
+ (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props })
154
+ );
155
+ var NativeOption = (0, import_core.forwardRef)(
156
+ (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props })
157
+ );
135
158
  // Annotate the CommonJS export names for ESM import in node:
136
159
  0 && (module.exports = {
137
160
  NativeOption,
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  NativeOption,
3
3
  NativeOptionGroup,
4
4
  NativeSelect
5
- } from "./chunk-XYKDET4Z.mjs";
5
+ } from "./chunk-ZRKOXHIU.mjs";
6
6
  export {
7
7
  NativeOption,
8
8
  NativeOptionGroup,
package/dist/native-select.js CHANGED
@@ -35,74 +35,85 @@ var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
35
35
  name: "NativeSelectContext",
36
36
  errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
37
37
  });
38
- var NativeSelect = (0, import_core.forwardRef)((props, ref) => {
39
- const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Select", props);
40
- let {
41
- className,
42
- children,
43
- placeholderInOptions = true,
44
- color,
45
- h,
46
- height,
47
- minH,
48
- minHeight,
49
- options = [],
50
- value,
51
- placeholder,
52
- containerProps,
53
- iconProps,
54
- ...rest
55
- } = (0, import_core.omitThemeProps)(mergedProps);
56
- rest = (0, import_form_control.useFormControlProps)(rest);
57
- const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
58
- const [layoutProps, selectPorps] = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
59
- let computedChildren = [];
60
- if (!children && options.length) {
61
- computedChildren = options.map(({ label, value: value2, ...props2 }, i) => {
62
- if (!(0, import_utils.isArray)(value2)) {
63
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value2, ...props2, children: label }, i);
64
- } else {
65
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: value2.map(
66
- ({ label: label2, value: value3, ...props3 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
67
- ) }, i);
38
+ var NativeSelect = (0, import_core.forwardRef)(
39
+ (props, ref) => {
40
+ const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Select", props);
41
+ let {
42
+ className,
43
+ children,
44
+ placeholderInOptions = true,
45
+ color,
46
+ h,
47
+ height,
48
+ minH,
49
+ minHeight,
50
+ options = [],
51
+ value,
52
+ placeholder,
53
+ containerProps,
54
+ iconProps,
55
+ ...rest
56
+ } = (0, import_core.omitThemeProps)(mergedProps);
57
+ rest = (0, import_form_control.useFormControlProps)(rest);
58
+ const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
59
+ const [layoutProps, selectPorps] = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
60
+ let computedChildren = [];
61
+ if (!children && options.length) {
62
+ computedChildren = options.map(({ label, value: value2, ...props2 }, i) => {
63
+ if (!(0, import_utils.isArray)(value2)) {
64
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value2, ...props2, children: label }, i);
65
+ } else {
66
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: value2.map(
67
+ ({ label: label2, value: value3, ...props3 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
68
+ ) }, i);
69
+ }
70
+ });
71
+ }
72
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
73
+ import_core.ui.div,
74
+ {
75
+ className: "ui-native-select",
76
+ __css: {
77
+ position: "relative",
78
+ w: "100%",
79
+ h: "fit-content",
80
+ color,
81
+ ...styles.container
82
+ },
83
+ ...layoutProps,
84
+ ...containerProps,
85
+ ...formControlProps,
86
+ children: [
87
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
88
+ import_core.ui.select,
89
+ {
90
+ ref,
91
+ className: (0, import_utils.cx)("ui-native-select-field", className),
92
+ value,
93
+ __css: {
94
+ paddingEnd: "2rem",
95
+ h: h != null ? h : height,
96
+ minH: minH != null ? minH : minHeight,
97
+ ...styles.field
98
+ },
99
+ ...selectPorps,
100
+ children: [
101
+ placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
102
+ children != null ? children : computedChildren
103
+ ]
104
+ }
105
+ ),
106
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
107
+ ]
68
108
  }
69
- });
109
+ ) });
70
110
  }
71
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
72
- import_core.ui.div,
73
- {
74
- className: "ui-native-select",
75
- __css: {
76
- position: "relative",
77
- w: "100%",
78
- h: "fit-content",
79
- color,
80
- ...styles.container
81
- },
82
- ...layoutProps,
83
- ...containerProps,
84
- ...formControlProps,
85
- children: [
86
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
87
- import_core.ui.select,
88
- {
89
- ref,
90
- className: (0, import_utils.cx)("ui-native-select-field", className),
91
- value,
92
- __css: { paddingEnd: "2rem", h: h != null ? h : height, minH: minH != null ? minH : minHeight, ...styles.field },
93
- ...selectPorps,
94
- children: [
95
- placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
96
- children != null ? children : computedChildren
97
- ]
98
- }
99
- ),
100
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
101
- ]
102
- }
103
- ) });
104
- });
105
- var NativeSelectIcon = ({ className, children, ...rest }) => {
111
+ );
112
+ var NativeSelectIcon = ({
113
+ className,
114
+ children,
115
+ ...rest
116
+ }) => {
106
117
  const styles = useNativeSelect();
107
118
  const css = {
108
119
  position: "absolute",
@@ -126,10 +137,22 @@ var NativeSelectIcon = ({ className, children, ...rest }) => {
126
137
  }
127
138
  })
128
139
  );
129
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-native-select-icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
140
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
141
+ import_core.ui.div,
142
+ {
143
+ className: (0, import_utils.cx)("ui-native-select-icon", className),
144
+ __css: css,
145
+ ...rest,
146
+ children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {})
147
+ }
148
+ );
130
149
  };
131
- var NativeOptionGroup = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props }));
132
- var NativeOption = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props }));
150
+ var NativeOptionGroup = (0, import_core.forwardRef)(
151
+ (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props })
152
+ );
153
+ var NativeOption = (0, import_core.forwardRef)(
154
+ (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props })
155
+ );
133
156
  // Annotate the CommonJS export names for ESM import in node:
134
157
  0 && (module.exports = {
135
158
  NativeOption,
package/dist/native-select.mjs CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  NativeOption,
3
3
  NativeOptionGroup,
4
4
  NativeSelect
5
- } from "./chunk-XYKDET4Z.mjs";
5
+ } from "./chunk-ZRKOXHIU.mjs";
6
6
  export {
7
7
  NativeOption,
8
8
  NativeOptionGroup,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/native-select",
3
- "version": "0.2.5",
3
+ "version": "0.2.7",
4
4
  "description": "Yamada UI native select component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -35,10 +35,10 @@
35
35
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
36
36
  },
37
37
  "dependencies": {
38
- "@yamada-ui/core": "0.5.0",
39
- "@yamada-ui/utils": "0.1.3",
40
- "@yamada-ui/form-control": "0.2.5",
41
- "@yamada-ui/icon": "0.2.5"
38
+ "@yamada-ui/core": "0.5.2",
39
+ "@yamada-ui/utils": "0.1.4",
40
+ "@yamada-ui/form-control": "0.2.7",
41
+ "@yamada-ui/icon": "0.2.7"
42
42
  },
43
43
  "devDependencies": {
44
44
  "react": "^18.0.0",
package/dist/chunk-XYKDET4Z.mjs DELETED
@@ -1,129 +0,0 @@
1
- // src/native-select.tsx
2
- import {
3
- ui,
4
- forwardRef,
5
- useMultiComponentStyle,
6
- omitThemeProps,
7
- layoutStylesProperties
8
- } from "@yamada-ui/core";
9
- import {
10
- useFormControlProps,
11
- formControlProperties
12
- } from "@yamada-ui/form-control";
13
- import { ChevronIcon } from "@yamada-ui/icon";
14
- import {
15
- createContext,
16
- cx,
17
- splitObject,
18
- getValidChildren,
19
- isValidElement,
20
- isArray,
21
- pickObject
22
- } from "@yamada-ui/utils";
23
- import { cloneElement } from "react";
24
- import { jsx, jsxs } from "react/jsx-runtime";
25
- var [NativeSelectProvider, useNativeSelect] = createContext({
26
- name: "NativeSelectContext",
27
- errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
28
- });
29
- var NativeSelect = forwardRef((props, ref) => {
30
- const [styles, mergedProps] = useMultiComponentStyle("Select", props);
31
- let {
32
- className,
33
- children,
34
- placeholderInOptions = true,
35
- color,
36
- h,
37
- height,
38
- minH,
39
- minHeight,
40
- options = [],
41
- value,
42
- placeholder,
43
- containerProps,
44
- iconProps,
45
- ...rest
46
- } = omitThemeProps(mergedProps);
47
- rest = useFormControlProps(rest);
48
- const formControlProps = pickObject(rest, formControlProperties);
49
- const [layoutProps, selectPorps] = splitObject(rest, layoutStylesProperties);
50
- let computedChildren = [];
51
- if (!children && options.length) {
52
- computedChildren = options.map(({ label, value: value2, ...props2 }, i) => {
53
- if (!isArray(value2)) {
54
- return /* @__PURE__ */ jsx(NativeOption, { value: value2, ...props2, children: label }, i);
55
- } else {
56
- return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: value2.map(
57
- ({ label: label2, value: value3, ...props3 }, i2) => !isArray(value3) ? /* @__PURE__ */ jsx(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
58
- ) }, i);
59
- }
60
- });
61
- }
62
- return /* @__PURE__ */ jsx(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ jsxs(
63
- ui.div,
64
- {
65
- className: "ui-native-select",
66
- __css: {
67
- position: "relative",
68
- w: "100%",
69
- h: "fit-content",
70
- color,
71
- ...styles.container
72
- },
73
- ...layoutProps,
74
- ...containerProps,
75
- ...formControlProps,
76
- children: [
77
- /* @__PURE__ */ jsxs(
78
- ui.select,
79
- {
80
- ref,
81
- className: cx("ui-native-select-field", className),
82
- value,
83
- __css: { paddingEnd: "2rem", h: h != null ? h : height, minH: minH != null ? minH : minHeight, ...styles.field },
84
- ...selectPorps,
85
- children: [
86
- placeholder ? /* @__PURE__ */ jsx(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
87
- children != null ? children : computedChildren
88
- ]
89
- }
90
- ),
91
- /* @__PURE__ */ jsx(NativeSelectIcon, { ...iconProps, ...formControlProps })
92
- ]
93
- }
94
- ) });
95
- });
96
- var NativeSelectIcon = ({ className, children, ...rest }) => {
97
- const styles = useNativeSelect();
98
- const css = {
99
- position: "absolute",
100
- display: "inline-flex",
101
- alignItems: "center",
102
- justifyContent: "center",
103
- pointerEvents: "none",
104
- top: "50%",
105
- transform: "translateY(-50%)",
106
- ...styles.icon
107
- };
108
- const validChildren = getValidChildren(children);
109
- const cloneChildren = validChildren.map(
110
- (child) => cloneElement(child, {
111
- focusable: false,
112
- "aria-hidden": true,
113
- style: {
114
- width: "1em",
115
- height: "1em",
116
- color: "currentColor"
117
- }
118
- })
119
- );
120
- return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-native-select-icon", className), __css: css, ...rest, children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {}) });
121
- };
122
- var NativeOptionGroup = forwardRef((props, ref) => /* @__PURE__ */ jsx(ui.optgroup, { ref, ...props }));
123
- var NativeOption = forwardRef((props, ref) => /* @__PURE__ */ jsx(ui.option, { ref, ...props }));
124
-
125
- export {
126
- NativeSelect,
127
- NativeOptionGroup,
128
- NativeOption
129
- };