@yamada-ui/native-select 1.0.43 → 1.0.44-dev-20240917033401
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-OUPNHFDQ.mjs → chunk-SWKEBDY3.mjs} +3 -3
- package/dist/chunk-SWKEBDY3.mjs.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/native-select.d.mts +18 -15
- package/dist/native-select.d.ts +18 -15
- package/dist/native-select.js +1 -1
- package/dist/native-select.js.map +1 -1
- package/dist/native-select.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunk-OUPNHFDQ.mjs.map +0 -1
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import {
|
|
5
5
|
ui,
|
|
6
6
|
forwardRef,
|
|
7
|
-
|
|
7
|
+
useComponentMultiStyle,
|
|
8
8
|
omitThemeProps,
|
|
9
9
|
layoutStyleProperties
|
|
10
10
|
} from "@yamada-ui/core";
|
|
@@ -30,7 +30,7 @@ var [NativeSelectProvider, useNativeSelect] = createContext({
|
|
|
30
30
|
});
|
|
31
31
|
var NativeSelect = forwardRef(
|
|
32
32
|
(props, ref) => {
|
|
33
|
-
const [styles, mergedProps] =
|
|
33
|
+
const [styles, mergedProps] = useComponentMultiStyle("NativeSelect", props);
|
|
34
34
|
const {
|
|
35
35
|
className,
|
|
36
36
|
children,
|
|
@@ -142,4 +142,4 @@ export {
|
|
|
142
142
|
NativeOptionGroup,
|
|
143
143
|
NativeOption
|
|
144
144
|
};
|
|
145
|
-
//# sourceMappingURL=chunk-
|
|
145
|
+
//# sourceMappingURL=chunk-SWKEBDY3.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { 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 FC,\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\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\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\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"],"mappings":"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","names":["props","items","label","i"]}
|
package/dist/index.js
CHANGED
|
@@ -40,7 +40,7 @@ var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
|
|
|
40
40
|
});
|
|
41
41
|
var NativeSelect = (0, import_core.forwardRef)(
|
|
42
42
|
(props, ref) => {
|
|
43
|
-
const [styles, mergedProps] = (0, import_core.
|
|
43
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("NativeSelect", props);
|
|
44
44
|
const {
|
|
45
45
|
className,
|
|
46
46
|
children,
|
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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\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 FC,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ntype NativeSelectBaseItem = Omit<\n DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>,\n \"label\" | \"children\" | \"value\"\n> & { label?: string }\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ntype NativeSelectItemWithValue = NativeSelectBaseItem & { value?: Value }\n\ntype NativeSelectItemWithItems = NativeSelectBaseItem & {\n items?: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem = NativeSelectItemWithValue &\n NativeSelectItemWithItems\n\ntype NativeSelectContext = Record<string, CSSUIObject>\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\ntype 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<\"div\">, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type NativeSelectProps = 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] = useMultiComponentStyle(\"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\ntype NativeSelectIconProps = HTMLUIProps<\"div\">\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\nexport type NativeOptionGroupProps = HTMLUIProps<\"optgroup\">\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nexport type NativeOptionProps = 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"],"mappings":"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","names":["props","items","label","i"]}
|
|
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 { 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 FC,\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\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\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\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"],"mappings":"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","names":["props","items","label","i"]}
|
package/dist/index.mjs
CHANGED
package/dist/native-select.d.mts
CHANGED
|
@@ -3,18 +3,19 @@ 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
|
-
|
|
6
|
+
interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
|
|
7
7
|
label?: string;
|
|
8
|
-
}
|
|
8
|
+
}
|
|
9
9
|
type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
|
|
10
|
-
|
|
10
|
+
interface NativeSelectItemWithValue extends NativeSelectBaseItem {
|
|
11
11
|
value?: Value;
|
|
12
|
-
}
|
|
13
|
-
|
|
12
|
+
}
|
|
13
|
+
interface NativeSelectItemWithItems extends NativeSelectBaseItem {
|
|
14
14
|
items?: NativeSelectItemWithValue[];
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
}
|
|
16
|
+
interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
|
|
17
|
+
}
|
|
18
|
+
interface NativeSelectOptions {
|
|
18
19
|
/**
|
|
19
20
|
* If provided, generate options based on items.
|
|
20
21
|
*
|
|
@@ -42,24 +43,26 @@ type NativeSelectOptions = {
|
|
|
42
43
|
/**
|
|
43
44
|
* Props for container element.
|
|
44
45
|
*/
|
|
45
|
-
containerProps?: Omit<HTMLUIProps
|
|
46
|
+
containerProps?: Omit<HTMLUIProps, "children">;
|
|
46
47
|
/**
|
|
47
48
|
* Props for icon element.
|
|
48
49
|
*/
|
|
49
|
-
iconProps?: HTMLUIProps
|
|
50
|
-
}
|
|
51
|
-
|
|
50
|
+
iconProps?: HTMLUIProps;
|
|
51
|
+
}
|
|
52
|
+
interface NativeSelectProps extends Omit<HTMLUIProps<"select">, "size">, ThemeProps<"NativeSelect">, NativeSelectOptions, FormControlOptions {
|
|
53
|
+
}
|
|
52
54
|
/**
|
|
53
55
|
* `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).
|
|
54
56
|
*
|
|
55
57
|
* @see Docs https://yamada-ui.com/components/forms/native-select
|
|
56
58
|
*/
|
|
57
59
|
declare const NativeSelect: _yamada_ui_core.Component<"select", NativeSelectProps>;
|
|
58
|
-
|
|
60
|
+
interface NativeOptionGroupProps extends HTMLUIProps<"optgroup"> {
|
|
61
|
+
}
|
|
59
62
|
declare const NativeOptionGroup: _yamada_ui_core.Component<"optgroup", NativeOptionGroupProps>;
|
|
60
|
-
|
|
63
|
+
interface NativeOptionProps extends Omit<HTMLUIProps<"option">, "children"> {
|
|
61
64
|
children?: string;
|
|
62
|
-
}
|
|
65
|
+
}
|
|
63
66
|
declare const NativeOption: _yamada_ui_core.Component<"option", NativeOptionProps>;
|
|
64
67
|
|
|
65
68
|
export { NativeOption, NativeOptionGroup, type NativeOptionGroupProps, type NativeOptionProps, NativeSelect, type NativeSelectItem, type NativeSelectProps };
|
package/dist/native-select.d.ts
CHANGED
|
@@ -3,18 +3,19 @@ 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
|
-
|
|
6
|
+
interface NativeSelectBaseItem extends Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "label" | "children" | "value"> {
|
|
7
7
|
label?: string;
|
|
8
|
-
}
|
|
8
|
+
}
|
|
9
9
|
type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>["value"];
|
|
10
|
-
|
|
10
|
+
interface NativeSelectItemWithValue extends NativeSelectBaseItem {
|
|
11
11
|
value?: Value;
|
|
12
|
-
}
|
|
13
|
-
|
|
12
|
+
}
|
|
13
|
+
interface NativeSelectItemWithItems extends NativeSelectBaseItem {
|
|
14
14
|
items?: NativeSelectItemWithValue[];
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
}
|
|
16
|
+
interface NativeSelectItem extends NativeSelectItemWithValue, NativeSelectItemWithItems {
|
|
17
|
+
}
|
|
18
|
+
interface NativeSelectOptions {
|
|
18
19
|
/**
|
|
19
20
|
* If provided, generate options based on items.
|
|
20
21
|
*
|
|
@@ -42,24 +43,26 @@ type NativeSelectOptions = {
|
|
|
42
43
|
/**
|
|
43
44
|
* Props for container element.
|
|
44
45
|
*/
|
|
45
|
-
containerProps?: Omit<HTMLUIProps
|
|
46
|
+
containerProps?: Omit<HTMLUIProps, "children">;
|
|
46
47
|
/**
|
|
47
48
|
* Props for icon element.
|
|
48
49
|
*/
|
|
49
|
-
iconProps?: HTMLUIProps
|
|
50
|
-
}
|
|
51
|
-
|
|
50
|
+
iconProps?: HTMLUIProps;
|
|
51
|
+
}
|
|
52
|
+
interface NativeSelectProps extends Omit<HTMLUIProps<"select">, "size">, ThemeProps<"NativeSelect">, NativeSelectOptions, FormControlOptions {
|
|
53
|
+
}
|
|
52
54
|
/**
|
|
53
55
|
* `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).
|
|
54
56
|
*
|
|
55
57
|
* @see Docs https://yamada-ui.com/components/forms/native-select
|
|
56
58
|
*/
|
|
57
59
|
declare const NativeSelect: _yamada_ui_core.Component<"select", NativeSelectProps>;
|
|
58
|
-
|
|
60
|
+
interface NativeOptionGroupProps extends HTMLUIProps<"optgroup"> {
|
|
61
|
+
}
|
|
59
62
|
declare const NativeOptionGroup: _yamada_ui_core.Component<"optgroup", NativeOptionGroupProps>;
|
|
60
|
-
|
|
63
|
+
interface NativeOptionProps extends Omit<HTMLUIProps<"option">, "children"> {
|
|
61
64
|
children?: string;
|
|
62
|
-
}
|
|
65
|
+
}
|
|
63
66
|
declare const NativeOption: _yamada_ui_core.Component<"option", NativeOptionProps>;
|
|
64
67
|
|
|
65
68
|
export { NativeOption, NativeOptionGroup, type NativeOptionGroupProps, type NativeOptionProps, NativeSelect, type NativeSelectItem, type NativeSelectProps };
|
package/dist/native-select.js
CHANGED
|
@@ -38,7 +38,7 @@ var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
|
|
|
38
38
|
});
|
|
39
39
|
var NativeSelect = (0, import_core.forwardRef)(
|
|
40
40
|
(props, ref) => {
|
|
41
|
-
const [styles, mergedProps] = (0, import_core.
|
|
41
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("NativeSelect", props);
|
|
42
42
|
const {
|
|
43
43
|
className,
|
|
44
44
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n
|
|
1
|
+
{"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { 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 FC,\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\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\nexport interface NativeOptionGroupProps extends HTMLUIProps<\"optgroup\"> {}\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\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"],"mappings":"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","names":["props","items","label","i"]}
|
package/dist/native-select.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/native-select",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.44-dev-20240917033401",
|
|
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.14.
|
|
40
|
-
"@yamada-ui/form-control": "2.1.
|
|
41
|
-
"@yamada-ui/icon": "1.1.
|
|
42
|
-
"@yamada-ui/utils": "1.5.
|
|
39
|
+
"@yamada-ui/core": "1.14.1-dev-20240917033401",
|
|
40
|
+
"@yamada-ui/form-control": "2.1.2-dev-20240917033401",
|
|
41
|
+
"@yamada-ui/icon": "1.1.6-dev-20240917033401",
|
|
42
|
+
"@yamada-ui/utils": "1.5.1-dev-20240917033401"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"clean-package": "2.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\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 FC,\n OptionHTMLAttributes,\n ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ntype NativeSelectBaseItem = Omit<\n DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>,\n \"label\" | \"children\" | \"value\"\n> & { label?: string }\n\ntype Value = DetailedHTMLProps<\n OptionHTMLAttributes<HTMLOptionElement>,\n HTMLOptionElement\n>[\"value\"]\n\ntype NativeSelectItemWithValue = NativeSelectBaseItem & { value?: Value }\n\ntype NativeSelectItemWithItems = NativeSelectBaseItem & {\n items?: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem = NativeSelectItemWithValue &\n NativeSelectItemWithItems\n\ntype NativeSelectContext = Record<string, CSSUIObject>\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\ntype 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<\"div\">, \"children\">\n /**\n * Props for icon element.\n */\n iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type NativeSelectProps = 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] = useMultiComponentStyle(\"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\ntype NativeSelectIconProps = HTMLUIProps<\"div\">\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\nexport type NativeOptionGroupProps = HTMLUIProps<\"optgroup\">\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nexport type NativeOptionProps = 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"],"mappings":"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","names":["props","items","label","i"]}
|