@yamada-ui/native-select 1.0.46-next-20241005220055 → 1.0.46-next-20241008193728

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 (12) hide show
  1. package/dist/{chunk-I3S2OE2F.mjs → chunk-XFZK6HRV.mjs} +20 -20
  2. package/dist/chunk-XFZK6HRV.mjs.map +1 -0
  3. package/dist/index.js +14 -14
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/native-select.d.mts +9 -9
  7. package/dist/native-select.d.ts +9 -9
  8. package/dist/native-select.js +14 -14
  9. package/dist/native-select.js.map +1 -1
  10. package/dist/native-select.mjs +1 -1
  11. package/package.json +5 -5
  12. package/dist/chunk-I3S2OE2F.mjs.map +0 -1
package/dist/{chunk-I3S2OE2F.mjs → chunk-XFZK6HRV.mjs} RENAMED
@@ -2,11 +2,11 @@
2
2
 
3
3
  // src/native-select.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentMultiStyle,
6
+ layoutStyleProperties,
8
7
  omitThemeProps,
9
- layoutStyleProperties
8
+ ui,
9
+ useComponentMultiStyle
10
10
  } from "@yamada-ui/core";
11
11
  import {
12
12
  formControlProperties,
@@ -16,11 +16,11 @@ import { ChevronIcon } from "@yamada-ui/icon";
16
16
  import {
17
17
  createContext,
18
18
  cx,
19
- splitObject,
20
19
  getValidChildren,
21
20
  isValidElement,
21
+ omitObject,
22
22
  pickObject,
23
- omitObject
23
+ splitObject
24
24
  } from "@yamada-ui/utils";
25
25
  import { cloneElement } from "react";
26
26
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,18 +34,18 @@ var NativeSelect = forwardRef(
34
34
  const {
35
35
  className,
36
36
  children,
37
- placeholderInOptions = true,
38
37
  color,
39
38
  items = [],
40
39
  placeholder,
40
+ placeholderInOptions = true,
41
41
  containerProps,
42
42
  iconProps,
43
43
  ...rest
44
44
  } = useFormControlProps(omitThemeProps(mergedProps));
45
45
  const {
46
46
  "aria-readonly": _ariaReadonly,
47
- onFocus: _onFocus,
48
47
  onBlur: _onBlur,
48
+ onFocus: _onFocus,
49
49
  ...formControlProps
50
50
  } = pickObject(rest, formControlProperties);
51
51
  const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = splitObject(omitObject(rest, ["aria-readonly"]), layoutStyleProperties);
@@ -56,7 +56,7 @@ var NativeSelect = forwardRef(
56
56
  const { label, value, ...props2 } = item;
57
57
  return /* @__PURE__ */ jsx(NativeOption, { value, ...props2, children: label }, i);
58
58
  } else if ("items" in item) {
59
- const { label, items: items2 = [], ...props2 } = item;
59
+ const { items: items2 = [], label, ...props2 } = item;
60
60
  return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: items2.map(({ label: label2, value, ...props3 }, i2) => /* @__PURE__ */ jsx(NativeOption, { value, ...props3, children: label2 }, i2)) }, i);
61
61
  }
62
62
  }).filter(Boolean);
