npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260412140507 → 2.2.1-dev-20260412143439 - Mend

@yamada-ui/react 2.2.1-dev-20260412140507 → 2.2.1-dev-20260412143439

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 (250) hide show

package/dist/cjs/components/autocomplete/autocomplete.cjs CHANGED Viewed

@@ -3,6 +3,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_check_icon = require('../icon/icons/check-icon.cjs');
@@ -107,13 +108,11 @@ const AutocompleteRoot = withProvider((props) => {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverRoot, {
 						...mergedPopoverProps,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
-							className,
-							css,
 							colorScheme,
-							...getRootProps({
-								...groupItemProps,
-								...rootProps
-							}),
+							...require_props.mergeProps({
+								className,
+								css
+							}, getRootProps(groupItemProps), rootProps)(),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteField, {
 								...getFieldProps(varProps),
 								children: fieldChildren
@@ -138,10 +137,7 @@ const AutocompleteRoot = withProvider((props) => {
 		})
 	});
 }, "root")((props) => {
-	return {
-		...require_input.useInputPropsContext(),
-		...props
-	};
+	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
 });
 const AutocompleteField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => {
 	const { getInputProps, inputProps } = useComponentContext();
@@ -162,10 +158,7 @@ const AutocompleteLabel = withContext("span", "label")(void 0, (props) => {
 });
 const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest }) => {
 	const { groupProps } = useComponentContext();
-	const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup({
-		...groupProps,
-		...rest
-	});
+	const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup(require_props.mergeProps(groupProps, rest)());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks_use_combobox_index.ComboboxGroupContext, {
 		value: (0, react.useMemo)(() => ({ getLabelProps }), [getLabelProps]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
@@ -179,10 +172,7 @@ const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest })
 }, "group")();
 const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) => {
 	const { optionProps: { icon, ...optionProps } = {} } = useComponentContext();
-	const { getIndicatorProps, getOptionProps } = require_use_autocomplete.useAutocompleteOption({
-		...optionProps,
-		...rest
-	});
+	const { getIndicatorProps, getOptionProps } = require_use_autocomplete.useAutocompleteOption(require_props.mergeProps(optionProps, rest)());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
 		...getOptionProps(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIndicator, {
@@ -194,8 +184,7 @@ const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) =
 const AutocompleteEmpty = withContext(({ children, icon, ...rest }) => {
 	const { emptyIcon, emptyProps } = useComponentContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
-		...emptyProps,
-		...rest,
+		...require_props.mergeProps(emptyProps, rest)(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIndicator, { children: icon ?? emptyIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_minus_icon.MinusIcon, {}) }), children]
 	});
 }, "empty")();

