@yamada-ui/native-select 1.0.11 → 1.0.12-dev-20240119044050
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-6G3GCCSE.mjs → chunk-HBFJAO54.mjs} +2 -2
- package/dist/{chunk-6G3GCCSE.mjs.map → chunk-HBFJAO54.mjs.map} +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- 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
|
@@ -81,7 +81,7 @@ var NativeSelect = forwardRef(
|
|
|
81
81
|
ref,
|
|
82
82
|
className: cx("ui-select__field", className),
|
|
83
83
|
__css: {
|
|
84
|
-
|
|
84
|
+
pe: "2rem",
|
|
85
85
|
h: h != null ? h : height,
|
|
86
86
|
minH: minH != null ? minH : minHeight,
|
|
87
87
|
...styles.field
|
|
@@ -141,4 +141,4 @@ export {
|
|
|
141
141
|
NativeOptionGroup,
|
|
142
142
|
NativeOption
|
|
143
143
|
};
|
|
144
|
-
//# sourceMappingURL=chunk-
|
|
144
|
+
//# sourceMappingURL=chunk-HBFJAO54.mjs.map
|
|
@@ -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 useMultiComponentStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n useFormControlProps,\n formControlProperties,\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} 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 let {\n className,\n children,\n placeholderInOptions = true,\n color,\n h,\n height,\n minH,\n minHeight,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n rest = useFormControlProps(rest)\n\n const formControlProps = pickObject(rest, formControlProperties)\n const [layoutProps, selectProps] = splitObject(rest, 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
|
|
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 useFormControlProps,\n formControlProperties,\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} 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 let {\n className,\n children,\n placeholderInOptions = true,\n color,\n h,\n height,\n minH,\n minHeight,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n rest = useFormControlProps(rest)\n\n const formControlProps = pickObject(rest, formControlProperties)\n const [layoutProps, selectProps] = splitObject(rest, 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"]}
|
package/dist/index.js
CHANGED
|
@@ -92,7 +92,7 @@ var NativeSelect = (0, import_core.forwardRef)(
|
|
|
92
92
|
ref,
|
|
93
93
|
className: (0, import_utils.cx)("ui-select__field", className),
|
|
94
94
|
__css: {
|
|
95
|
-
|
|
95
|
+
pe: "2rem",
|
|
96
96
|
h: h != null ? h : height,
|
|
97
97
|
minH: minH != null ? minH : minHeight,
|
|
98
98
|
...styles.field
|
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 useFormControlProps,\n formControlProperties,\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} 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 let {\n className,\n children,\n placeholderInOptions = true,\n color,\n h,\n height,\n minH,\n minHeight,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n rest = useFormControlProps(rest)\n\n const formControlProps = pickObject(rest, formControlProperties)\n const [layoutProps, selectProps] = splitObject(rest, 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
|
|
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 useFormControlProps,\n formControlProperties,\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} 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 let {\n className,\n children,\n placeholderInOptions = true,\n color,\n h,\n height,\n minH,\n minHeight,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n rest = useFormControlProps(rest)\n\n const formControlProps = pickObject(rest, formControlProperties)\n const [layoutProps, selectProps] = splitObject(rest, 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"]}
|
package/dist/index.mjs
CHANGED
package/dist/native-select.js
CHANGED
|
@@ -90,7 +90,7 @@ var NativeSelect = (0, import_core.forwardRef)(
|
|
|
90
90
|
ref,
|
|
91
91
|
className: (0, import_utils.cx)("ui-select__field", className),
|
|
92
92
|
__css: {
|
|
93
|
-
|
|
93
|
+
pe: "2rem",
|
|
94
94
|
h: h != null ? h : height,
|
|
95
95
|
minH: minH != null ? minH : minHeight,
|
|
96
96
|
...styles.field
|
|
@@ -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 useMultiComponentStyle,\n omitThemeProps,\n layoutStyleProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n useFormControlProps,\n formControlProperties,\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} 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 let {\n className,\n children,\n placeholderInOptions = true,\n color,\n h,\n height,\n minH,\n minHeight,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n rest = useFormControlProps(rest)\n\n const formControlProps = pickObject(rest, formControlProperties)\n const [layoutProps, selectProps] = splitObject(rest, 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
|
|
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 useFormControlProps,\n formControlProperties,\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} 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 let {\n className,\n children,\n placeholderInOptions = true,\n color,\n h,\n height,\n minH,\n minHeight,\n items = [],\n placeholder,\n containerProps,\n iconProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n rest = useFormControlProps(rest)\n\n const formControlProps = pickObject(rest, formControlProperties)\n const [layoutProps, selectProps] = splitObject(rest, 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"]}
|
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.12-dev-20240119044050",
|
|
4
4
|
"description": "Yamada UI native select component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@yamada-ui/core": "1.
|
|
40
|
-
"@yamada-ui/utils": "1.0.
|
|
41
|
-
"@yamada-ui/form-control": "1.0.
|
|
42
|
-
"@yamada-ui/icon": "1.0.
|
|
39
|
+
"@yamada-ui/core": "1.3.0-dev-20240119044050",
|
|
40
|
+
"@yamada-ui/utils": "1.0.4-dev-20240119044050",
|
|
41
|
+
"@yamada-ui/form-control": "1.0.11-dev-20240119044050",
|
|
42
|
+
"@yamada-ui/icon": "1.0.9-dev-20240119044050"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"react": "^18.0.0",
|