@@ -66,10 +66,10 @@ var NativeSelect = forwardRef(
66
66
  {
67
67
  className: "ui-select",
68
68
  __css: {
69
+ color,
70
+ h: "fit-content",
69
71
  position: "relative",
70
72
  w: "100%",
71
- h: "fit-content",
72
- color,
73
73
  ...styles.container
74
74
  },
75
75
  ...layoutProps,
@@ -82,14 +82,14 @@ var NativeSelect = forwardRef(
82
82
  ref,
83
83
  className: cx("ui-select__field", className),
84
84
  __css: {
85
- pe: "2rem",
86
85
  h: h != null ? h : height,
87
86
  minH: minH != null ? minH : minHeight,
87
+ pe: "2rem",
88
88
  ...styles.field
89
89
  },
90
90
  ...selectProps,
91
91
  children: [
92
- placeholder ? /* @__PURE__ */ jsx(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
92
+ placeholder ? /* @__PURE__ */ jsx(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
93
93
  children != null ? children : computedChildren
94
94
  ]
95
95
  }
@@ -109,11 +109,11 @@ var NativeSelectIcon = ({
109
109
  }) => {
110
110
  const styles = useNativeSelect();
111
111
  const css = {
112
- position: "absolute",
113
- display: "inline-flex",
114
112
  alignItems: "center",
113
+ display: "inline-flex",
115
114
  justifyContent: "center",
116
115
  pointerEvents: "none",
116
+ position: "absolute",
117
117
  top: "50%",
118
118
  transform: "translateY(-50%)",
119
119
  ...styles.icon
@@ -121,13 +121,13 @@ var NativeSelectIcon = ({
121
121
  const validChildren = getValidChildren(children);
122
122
  const cloneChildren = validChildren.map(
123
123
  (child) => cloneElement(child, {
124
- focusable: false,
125
- "aria-hidden": true,
126
124
  style: {
127
- width: "1em",
125
+ color: "currentColor",
128
126
  height: "1em",
129
- color: "currentColor"
130
- }
127
+ width: "1em"
128
+ },
129
+ "aria-hidden": true,
130
+ focusable: false
131
131
  })
132
132
  );
133
133
  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-select__icon", className), __css: css, ...rest, children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {}) });
@@ -150,4 +150,4 @@ export {
150
150
  NativeOptionGroup,
151
151
  NativeOption
152
152
  };
153
- //# sourceMappingURL=chunk-I3S2OE2F.mjs.map
153
+ //# sourceMappingURL=chunk-XFZK6HRV.mjs.map
package/dist/chunk-XFZK6HRV.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n layoutStyleProperties,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isValidElement,\n omitObject,\n pickObject,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"children\" | \"label\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject | undefined\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n color,\n items = [],\n placeholder,\n placeholderInOptions = true,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { items = [], label, ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n color,\n h: \"fit-content\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n h: h ?? height,\n minH: minH ?? minHeight,\n pe: \"2rem\",\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption hidden={!placeholderInOptions} value=\"\">\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n height: \"1em\",\n width: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
package/dist/index.js CHANGED
@@ -44,18 +44,18 @@ var NativeSelect = (0, import_core.forwardRef)(
44
44
  const {
45
45
  className,
46
46
  children,
47
- placeholderInOptions = true,
48
47
  color,
49
48
  items = [],
50
49
  placeholder,
50
+ placeholderInOptions = true,
51
51
  containerProps,
52
52
  iconProps,
53
53
  ...rest
54
54
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
55
55
  const {
56
56
  "aria-readonly": _ariaReadonly,
57
- onFocus: _onFocus,
58
57
  onBlur: _onBlur,
58
+ onFocus: _onFocus,
59
59
  ...formControlProps
60
60
  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
61
61
  const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = (0, import_utils.splitObject)((0, import_utils.omitObject)(rest, ["aria-readonly"]), import_core.layoutStyleProperties);
@@ -66,7 +66,7 @@ var NativeSelect = (0, import_core.forwardRef)(
66
66
  const { label, value, ...props2 } = item;
67
67
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
68
68
  } else if ("items" in item) {
69
- const { label, items: items2 = [], ...props2 } = item;
69
+ const { items: items2 = [], label, ...props2 } = item;
70
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);
@@ -76,10 +76,10 @@ var NativeSelect = (0, import_core.forwardRef)(
76
76
  {
77
77
  className: "ui-select",
78
78
  __css: {
79
+ color,
80
+ h: "fit-content",
79
81
  position: "relative",
80
82
  w: "100%",
81
- h: "fit-content",
82
- color,
83
83
  ...styles.container
84
84
  },
85
85
  ...layoutProps,
@@ -92,14 +92,14 @@ var NativeSelect = (0, import_core.forwardRef)(
92
92
  ref,
93
93
  className: (0, import_utils.cx)("ui-select__field", className),
94
94
  __css: {
95
- pe: "2rem",
96
95
  h: h != null ? h : height,
97
96
  minH: minH != null ? minH : minHeight,
97
+ pe: "2rem",
98
98
  ...styles.field
99
99
  },
100
100
  ...selectProps,
101
101
  children: [
102
- placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
102
+ placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
103
103
  children != null ? children : computedChildren
104
104
  ]
105
105
  }
@@ -119,11 +119,11 @@ var NativeSelectIcon = ({
119
119
  }) => {
120
120
  const styles = useNativeSelect();
121
121
  const css = {
122
- position: "absolute",
123
- display: "inline-flex",
124
122
  alignItems: "center",
123
+ display: "inline-flex",
125
124
  justifyContent: "center",
126
125
  pointerEvents: "none",
126
+ position: "absolute",
127
127
  top: "50%",
128
128
  transform: "translateY(-50%)",
129
129
  ...styles.icon
@@ -131,13 +131,13 @@ var NativeSelectIcon = ({
131
131
  const validChildren = (0, import_utils.getValidChildren)(children);
132
132
  const cloneChildren = validChildren.map(
133
133
  (child) => (0, import_react.cloneElement)(child, {
134
- focusable: false,
135
- "aria-hidden": true,
136
134
  style: {
137
- width: "1em",
135
+ color: "currentColor",
138
136
  height: "1em",
139
- color: "currentColor"
140
- }
137
+ width: "1em"
138
+ },
139
+ "aria-hidden": true,
140
+ focusable: false
141
141
  })
142
142
  );
143
143
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-select__icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/native-select.tsx"],"sourcesContent":["export { NativeSelect, NativeOptionGroup, NativeOption } from \"./native-select\"\nexport type {\n NativeSelectProps,\n NativeOptionGroupProps,\n NativeOptionProps,\n NativeSelectItem,\n} from \"./native-select\"\n","import type { FC, CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n splitObject,\n getValidChildren,\n isValidElement,\n pickObject,\n omitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"label\" | \"children\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n placeholderInOptions = true,\n color,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n position: \"relative\",\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n pe: \"2rem\",\n h: h ?? height,\n minH: minH ?? minHeight,\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption value=\"\" hidden={!placeholderInOptions}>\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n width: \"1em\",\n height: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/native-select.tsx"],"sourcesContent":["export { NativeOption, NativeOptionGroup, NativeSelect } from \"./native-select\"\nexport type {\n NativeOptionGroupProps,\n NativeOptionProps,\n NativeSelectItem,\n NativeSelectProps,\n} from \"./native-select\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n layoutStyleProperties,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isValidElement,\n omitObject,\n pickObject,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"children\" | \"label\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject | undefined\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n color,\n items = [],\n placeholder,\n placeholderInOptions = true,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { items = [], label, ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n color,\n h: \"fit-content\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n h: h ?? height,\n minH: minH ?? minHeight,\n pe: \"2rem\",\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption hidden={!placeholderInOptions} value=\"\">\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n height: \"1em\",\n width: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  NativeOption,
4
4
  NativeOptionGroup,
5
5
  NativeSelect
6
- } from "./chunk-I3S2OE2F.mjs";
6
+ } from "./chunk-XFZK6HRV.mjs";
7
7
  export {
8
8
  NativeOption,
9
9
  NativeOptionGroup,
package/dist/native-select.d.mts CHANGED
@@ -3,7 +3,7 @@ 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
- interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
6
+ interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "children" | "label" | "value"> {
7
7
  label?: string;
8
8
  }
9
9
  type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
@@ -16,6 +16,14 @@ interface NativeSelectItemWithItems extends NativeSelectBaseItem {
16
16
  interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
17
17
  }
18
18
  interface NativeSelectOptions {
19
+ /**
20
+ * The border color when the input is invalid.
21
+ */
22
+ errorBorderColor?: string;
23
+ /**
24
+ * The border color when the input is focused.
25
+ */
26
+ focusBorderColor?: string;
19
27
  /**
20
28
  * If provided, generate options based on items.
21
29
  *
@@ -32,14 +40,6 @@ interface NativeSelectOptions {
32
40
  * @default true
33
41
  */
34
42
  placeholderInOptions?: boolean;
35
- /**
36
- * The border color when the input is focused.
37
- */
38
- focusBorderColor?: string;
39
- /**
40
- * The border color when the input is invalid.
41
- */
42
- errorBorderColor?: string;
43
43
  /**
44
44
  * Props for container element.
45
45
  */
package/dist/native-select.d.ts CHANGED
@@ -3,7 +3,7 @@ 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
- interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
6
+ interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "children" | "label" | "value"> {
7
7
  label?: string;
8
8
  }
9
9
  type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
@@ -16,6 +16,14 @@ interface NativeSelectItemWithItems extends NativeSelectBaseItem {
16
16
  interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
17
17
  }
18
18
  interface NativeSelectOptions {
19
+ /**
20
+ * The border color when the input is invalid.
21
+ */
22
+ errorBorderColor?: string;
23
+ /**
24
+ * The border color when the input is focused.
25
+ */
26
+ focusBorderColor?: string;
19
27
  /**
20
28
  * If provided, generate options based on items.
21
29
  *
@@ -32,14 +40,6 @@ interface NativeSelectOptions {
32
40
  * @default true
33
41
  */
34
42
  placeholderInOptions?: boolean;
35
- /**
36
- * The border color when the input is focused.
37
- */
38
- focusBorderColor?: string;
39
- /**
40
- * The border color when the input is invalid.
41
- */
42
- errorBorderColor?: string;
43
43
  /**
44
44
  * Props for container element.
45
45
  */
package/dist/native-select.js CHANGED
@@ -42,18 +42,18 @@ var NativeSelect = (0, import_core.forwardRef)(
42
42
  const {
43
43
  className,
44
44
  children,
45
- placeholderInOptions = true,
46
45
  color,
47
46
  items = [],
48
47
  placeholder,
48
+ placeholderInOptions = true,
49
49
  containerProps,
50
50
  iconProps,
51
51
  ...rest
52
52
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
53
53
  const {
54
54
  "aria-readonly": _ariaReadonly,
55
- onFocus: _onFocus,
56
55
  onBlur: _onBlur,
56
+ onFocus: _onFocus,
57
57
  ...formControlProps
58
58
  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
59
59
  const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] = (0, import_utils.splitObject)((0, import_utils.omitObject)(rest, ["aria-readonly"]), import_core.layoutStyleProperties);
@@ -64,7 +64,7 @@ var NativeSelect = (0, import_core.forwardRef)(
64
64
  const { label, value, ...props2 } = item;
65
65
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value, ...props2, children: label }, i);
66
66
  } else if ("items" in item) {
67
- const { label, items: items2 = [], ...props2 } = item;
67
+ const { items: items2 = [], label, ...props2 } = item;
68
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);
@@ -74,10 +74,10 @@ var NativeSelect = (0, import_core.forwardRef)(
74
74
  {
75
75
  className: "ui-select",
76
76
  __css: {
77
+ color,
78
+ h: "fit-content",
77
79
  position: "relative",
78
80
  w: "100%",
79
- h: "fit-content",
80
- color,
81
81
  ...styles.container
82
82
  },
83
83
  ...layoutProps,
@@ -90,14 +90,14 @@ var NativeSelect = (0, import_core.forwardRef)(
90
90
  ref,
91
91
  className: (0, import_utils.cx)("ui-select__field", className),
92
92
  __css: {
93
- pe: "2rem",
94
93
  h: h != null ? h : height,
95
94
  minH: minH != null ? minH : minHeight,
95
+ pe: "2rem",
96
96
  ...styles.field
97
97
  },
98
98
  ...selectProps,
99
99
  children: [
100
- placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
100
+ placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { hidden: !placeholderInOptions, value: "", children: placeholder }) : null,
101
101
  children != null ? children : computedChildren
102
102
  ]
103
103
  }
@@ -117,11 +117,11 @@ var NativeSelectIcon = ({
117
117
  }) => {
118
118
  const styles = useNativeSelect();
119
119
  const css = {
120
- position: "absolute",
121
- display: "inline-flex",
122
120
  alignItems: "center",
121
+ display: "inline-flex",
123
122
  justifyContent: "center",
124
123
  pointerEvents: "none",
124
+ position: "absolute",
125
125
  top: "50%",
126
126
  transform: "translateY(-50%)",
127
127
  ...styles.icon
@@ -129,13 +129,13 @@ var NativeSelectIcon = ({
129
129
  const validChildren = (0, import_utils.getValidChildren)(children);
130
130
  const cloneChildren = validChildren.map(
131
131
  (child) => (0, import_react.cloneElement)(child, {
132
- focusable: false,
133
- "aria-hidden": true,
134
132
  style: {
135
- width: "1em",
133
+ color: "currentColor",
136
134
  height: "1em",
137
- color: "currentColor"
138
- }
135
+ width: "1em"
136
+ },
137
+ "aria-hidden": true,
138
+ focusable: false
139
139
  })
140
140
  );
141
141
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-select__icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
package/dist/native-select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { FC, CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n splitObject,\n getValidChildren,\n isValidElement,\n pickObject,\n omitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"label\" | \"children\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n placeholderInOptions = true,\n color,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n position: \"relative\",\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n pe: \"2rem\",\n h: h ?? height,\n minH: minH ?? minHeight,\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption value=\"\" hidden={!placeholderInOptions}>\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n width: \"1em\",\n height: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
1
+ {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n layoutStyleProperties,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isValidElement,\n omitObject,\n pickObject,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"children\" | \"label\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject | undefined\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n color,\n items = [],\n placeholder,\n placeholderInOptions = true,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { items = [], label, ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n color,\n h: \"fit-content\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n h: h ?? height,\n minH: minH ?? minHeight,\n pe: \"2rem\",\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption hidden={!placeholderInOptions} value=\"\">\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n height: \"1em\",\n width: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}
package/dist/native-select.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  NativeOption,
4
4
  NativeOptionGroup,
5
5
  NativeSelect
6
- } from "./chunk-I3S2OE2F.mjs";
6
+ } from "./chunk-XFZK6HRV.mjs";
7
7
  export {
8
8
  NativeOption,
9
9
  NativeOptionGroup,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/native-select",
3
- "version": "1.0.46-next-20241005220055",
3
+ "version": "1.0.46-next-20241008193728",
4
4
  "description": "Yamada UI native select component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,10 +36,10 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.15.2-next-20241005220055",
40
- "@yamada-ui/form-control": "2.1.4-next-20241005220055",
41
- "@yamada-ui/icon": "1.1.8-next-20241005220055",
42
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-next-20241008193728",
40
+ "@yamada-ui/form-control": "2.1.4-next-20241008193728",
41
+ "@yamada-ui/icon": "1.1.8-next-20241008193728",
42
+ "@yamada-ui/utils": "1.5.3-next-20241008193728"
43
43
  },
44
44
  "devDependencies": {
45
45
  "clean-package": "2.2.0",
package/dist/chunk-I3S2OE2F.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { FC, CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n createContext,\n cx,\n splitObject,\n getValidChildren,\n isValidElement,\n pickObject,\n omitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n DetailedHTMLProps,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ninterface NativeSelectBaseItem\n extends Omit<\n DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n >,\n \"label\" | \"children\" | \"value\"\n > {\n label?: string\n}\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ninterface NativeSelectItemWithValue extends NativeSelectBaseItem {\n value?: Value\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectBaseItem {\n items?: NativeSelectItemWithValue[]\n}\n\nexport interface NativeSelectItem\n extends NativeSelectItemWithValue,\n NativeSelectItemWithItems {}\n\ninterface NativeSelectContext {\n [key: string]: CSSUIObject\n}\n\nconst [NativeSelectProvider, useNativeSelect] =\n createContext<NativeSelectContext>({\n name: \"NativeSelectContext\",\n errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n })\n\ninterface NativeSelectOptions {\n /**\n * If provided, generate options based on items.\n *\n * @default '[]'\n */\n items?: NativeSelectItem[]\n /**\n * The placeholder for select.\n */\n placeholder?: string\n /**\n * If `true`, include placeholders in options.\n *\n * @default true\n */\n placeholderInOptions?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface NativeSelectProps\n extends Omit<HTMLUIProps<\"select\">, \"size\">,\n ThemeProps<\"NativeSelect\">,\n NativeSelectOptions,\n FormControlOptions {}\n\n/**\n * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n *\n * @see Docs https://yamada-ui.com/components/forms/native-select\n */\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NativeSelect\", props)\n const {\n className,\n children,\n placeholderInOptions = true,\n color,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const [{ h, height, minH, minHeight, ...layoutProps }, selectProps] =\n splitObject(omitObject(rest, [\"aria-readonly\"]), layoutStyleProperties)\n\n let computedChildren: ReactElement[] = []\n\n if (!children && items.length) {\n computedChildren = items\n .map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <NativeOptionGroup key={i} label={label} {...props}>\n {items.map(({ label, value, ...props }, i) => (\n <NativeOption key={i} value={value} {...props}>\n {label}\n </NativeOption>\n ))}\n </NativeOptionGroup>\n )\n }\n })\n .filter(Boolean) as ReactElement[]\n }\n\n return (\n <NativeSelectProvider value={styles}>\n <ui.div\n className=\"ui-select\"\n __css={{\n position: \"relative\",\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }}\n {...layoutProps}\n {...containerProps}\n {...formControlProps}\n >\n <ui.select\n ref={ref}\n className={cx(\"ui-select__field\", className)}\n __css={{\n pe: \"2rem\",\n h: h ?? height,\n minH: minH ?? minHeight,\n ...styles.field,\n }}\n {...selectProps}\n >\n {placeholder ? (\n <NativeOption value=\"\" hidden={!placeholderInOptions}>\n {placeholder}\n </NativeOption>\n ) : null}\n {children ?? computedChildren}\n </ui.select>\n\n <NativeSelectIcon {...iconProps} {...formControlProps} />\n </ui.div>\n </NativeSelectProvider>\n )\n },\n)\n\nNativeSelect.displayName = \"NativeSelect\"\nNativeSelect.__ui__ = \"NativeSelect\"\n\ninterface NativeSelectIconProps extends HTMLUIProps {}\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n className,\n children,\n ...rest\n}) => {\n const styles = useNativeSelect()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n width: \"1em\",\n height: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n}\n\nNativeSelectIcon.displayName = \"NativeSelectIcon\"\nNativeSelectIcon.__ui__ = \"NativeSelectIcon\"\n\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nNativeOptionGroup.displayName = \"NativeOptionGroup\"\nNativeOptionGroup.__ui__ = \"NativeOptionGroup\"\n\nexport interface NativeOptionProps\n extends Omit<HTMLUIProps<\"option\">, \"children\"> {\n children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n (props, ref) => <ui.option ref={ref} {...props} />,\n)\n\nNativeOption.displayName = \"NativeOption\"\nNativeOption.__ui__ = \"NativeOption\"\n"],"mappings":"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","names":["props","items","label","i"]}