package/dist/cjs/components/autocomplete/autocomplete.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"autocomplete.cjs","names":["createSlotComponent","autocompleteStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useAutocomplete","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","AutocompleteContext","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","styled","useAutocompleteOption","CheckIcon","MinusIcon"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n UseAutocompleteOptionProps,\n UseAutocompleteProps,\n UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n AutocompleteContext,\n useAutocomplete,\n useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n extends\n Pick<UseAutocompleteReturn, \"getInputProps\" \| \"getSeparatorProps\">,\n Pick<\n AutocompleteRootProps,\n \"emptyIcon\" \| \"emptyProps\" \| \"groupProps\" \| \"inputProps\" \| \"optionProps\"\n > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n extends\n Omit<\n HTMLStyledProps,\n \"defaultValue\" \| \"filter\" \| \"offset\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<AutocompleteStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default true\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the empty element.\n /\n emptyIcon?: ReactNode\n /\n The icon to be used in the autocomplete.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: AutocompleteContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for empty element.\n /\n emptyProps?: AutocompleteEmptyProps\n /\n Props for group element.\n /\n groupProps?: Omit<AutocompleteGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: AutocompleteIconProps\n /\n The props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for option element.\n /\n optionProps?: Omit<AutocompleteOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: AutocompletePropsContext,\n useComponentContext,\n usePropsContext: useAutocompletePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n AutocompleteRootProps,\n AutocompleteStyle,\n ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/\n `Autocomplete` is a component used to display suggestions in response to user text input.\n \n @see https://yamada-ui.com/docs/components/autocomplete\n /\nexport const AutocompleteRoot = withProvider(\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable = true,\n clearIcon = <XIcon />,\n duration,\n emptyIcon,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n emptyProps,\n groupProps,\n iconProps,\n inputProps,\n optionProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: AutocompleteGroup,\n Label: AutocompleteLabel,\n Option: AutocompleteOption,\n })\n }, [itemsProp, children])\n const {\n children: fieldChildren,\n descendants,\n items: computedItems,\n max,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onClose,\n onSelect,\n } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(\n () =>\n createComboboxChildren(computedItems, {\n Empty: AutocompleteEmpty,\n Group: AutocompleteGroup,\n Option: AutocompleteOption,\n }),\n [computedItems],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ onActiveDescendant, onClose, onSelect }),\n [onActiveDescendant, onClose, onSelect],\n )\n const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n const componentContext = useMemo(\n () => ({\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n }),\n [\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n ],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <AutocompleteContext value={autocompleteContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...getRootProps({ ...groupItemProps, ...rootProps })}\n >\n <Popover.Trigger>\n <AutocompleteField {...getFieldProps(varProps)}>\n {fieldChildren}\n </AutocompleteField>\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <AutocompleteIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <AutocompleteIcon\n icon={icon}\n {...getIconProps(iconProps)}\n />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <AutocompleteContent\n {...cast<AutocompleteContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </AutocompleteContent>\n </Popover.Root>\n </ComponentContext>\n </AutocompleteContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return { ...context, ...props }\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n ...rest,\n children: (\n <>\n {children}\n <AutocompleteInput {...getInputProps(inputProps)} />\n </>\n ),\n }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n \"div\",\n \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup({\n ...groupProps,\n ...rest,\n })\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? (\n <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n ) : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n extends UseAutocompleteOptionProps, HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n /\n icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useAutocompleteOption({\n ...optionProps,\n ...rest,\n })\n\n return (\n <styled.div {...getOptionProps()}>\n <AutocompleteIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n */\n icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n ({ children, icon, ...rest }) => {\n const { emptyIcon, emptyProps } = useComponentContext()\n\n return (\n <styled.div {...emptyProps} {...rest}>\n <AutocompleteIndicator>\n {icon ?? emptyIcon ?? <MinusIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n"],"mappings":"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"}
1	+ {"version":3,"file":"autocomplete.cjs","names":["createSlotComponent","autocompleteStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useAutocomplete","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","AutocompleteContext","mergeProps","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","styled","useAutocompleteOption","CheckIcon","MinusIcon"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n UseAutocompleteOptionProps,\n UseAutocompleteProps,\n UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n AutocompleteContext,\n useAutocomplete,\n useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n extends\n Pick<UseAutocompleteReturn, \"getInputProps\" \| \"getSeparatorProps\">,\n Pick<\n AutocompleteRootProps,\n \"emptyIcon\" \| \"emptyProps\" \| \"groupProps\" \| \"inputProps\" \| \"optionProps\"\n > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n extends\n Omit<\n HTMLStyledProps,\n \"defaultValue\" \| \"filter\" \| \"offset\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<AutocompleteStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default true\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the empty element.\n /\n emptyIcon?: ReactNode\n /\n The icon to be used in the autocomplete.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: AutocompleteContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for empty element.\n /\n emptyProps?: AutocompleteEmptyProps\n /\n Props for group element.\n /\n groupProps?: Omit<AutocompleteGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: AutocompleteIconProps\n /\n The props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for option element.\n /\n optionProps?: Omit<AutocompleteOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: AutocompletePropsContext,\n useComponentContext,\n usePropsContext: useAutocompletePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n AutocompleteRootProps,\n AutocompleteStyle,\n ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/\n `Autocomplete` is a component used to display suggestions in response to user text input.\n \n @see https://yamada-ui.com/docs/components/autocomplete\n /\nexport const AutocompleteRoot = withProvider(\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable = true,\n clearIcon = <XIcon />,\n duration,\n emptyIcon,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n emptyProps,\n groupProps,\n iconProps,\n inputProps,\n optionProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: AutocompleteGroup,\n Label: AutocompleteLabel,\n Option: AutocompleteOption,\n })\n }, [itemsProp, children])\n const {\n children: fieldChildren,\n descendants,\n items: computedItems,\n max,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onClose,\n onSelect,\n } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(\n () =>\n createComboboxChildren(computedItems, {\n Empty: AutocompleteEmpty,\n Group: AutocompleteGroup,\n Option: AutocompleteOption,\n }),\n [computedItems],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ onActiveDescendant, onClose, onSelect }),\n [onActiveDescendant, onClose, onSelect],\n )\n const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n const componentContext = useMemo(\n () => ({\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n }),\n [\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n ],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <AutocompleteContext value={autocompleteContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n colorScheme={colorScheme}\n {...mergeProps(\n { className, css },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <Popover.Trigger>\n <AutocompleteField {...getFieldProps(varProps)}>\n {fieldChildren}\n </AutocompleteField>\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <AutocompleteIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <AutocompleteIcon\n icon={icon}\n {...getIconProps(iconProps)}\n />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <AutocompleteContent\n {...cast<AutocompleteContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </AutocompleteContent>\n </Popover.Root>\n </ComponentContext>\n </AutocompleteContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n ...rest,\n children: (\n <>\n {children}\n <AutocompleteInput {...getInputProps(inputProps)} />\n </>\n ),\n }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n \"div\",\n \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup(\n mergeProps(groupProps, rest)(),\n )\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? (\n <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n ) : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n extends UseAutocompleteOptionProps, HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n /\n icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useAutocompleteOption(\n mergeProps(optionProps, rest)(),\n )\n\n return (\n <styled.div {...getOptionProps()}>\n <AutocompleteIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n */\n icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n ({ children, icon, ...rest }) => {\n const { emptyIcon, emptyProps } = useComponentContext()\n\n return (\n <styled.div {...mergeProps(emptyProps, rest)()}>\n <AutocompleteIndicator>\n {icon ?? emptyIcon ?? <MinusIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/select/select.cjs CHANGED Viewed

@@ -3,6 +3,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_check_icon = require('../icon/icons/check-icon.cjs');
@@ -119,13 +120,11 @@ const SelectRoot = withProvider((props) => {
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps() }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
-								className,
-								css,
-								colorScheme,
-								...getRootProps({
-									...groupItemProps,
-									...rootProps
-								}),
+								...require_props.mergeProps({
+									className,
+									css,
+									colorScheme
+								}, getRootProps(groupItemProps), rootProps)(),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectField, { ...getFieldProps(varProps) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
 									clickable: clearable && hasValue,
 									...elementProps,
@@ -149,10 +148,7 @@ const SelectRoot = withProvider((props) => {
 		})
 	});
 }, "root")((props) => {
-	return {
-		...require_input.useInputPropsContext(),
-		...props
-	};
+	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
 });
 const SelectField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => ({
 	...rest,
@@ -170,10 +166,7 @@ const SelectLabel = withContext("span", "label")(void 0, (props) => {
 });
 const SelectGroup = withContext(({ children, label, labelProps, ...rest }) => {
 	const { groupProps } = useComponentContext();
-	const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup({
-		...groupProps,
-		...rest
-	});
+	const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup(require_props.mergeProps(groupProps, rest)());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks_use_combobox_index.ComboboxGroupContext, {
 		value: (0, react.useMemo)(() => ({ getLabelProps }), [getLabelProps]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
@@ -187,10 +180,7 @@ const SelectGroup = withContext(({ children, label, labelProps, ...rest }) => {
 }, "group")();
 const SelectOption = withContext(({ children, icon: iconProp, ...rest }) => {
 	const { optionProps: { icon, ...optionProps } = {} } = useComponentContext();
-	const { getIndicatorProps, getOptionProps } = require_use_select.useSelectOption({
-		...optionProps,
-		...rest
-	});
+	const { getIndicatorProps, getOptionProps } = require_use_select.useSelectOption(require_props.mergeProps(optionProps, rest)());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
 		...getOptionProps(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectIndicator, {

package/dist/cjs/components/select/select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.cjs","names":["createSlotComponent","selectStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useSelect","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","SelectContext","styled","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","useSelectOption","CheckIcon"],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { SelectStyle } from \"./select.style\"\nimport type {\n UseSelectOptionProps,\n UseSelectProps,\n UseSelectReturn,\n} from \"./use-select\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { selectStyle } from \"./select.style\"\nimport { SelectContext, useSelect, useSelectOption } from \"./use-select\"\n\ninterface ComponentContext\n extends\n Pick<UseSelectReturn, \"getSeparatorProps\">,\n Pick<SelectRootProps, \"groupProps\" \| \"optionProps\"> {}\n\nexport interface SelectRootProps<Multiple extends boolean = false>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"offset\" \| \"onChange\" \| \"value\">,\n Merge<UseSelectProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<SelectStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default false\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the select.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: SelectContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for group element.\n /\n groupProps?: Omit<SelectGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: SelectIconProps\n /\n Props for option element.\n /\n optionProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for placeholder element.\n /\n placeholderProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SelectPropsContext,\n useComponentContext,\n usePropsContext: useSelectPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SelectRootProps, SelectStyle, ComponentContext>(\n \"select\",\n selectStyle,\n)\n\nexport { SelectPropsContext, useSelectPropsContext }\n\n/\n `Select` is a component used for allowing a user to choose one option from a list.\n \n @see https://yamada-ui.com/docs/components/select\n /\nexport const SelectRoot = withProvider<\"div\", SelectRootProps>(\n <Multiple extends boolean = false>(props: SelectRootProps<Multiple>) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable,\n clearIcon = <XIcon />,\n duration,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n groupProps,\n iconProps,\n optionProps,\n placeholderProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: SelectGroup,\n Label: SelectLabel,\n Option: SelectOption,\n })\n }, [itemsProp, children])\n const {\n descendants,\n includePlaceholder,\n items: computedItems,\n max,\n placeholder,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onChange,\n onClose,\n onSelect,\n } = useSelect({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(() => {\n if (children)\n return (\n <>\n {placeholder ? (\n <SelectOption\n {...placeholderProps}\n hidden={!includePlaceholder}\n value=\"\"\n >\n {placeholder}\n </SelectOption>\n ) : null}\n\n {children}\n </>\n )\n\n return createComboboxChildren(computedItems, {\n Group: SelectGroup,\n Option: SelectOption,\n })\n }, [\n children,\n computedItems,\n placeholder,\n includePlaceholder,\n placeholderProps,\n ])\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ max, value, onActiveDescendant, onChange, onClose, onSelect }),\n [max, onActiveDescendant, onChange, onClose, onSelect, value],\n )\n const selectContext = useMemo(() => ({ max, value }), [max, value])\n const componentContext = useMemo(\n () => ({ getSeparatorProps, groupProps, optionProps }),\n [getSeparatorProps, groupProps, optionProps],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <SelectContext value={selectContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <styled.input {...getInputProps()} />\n\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...getRootProps({ ...groupItemProps, ...rootProps })}\n >\n <Popover.Trigger>\n <SelectField {...getFieldProps(varProps)} />\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <SelectIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <SelectIcon icon={icon} {...getIconProps(iconProps)} />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <SelectContent\n {...cast<SelectContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </SelectContent>\n </Popover.Root>\n </ComponentContext>\n </SelectContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return { ...context, ...props }\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: SelectRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface SelectFieldProps extends HTMLStyledProps {}\n\nconst SelectField = withContext<\"div\", SelectFieldProps>(\"div\", \"field\")(\n { \"data-group-propagate\": \"\" },\n ({ children, ...rest }) => ({\n ...rest,\n children: <SelectValueText>{children}</SelectValueText>,\n }),\n)\n\ninterface SelectIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst SelectIcon = withContext<\"div\", SelectIconProps>(\"div\", \"icon\")(\n undefined,\n ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n }),\n)\n\ninterface SelectValueTextProps extends HTMLProps<\"span\"> {}\n\nconst SelectValueText = withContext<\"span\", SelectValueTextProps>(\n \"span\",\n \"valueText\",\n)()\n\ninterface SelectContentProps extends Popover.ContentProps {}\n\nconst SelectContent = withContext<\"div\", SelectContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface SelectLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const SelectLabel = withContext<\"span\", SelectLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface SelectGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: SelectLabelProps\n}\n\nexport const SelectGroup = withContext<\"div\", SelectGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup({\n ...groupProps,\n ...rest,\n })\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? <SelectLabel {...labelProps}>{label}</SelectLabel> : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface SelectOptionProps\n extends UseSelectOptionProps, HTMLStyledProps {\n /\n The icon to be used in the select option.\n */\n icon?: ReactNode\n}\n\nexport const SelectOption = withContext<\"div\", SelectOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useSelectOption({\n ...optionProps,\n ...rest,\n })\n\n return (\n <styled.div {...getOptionProps()}>\n <SelectIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </SelectIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface SelectIndicatorProps extends HTMLStyledProps {}\n\nconst SelectIndicator = withContext<\"div\", SelectIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface SelectSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const SelectSeparator = withContext<\"hr\", SelectSeparatorProps>(\n \"hr\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useComponentContext()\n\n return getSeparatorProps(props)\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"select.cjs","names":["createSlotComponent","selectStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useSelect","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","SelectContext","styled","mergeProps","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","useSelectOption","CheckIcon"],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { SelectStyle } from \"./select.style\"\nimport type {\n UseSelectOptionProps,\n UseSelectProps,\n UseSelectReturn,\n} from \"./use-select\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { selectStyle } from \"./select.style\"\nimport { SelectContext, useSelect, useSelectOption } from \"./use-select\"\n\ninterface ComponentContext\n extends\n Pick<UseSelectReturn, \"getSeparatorProps\">,\n Pick<SelectRootProps, \"groupProps\" \| \"optionProps\"> {}\n\nexport interface SelectRootProps<Multiple extends boolean = false>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"offset\" \| \"onChange\" \| \"value\">,\n Merge<UseSelectProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<SelectStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default false\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the select.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: SelectContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for group element.\n /\n groupProps?: Omit<SelectGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: SelectIconProps\n /\n Props for option element.\n /\n optionProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for placeholder element.\n /\n placeholderProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SelectPropsContext,\n useComponentContext,\n usePropsContext: useSelectPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SelectRootProps, SelectStyle, ComponentContext>(\n \"select\",\n selectStyle,\n)\n\nexport { SelectPropsContext, useSelectPropsContext }\n\n/\n `Select` is a component used for allowing a user to choose one option from a list.\n \n @see https://yamada-ui.com/docs/components/select\n /\nexport const SelectRoot = withProvider<\"div\", SelectRootProps>(\n <Multiple extends boolean = false>(props: SelectRootProps<Multiple>) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable,\n clearIcon = <XIcon />,\n duration,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n groupProps,\n iconProps,\n optionProps,\n placeholderProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: SelectGroup,\n Label: SelectLabel,\n Option: SelectOption,\n })\n }, [itemsProp, children])\n const {\n descendants,\n includePlaceholder,\n items: computedItems,\n max,\n placeholder,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onChange,\n onClose,\n onSelect,\n } = useSelect({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(() => {\n if (children)\n return (\n <>\n {placeholder ? (\n <SelectOption\n {...placeholderProps}\n hidden={!includePlaceholder}\n value=\"\"\n >\n {placeholder}\n </SelectOption>\n ) : null}\n\n {children}\n </>\n )\n\n return createComboboxChildren(computedItems, {\n Group: SelectGroup,\n Option: SelectOption,\n })\n }, [\n children,\n computedItems,\n placeholder,\n includePlaceholder,\n placeholderProps,\n ])\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ max, value, onActiveDescendant, onChange, onClose, onSelect }),\n [max, onActiveDescendant, onChange, onClose, onSelect, value],\n )\n const selectContext = useMemo(() => ({ max, value }), [max, value])\n const componentContext = useMemo(\n () => ({ getSeparatorProps, groupProps, optionProps }),\n [getSeparatorProps, groupProps, optionProps],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <SelectContext value={selectContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <styled.input {...getInputProps()} />\n\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <Popover.Trigger>\n <SelectField {...getFieldProps(varProps)} />\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <SelectIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <SelectIcon icon={icon} {...getIconProps(iconProps)} />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <SelectContent\n {...cast<SelectContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </SelectContent>\n </Popover.Root>\n </ComponentContext>\n </SelectContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: SelectRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface SelectFieldProps extends HTMLStyledProps {}\n\nconst SelectField = withContext<\"div\", SelectFieldProps>(\"div\", \"field\")(\n { \"data-group-propagate\": \"\" },\n ({ children, ...rest }) => ({\n ...rest,\n children: <SelectValueText>{children}</SelectValueText>,\n }),\n)\n\ninterface SelectIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst SelectIcon = withContext<\"div\", SelectIconProps>(\"div\", \"icon\")(\n undefined,\n ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n }),\n)\n\ninterface SelectValueTextProps extends HTMLProps<\"span\"> {}\n\nconst SelectValueText = withContext<\"span\", SelectValueTextProps>(\n \"span\",\n \"valueText\",\n)()\n\ninterface SelectContentProps extends Popover.ContentProps {}\n\nconst SelectContent = withContext<\"div\", SelectContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface SelectLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const SelectLabel = withContext<\"span\", SelectLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface SelectGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: SelectLabelProps\n}\n\nexport const SelectGroup = withContext<\"div\", SelectGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup(\n mergeProps(groupProps, rest)(),\n )\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? <SelectLabel {...labelProps}>{label}</SelectLabel> : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface SelectOptionProps\n extends UseSelectOptionProps, HTMLStyledProps {\n /\n The icon to be used in the select option.\n */\n icon?: ReactNode\n}\n\nexport const SelectOption = withContext<\"div\", SelectOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useSelectOption(\n mergeProps(optionProps, rest)(),\n )\n\n return (\n <styled.div {...getOptionProps()}>\n <SelectIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </SelectIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface SelectIndicatorProps extends HTMLStyledProps {}\n\nconst SelectIndicator = withContext<\"div\", SelectIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface SelectSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const SelectSeparator = withContext<\"hr\", SelectSeparatorProps>(\n \"hr\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useComponentContext()\n\n return getSeparatorProps(props)\n})\n"],"mappings":"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"}

package/dist/esm/components/autocomplete/autocomplete.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { CheckIcon } from "../icon/icons/check-icon.js";
@@ -106,13 +107,11 @@ const AutocompleteRoot = withProvider((props) => {
 					children: /* @__PURE__ */ jsxs(PopoverRoot, {
 						...mergedPopoverProps,
 						children: [/* @__PURE__ */ jsxs(InputGroupRoot, {
-							className,
-							css,
 							colorScheme,
-							...getRootProps({
-								...groupItemProps,
-								...rootProps
-							}),
+							...mergeProps({
+								className,
+								css
+							}, getRootProps(groupItemProps), rootProps)(),
 							children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(AutocompleteField, {
 								...getFieldProps(varProps),
 								children: fieldChildren
@@ -137,10 +136,7 @@ const AutocompleteRoot = withProvider((props) => {
 		})
 	});
 }, "root")((props) => {
-	return {
-		...useInputPropsContext(),
-		...props
-	};
+	return mergeProps(useInputPropsContext(), props)();
 });
 const AutocompleteField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => {
 	const { getInputProps, inputProps } = useComponentContext();
@@ -161,10 +157,7 @@ const AutocompleteLabel = withContext("span", "label")(void 0, (props) => {
 });
 const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest }) => {
 	const { groupProps } = useComponentContext();
-	const { getGroupProps, getLabelProps } = useComboboxGroup({
-		...groupProps,
-		...rest
-	});
+	const { getGroupProps, getLabelProps } = useComboboxGroup(mergeProps(groupProps, rest)());
 	return /* @__PURE__ */ jsx(ComboboxGroupContext, {
 		value: useMemo(() => ({ getLabelProps }), [getLabelProps]),
 		children: /* @__PURE__ */ jsxs(styled.div, {
@@ -178,10 +171,7 @@ const AutocompleteGroup = withContext(({ children, label, labelProps, ...rest })
 }, "group")();
 const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) => {
 	const { optionProps: { icon, ...optionProps } = {} } = useComponentContext();
-	const { getIndicatorProps, getOptionProps } = useAutocompleteOption({
-		...optionProps,
-		...rest
-	});
+	const { getIndicatorProps, getOptionProps } = useAutocompleteOption(mergeProps(optionProps, rest)());
 	return /* @__PURE__ */ jsxs(styled.div, {
 		...getOptionProps(),
 		children: [/* @__PURE__ */ jsx(AutocompleteIndicator, {
@@ -193,8 +183,7 @@ const AutocompleteOption = withContext(({ children, icon: iconProp, ...rest }) =
 const AutocompleteEmpty = withContext(({ children, icon, ...rest }) => {
 	const { emptyIcon, emptyProps } = useComponentContext();
 	return /* @__PURE__ */ jsxs(styled.div, {
-		...emptyProps,
-		...rest,
+		...mergeProps(emptyProps, rest)(),
 		children: [/* @__PURE__ */ jsx(AutocompleteIndicator, { children: icon ?? emptyIcon ?? /* @__PURE__ */ jsx(MinusIcon, {}) }), children]
 	});
 }, "empty")();

package/dist/esm/components/autocomplete/autocomplete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"autocomplete.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Popover.Content"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n UseAutocompleteOptionProps,\n UseAutocompleteProps,\n UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n AutocompleteContext,\n useAutocomplete,\n useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n extends\n Pick<UseAutocompleteReturn, \"getInputProps\" \| \"getSeparatorProps\">,\n Pick<\n AutocompleteRootProps,\n \"emptyIcon\" \| \"emptyProps\" \| \"groupProps\" \| \"inputProps\" \| \"optionProps\"\n > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n extends\n Omit<\n HTMLStyledProps,\n \"defaultValue\" \| \"filter\" \| \"offset\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<AutocompleteStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default true\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the empty element.\n /\n emptyIcon?: ReactNode\n /\n The icon to be used in the autocomplete.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: AutocompleteContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for empty element.\n /\n emptyProps?: AutocompleteEmptyProps\n /\n Props for group element.\n /\n groupProps?: Omit<AutocompleteGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: AutocompleteIconProps\n /\n The props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for option element.\n /\n optionProps?: Omit<AutocompleteOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: AutocompletePropsContext,\n useComponentContext,\n usePropsContext: useAutocompletePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n AutocompleteRootProps,\n AutocompleteStyle,\n ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/\n `Autocomplete` is a component used to display suggestions in response to user text input.\n \n @see https://yamada-ui.com/docs/components/autocomplete\n /\nexport const AutocompleteRoot = withProvider(\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable = true,\n clearIcon = <XIcon />,\n duration,\n emptyIcon,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n emptyProps,\n groupProps,\n iconProps,\n inputProps,\n optionProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: AutocompleteGroup,\n Label: AutocompleteLabel,\n Option: AutocompleteOption,\n })\n }, [itemsProp, children])\n const {\n children: fieldChildren,\n descendants,\n items: computedItems,\n max,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onClose,\n onSelect,\n } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(\n () =>\n createComboboxChildren(computedItems, {\n Empty: AutocompleteEmpty,\n Group: AutocompleteGroup,\n Option: AutocompleteOption,\n }),\n [computedItems],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ onActiveDescendant, onClose, onSelect }),\n [onActiveDescendant, onClose, onSelect],\n )\n const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n const componentContext = useMemo(\n () => ({\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n }),\n [\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n ],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <AutocompleteContext value={autocompleteContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...getRootProps({ ...groupItemProps, ...rootProps })}\n >\n <Popover.Trigger>\n <AutocompleteField {...getFieldProps(varProps)}>\n {fieldChildren}\n </AutocompleteField>\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <AutocompleteIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <AutocompleteIcon\n icon={icon}\n {...getIconProps(iconProps)}\n />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <AutocompleteContent\n {...cast<AutocompleteContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </AutocompleteContent>\n </Popover.Root>\n </ComponentContext>\n </AutocompleteContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return { ...context, ...props }\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n ...rest,\n children: (\n <>\n {children}\n <AutocompleteInput {...getInputProps(inputProps)} />\n </>\n ),\n }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n \"div\",\n \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup({\n ...groupProps,\n ...rest,\n })\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? (\n <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n ) : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n extends UseAutocompleteOptionProps, HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n /\n icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useAutocompleteOption({\n ...optionProps,\n ...rest,\n })\n\n return (\n <styled.div {...getOptionProps()}>\n <AutocompleteIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n */\n icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n ({ children, icon, ...rest }) => {\n const { emptyIcon, emptyProps } = useComponentContext()\n\n return (\n <styled.div {...emptyProps} {...rest}>\n <AutocompleteIndicator>\n {icon ?? emptyIcon ?? <MinusIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n"],"mappings":"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"}
1	+ {"version":3,"file":"autocomplete.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Popover.Content"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n UseAutocompleteOptionProps,\n UseAutocompleteProps,\n UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n AutocompleteContext,\n useAutocomplete,\n useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n extends\n Pick<UseAutocompleteReturn, \"getInputProps\" \| \"getSeparatorProps\">,\n Pick<\n AutocompleteRootProps,\n \"emptyIcon\" \| \"emptyProps\" \| \"groupProps\" \| \"inputProps\" \| \"optionProps\"\n > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n extends\n Omit<\n HTMLStyledProps,\n \"defaultValue\" \| \"filter\" \| \"offset\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n Merge<UseAutocompleteProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<AutocompleteStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default true\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the empty element.\n /\n emptyIcon?: ReactNode\n /\n The icon to be used in the autocomplete.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: AutocompleteContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for empty element.\n /\n emptyProps?: AutocompleteEmptyProps\n /\n Props for group element.\n /\n groupProps?: Omit<AutocompleteGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: AutocompleteIconProps\n /\n The props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for option element.\n /\n optionProps?: Omit<AutocompleteOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: AutocompletePropsContext,\n useComponentContext,\n usePropsContext: useAutocompletePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n AutocompleteRootProps,\n AutocompleteStyle,\n ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/\n `Autocomplete` is a component used to display suggestions in response to user text input.\n \n @see https://yamada-ui.com/docs/components/autocomplete\n /\nexport const AutocompleteRoot = withProvider(\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable = true,\n clearIcon = <XIcon />,\n duration,\n emptyIcon,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n emptyProps,\n groupProps,\n iconProps,\n inputProps,\n optionProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: AutocompleteGroup,\n Label: AutocompleteLabel,\n Option: AutocompleteOption,\n })\n }, [itemsProp, children])\n const {\n children: fieldChildren,\n descendants,\n items: computedItems,\n max,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onClose,\n onSelect,\n } = useAutocomplete({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(\n () =>\n createComboboxChildren(computedItems, {\n Empty: AutocompleteEmpty,\n Group: AutocompleteGroup,\n Option: AutocompleteOption,\n }),\n [computedItems],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ onActiveDescendant, onClose, onSelect }),\n [onActiveDescendant, onClose, onSelect],\n )\n const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n const componentContext = useMemo(\n () => ({\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n }),\n [\n emptyIcon,\n emptyProps,\n getInputProps,\n getSeparatorProps,\n groupProps,\n inputProps,\n optionProps,\n ],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <AutocompleteContext value={autocompleteContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n colorScheme={colorScheme}\n {...mergeProps(\n { className, css },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <Popover.Trigger>\n <AutocompleteField {...getFieldProps(varProps)}>\n {fieldChildren}\n </AutocompleteField>\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <AutocompleteIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <AutocompleteIcon\n icon={icon}\n {...getIconProps(iconProps)}\n />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <AutocompleteContent\n {...cast<AutocompleteContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </AutocompleteContent>\n </Popover.Root>\n </ComponentContext>\n </AutocompleteContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: AutocompleteRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n ...rest,\n children: (\n <>\n {children}\n <AutocompleteInput {...getInputProps(inputProps)} />\n </>\n ),\n }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n \"div\",\n \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup(\n mergeProps(groupProps, rest)(),\n )\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? (\n <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n ) : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n extends UseAutocompleteOptionProps, HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n /\n icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useAutocompleteOption(\n mergeProps(optionProps, rest)(),\n )\n\n return (\n <styled.div {...getOptionProps()}>\n <AutocompleteIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n /\n The icon to be used in the autocomplete option.\n */\n icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n ({ children, icon, ...rest }) => {\n const { emptyIcon, emptyProps } = useComponentContext()\n\n return (\n <styled.div {...mergeProps(emptyProps, rest)()}>\n <AutocompleteIndicator>\n {icon ?? emptyIcon ?? <MinusIcon />}\n </AutocompleteIndicator>\n {children}\n </styled.div>\n )\n },\n \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/select/select.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { CheckIcon } from "../icon/icons/check-icon.js";
@@ -118,13 +119,11 @@ const SelectRoot = withProvider((props) => {
 						children: [
 							/* @__PURE__ */ jsx(styled.input, { ...getInputProps() }),
 							/* @__PURE__ */ jsxs(InputGroupRoot, {
-								className,
-								css,
-								colorScheme,
-								...getRootProps({
-									...groupItemProps,
-									...rootProps
-								}),
+								...mergeProps({
+									className,
+									css,
+									colorScheme
+								}, getRootProps(groupItemProps), rootProps)(),
 								children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(SelectField, { ...getFieldProps(varProps) }) }), /* @__PURE__ */ jsx(InputElement, {
 									clickable: clearable && hasValue,
 									...elementProps,
@@ -148,10 +147,7 @@ const SelectRoot = withProvider((props) => {
 		})
 	});
 }, "root")((props) => {
-	return {
-		...useInputPropsContext(),
-		...props
-	};
+	return mergeProps(useInputPropsContext(), props)();
 });
 const SelectField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => ({
 	...rest,
@@ -169,10 +165,7 @@ const SelectLabel = withContext("span", "label")(void 0, (props) => {
 });
 const SelectGroup = withContext(({ children, label, labelProps, ...rest }) => {
 	const { groupProps } = useComponentContext();
-	const { getGroupProps, getLabelProps } = useComboboxGroup({
-		...groupProps,
-		...rest
-	});
+	const { getGroupProps, getLabelProps } = useComboboxGroup(mergeProps(groupProps, rest)());
 	return /* @__PURE__ */ jsx(ComboboxGroupContext, {
 		value: useMemo(() => ({ getLabelProps }), [getLabelProps]),
 		children: /* @__PURE__ */ jsxs(styled.div, {
@@ -186,10 +179,7 @@ const SelectGroup = withContext(({ children, label, labelProps, ...rest }) => {
 }, "group")();
 const SelectOption = withContext(({ children, icon: iconProp, ...rest }) => {
 	const { optionProps: { icon, ...optionProps } = {} } = useComponentContext();
-	const { getIndicatorProps, getOptionProps } = useSelectOption({
-		...optionProps,
-		...rest
-	});
+	const { getIndicatorProps, getOptionProps } = useSelectOption(mergeProps(optionProps, rest)());
 	return /* @__PURE__ */ jsxs(styled.div, {
 		...getOptionProps(),
 		children: [/* @__PURE__ */ jsx(SelectIndicator, {

package/dist/esm/components/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Popover.Content"],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { SelectStyle } from \"./select.style\"\nimport type {\n UseSelectOptionProps,\n UseSelectProps,\n UseSelectReturn,\n} from \"./use-select\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { selectStyle } from \"./select.style\"\nimport { SelectContext, useSelect, useSelectOption } from \"./use-select\"\n\ninterface ComponentContext\n extends\n Pick<UseSelectReturn, \"getSeparatorProps\">,\n Pick<SelectRootProps, \"groupProps\" \| \"optionProps\"> {}\n\nexport interface SelectRootProps<Multiple extends boolean = false>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"offset\" \| \"onChange\" \| \"value\">,\n Merge<UseSelectProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<SelectStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default false\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the select.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: SelectContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for group element.\n /\n groupProps?: Omit<SelectGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: SelectIconProps\n /\n Props for option element.\n /\n optionProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for placeholder element.\n /\n placeholderProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SelectPropsContext,\n useComponentContext,\n usePropsContext: useSelectPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SelectRootProps, SelectStyle, ComponentContext>(\n \"select\",\n selectStyle,\n)\n\nexport { SelectPropsContext, useSelectPropsContext }\n\n/\n `Select` is a component used for allowing a user to choose one option from a list.\n \n @see https://yamada-ui.com/docs/components/select\n /\nexport const SelectRoot = withProvider<\"div\", SelectRootProps>(\n <Multiple extends boolean = false>(props: SelectRootProps<Multiple>) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable,\n clearIcon = <XIcon />,\n duration,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n groupProps,\n iconProps,\n optionProps,\n placeholderProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: SelectGroup,\n Label: SelectLabel,\n Option: SelectOption,\n })\n }, [itemsProp, children])\n const {\n descendants,\n includePlaceholder,\n items: computedItems,\n max,\n placeholder,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onChange,\n onClose,\n onSelect,\n } = useSelect({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(() => {\n if (children)\n return (\n <>\n {placeholder ? (\n <SelectOption\n {...placeholderProps}\n hidden={!includePlaceholder}\n value=\"\"\n >\n {placeholder}\n </SelectOption>\n ) : null}\n\n {children}\n </>\n )\n\n return createComboboxChildren(computedItems, {\n Group: SelectGroup,\n Option: SelectOption,\n })\n }, [\n children,\n computedItems,\n placeholder,\n includePlaceholder,\n placeholderProps,\n ])\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ max, value, onActiveDescendant, onChange, onClose, onSelect }),\n [max, onActiveDescendant, onChange, onClose, onSelect, value],\n )\n const selectContext = useMemo(() => ({ max, value }), [max, value])\n const componentContext = useMemo(\n () => ({ getSeparatorProps, groupProps, optionProps }),\n [getSeparatorProps, groupProps, optionProps],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <SelectContext value={selectContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <styled.input {...getInputProps()} />\n\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...getRootProps({ ...groupItemProps, ...rootProps })}\n >\n <Popover.Trigger>\n <SelectField {...getFieldProps(varProps)} />\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <SelectIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <SelectIcon icon={icon} {...getIconProps(iconProps)} />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <SelectContent\n {...cast<SelectContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </SelectContent>\n </Popover.Root>\n </ComponentContext>\n </SelectContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return { ...context, ...props }\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: SelectRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface SelectFieldProps extends HTMLStyledProps {}\n\nconst SelectField = withContext<\"div\", SelectFieldProps>(\"div\", \"field\")(\n { \"data-group-propagate\": \"\" },\n ({ children, ...rest }) => ({\n ...rest,\n children: <SelectValueText>{children}</SelectValueText>,\n }),\n)\n\ninterface SelectIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst SelectIcon = withContext<\"div\", SelectIconProps>(\"div\", \"icon\")(\n undefined,\n ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n }),\n)\n\ninterface SelectValueTextProps extends HTMLProps<\"span\"> {}\n\nconst SelectValueText = withContext<\"span\", SelectValueTextProps>(\n \"span\",\n \"valueText\",\n)()\n\ninterface SelectContentProps extends Popover.ContentProps {}\n\nconst SelectContent = withContext<\"div\", SelectContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface SelectLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const SelectLabel = withContext<\"span\", SelectLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface SelectGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: SelectLabelProps\n}\n\nexport const SelectGroup = withContext<\"div\", SelectGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup({\n ...groupProps,\n ...rest,\n })\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? <SelectLabel {...labelProps}>{label}</SelectLabel> : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface SelectOptionProps\n extends UseSelectOptionProps, HTMLStyledProps {\n /\n The icon to be used in the select option.\n */\n icon?: ReactNode\n}\n\nexport const SelectOption = withContext<\"div\", SelectOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useSelectOption({\n ...optionProps,\n ...rest,\n })\n\n return (\n <styled.div {...getOptionProps()}>\n <SelectIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </SelectIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface SelectIndicatorProps extends HTMLStyledProps {}\n\nconst SelectIndicator = withContext<\"div\", SelectIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface SelectSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const SelectSeparator = withContext<\"hr\", SelectSeparatorProps>(\n \"hr\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useComponentContext()\n\n return getSeparatorProps(props)\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"select.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Popover.Content"],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type {\n ComboboxItem,\n UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { SelectStyle } from \"./select.style\"\nimport type {\n UseSelectOptionProps,\n UseSelectProps,\n UseSelectReturn,\n} from \"./use-select\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n ComboboxContext,\n ComboboxDescendantsContext,\n ComboboxGroupContext,\n createComboboxChildren,\n createComboboxItem,\n useComboboxGroup,\n useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { selectStyle } from \"./select.style\"\nimport { SelectContext, useSelect, useSelectOption } from \"./use-select\"\n\ninterface ComponentContext\n extends\n Pick<UseSelectReturn, \"getSeparatorProps\">,\n Pick<SelectRootProps, \"groupProps\" \| \"optionProps\"> {}\n\nexport interface SelectRootProps<Multiple extends boolean = false>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"offset\" \| \"onChange\" \| \"value\">,\n Merge<UseSelectProps<Multiple>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<SelectStyle>,\n UseInputBorderProps {\n /*\n If `true`, display the clear icon.\n \n @default false\n /\n clearable?: boolean\n /\n The icon to be used in the clear button.\n /\n clearIcon?: ReactNode\n /\n The icon to be used in the select.\n /\n icon?: ReactNode\n /\n Props for content element.\n /\n contentProps?: SelectContentProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for group element.\n /\n groupProps?: Omit<SelectGroupProps, \"children\" \| \"label\">\n /\n Props for icon element.\n /\n iconProps?: SelectIconProps\n /\n Props for option element.\n /\n optionProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for placeholder element.\n /\n placeholderProps?: Omit<SelectOptionProps, \"children\" \| \"value\">\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SelectPropsContext,\n useComponentContext,\n usePropsContext: useSelectPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SelectRootProps, SelectStyle, ComponentContext>(\n \"select\",\n selectStyle,\n)\n\nexport { SelectPropsContext, useSelectPropsContext }\n\n/\n `Select` is a component used for allowing a user to choose one option from a list.\n \n @see https://yamada-ui.com/docs/components/select\n /\nexport const SelectRoot = withProvider<\"div\", SelectRootProps>(\n <Multiple extends boolean = false>(props: SelectRootProps<Multiple>) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n animationScheme = \"block-start\",\n children,\n clearable,\n clearIcon = <XIcon />,\n duration,\n errorBorderColor,\n focusBorderColor,\n icon,\n items: itemsProp,\n contentProps,\n elementProps,\n groupProps,\n iconProps,\n optionProps,\n placeholderProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const items = useMemo<ComboboxItem[]>(() => {\n if (itemsProp) return itemsProp\n\n return createComboboxItem(children, {\n Group: SelectGroup,\n Label: SelectLabel,\n Option: SelectOption,\n })\n }, [itemsProp, children])\n const {\n descendants,\n includePlaceholder,\n items: computedItems,\n max,\n placeholder,\n value,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onChange,\n onClose,\n onSelect,\n } = useSelect({ items, ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const computedChildren = useMemo(() => {\n if (children)\n return (\n <>\n {placeholder ? (\n <SelectOption\n {...placeholderProps}\n hidden={!includePlaceholder}\n value=\"\"\n >\n {placeholder}\n </SelectOption>\n ) : null}\n\n {children}\n </>\n )\n\n return createComboboxChildren(computedItems, {\n Group: SelectGroup,\n Option: SelectOption,\n })\n }, [\n children,\n computedItems,\n placeholder,\n includePlaceholder,\n placeholderProps,\n ])\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const comboboxContext = useMemo(\n () => ({ max, value, onActiveDescendant, onChange, onClose, onSelect }),\n [max, onActiveDescendant, onChange, onClose, onSelect, value],\n )\n const selectContext = useMemo(() => ({ max, value }), [max, value])\n const componentContext = useMemo(\n () => ({ getSeparatorProps, groupProps, optionProps }),\n [getSeparatorProps, groupProps, optionProps],\n )\n const hasValue = isArray(value) ? !!value.length : !!value\n\n return (\n <ComboboxDescendantsContext value={descendants}>\n <ComboboxContext value={comboboxContext}>\n <SelectContext value={selectContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <styled.input {...getInputProps()} />\n\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <Popover.Trigger>\n <SelectField {...getFieldProps(varProps)} />\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <SelectIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <SelectIcon icon={icon} {...getIconProps(iconProps)} />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <SelectContent\n {...cast<SelectContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n {computedChildren}\n </SelectContent>\n </Popover.Root>\n </ComponentContext>\n </SelectContext>\n </ComboboxContext>\n </ComboboxDescendantsContext>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n}) as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: SelectRootProps<Multiple>,\n ): ReactElement\n}>\n\ninterface SelectFieldProps extends HTMLStyledProps {}\n\nconst SelectField = withContext<\"div\", SelectFieldProps>(\"div\", \"field\")(\n { \"data-group-propagate\": \"\" },\n ({ children, ...rest }) => ({\n ...rest,\n children: <SelectValueText>{children}</SelectValueText>,\n }),\n)\n\ninterface SelectIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst SelectIcon = withContext<\"div\", SelectIconProps>(\"div\", \"icon\")(\n undefined,\n ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n }),\n)\n\ninterface SelectValueTextProps extends HTMLProps<\"span\"> {}\n\nconst SelectValueText = withContext<\"span\", SelectValueTextProps>(\n \"span\",\n \"valueText\",\n)()\n\ninterface SelectContentProps extends Popover.ContentProps {}\n\nconst SelectContent = withContext<\"div\", SelectContentProps>(\n Popover.Content,\n \"content\",\n)()\n\nexport interface SelectLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const SelectLabel = withContext<\"span\", SelectLabelProps>(\n \"span\",\n \"label\",\n)(undefined, (props) => {\n const { getLabelProps } = useComboboxGroupContext()\n\n return getLabelProps(props)\n})\n\nexport interface SelectGroupProps\n extends UseComboboxGroupProps, HTMLStyledProps {\n /\n The label of the group.\n /\n label?: ReactNode\n /\n Props for the label component.\n /\n labelProps?: SelectLabelProps\n}\n\nexport const SelectGroup = withContext<\"div\", SelectGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { groupProps } = useComponentContext()\n const { getGroupProps, getLabelProps } = useComboboxGroup(\n mergeProps(groupProps, rest)(),\n )\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <ComboboxGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? <SelectLabel {...labelProps}>{label}</SelectLabel> : null}\n {children}\n </styled.div>\n </ComboboxGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface SelectOptionProps\n extends UseSelectOptionProps, HTMLStyledProps {\n /\n The icon to be used in the select option.\n */\n icon?: ReactNode\n}\n\nexport const SelectOption = withContext<\"div\", SelectOptionProps>(\n ({ children, icon: iconProp, ...rest }) => {\n const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n const { getIndicatorProps, getOptionProps } = useSelectOption(\n mergeProps(optionProps, rest)(),\n )\n\n return (\n <styled.div {...getOptionProps()}>\n <SelectIndicator {...getIndicatorProps()}>\n {iconProp ?? icon ?? <CheckIcon />}\n </SelectIndicator>\n {children}\n </styled.div>\n )\n },\n \"option\",\n)()\n\ninterface SelectIndicatorProps extends HTMLStyledProps {}\n\nconst SelectIndicator = withContext<\"div\", SelectIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface SelectSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const SelectSeparator = withContext<\"hr\", SelectSeparatorProps>(\n \"hr\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useComponentContext()\n\n return getSeparatorProps(props)\n})\n"],"mappings":"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"}