npm - @yamada-ui/react - Versions diffs - 2.2.0-next-20260409094221 → 2.2.0 - Mend

@yamada-ui/react 2.2.0-next-20260409094221 → 2.2.0

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

package/dist/cjs/components/sidebar/use-sidebar.cjs CHANGED Viewed

@@ -183,6 +183,8 @@ const useSidebarItem = ({ asyncChildren, children: childrenProp, defaultOpen, di
 			onGroupChildren().then(() => {
 				onOpen();
 				onExpandedChange(value);
+			}).catch(() => {
+				initialAsyncRef.current = false;
 			});
 		} else {
 			onOpen();
@@ -217,11 +219,13 @@ const useSidebarItem = ({ asyncChildren, children: childrenProp, defaultOpen, di
 		onGroupClose,
 		onGroupOpen
 	]);
-	require_effect.useUpdateEffect(() => {
+	require_effect.useSafeLayoutEffect(() => {
 		if (defaultExpanded) if (async && !initialAsyncRef.current) {
 			initialAsyncRef.current = true;
 			onGroupChildren().then(() => {
 				onOpen();
+			}).catch(() => {
+				initialAsyncRef.current = false;
 			});
 		} else onOpen();
 		else onClose();
@@ -266,10 +270,11 @@ const useSidebarItem = ({ asyncChildren, children: childrenProp, defaultOpen, di
 	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
 		"aria-controls": contentId,
 		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+		"aria-expanded": groupOpen,
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
 		"data-expanded": (0, require_utils_index.utils_exports.dataAttr)(groupOpen),
 		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
-		tabIndex: open && expanded ? 0 : -1,
+		tabIndex: open && expanded && !disabled ? 0 : -1,
 		...props,
 		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onGroupToggle)
 	}), [
@@ -287,7 +292,7 @@ const useSidebarItem = ({ asyncChildren, children: childrenProp, defaultOpen, di
 		target: external ? "_blank" : void 0,
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
 		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
-		tabIndex: open && expanded ? 0 : -1,
+		tabIndex: open && expanded && !disabled ? 0 : -1,
 		...props,
 		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, (ev) => {
 			if (!disabled) return;

package/dist/cjs/components/sidebar/use-sidebar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-sidebar.cjs","names":["createDescendants","createContext","useI18n","useDisclosure","useControllableState","getRootProps: PropGetter<\"div\">","getTriggerProps: PropGetter<\"button\">","getSidePanelProps: PropGetter<\"aside\">","getHeaderProps: PropGetter<\"header\">","getFooterProps: PropGetter<\"footer\">","useEnvironment","getRootProps: PropGetter<\"li\">","mergeRefs","getLabelProps: PropGetter<\"span\">","useIds","Children","branchOpen: boolean[]","useAsyncCallback","getItemProps: PropGetter<\"li\">","getIndicatorProps: PropGetter<\"svg\">","getLinkProps: PropGetter<\"a\">"],"sources":["../../../../src/components/sidebar/use-sidebar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode, RefObject } from \"react\"\nimport { Children, useCallback, useId, useRef, useState } from \"react\"\nimport { type HTMLProps, type PropGetter, useEnvironment } from \"../../core\"\nimport { useAsyncCallback } from \"../../hooks/use-async-callback\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n useDisclosure,\n type UseDisclosureProps,\n} from \"../../hooks/use-disclosure\"\nimport { useWindowEvent } from \"../../hooks/use-window-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n assignRef,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n setAttribute,\n useIds,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\n\nexport interface SidebarControl {\n collapse: () => void\n expand: () => void\n}\n\ninterface SidebarDescendantProps {\n expanded: boolean\n group: boolean\n id: string\n value: string\n}\n\nconst {\n DescendantsContext: SidebarDescendantsContext,\n useDescendant: useSidebarDescendant,\n useDescendants: useSidebarDescendants,\n} = createDescendants<HTMLElement, SidebarDescendantProps>()\n\nexport {\n SidebarDescendantsContext,\n useSidebarDescendant,\n useSidebarDescendants,\n}\n\ninterface SidebarContext extends Pick<\n UseSidebarReturn,\n \| \"expandedValue\"\n \| \"mobile\"\n \| \"onClose\"\n \| \"onExpandedChange\"\n \| \"onOpen\"\n \| \"onSelectedChange\"\n \| \"onToggle\"\n \| \"open\"\n \| \"selectedValue\"\n> {}\n\nconst [SidebarContext, useSidebarContext] = createContext<SidebarContext>({\n name: \"SidebarContext\",\n})\n\nexport { SidebarContext, useSidebarContext }\n\ninterface SidebarItemContext extends Pick<\n UseSidebarItemReturn,\n \"branchOpen\" \| \"groupOpen\"\n> {}\n\nconst [SidebarItemContext, useSidebarItemContext] =\n createContext<SidebarItemContext>({\n name: \"SidebarItemContext\",\n strict: false,\n })\n\nexport { SidebarItemContext, useSidebarItemContext }\n\nexport interface UseSidebarProps extends HTMLProps<\"div\"> {\n /*\n Ref of the sidebar callbacks.\n /\n controlRef?: RefObject<null \| SidebarControl>\n /\n The initial expanded value of the sidebar.\n /\n defaultExpandedValue?: string[]\n /\n The initial selected value of the sidebar.\n /\n defaultSelectedValue?: string\n /\n The disclosure props for the desktop and mobile.\n /\n disclosure?: {\n desktop?: Omit<UseDisclosureProps, \"timing\">\n mobile?: Omit<UseDisclosureProps, \"timing\">\n }\n /\n The expanded value of the sidebar.\n /\n expandedValue?: string[]\n /\n If `true`, the trigger click event will be switched to mobile.\n \n @default false\n /\n mobile?: boolean\n /\n The selected value of the sidebar.\n /\n selectedValue?: string\n /\n The callback invoked when expanded value changes.\n /\n onExpandedChange?: (value: string[]) => void\n /\n The callback invoked when selected value changes.\n /\n onSelectedChange?: (value: string) => void\n}\n\nexport const useSidebar = ({\n controlRef,\n defaultExpandedValue = [],\n defaultSelectedValue,\n disclosure,\n expandedValue: expandedValueProp,\n mobile = false,\n selectedValue: selectedValueProp,\n onExpandedChange: onExpandedChangeProp,\n onSelectedChange: onSelectedChangeProp,\n ...rest\n}: UseSidebarProps = {}) => {\n const { t } = useI18n(\"sidebar\")\n const desktopDisclosure = useDisclosure({\n defaultOpen: disclosure?.desktop?.defaultOpen ?? true,\n open: disclosure?.desktop?.open,\n onClose: disclosure?.desktop?.onClose,\n onOpen: disclosure?.desktop?.onOpen,\n })\n const mobileDisclosure = useDisclosure({\n defaultOpen: disclosure?.mobile?.defaultOpen ?? false,\n open: disclosure?.mobile?.open,\n onClose: disclosure?.mobile?.onClose,\n onOpen: disclosure?.mobile?.onOpen,\n })\n const [selectedValue, setSelectedValue] = useControllableState({\n defaultValue: defaultSelectedValue,\n value: selectedValueProp,\n onChange: onSelectedChangeProp,\n })\n const [expandedValue, setExpandedValue] = useControllableState({\n defaultValue: defaultExpandedValue,\n value: expandedValueProp,\n onChange: onExpandedChangeProp,\n })\n const descendants = useSidebarDescendants()\n const open = mobile ? mobileDisclosure.open : desktopDisclosure.open\n const onOpen = mobile ? mobileDisclosure.onOpen : desktopDisclosure.onOpen\n const onClose = mobile ? mobileDisclosure.onClose : desktopDisclosure.onClose\n const onToggle = mobile\n ? mobileDisclosure.onToggle\n : desktopDisclosure.onToggle\n\n const onSelectedChange = useCallback(\n (value: string) => {\n setSelectedValue(value)\n },\n [setSelectedValue],\n )\n\n const onExpandAll = useCallback(() => {\n const values = descendants.enabledValues()\n const group = values.filter(({ group }) => group)\n const value = group.map(({ value }) => value)\n\n setExpandedValue(value)\n }, [descendants, setExpandedValue])\n\n const onCollapseAll = useCallback(() => {\n setExpandedValue([])\n }, [setExpandedValue])\n\n const onExpandedChange = useCallback(\n (value: string) => {\n setExpandedValue((prev) => {\n if (prev.includes(value)) {\n return prev.filter((prevValue) => prevValue !== value)\n } else {\n return [...prev, value]\n }\n })\n },\n [setExpandedValue],\n )\n\n assignRef(controlRef, { collapse: onCollapseAll, expand: onExpandAll })\n\n useWindowEvent(\"keydown\", (ev) => {\n if (ev.key !== \"b\") return\n if (!ev.metaKey && !ev.ctrlKey) return\n\n ev.preventDefault()\n\n desktopDisclosure.onToggle()\n })\n\n const getRootProps: PropGetter<\"div\"> = useCallback(\n (props = {}) => ({\n \"data-expanded\": dataAttr(open),\n ...rest,\n ...props,\n }),\n [open, rest],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-expanded\": open,\n \"aria-label\": t(open ? \"Close sidebar\" : \"Open sidebar\"),\n ...props,\n onClick: handlerAll(props.onClick, onToggle),\n }),\n [open, t, onToggle],\n )\n\n const getSidePanelProps: PropGetter<\"aside\"> = useCallback(\n (props = {}) => ({ \"data-expanded\": dataAttr(open), ...props }),\n [open],\n )\n\n const getHeaderProps: PropGetter<\"header\"> = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n const getFooterProps: PropGetter<\"footer\"> = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n const getContentProps: PropGetter<\"ul\"> = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n return {\n descendants,\n expandedValue,\n mobile,\n open,\n selectedValue,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getRootProps,\n getSidePanelProps,\n getTriggerProps,\n onClose,\n onExpandedChange,\n onOpen,\n onSelectedChange,\n onToggle,\n }\n}\n\nexport type UseSidebarReturn = ReturnType<typeof useSidebar>\n\nexport interface UseSidebarGroupProps extends HTMLProps<\"li\"> {}\n\nexport const useSidebarGroup = ({ ...rest }: UseSidebarGroupProps = {}) => {\n const { getDocument } = useEnvironment()\n const rootRef = useRef<HTMLLIElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const labelId = useId()\n\n useSafeLayoutEffect(() => {\n const el = getDocument()?.getElementById(labelId)\n\n if (!el) return\n\n if (rootRef.current)\n setAttribute(rootRef.current, \"aria-labelledby\", labelId)\n if (contentRef.current)\n setAttribute(contentRef.current, \"aria-labelledby\", labelId)\n }, [])\n\n const getRootProps: PropGetter<\"li\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ref: mergeRefs(ref, rootRef),\n ...rest,\n ...props,\n }),\n [rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) => ({ id: labelId, ...props }),\n [labelId],\n )\n\n const getContentProps: PropGetter<\"div\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ref: mergeRefs(ref, contentRef),\n ...props,\n }),\n [],\n )\n\n return { getContentProps, getLabelProps, getRootProps }\n}\n\nexport type UseSidebarGroupReturn = ReturnType<typeof useSidebarGroup>\n\nexport interface UseSidebarItemProps\n extends HTMLProps<\"li\">, Omit<UseDisclosureProps, \"timing\"> {\n /\n The value of the item.\n /\n value: string\n /\n If `true`, the tree item will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, the link will open in new tab.\n \n @default false\n /\n external?: boolean\n /\n If provided, the sidebar item will be rendered as an async sidebar item.\n */\n asyncChildren?: () => Promise<ReactNode>\n}\n\nexport const useSidebarItem = ({\n asyncChildren,\n children: childrenProp,\n defaultOpen,\n disabled = false,\n external,\n open: openProp,\n value,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n}: UseSidebarItemProps) => {\n const context = useSidebarItemContext()\n const {\n expandedValue,\n open,\n selectedValue,\n onExpandedChange,\n onSelectedChange,\n } = useSidebarContext()\n const [children, setChildren] = useState<ReactNode>(childrenProp)\n const [itemId, labelId, contentId] = useIds()\n const initialAsyncRef = useRef(false)\n const async = !!asyncChildren\n const group = async \|\| Children.count(children) > 0\n const nested = !!context\n const selected = !!value && selectedValue === value\n const defaultExpanded = !!value && expandedValue.includes(value)\n const {\n open: groupOpen,\n onClose,\n onOpen,\n } = useDisclosure({\n defaultOpen: defaultOpen ?? defaultExpanded,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const branchOpen: boolean[] = nested\n ? [...context.branchOpen, groupOpen]\n : [groupOpen]\n const expanded = branchOpen.slice(0, -1).every(Boolean)\n const { register } = useSidebarDescendant({\n id: itemId!,\n disabled,\n expanded,\n group,\n value,\n })\n\n const [groupLoading, onGroupChildren] = useAsyncCallback(async () => {\n const children = await asyncChildren?.()\n\n setChildren(children)\n }, [asyncChildren])\n\n const onGroupOpen = useCallback(() => {\n if (disabled \|\| !group \|\| !value \|\| groupLoading) return\n\n if (async && !initialAsyncRef.current) {\n initialAsyncRef.current = true\n\n onGroupChildren().then(() => {\n onOpen()\n onExpandedChange(value)\n })\n } else {\n onOpen()\n onExpandedChange(value)\n }\n }, [\n disabled,\n group,\n value,\n groupLoading,\n async,\n onGroupChildren,\n onOpen,\n onExpandedChange,\n ])\n\n const onGroupClose = useCallback(() => {\n if (disabled \|\| !group \|\| !value) return\n\n onClose()\n onExpandedChange(value)\n }, [disabled, group, value, onClose, onExpandedChange])\n\n const onGroupToggle = useCallback(() => {\n if (groupOpen) {\n onGroupClose()\n } else {\n onGroupOpen()\n }\n }, [groupOpen, onGroupClose, onGroupOpen])\n\n useUpdateEffect(() => {\n if (defaultExpanded) {\n if (async && !initialAsyncRef.current) {\n initialAsyncRef.current = true\n\n onGroupChildren().then(() => {\n onOpen()\n })\n } else {\n onOpen()\n }\n } else {\n onClose()\n }\n }, [defaultExpanded])\n\n const getItemProps: PropGetter<\"li\"> = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id: itemId,\n ref: mergeRefs(ref, register),\n \"aria-current\": selected ? \"page\" : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(selected),\n ...rest,\n ...props,\n onClick: handlerAll(\n props.onClick,\n !group ? () => onSelectedChange(value) : undefined,\n ),\n }),\n [\n itemId,\n register,\n selected,\n disabled,\n labelId,\n rest,\n group,\n onSelectedChange,\n value,\n ],\n )\n\n const getIndicatorProps: PropGetter<\"svg\"> = useCallback(\n (props) => ({\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": groupOpen,\n \"aria-hidden\": true,\n \"data-disabled\": dataAttr(disabled),\n \"data-loading\": dataAttr(groupLoading),\n \"data-selected\": dataAttr(selected),\n role: \"presentation\",\n ...props,\n }),\n [disabled, groupOpen, groupLoading, selected],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": contentId,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-disabled\": dataAttr(disabled),\n \"data-expanded\": dataAttr(groupOpen),\n \"data-selected\": dataAttr(selected),\n tabIndex: open && expanded ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onGroupToggle),\n }),\n [contentId, disabled, groupOpen, selected, open, expanded, onGroupToggle],\n )\n\n const getLinkProps: PropGetter<\"a\"> = useCallback(\n (props = {}) => ({\n href: value,\n rel: external ? \"noopener\" : undefined,\n target: external ? \"_blank\" : undefined,\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(selected),\n tabIndex: open && expanded ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, (ev) => {\n if (!disabled) return\n\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [disabled, expanded, external, open, selected, value],\n )\n\n const getContentProps: PropGetter<\"ul\"> = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id: contentId,\n \"aria-busy\": ariaAttr(groupLoading),\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n \"data-disabled\": dataAttr(disabled),\n ...props,\n }),\n [contentId, labelId, disabled, groupLoading],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) => ({ id: labelId, ...props }),\n [labelId],\n )\n\n return {\n branchOpen,\n children,\n disabled,\n expanded,\n expandedValue,\n group,\n groupLoading,\n groupOpen,\n open,\n selected,\n selectedValue,\n value,\n getContentProps,\n getIndicatorProps,\n getItemProps,\n getLabelProps,\n getLinkProps,\n getTriggerProps,\n onExpandedChange,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n onSelectedChange,\n }\n}\n\nexport type UseSidebarItemReturn = ReturnType<typeof useSidebarItem>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-sidebar.cjs","names":["createDescendants","createContext","useI18n","useDisclosure","useControllableState","getRootProps: PropGetter<\"div\">","getTriggerProps: PropGetter<\"button\">","getSidePanelProps: PropGetter<\"aside\">","getHeaderProps: PropGetter<\"header\">","getFooterProps: PropGetter<\"footer\">","useEnvironment","getRootProps: PropGetter<\"li\">","mergeRefs","getLabelProps: PropGetter<\"span\">","useIds","Children","branchOpen: boolean[]","useAsyncCallback","getItemProps: PropGetter<\"li\">","getIndicatorProps: PropGetter<\"svg\">","getLinkProps: PropGetter<\"a\">"],"sources":["../../../../src/components/sidebar/use-sidebar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode, RefObject } from \"react\"\nimport { Children, useCallback, useId, useRef, useState } from \"react\"\nimport { type HTMLProps, type PropGetter, useEnvironment } from \"../../core\"\nimport { useAsyncCallback } from \"../../hooks/use-async-callback\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n useDisclosure,\n type UseDisclosureProps,\n} from \"../../hooks/use-disclosure\"\nimport { useWindowEvent } from \"../../hooks/use-window-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n assignRef,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n setAttribute,\n useIds,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport interface SidebarControl {\n collapse: () => void\n expand: () => void\n}\n\ninterface SidebarDescendantProps {\n expanded: boolean\n group: boolean\n id: string\n value: string\n}\n\nconst {\n DescendantsContext: SidebarDescendantsContext,\n useDescendant: useSidebarDescendant,\n useDescendants: useSidebarDescendants,\n} = createDescendants<HTMLElement, SidebarDescendantProps>()\n\nexport {\n SidebarDescendantsContext,\n useSidebarDescendant,\n useSidebarDescendants,\n}\n\ninterface SidebarContext extends Pick<\n UseSidebarReturn,\n \| \"expandedValue\"\n \| \"mobile\"\n \| \"onClose\"\n \| \"onExpandedChange\"\n \| \"onOpen\"\n \| \"onSelectedChange\"\n \| \"onToggle\"\n \| \"open\"\n \| \"selectedValue\"\n> {}\n\nconst [SidebarContext, useSidebarContext] = createContext<SidebarContext>({\n name: \"SidebarContext\",\n})\n\nexport { SidebarContext, useSidebarContext }\n\ninterface SidebarItemContext extends Pick<\n UseSidebarItemReturn,\n \"branchOpen\" \| \"groupOpen\"\n> {}\n\nconst [SidebarItemContext, useSidebarItemContext] =\n createContext<SidebarItemContext>({\n name: \"SidebarItemContext\",\n strict: false,\n })\n\nexport { SidebarItemContext, useSidebarItemContext }\n\nexport interface UseSidebarProps extends HTMLProps<\"div\"> {\n /*\n Ref of the sidebar callbacks.\n /\n controlRef?: RefObject<null \| SidebarControl>\n /\n The initial expanded value of the sidebar.\n /\n defaultExpandedValue?: string[]\n /\n The initial selected value of the sidebar.\n /\n defaultSelectedValue?: string\n /\n The disclosure props for the desktop and mobile.\n /\n disclosure?: {\n desktop?: Omit<UseDisclosureProps, \"timing\">\n mobile?: Omit<UseDisclosureProps, \"timing\">\n }\n /\n The expanded value of the sidebar.\n /\n expandedValue?: string[]\n /\n If `true`, the trigger click event will be switched to mobile.\n \n @default false\n /\n mobile?: boolean\n /\n The selected value of the sidebar.\n /\n selectedValue?: string\n /\n The callback invoked when expanded value changes.\n /\n onExpandedChange?: (value: string[]) => void\n /\n The callback invoked when selected value changes.\n /\n onSelectedChange?: (value: string) => void\n}\n\nexport const useSidebar = ({\n controlRef,\n defaultExpandedValue = [],\n defaultSelectedValue,\n disclosure,\n expandedValue: expandedValueProp,\n mobile = false,\n selectedValue: selectedValueProp,\n onExpandedChange: onExpandedChangeProp,\n onSelectedChange: onSelectedChangeProp,\n ...rest\n}: UseSidebarProps = {}) => {\n const { t } = useI18n(\"sidebar\")\n const desktopDisclosure = useDisclosure({\n defaultOpen: disclosure?.desktop?.defaultOpen ?? true,\n open: disclosure?.desktop?.open,\n onClose: disclosure?.desktop?.onClose,\n onOpen: disclosure?.desktop?.onOpen,\n })\n const mobileDisclosure = useDisclosure({\n defaultOpen: disclosure?.mobile?.defaultOpen ?? false,\n open: disclosure?.mobile?.open,\n onClose: disclosure?.mobile?.onClose,\n onOpen: disclosure?.mobile?.onOpen,\n })\n const [selectedValue, setSelectedValue] = useControllableState({\n defaultValue: defaultSelectedValue,\n value: selectedValueProp,\n onChange: onSelectedChangeProp,\n })\n const [expandedValue, setExpandedValue] = useControllableState({\n defaultValue: defaultExpandedValue,\n value: expandedValueProp,\n onChange: onExpandedChangeProp,\n })\n const descendants = useSidebarDescendants()\n const open = mobile ? mobileDisclosure.open : desktopDisclosure.open\n const onOpen = mobile ? mobileDisclosure.onOpen : desktopDisclosure.onOpen\n const onClose = mobile ? mobileDisclosure.onClose : desktopDisclosure.onClose\n const onToggle = mobile\n ? mobileDisclosure.onToggle\n : desktopDisclosure.onToggle\n\n const onSelectedChange = useCallback(\n (value: string) => {\n setSelectedValue(value)\n },\n [setSelectedValue],\n )\n\n const onExpandAll = useCallback(() => {\n const values = descendants.enabledValues()\n const group = values.filter(({ group }) => group)\n const value = group.map(({ value }) => value)\n\n setExpandedValue(value)\n }, [descendants, setExpandedValue])\n\n const onCollapseAll = useCallback(() => {\n setExpandedValue([])\n }, [setExpandedValue])\n\n const onExpandedChange = useCallback(\n (value: string) => {\n setExpandedValue((prev) => {\n if (prev.includes(value)) {\n return prev.filter((prevValue) => prevValue !== value)\n } else {\n return [...prev, value]\n }\n })\n },\n [setExpandedValue],\n )\n\n assignRef(controlRef, { collapse: onCollapseAll, expand: onExpandAll })\n\n useWindowEvent(\"keydown\", (ev) => {\n if (ev.key !== \"b\") return\n if (!ev.metaKey && !ev.ctrlKey) return\n\n ev.preventDefault()\n\n desktopDisclosure.onToggle()\n })\n\n const getRootProps: PropGetter<\"div\"> = useCallback(\n (props = {}) => ({\n \"data-expanded\": dataAttr(open),\n ...rest,\n ...props,\n }),\n [open, rest],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-expanded\": open,\n \"aria-label\": t(open ? \"Close sidebar\" : \"Open sidebar\"),\n ...props,\n onClick: handlerAll(props.onClick, onToggle),\n }),\n [open, t, onToggle],\n )\n\n const getSidePanelProps: PropGetter<\"aside\"> = useCallback(\n (props = {}) => ({ \"data-expanded\": dataAttr(open), ...props }),\n [open],\n )\n\n const getHeaderProps: PropGetter<\"header\"> = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n const getFooterProps: PropGetter<\"footer\"> = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n const getContentProps: PropGetter<\"ul\"> = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n return {\n descendants,\n expandedValue,\n mobile,\n open,\n selectedValue,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getRootProps,\n getSidePanelProps,\n getTriggerProps,\n onClose,\n onExpandedChange,\n onOpen,\n onSelectedChange,\n onToggle,\n }\n}\n\nexport type UseSidebarReturn = ReturnType<typeof useSidebar>\n\nexport interface UseSidebarGroupProps extends HTMLProps<\"li\"> {}\n\nexport const useSidebarGroup = ({ ...rest }: UseSidebarGroupProps = {}) => {\n const { getDocument } = useEnvironment()\n const rootRef = useRef<HTMLLIElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const labelId = useId()\n\n useSafeLayoutEffect(() => {\n const el = getDocument()?.getElementById(labelId)\n\n if (!el) return\n\n if (rootRef.current)\n setAttribute(rootRef.current, \"aria-labelledby\", labelId)\n if (contentRef.current)\n setAttribute(contentRef.current, \"aria-labelledby\", labelId)\n }, [])\n\n const getRootProps: PropGetter<\"li\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ref: mergeRefs(ref, rootRef),\n ...rest,\n ...props,\n }),\n [rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) => ({ id: labelId, ...props }),\n [labelId],\n )\n\n const getContentProps: PropGetter<\"div\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ref: mergeRefs(ref, contentRef),\n ...props,\n }),\n [],\n )\n\n return { getContentProps, getLabelProps, getRootProps }\n}\n\nexport type UseSidebarGroupReturn = ReturnType<typeof useSidebarGroup>\n\nexport interface UseSidebarItemProps\n extends HTMLProps<\"li\">, Omit<UseDisclosureProps, \"timing\"> {\n /\n The value of the item.\n /\n value: string\n /\n If `true`, the tree item will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, the link will open in new tab.\n \n @default false\n /\n external?: boolean\n /\n If provided, the sidebar item will be rendered as an async sidebar item.\n */\n asyncChildren?: () => Promise<ReactNode>\n}\n\nexport const useSidebarItem = ({\n asyncChildren,\n children: childrenProp,\n defaultOpen,\n disabled = false,\n external,\n open: openProp,\n value,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n}: UseSidebarItemProps) => {\n const context = useSidebarItemContext()\n const {\n expandedValue,\n open,\n selectedValue,\n onExpandedChange,\n onSelectedChange,\n } = useSidebarContext()\n const [children, setChildren] = useState<ReactNode>(childrenProp)\n const [itemId, labelId, contentId] = useIds()\n const initialAsyncRef = useRef(false)\n const async = !!asyncChildren\n const group = async \|\| Children.count(children) > 0\n const nested = !!context\n const selected = !!value && selectedValue === value\n const defaultExpanded = !!value && expandedValue.includes(value)\n const {\n open: groupOpen,\n onClose,\n onOpen,\n } = useDisclosure({\n defaultOpen: defaultOpen ?? defaultExpanded,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const branchOpen: boolean[] = nested\n ? [...context.branchOpen, groupOpen]\n : [groupOpen]\n const expanded = branchOpen.slice(0, -1).every(Boolean)\n const { register } = useSidebarDescendant({\n id: itemId!,\n disabled,\n expanded,\n group,\n value,\n })\n\n const [groupLoading, onGroupChildren] = useAsyncCallback(async () => {\n const children = await asyncChildren?.()\n\n setChildren(children)\n }, [asyncChildren])\n\n const onGroupOpen = useCallback(() => {\n if (disabled \|\| !group \|\| !value \|\| groupLoading) return\n\n if (async && !initialAsyncRef.current) {\n initialAsyncRef.current = true\n\n onGroupChildren()\n .then(() => {\n onOpen()\n onExpandedChange(value)\n })\n .catch(() => {\n initialAsyncRef.current = false\n })\n } else {\n onOpen()\n onExpandedChange(value)\n }\n }, [\n disabled,\n group,\n value,\n groupLoading,\n async,\n onGroupChildren,\n onOpen,\n onExpandedChange,\n ])\n\n const onGroupClose = useCallback(() => {\n if (disabled \|\| !group \|\| !value) return\n\n onClose()\n onExpandedChange(value)\n }, [disabled, group, value, onClose, onExpandedChange])\n\n const onGroupToggle = useCallback(() => {\n if (groupOpen) {\n onGroupClose()\n } else {\n onGroupOpen()\n }\n }, [groupOpen, onGroupClose, onGroupOpen])\n\n useSafeLayoutEffect(() => {\n if (defaultExpanded) {\n if (async && !initialAsyncRef.current) {\n initialAsyncRef.current = true\n\n onGroupChildren()\n .then(() => {\n onOpen()\n })\n .catch(() => {\n initialAsyncRef.current = false\n })\n } else {\n onOpen()\n }\n } else {\n onClose()\n }\n }, [defaultExpanded])\n\n const getItemProps: PropGetter<\"li\"> = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id: itemId,\n ref: mergeRefs(ref, register),\n \"aria-current\": selected ? \"page\" : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(selected),\n ...rest,\n ...props,\n onClick: handlerAll(\n props.onClick,\n !group ? () => onSelectedChange(value) : undefined,\n ),\n }),\n [\n itemId,\n register,\n selected,\n disabled,\n labelId,\n rest,\n group,\n onSelectedChange,\n value,\n ],\n )\n\n const getIndicatorProps: PropGetter<\"svg\"> = useCallback(\n (props) => ({\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": groupOpen,\n \"aria-hidden\": true,\n \"data-disabled\": dataAttr(disabled),\n \"data-loading\": dataAttr(groupLoading),\n \"data-selected\": dataAttr(selected),\n role: \"presentation\",\n ...props,\n }),\n [disabled, groupOpen, groupLoading, selected],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": contentId,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": groupOpen,\n \"data-disabled\": dataAttr(disabled),\n \"data-expanded\": dataAttr(groupOpen),\n \"data-selected\": dataAttr(selected),\n tabIndex: open && expanded && !disabled ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onGroupToggle),\n }),\n [contentId, disabled, groupOpen, selected, open, expanded, onGroupToggle],\n )\n\n const getLinkProps: PropGetter<\"a\"> = useCallback(\n (props = {}) => ({\n href: value,\n rel: external ? \"noopener\" : undefined,\n target: external ? \"_blank\" : undefined,\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(selected),\n tabIndex: open && expanded && !disabled ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, (ev) => {\n if (!disabled) return\n\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [disabled, expanded, external, open, selected, value],\n )\n\n const getContentProps: PropGetter<\"ul\"> = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id: contentId,\n \"aria-busy\": ariaAttr(groupLoading),\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n \"data-disabled\": dataAttr(disabled),\n ...props,\n }),\n [contentId, labelId, disabled, groupLoading],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) => ({ id: labelId, ...props }),\n [labelId],\n )\n\n return {\n branchOpen,\n children,\n disabled,\n expanded,\n expandedValue,\n group,\n groupLoading,\n groupOpen,\n open,\n selected,\n selectedValue,\n value,\n getContentProps,\n getIndicatorProps,\n getItemProps,\n getLabelProps,\n getLinkProps,\n getTriggerProps,\n onExpandedChange,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n onSelectedChange,\n }\n}\n\nexport type UseSidebarItemReturn = ReturnType<typeof useSidebarItem>\n"],"mappings":"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"}

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

@@ -22,7 +22,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/tree/tree.tsx
 const recursiveTreeItem = (items) => {
 	return items?.map((props, index) => {
-		const key = props.value || ((0, require_utils_index.utils_exports.isString)(props.label) ? props.label : index);
+		const key = props.value || ((0, require_utils_index.utils_exports.isString)(props.label) ? `${props.label}-${index}` : index);
 		if ("children" in props) {
 			const { children, ...rest } = props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, {
@@ -123,7 +123,7 @@ const TreeRoot = withProvider(({ size, animated, children, endElement, indicator
 		})
 	});
 }, "root", { transferProps: ["size"] })();
-const TreeItem = withContext(({ className, css, colorScheme, animated: animatedProp, asyncChildren: asyncChildrenProp, endElement, indicator: indicatorProp, label, loadingScheme, startElement, value: valueProp = (0, require_utils_index.utils_exports.isString)(label) ? label : void 0, checkboxProps, endElementProps, groupProps, indicatorProps, labelProps, rootProps, startElementProps, ...rest }) => {
+const TreeItem = withContext(({ className, css, colorScheme, animated: animatedProp, asyncChildren: asyncChildrenProp, endElement, indicator: indicatorProp, label, loadingScheme, query, startElement, value: valueProp = (0, require_utils_index.utils_exports.isString)(label) ? label : void 0, checkboxProps, endElementProps, groupProps, indicatorProps, labelProps, rootProps, startElementProps, ...rest }) => {
 	const { checkable } = require_use_tree.useTreeContext();
 	const componentContext = useComponentContext();
 	const Loading = require_use_loading_component.useLoadingComponent(loadingScheme ?? componentContext.loadingScheme ?? "oval");
@@ -140,6 +140,7 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 		...componentContext.itemProps,
 		...rest,
 		asyncChildren: asyncChildrenProp ? asyncChildren : void 0,
+		query: query ?? ((0, require_utils_index.utils_exports.isString)(label) ? label : void 0),
 		value: valueProp
 	});
 	const itemProps = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tree.cjs","names":["createContext","createSlotComponent","treeStyle","useTree","TreeDescendantsContext","TreeContext","styled","useTreeContext","useLoadingComponent","useTreeItem","TreeItemContext","Collapse","ChevronRightIcon","Children","Checkbox"],"sources":["../../../../src/components/tree/tree.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 { CheckboxProps } from \"../checkbox\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { Loading } from \"../loading\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { TreeStyle } from \"./tree.style\"\nimport type { UseTreeItemProps, UseTreeProps } from \"./use-tree\"\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useMemo,\n} from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n cast,\n createContext,\n dataAttr,\n isObject,\n isString,\n type ReactNodeOrFunction,\n runIfFn,\n} from \"../../utils\"\nimport { Checkbox } from \"../checkbox\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronRightIcon } from \"../icon\"\nimport { useLoadingComponent } from \"../loading\"\nimport { treeStyle } from \"./tree.style\"\nimport {\n TreeContext,\n TreeDescendantsContext,\n TreeItemContext,\n useTree,\n useTreeContext,\n useTreeItem,\n} from \"./use-tree\"\n\ninterface TreeCallBackProps {\n disabled?: boolean\n expanded?: boolean\n}\n\ntype TreeItemReactNode =\n \| ReactNodeOrFunction<TreeCallBackProps>\n \| {\n group: ReactNodeOrFunction<TreeCallBackProps>\n item?: ReactNodeOrFunction<TreeCallBackProps>\n }\n \| {\n item: ReactNodeOrFunction<TreeCallBackProps>\n group?: ReactNodeOrFunction<TreeCallBackProps>\n }\n\ninterface TreeItemWithValue extends Omit<TreeItemProps, \"children\"> {}\n\ninterface TreeItemWithChildren extends TreeItemWithValue {\n children: TreeItem[]\n}\n\nexport type TreeItem = TreeItemWithChildren \| TreeItemWithValue\n\nconst recursiveTreeItem = (items?: TreeItem[]) => {\n return items?.map((props, index) => {\n const key = props.value \|\| (isString(props.label) ? props.label : index)\n\n if (\"children\" in props) {\n const { children, ...rest } = props\n\n return (\n <TreeItem key={key} {...rest}>\n {recursiveTreeItem(children)}\n </TreeItem>\n )\n } else {\n return <TreeItem key={key} {...props} />\n }\n })\n}\n\nconst getReactNodeOrFunction = (\n type: \"group\" \| \"item\",\n custom?: TreeItemReactNode,\n root?: TreeItemReactNode,\n): ReactNodeOrFunction<TreeCallBackProps> => {\n if (isObject(custom) && (\"group\" in custom \|\| \"item\" in custom)) {\n return custom[type]\n } else if (custom) {\n return custom\n } else if (isObject(root) && (\"group\" in root \|\| \"item\" in root)) {\n return root[type]\n } else {\n return root\n }\n}\n\ninterface ComponentContext extends Pick<\n TreeRootProps,\n \| \"animated\"\n \| \"checkboxProps\"\n \| \"endElement\"\n \| \"endElementProps\"\n \| \"groupProps\"\n \| \"indicator\"\n \| \"indicatorHidden\"\n \| \"indicatorProps\"\n \| \"itemProps\"\n \| \"labelProps\"\n \| \"loadingScheme\"\n \| \"size\"\n \| \"startElement\"\n \| \"startElementProps\"\n> {}\n\ninterface ItemComponentContext {\n checkboxProps: TreeCheckboxProps\n endElementProps: TreeEndElementProps\n indicatorProps: TreeIndicatorProps\n labelProps: TreeLabelProps\n startElementProps: TreeStartElementProps\n}\n\nconst [ItemComponentContext, useItemComponentContext] =\n createContext<ItemComponentContext>({ name: \"ItemComponentContext\" })\n\nexport interface TreeRootProps<Multiple extends boolean = false>\n extends\n HTMLStyledProps<\"ul\">,\n ThemeProps<TreeStyle>,\n UseTreeProps<Multiple>,\n Pick<\n TreeItemProps,\n \| \"animated\"\n \| \"checkboxProps\"\n \| \"endElement\"\n \| \"endElementProps\"\n \| \"groupProps\"\n \| \"indicator\"\n \| \"indicatorProps\"\n \| \"labelProps\"\n \| \"loadingScheme\"\n \| \"startElement\"\n \| \"startElementProps\"\n > {\n /*\n If `true`, hide the tree indicator icon for all items.\n \n @default false\n /\n indicatorHidden?: boolean\n /\n If provided, generate elements based on items.\n /\n items?: TreeItem[]\n /\n Props for the item component.\n /\n itemProps?: Omit<TreeItemProps, \"children\" \| \"label\" \| \"open\" \| \"value\">\n}\n\nconst {\n ComponentContext,\n PropsContext: TreePropsContext,\n useComponentContext,\n usePropsContext: useTreePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<TreeRootProps, TreeStyle, ComponentContext>(\n \"tree\",\n treeStyle,\n)\n\nexport { TreePropsContext, useTreePropsContext }\n\n/\n `Tree` is a component used to display hierarchical data structures in an expandable tree format.\n \n @see https://yamada-ui.com/docs/components/tree\n /\nexport const TreeRoot = withProvider<\"ul\", TreeRootProps, \"size\">(\n <Multiple extends boolean = false>({\n size,\n animated,\n children,\n endElement,\n indicator,\n indicatorHidden,\n items,\n loadingScheme,\n startElement,\n checkboxProps,\n endElementProps,\n groupProps,\n indicatorProps,\n itemProps,\n labelProps,\n startElementProps,\n ...rest\n }: TreeRootProps<Multiple>) => {\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return recursiveTreeItem(items)\n }, [children, items])\n const {\n activeDescendant,\n checkable,\n checkedValue,\n descendants,\n expandedValue,\n multiple,\n selectedValue,\n getRootProps,\n onActiveDescendant,\n onCheckedChange,\n onCollapseAll,\n onExpandAll,\n onExpandedChange,\n onSearch,\n onSelectedChange,\n } = useTree({ ...rest, children: computedChildren })\n const context = useMemo(\n () => ({\n activeDescendant,\n checkable,\n checkedValue,\n expandedValue,\n multiple,\n selectedValue,\n onActiveDescendant,\n onCheckedChange,\n onCollapseAll,\n onExpandAll,\n onExpandedChange,\n onSearch,\n onSelectedChange,\n }),\n [\n activeDescendant,\n checkable,\n checkedValue,\n expandedValue,\n multiple,\n selectedValue,\n onActiveDescendant,\n onCheckedChange,\n onSearch,\n onCollapseAll,\n onExpandAll,\n onExpandedChange,\n onSelectedChange,\n ],\n )\n const componentContext = useMemo(\n () => ({\n size,\n animated,\n endElement,\n indicator,\n indicatorHidden,\n loadingScheme,\n startElement,\n checkboxProps,\n endElementProps,\n groupProps,\n indicatorProps,\n itemProps,\n labelProps,\n startElementProps,\n }),\n [\n size,\n animated,\n endElement,\n indicator,\n indicatorHidden,\n startElement,\n endElementProps,\n groupProps,\n indicatorProps,\n itemProps,\n labelProps,\n startElementProps,\n checkboxProps,\n loadingScheme,\n ],\n )\n\n return (\n <TreeDescendantsContext value={descendants}>\n <TreeContext value={context}>\n <ComponentContext value={componentContext}>\n <styled.ul {...getRootProps()} />\n </ComponentContext>\n </TreeContext>\n </TreeDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)() as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: TreeRootProps<Multiple>,\n ): ReactElement\n}>\n\nexport interface TreeItemProps\n extends HTMLStyledProps<\"div\">, Omit<UseTreeItemProps, \"asyncChildren\"> {\n /\n The label to display in the item.\n /\n label: ReactNode\n /\n If `true`, the tree item will be animated.\n \n @default false\n /\n animated?: boolean\n /\n The element to display at the end of the item.\n /\n endElement?: TreeItemReactNode\n /\n The tree indicator icon to use.\n /\n indicator?: ReactNodeOrFunction<TreeCallBackProps>\n /\n The loading scheme.\n \n @default 'oval'\n /\n loadingScheme?: Loading.Scheme\n /\n The element to display at the start of the item.\n /\n startElement?: TreeItemReactNode\n /\n Props for the checkbox component.\n /\n checkboxProps?: Omit<CheckboxProps, \"checked\" \| \"defaultChecked\" \| \"value\">\n /\n Props for the end component.\n /\n endElementProps?: TreeEndElementProps\n /\n Props for the group component.\n /\n groupProps?: Omit<TreeGroupProps, \"children\">\n /\n Props for the indicator component.\n /\n indicatorProps?: TreeIndicatorProps\n /\n Props for the label component.\n /\n labelProps?: TreeLabelProps\n /\n Props for the root element.\n /\n rootProps?: HTMLStyledProps<\"li\">\n /\n Props for the start component.\n /\n startElementProps?: TreeStartElementProps\n /\n If provided, the tree item will be rendered as an async tree item.\n */\n asyncChildren?: () => Promise<TreeItem[]>\n}\n\nexport const TreeItem = withContext<\"div\", TreeItemProps>(\n ({\n className,\n css,\n colorScheme,\n animated: animatedProp,\n asyncChildren: asyncChildrenProp,\n endElement,\n indicator: indicatorProp,\n label,\n loadingScheme,\n startElement,\n value: valueProp = isString(label) ? label : undefined,\n checkboxProps,\n endElementProps,\n groupProps,\n indicatorProps,\n labelProps,\n rootProps,\n startElementProps,\n ...rest\n }) => {\n const { checkable } = useTreeContext()\n const componentContext = useComponentContext()\n const Loading = useLoadingComponent(\n loadingScheme ?? componentContext.loadingScheme ?? \"oval\",\n )\n const animated = animatedProp ?? componentContext.animated\n const indicator = indicatorProp ?? componentContext.indicator\n const groupStartElement = getReactNodeOrFunction(\n \"group\",\n startElement,\n componentContext.startElement,\n )\n const groupEndElement = getReactNodeOrFunction(\n \"group\",\n endElement,\n componentContext.endElement,\n )\n const itemStartElement = getReactNodeOrFunction(\n \"item\",\n startElement,\n componentContext.startElement,\n )\n const itemEndElement = getReactNodeOrFunction(\n \"item\",\n endElement,\n componentContext.endElement,\n )\n const asyncChildren = useCallback(async () => {\n const items = await asyncChildrenProp?.()\n\n return recursiveTreeItem(items)\n }, [asyncChildrenProp])\n const {\n branchOpen,\n children,\n disabled,\n group,\n groupLoading,\n groupOpen,\n level,\n props,\n value,\n getCheckboxProps,\n getGroupItemProps,\n getGroupProps,\n getIndicatorProps,\n getItemProps,\n getLabelProps,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n } = useTreeItem({\n ...componentContext.itemProps,\n ...rest,\n asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n value: valueProp,\n })\n const itemProps = {\n className,\n css,\n colorScheme,\n \"--level\": level.toString(),\n ...rootProps,\n }\n const callbackProps = { disabled, expanded: groupOpen }\n const context = useMemo(\n () => ({\n branchOpen,\n groupOpen,\n level,\n value,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n }),\n [\n branchOpen,\n groupOpen,\n level,\n value,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n ],\n )\n const itemComponentContext = useMemo(\n () => ({\n checkboxProps: {\n size: componentContext.size,\n ...getCheckboxProps({\n ...componentContext.checkboxProps,\n ...checkboxProps,\n }),\n },\n endElementProps: {\n ...componentContext.endElementProps,\n ...endElementProps,\n },\n indicatorProps: {\n ...getIndicatorProps({\n ...componentContext.indicatorProps,\n ...indicatorProps,\n }),\n },\n labelProps: {\n ...getLabelProps({\n ...componentContext.labelProps,\n ...labelProps,\n }),\n },\n startElementProps: {\n ...componentContext.startElementProps,\n ...startElementProps,\n },\n }),\n [\n checkboxProps,\n componentContext.checkboxProps,\n componentContext.endElementProps,\n componentContext.indicatorProps,\n componentContext.labelProps,\n componentContext.size,\n componentContext.startElementProps,\n endElementProps,\n getCheckboxProps,\n getIndicatorProps,\n getLabelProps,\n indicatorProps,\n labelProps,\n startElementProps,\n ],\n )\n\n return (\n <TreeItemContext value={context}>\n <ItemComponentContext value={itemComponentContext}>\n {group ? (\n <styled.li {...getGroupItemProps(itemProps)}>\n <styled.div data-content {...props}>\n <TreeIndicator data-animated={dataAttr(animated)}>\n {groupLoading ? (\n <Loading />\n ) : (\n runIfFn(indicator, callbackProps)\n )}\n </TreeIndicator>\n {checkable ? <TreeCheckbox /> : null}\n {groupStartElement ? (\n <TreeStartElement>\n {runIfFn(groupStartElement, callbackProps)}\n </TreeStartElement>\n ) : null}\n {label ? <TreeLabel>{label}</TreeLabel> : null}\n {groupEndElement ? (\n <TreeEndElement>\n {runIfFn(groupEndElement, callbackProps)}\n </TreeEndElement>\n ) : null}\n </styled.div>\n\n <TreeGroup\n duration={!animated ? 0 : undefined}\n open={groupOpen}\n {...getGroupProps({\n ...componentContext.groupProps,\n ...groupProps,\n })}\n >\n {children}\n </TreeGroup>\n </styled.li>\n ) : (\n <styled.li {...getItemProps(itemProps)}>\n <styled.div data-content {...props}>\n <TreeIndicator data-hidden />\n {checkable ? <TreeCheckbox /> : null}\n {itemStartElement ? (\n <TreeStartElement>\n {runIfFn(itemStartElement, callbackProps)}\n </TreeStartElement>\n ) : null}\n {label ? <TreeLabel>{label}</TreeLabel> : null}\n {itemEndElement ? (\n <TreeEndElement>\n {runIfFn(itemEndElement, callbackProps)}\n </TreeEndElement>\n ) : null}\n </styled.div>\n </styled.li>\n )}\n </ItemComponentContext>\n </TreeItemContext>\n )\n },\n \"item\",\n)()\n\ninterface TreeGroupProps\n extends\n Omit<HTMLStyledProps<\"ul\">, \"transition\">,\n Pick<CollapseProps, \"animationOpacity\" \| keyof WithTransitionProps> {}\n\nconst TreeGroup = withContext<\"ul\", TreeGroupProps>((props) => {\n return <Collapse as=\"ul\" {...cast<CollapseProps>(props)} />\n}, \"group\")()\n\ninterface TreeIndicatorProps extends HTMLStyledProps<\"svg\"> {}\n\nconst TreeIndicator = withContext<\"svg\", TreeIndicatorProps>(\n ({ children = <ChevronRightIcon />, ...rest }) => {\n const { indicatorHidden } = useComponentContext()\n\n if (indicatorHidden) return null\n\n if (isValidElement<HTMLProps<\"svg\">>(children))\n return cloneElement(children, { ...rest, ...children.props })\n\n return Children.count(children) > 1 ? Children.only(null) : null\n },\n \"indicator\",\n)(undefined, (props) => {\n const { indicatorProps } = useItemComponentContext()\n\n return { ...indicatorProps, ...props }\n})\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n Checkbox,\n \"checkbox\",\n)(undefined, (props) => {\n const { checkboxProps } = useItemComponentContext()\n\n return { ...checkboxProps, ...props }\n})\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n name: \"StartElement\",\n slot: [\"element\", \"start\"],\n})(undefined, (props) => {\n const { startElementProps } = useItemComponentContext()\n\n return { ...startElementProps, ...props }\n})\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n name: \"EndElement\",\n slot: [\"element\", \"end\"],\n})(undefined, (props) => {\n const { endElementProps } = useItemComponentContext()\n\n return { ...endElementProps, ...props }\n})\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")(\n undefined,\n (props) => {\n const { labelProps } = useItemComponentContext()\n\n return { ...labelProps, ...props }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAM,qBAAqB,UAAuB;AAChD,QAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,MAAM,0DAAmB,MAAM,MAAM,GAAG,MAAM,QAAQ;AAElE,MAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;AAE9B,UACE,2CAAC;IAAmB,GAAI;cACrB,kBAAkB,SAAS;MADf,IAEJ;QAGb,QAAO,2CAAC,YAAmB,GAAI,SAAT,IAAkB;GAE1C;;AAGJ,MAAM,0BACJ,MACA,QACA,SAC2C;AAC3C,qDAAa,OAAO,KAAK,WAAW,UAAU,UAAU,QACtD,QAAO,OAAO;UACL,OACT,QAAO;0DACW,KAAK,KAAK,WAAW,QAAQ,UAAU,MACzD,QAAO,KAAK;KAEZ,QAAO;;AA8BX,MAAM,CAAC,sBAAsB,2BAC3BA,8BAAoC,EAAE,MAAM,wBAAwB,CAAC;AAqCvE,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACEC,6CACF,QACAC,6BACD;;;;;;AASD,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,GAAG,WAC0B;CAC7B,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,kBAAkB,MAAM;IAC9B,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,EACJ,kBACA,WACA,cACA,aACA,eACA,UACA,eACA,cACA,oBACA,iBACA,eACA,aACA,kBACA,UACA,qBACEC,yBAAQ;EAAE,GAAG;EAAM,UAAU;EAAkB,CAAC;AAoEpD,QACE,2CAACC;EAAuB,OAAO;YAC7B,2CAACC;GAAY,iCApER;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAuCK,2CAAC;IAAiB,iCArCf;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cAMO,2CAACC,uBAAO,MAAG,GAAI,cAAc,GAAI;KAChB;IACP;GACS;GAG7B,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE;AAsEH,MAAa,WAAW,aACrB,EACC,WACA,KACA,aACA,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,cACA,OAAO,4DAAqB,MAAM,GAAG,QAAQ,QAC7C,eACA,iBACA,YACA,gBACA,YACA,WACA,mBACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAcC,iCAAgB;CACtC,MAAM,mBAAmB,qBAAqB;CAC9C,MAAM,UAAUC,kDACd,iBAAiB,iBAAiB,iBAAiB,OACpD;CACD,MAAM,WAAW,gBAAgB,iBAAiB;CAClD,MAAM,YAAY,iBAAiB,iBAAiB;CACpD,MAAM,oBAAoB,uBACxB,SACA,cACA,iBAAiB,aAClB;CACD,MAAM,kBAAkB,uBACtB,SACA,YACA,iBAAiB,WAClB;CACD,MAAM,mBAAmB,uBACvB,QACA,cACA,iBAAiB,aAClB;CACD,MAAM,iBAAiB,uBACrB,QACA,YACA,iBAAiB,WAClB;CACD,MAAM,uCAA4B,YAAY;AAG5C,SAAO,kBAFO,MAAM,qBAAqB,CAEV;IAC9B,CAAC,kBAAkB,CAAC;CACvB,MAAM,EACJ,YACA,UACA,UACA,OACA,cACA,WACA,OACA,OACA,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,cACA,aACA,kBACEC,6BAAY;EACd,GAAG,iBAAiB;EACpB,GAAG;EACH,eAAe,oBAAoB,gBAAgB;EACnD,OAAO;EACR,CAAC;CACF,MAAM,YAAY;EAChB;EACA;EACA;EACA,WAAW,MAAM,UAAU;EAC3B,GAAG;EACJ;CACD,MAAM,gBAAgB;EAAE;EAAU,UAAU;EAAW;AAqEvD,QACE,2CAACC;EAAgB,iCApEV;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;G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"}
1	+ {"version":3,"file":"tree.cjs","names":["createContext","createSlotComponent","treeStyle","useTree","TreeDescendantsContext","TreeContext","styled","useTreeContext","useLoadingComponent","useTreeItem","TreeItemContext","Collapse","ChevronRightIcon","Children","Checkbox"],"sources":["../../../../src/components/tree/tree.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 { CheckboxProps } from \"../checkbox\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { Loading } from \"../loading\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { TreeStyle } from \"./tree.style\"\nimport type { UseTreeItemProps, UseTreeProps } from \"./use-tree\"\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useMemo,\n} from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n cast,\n createContext,\n dataAttr,\n isObject,\n isString,\n type ReactNodeOrFunction,\n runIfFn,\n} from \"../../utils\"\nimport { Checkbox } from \"../checkbox\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronRightIcon } from \"../icon\"\nimport { useLoadingComponent } from \"../loading\"\nimport { treeStyle } from \"./tree.style\"\nimport {\n TreeContext,\n TreeDescendantsContext,\n TreeItemContext,\n useTree,\n useTreeContext,\n useTreeItem,\n} from \"./use-tree\"\n\ninterface TreeCallBackProps {\n disabled?: boolean\n expanded?: boolean\n}\n\ntype TreeItemReactNode =\n \| ReactNodeOrFunction<TreeCallBackProps>\n \| {\n group: ReactNodeOrFunction<TreeCallBackProps>\n item?: ReactNodeOrFunction<TreeCallBackProps>\n }\n \| {\n item: ReactNodeOrFunction<TreeCallBackProps>\n group?: ReactNodeOrFunction<TreeCallBackProps>\n }\n\ninterface TreeItemWithValue extends Omit<TreeItemProps, \"children\"> {}\n\ninterface TreeItemWithChildren extends TreeItemWithValue {\n children: TreeItem[]\n}\n\nexport type TreeItem = TreeItemWithChildren \| TreeItemWithValue\n\nconst recursiveTreeItem = (items?: TreeItem[]) => {\n return items?.map((props, index) => {\n const key =\n props.value \|\| (isString(props.label) ? `${props.label}-${index}` : index)\n\n if (\"children\" in props) {\n const { children, ...rest } = props\n\n return (\n <TreeItem key={key} {...rest}>\n {recursiveTreeItem(children)}\n </TreeItem>\n )\n } else {\n return <TreeItem key={key} {...props} />\n }\n })\n}\n\nconst getReactNodeOrFunction = (\n type: \"group\" \| \"item\",\n custom?: TreeItemReactNode,\n root?: TreeItemReactNode,\n): ReactNodeOrFunction<TreeCallBackProps> => {\n if (isObject(custom) && (\"group\" in custom \|\| \"item\" in custom)) {\n return custom[type]\n } else if (custom) {\n return custom\n } else if (isObject(root) && (\"group\" in root \|\| \"item\" in root)) {\n return root[type]\n } else {\n return root\n }\n}\n\ninterface ComponentContext extends Pick<\n TreeRootProps,\n \| \"animated\"\n \| \"checkboxProps\"\n \| \"endElement\"\n \| \"endElementProps\"\n \| \"groupProps\"\n \| \"indicator\"\n \| \"indicatorHidden\"\n \| \"indicatorProps\"\n \| \"itemProps\"\n \| \"labelProps\"\n \| \"loadingScheme\"\n \| \"size\"\n \| \"startElement\"\n \| \"startElementProps\"\n> {}\n\ninterface ItemComponentContext {\n checkboxProps: TreeCheckboxProps\n endElementProps: TreeEndElementProps\n indicatorProps: TreeIndicatorProps\n labelProps: TreeLabelProps\n startElementProps: TreeStartElementProps\n}\n\nconst [ItemComponentContext, useItemComponentContext] =\n createContext<ItemComponentContext>({ name: \"ItemComponentContext\" })\n\nexport interface TreeRootProps<Multiple extends boolean = false>\n extends\n HTMLStyledProps<\"ul\">,\n ThemeProps<TreeStyle>,\n UseTreeProps<Multiple>,\n Pick<\n TreeItemProps,\n \| \"animated\"\n \| \"checkboxProps\"\n \| \"endElement\"\n \| \"endElementProps\"\n \| \"groupProps\"\n \| \"indicator\"\n \| \"indicatorProps\"\n \| \"labelProps\"\n \| \"loadingScheme\"\n \| \"startElement\"\n \| \"startElementProps\"\n > {\n /*\n If `true`, hide the tree indicator icon for all items.\n \n @default false\n /\n indicatorHidden?: boolean\n /\n If provided, generate elements based on items.\n /\n items?: TreeItem[]\n /\n Props for the item component.\n /\n itemProps?: Omit<\n TreeItemProps,\n \"children\" \| \"label\" \| \"open\" \| \"query\" \| \"value\"\n >\n}\n\nconst {\n ComponentContext,\n PropsContext: TreePropsContext,\n useComponentContext,\n usePropsContext: useTreePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<TreeRootProps, TreeStyle, ComponentContext>(\n \"tree\",\n treeStyle,\n)\n\nexport { TreePropsContext, useTreePropsContext }\n\n/\n `Tree` is a component used to display hierarchical data structures in an expandable tree format.\n \n @see https://yamada-ui.com/docs/components/tree\n /\nexport const TreeRoot = withProvider<\"ul\", TreeRootProps, \"size\">(\n <Multiple extends boolean = false>({\n size,\n animated,\n children,\n endElement,\n indicator,\n indicatorHidden,\n items,\n loadingScheme,\n startElement,\n checkboxProps,\n endElementProps,\n groupProps,\n indicatorProps,\n itemProps,\n labelProps,\n startElementProps,\n ...rest\n }: TreeRootProps<Multiple>) => {\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return recursiveTreeItem(items)\n }, [children, items])\n const {\n activeDescendant,\n checkable,\n checkedValue,\n descendants,\n expandedValue,\n multiple,\n selectedValue,\n getRootProps,\n onActiveDescendant,\n onCheckedChange,\n onCollapseAll,\n onExpandAll,\n onExpandedChange,\n onSearch,\n onSelectedChange,\n } = useTree({ ...rest, children: computedChildren })\n const context = useMemo(\n () => ({\n activeDescendant,\n checkable,\n checkedValue,\n expandedValue,\n multiple,\n selectedValue,\n onActiveDescendant,\n onCheckedChange,\n onCollapseAll,\n onExpandAll,\n onExpandedChange,\n onSearch,\n onSelectedChange,\n }),\n [\n activeDescendant,\n checkable,\n checkedValue,\n expandedValue,\n multiple,\n selectedValue,\n onActiveDescendant,\n onCheckedChange,\n onSearch,\n onCollapseAll,\n onExpandAll,\n onExpandedChange,\n onSelectedChange,\n ],\n )\n const componentContext = useMemo(\n () => ({\n size,\n animated,\n endElement,\n indicator,\n indicatorHidden,\n loadingScheme,\n startElement,\n checkboxProps,\n endElementProps,\n groupProps,\n indicatorProps,\n itemProps,\n labelProps,\n startElementProps,\n }),\n [\n size,\n animated,\n endElement,\n indicator,\n indicatorHidden,\n startElement,\n endElementProps,\n groupProps,\n indicatorProps,\n itemProps,\n labelProps,\n startElementProps,\n checkboxProps,\n loadingScheme,\n ],\n )\n\n return (\n <TreeDescendantsContext value={descendants}>\n <TreeContext value={context}>\n <ComponentContext value={componentContext}>\n <styled.ul {...getRootProps()} />\n </ComponentContext>\n </TreeContext>\n </TreeDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)() as GenericsComponent<{\n <Multiple extends boolean = false>(\n props: TreeRootProps<Multiple>,\n ): ReactElement\n}>\n\nexport interface TreeItemProps\n extends HTMLStyledProps<\"div\">, Omit<UseTreeItemProps, \"asyncChildren\"> {\n /\n The label to display in the item.\n /\n label: ReactNode\n /\n If `true`, the tree item will be animated.\n \n @default false\n /\n animated?: boolean\n /\n The element to display at the end of the item.\n /\n endElement?: TreeItemReactNode\n /\n The tree indicator icon to use.\n /\n indicator?: ReactNodeOrFunction<TreeCallBackProps>\n /\n The loading scheme.\n \n @default 'oval'\n /\n loadingScheme?: Loading.Scheme\n /\n The element to display at the start of the item.\n /\n startElement?: TreeItemReactNode\n /\n Props for the checkbox component.\n /\n checkboxProps?: Omit<CheckboxProps, \"checked\" \| \"defaultChecked\" \| \"value\">\n /\n Props for the end component.\n /\n endElementProps?: TreeEndElementProps\n /\n Props for the group component.\n /\n groupProps?: Omit<TreeGroupProps, \"children\">\n /\n Props for the indicator component.\n /\n indicatorProps?: TreeIndicatorProps\n /\n Props for the label component.\n /\n labelProps?: TreeLabelProps\n /\n Props for the root element.\n /\n rootProps?: HTMLStyledProps<\"li\">\n /\n Props for the start component.\n /\n startElementProps?: TreeStartElementProps\n /\n If provided, the tree item will be rendered as an async tree item.\n */\n asyncChildren?: () => Promise<TreeItem[]>\n}\n\nexport const TreeItem = withContext<\"div\", TreeItemProps>(\n ({\n className,\n css,\n colorScheme,\n animated: animatedProp,\n asyncChildren: asyncChildrenProp,\n endElement,\n indicator: indicatorProp,\n label,\n loadingScheme,\n query,\n startElement,\n value: valueProp = isString(label) ? label : undefined,\n checkboxProps,\n endElementProps,\n groupProps,\n indicatorProps,\n labelProps,\n rootProps,\n startElementProps,\n ...rest\n }) => {\n const { checkable } = useTreeContext()\n const componentContext = useComponentContext()\n const Loading = useLoadingComponent(\n loadingScheme ?? componentContext.loadingScheme ?? \"oval\",\n )\n const animated = animatedProp ?? componentContext.animated\n const indicator = indicatorProp ?? componentContext.indicator\n const groupStartElement = getReactNodeOrFunction(\n \"group\",\n startElement,\n componentContext.startElement,\n )\n const groupEndElement = getReactNodeOrFunction(\n \"group\",\n endElement,\n componentContext.endElement,\n )\n const itemStartElement = getReactNodeOrFunction(\n \"item\",\n startElement,\n componentContext.startElement,\n )\n const itemEndElement = getReactNodeOrFunction(\n \"item\",\n endElement,\n componentContext.endElement,\n )\n const asyncChildren = useCallback(async () => {\n const items = await asyncChildrenProp?.()\n\n return recursiveTreeItem(items)\n }, [asyncChildrenProp])\n const {\n branchOpen,\n children,\n disabled,\n group,\n groupLoading,\n groupOpen,\n level,\n props,\n value,\n getCheckboxProps,\n getGroupItemProps,\n getGroupProps,\n getIndicatorProps,\n getItemProps,\n getLabelProps,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n } = useTreeItem({\n ...componentContext.itemProps,\n ...rest,\n asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n query: query ?? (isString(label) ? label : undefined),\n value: valueProp,\n })\n const itemProps = {\n className,\n css,\n colorScheme,\n \"--level\": level.toString(),\n ...rootProps,\n }\n const callbackProps = { disabled, expanded: groupOpen }\n const context = useMemo(\n () => ({\n branchOpen,\n groupOpen,\n level,\n value,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n }),\n [\n branchOpen,\n groupOpen,\n level,\n value,\n onGroupClose,\n onGroupOpen,\n onGroupToggle,\n ],\n )\n const itemComponentContext = useMemo(\n () => ({\n checkboxProps: {\n size: componentContext.size,\n ...getCheckboxProps({\n ...componentContext.checkboxProps,\n ...checkboxProps,\n }),\n },\n endElementProps: {\n ...componentContext.endElementProps,\n ...endElementProps,\n },\n indicatorProps: {\n ...getIndicatorProps({\n ...componentContext.indicatorProps,\n ...indicatorProps,\n }),\n },\n labelProps: {\n ...getLabelProps({\n ...componentContext.labelProps,\n ...labelProps,\n }),\n },\n startElementProps: {\n ...componentContext.startElementProps,\n ...startElementProps,\n },\n }),\n [\n checkboxProps,\n componentContext.checkboxProps,\n componentContext.endElementProps,\n componentContext.indicatorProps,\n componentContext.labelProps,\n componentContext.size,\n componentContext.startElementProps,\n endElementProps,\n getCheckboxProps,\n getIndicatorProps,\n getLabelProps,\n indicatorProps,\n labelProps,\n startElementProps,\n ],\n )\n\n return (\n <TreeItemContext value={context}>\n <ItemComponentContext value={itemComponentContext}>\n {group ? (\n <styled.li {...getGroupItemProps(itemProps)}>\n <styled.div data-content {...props}>\n <TreeIndicator data-animated={dataAttr(animated)}>\n {groupLoading ? (\n <Loading />\n ) : (\n runIfFn(indicator, callbackProps)\n )}\n </TreeIndicator>\n {checkable ? <TreeCheckbox /> : null}\n {groupStartElement ? (\n <TreeStartElement>\n {runIfFn(groupStartElement, callbackProps)}\n </TreeStartElement>\n ) : null}\n {label ? <TreeLabel>{label}</TreeLabel> : null}\n {groupEndElement ? (\n <TreeEndElement>\n {runIfFn(groupEndElement, callbackProps)}\n </TreeEndElement>\n ) : null}\n </styled.div>\n\n <TreeGroup\n duration={!animated ? 0 : undefined}\n open={groupOpen}\n {...getGroupProps({\n ...componentContext.groupProps,\n ...groupProps,\n })}\n >\n {children}\n </TreeGroup>\n </styled.li>\n ) : (\n <styled.li {...getItemProps(itemProps)}>\n <styled.div data-content {...props}>\n <TreeIndicator data-hidden />\n {checkable ? <TreeCheckbox /> : null}\n {itemStartElement ? (\n <TreeStartElement>\n {runIfFn(itemStartElement, callbackProps)}\n </TreeStartElement>\n ) : null}\n {label ? <TreeLabel>{label}</TreeLabel> : null}\n {itemEndElement ? (\n <TreeEndElement>\n {runIfFn(itemEndElement, callbackProps)}\n </TreeEndElement>\n ) : null}\n </styled.div>\n </styled.li>\n )}\n </ItemComponentContext>\n </TreeItemContext>\n )\n },\n \"item\",\n)()\n\ninterface TreeGroupProps\n extends\n Omit<HTMLStyledProps<\"ul\">, \"transition\">,\n Pick<CollapseProps, \"animationOpacity\" \| keyof WithTransitionProps> {}\n\nconst TreeGroup = withContext<\"ul\", TreeGroupProps>((props) => {\n return <Collapse as=\"ul\" {...cast<CollapseProps>(props)} />\n}, \"group\")()\n\ninterface TreeIndicatorProps extends HTMLStyledProps<\"svg\"> {}\n\nconst TreeIndicator = withContext<\"svg\", TreeIndicatorProps>(\n ({ children = <ChevronRightIcon />, ...rest }) => {\n const { indicatorHidden } = useComponentContext()\n\n if (indicatorHidden) return null\n\n if (isValidElement<HTMLProps<\"svg\">>(children))\n return cloneElement(children, { ...rest, ...children.props })\n\n return Children.count(children) > 1 ? Children.only(null) : null\n },\n \"indicator\",\n)(undefined, (props) => {\n const { indicatorProps } = useItemComponentContext()\n\n return { ...indicatorProps, ...props }\n})\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n Checkbox,\n \"checkbox\",\n)(undefined, (props) => {\n const { checkboxProps } = useItemComponentContext()\n\n return { ...checkboxProps, ...props }\n})\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n name: \"StartElement\",\n slot: [\"element\", \"start\"],\n})(undefined, (props) => {\n const { startElementProps } = useItemComponentContext()\n\n return { ...startElementProps, ...props }\n})\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n name: \"EndElement\",\n slot: [\"element\", \"end\"],\n})(undefined, (props) => {\n const { endElementProps } = useItemComponentContext()\n\n return { ...endElementProps, ...props }\n})\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")(\n undefined,\n (props) => {\n const { labelProps } = useItemComponentContext()\n\n return { ...labelProps, ...props }\n },\n)\n"],"mappings":"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"}

package/dist/cjs/components/tree/tree.style.cjs CHANGED Viewed

@@ -7,7 +7,10 @@ require('../checkbox/index.cjs');
 //#region src/components/tree/tree.style.ts
 const treeStyle = require_config.defineComponentSlotStyle({
 	base: {
-		checkbox: { "--indicator-bg": "colors.bg" },
+		checkbox: {
+			"--indicator-bg": "colors.bg",
+			_disabled: { opacity: "1" }
+		},
 		element: {
 			color: "{element-color}",
 			display: "inline-center",

package/dist/cjs/components/tree/tree.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree.style.cjs","names":["defineComponentSlotStyle","focusRingStyle","checkboxStyle"],"sources":["../../../../src/components/tree/tree.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\nimport { checkboxStyle } from \"../checkbox\"\n\nexport const treeStyle = defineComponentSlotStyle({\n base: {\n checkbox: { \"--indicator-bg\": \"colors.bg\" },\n element: {\n color: \"{element-color}\",\n display: \"inline-center\",\n gap: \"{space}\",\n },\n end: {},\n group: { alignItems: \"stretch\", display: \"flex\", flexDirection: \"column\" },\n indicator: {\n color: \"{element-color}\",\n transformOrigin: \"center\",\n _animated: {\n transitionDuration: \"moderate\",\n transitionProperty: \"transform\",\n },\n _expanded: { transform: \"rotate(90deg)\" },\n _hidden: { opacity: \"0\" },\n },\n item: {\n \"--element-color\": \"colors.fg.subtle\",\n \"--space\": \"spaces.1\",\n \"--space-start\": \"calc({depth-space} * ({level} - 1))\",\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n focusVisibleRing: \"none\",\n _content: {\n alignItems: \"center\",\n border: \"1px solid transparent\",\n cursor: \"pointer\",\n display: \"flex\",\n gap: \"{gap}\",\n pe: \"{space}\",\n ps: \"calc({space-start} + {space})\",\n rounded: \"{rounded}\",\n userSelect: \"none\",\n _hover: { bg: \"bg.subtle\" },\n },\n _focusVisible: {\n _content: {\n bg: \"bg.subtle\",\n ...focusRingStyle.inside,\n boxShadow: \"none\",\n },\n },\n _disabled: { _content: { layerStyle: \"disabled\" } },\n },\n label: { flex: \"1\", textAlign: \"left\", truncated: true },\n root: {\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n start: {},\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'rounded'\n /\n shape: {\n circle: {\n item: { \"--rounded\": \"radii.full\" },\n },\n rounded: {\n item: { \"--rounded\": \"radii.l1\" },\n },\n square: {\n item: { \"--rounded\": \"0\" },\n },\n },\n /\n If `true`, display guide lines.\n \n @default false\n /\n withGuideLine: {\n true: {\n group: {\n position: \"relative\",\n _before: {\n bg: \"{guide-line-color}\",\n display: \"block\",\n h: \"full\",\n left: \"calc({space-guide-line} + {depth-space})\",\n position: \"absolute\",\n transform: \"translateX(-50%)\",\n w: \"px\",\n zIndex: \"yamcha\",\n },\n },\n item: {\n \"--space-guide-line\": \"calc(({space-start} 2) + {space})\",\n _content: { ps: \"{space-guide-line}\" },\n },\n root: { \"--guide-line-color\": \"colors.border\" },\n },\n },\n },\n\n variants: {\n solid: {\n checkbox: {\n ...checkboxStyle.variants?.solid.root,\n _indicator: checkboxStyle.variants?.solid.indicator,\n _selected: {\n _checked: { \"--indicator-border-color\": \"colorScheme.contrast\" },\n _indicator: {\n color: \"colorScheme.solid\",\n _checked: { bg: \"colorScheme.contrast\" },\n _indeterminate: { bg: \"colorScheme.contrast\" },\n },\n },\n },\n item: {\n _selected: {\n _content: {\n layerStyle: \"solid\",\n \"--element-color\": \"colorScheme.contrast\",\n },\n _focusVisible: {\n _content: { borderColor: \"{focus-ring-color}\" },\n },\n },\n },\n },\n subtle: {\n checkbox: {\n ...checkboxStyle.variants?.solid.root,\n _indicator: checkboxStyle.variants?.solid.indicator,\n },\n item: {\n _selected: {\n _content: {\n layerStyle: \"subtle\",\n \"--element-color\": \"colorScheme.fg\",\n },\n _focusVisible: {\n _content: { borderColor: \"{focus-ring-color}\" },\n },\n },\n },\n },\n },\n\n sizes: {\n sm: {\n item: { \"--depth-space\": \"spaces.1.5\", \"--gap\": \"spaces.1.5\" },\n root: { fontSize: \"sm\" },\n },\n md: {\n item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n root: { fontSize: \"md\" },\n },\n lg: {\n item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n root: { fontSize: \"lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"subtle\",\n shape: \"rounded\",\n withGuideLine: false,\n },\n})\n\nexport type TreeStyle = typeof treeStyle\n"],"mappings":";;;;;;;AAGA,MAAa,YAAYA,wCAAyB;CAChD,MAAM;EACJ,UAAU,EAAE,~~kBAAkB~~,~~aAAa~~;~~EAC3C~~,SAAS;GACP,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,KAAK,EAAE;EACP,OAAO;GAAE,YAAY;GAAW,SAAS;GAAQ,eAAe;GAAU;EAC1E,WAAW;GACT,OAAO;GACP,iBAAiB;GACjB,WAAW;IACT,oBAAoB;IACpB,oBAAoB;IACrB;GACD,WAAW,EAAE,WAAW,iBAAiB;GACzC,SAAS,EAAE,SAAS,KAAK;GAC1B;EACD,MAAM;GACJ,mBAAmB;GACnB,WAAW;GACX,iBAAiB;GACjB,YAAY;GACZ,SAAS;GACT,eAAe;GACf,kBAAkB;GAClB,UAAU;IACR,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,SAAS;IACT,YAAY;IACZ,QAAQ,EAAE,IAAI,aAAa;IAC5B;GACD,eAAe,EACb,UAAU;IACR,IAAI;IACJ,GAAGC,kCAAe;IAClB,WAAW;IACZ,EACF;GACD,WAAW,EAAE,UAAU,EAAE,YAAY,YAAY,EAAE;GACpD;EACD,OAAO;GAAE,MAAM;GAAK,WAAW;GAAQ,WAAW;GAAM;EACxD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,eAAe;GAChB;EACD,OAAO,EAAE;EACV;CAED,OAAO;EAML,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,aAAa,cAAc,EACpC;GACD,SAAS,EACP,MAAM,EAAE,aAAa,YAAY,EAClC;GACD,QAAQ,EACN,MAAM,EAAE,aAAa,KAAK,EAC3B;GACF;EAMD,eAAe,EACb,MAAM;GACJ,OAAO;IACL,UAAU;IACV,SAAS;KACP,IAAI;KACJ,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,WAAW;KACX,GAAG;KACH,QAAQ;KACT;IACF;GACD,MAAM;IACJ,sBAAsB;IACtB,UAAU,EAAE,IAAI,sBAAsB;IACvC;GACD,MAAM,EAAE,sBAAsB,iBAAiB;GAChD,EACF;EACF;CAED,UAAU;EACR,OAAO;GACL,UAAU;IACR,GAAGC,qCAAc,UAAU,MAAM;IACjC,YAAYA,qCAAc,UAAU,MAAM;IAC1C,WAAW;KACT,UAAU,EAAE,4BAA4B,wBAAwB;KAChE,YAAY;MACV,OAAO;MACP,UAAU,EAAE,IAAI,wBAAwB;MACxC,gBAAgB,EAAE,IAAI,wBAAwB;MAC/C;KACF;IACF;GACD,MAAM,EACJ,WAAW;IACT,UAAU;KACR,YAAY;KACZ,mBAAmB;KACpB;IACD,eAAe,EACb,UAAU,EAAE,aAAa,sBAAsB,EAChD;IACF,EACF;GACF;EACD,QAAQ;GACN,UAAU;IACR,GAAGA,qCAAc,UAAU,MAAM;IACjC,YAAYA,qCAAc,UAAU,MAAM;IAC3C;GACD,MAAM,EACJ,WAAW;IACT,UAAU;KACR,YAAY;KACZ,mBAAmB;KACpB;IACD,eAAe,EACb,UAAU,EAAE,aAAa,sBAAsB,EAChD;IACF,EACF;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,MAAM;IAAE,iBAAiB;IAAc,SAAS;IAAc;GAC9D,MAAM,EAAE,UAAU,MAAM;GACzB;EACD,IAAI;GACF,MAAM;IAAE,iBAAiB;IAAY,SAAS;IAAY;GAC1D,MAAM,EAAE,UAAU,MAAM;GACzB;EACD,IAAI;GACF,MAAM;IAAE,iBAAiB;IAAY,SAAS;IAAY;GAC1D,MAAM,EAAE,UAAU,MAAM;GACzB;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,eAAe;EAChB;CACF,CAAC"}
1	+ {"version":3,"file":"tree.style.cjs","names":["defineComponentSlotStyle","focusRingStyle","checkboxStyle"],"sources":["../../../../src/components/tree/tree.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\nimport { checkboxStyle } from \"../checkbox\"\n\nexport const treeStyle = defineComponentSlotStyle({\n base: {\n checkbox: { \"--indicator-bg\": \"colors.bg\", _disabled: { opacity: \"1\" } },\n element: {\n color: \"{element-color}\",\n display: \"inline-center\",\n gap: \"{space}\",\n },\n end: {},\n group: { alignItems: \"stretch\", display: \"flex\", flexDirection: \"column\" },\n indicator: {\n color: \"{element-color}\",\n transformOrigin: \"center\",\n _animated: {\n transitionDuration: \"moderate\",\n transitionProperty: \"transform\",\n },\n _expanded: { transform: \"rotate(90deg)\" },\n _hidden: { opacity: \"0\" },\n },\n item: {\n \"--element-color\": \"colors.fg.subtle\",\n \"--space\": \"spaces.1\",\n \"--space-start\": \"calc({depth-space} * ({level} - 1))\",\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n focusVisibleRing: \"none\",\n _content: {\n alignItems: \"center\",\n border: \"1px solid transparent\",\n cursor: \"pointer\",\n display: \"flex\",\n gap: \"{gap}\",\n pe: \"{space}\",\n ps: \"calc({space-start} + {space})\",\n rounded: \"{rounded}\",\n userSelect: \"none\",\n _hover: { bg: \"bg.subtle\" },\n },\n _focusVisible: {\n _content: {\n bg: \"bg.subtle\",\n ...focusRingStyle.inside,\n boxShadow: \"none\",\n },\n },\n _disabled: { _content: { layerStyle: \"disabled\" } },\n },\n label: { flex: \"1\", textAlign: \"left\", truncated: true },\n root: {\n alignItems: \"stretch\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n start: {},\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'rounded'\n /\n shape: {\n circle: {\n item: { \"--rounded\": \"radii.full\" },\n },\n rounded: {\n item: { \"--rounded\": \"radii.l1\" },\n },\n square: {\n item: { \"--rounded\": \"0\" },\n },\n },\n /\n If `true`, display guide lines.\n \n @default false\n /\n withGuideLine: {\n true: {\n group: {\n position: \"relative\",\n _before: {\n bg: \"{guide-line-color}\",\n display: \"block\",\n h: \"full\",\n left: \"calc({space-guide-line} + {depth-space})\",\n position: \"absolute\",\n transform: \"translateX(-50%)\",\n w: \"px\",\n zIndex: \"yamcha\",\n },\n },\n item: {\n \"--space-guide-line\": \"calc(({space-start} 2) + {space})\",\n _content: { ps: \"{space-guide-line}\" },\n },\n root: { \"--guide-line-color\": \"colors.border\" },\n },\n },\n },\n\n variants: {\n solid: {\n checkbox: {\n ...checkboxStyle.variants?.solid.root,\n _indicator: checkboxStyle.variants?.solid.indicator,\n _selected: {\n _checked: { \"--indicator-border-color\": \"colorScheme.contrast\" },\n _indicator: {\n color: \"colorScheme.solid\",\n _checked: { bg: \"colorScheme.contrast\" },\n _indeterminate: { bg: \"colorScheme.contrast\" },\n },\n },\n },\n item: {\n _selected: {\n _content: {\n layerStyle: \"solid\",\n \"--element-color\": \"colorScheme.contrast\",\n },\n _focusVisible: {\n _content: { borderColor: \"{focus-ring-color}\" },\n },\n },\n },\n },\n subtle: {\n checkbox: {\n ...checkboxStyle.variants?.solid.root,\n _indicator: checkboxStyle.variants?.solid.indicator,\n },\n item: {\n _selected: {\n _content: {\n layerStyle: \"subtle\",\n \"--element-color\": \"colorScheme.fg\",\n },\n _focusVisible: {\n _content: { borderColor: \"{focus-ring-color}\" },\n },\n },\n },\n },\n },\n\n sizes: {\n sm: {\n item: { \"--depth-space\": \"spaces.1.5\", \"--gap\": \"spaces.1.5\" },\n root: { fontSize: \"sm\" },\n },\n md: {\n item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n root: { fontSize: \"md\" },\n },\n lg: {\n item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n root: { fontSize: \"lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"subtle\",\n shape: \"rounded\",\n withGuideLine: false,\n },\n})\n\nexport type TreeStyle = typeof treeStyle\n"],"mappings":"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"}

package/dist/cjs/components/tree/use-tree.cjs CHANGED Viewed

@@ -68,7 +68,7 @@ const useTree = ({ checkable = false, checkedValue: checkedValueProp, children,
 				value: ""
 			};
 		}, 400);
-		const descendant = descendants.enabledValues({ expanded: true }).filter((descendant$1) => !(0, require_utils_index.utils_exports.isUndefined)(descendant$1.value) && descendant$1.value !== searchRef.current.omitValue).find(({ value: value$1 }) => (0, require_utils_index.utils_exports.match)(value$1, searchRef.current.value, "startsWith"));
+		const descendant = descendants.enabledValues({ expanded: true }).filter((descendant$1) => !(0, require_utils_index.utils_exports.isUndefined)(descendant$1.value) && descendant$1.value !== searchRef.current.omitValue).find(({ query, value: value$1 }) => (0, require_utils_index.utils_exports.match)(query ?? value$1, searchRef.current.value, "startsWith"));
 		if (descendant) onActiveDescendant(descendant);
 	}, [descendants, onActiveDescendant]);
 	const onSelectedChange = (0, react.useCallback)((value) => {
@@ -173,7 +173,7 @@ const getRangeValues = (descendants) => (start, end) => {
 		return 0;
 	});
 };
-const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disabled = false, open: openProp, value: valueProp, onClose: onCloseProp, onOpen: onOpenProp, ...rest } = {}) => {
+const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disabled = false, open: openProp, query, value: valueProp, onClose: onCloseProp, onOpen: onOpenProp, ...rest } = {}) => {
 	const context = useTreeItemContext();
 	const { activeDescendant, checkable, checkedValue, expandedValue, multiple, selectedValue, onActiveDescendant, onCheckedChange, onCollapseAll, onExpandAll, onExpandedChange, onSearch, onSelectedChange } = useTreeContext();
 	const [children, setChildren] = (0, react.useState)(childrenProp);
@@ -200,6 +200,7 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		disabled,
 		expanded: branchOpen.slice(0, -1).every(Boolean),
 		group,
+		query,
 		value
 	});
 	const [groupLoading, onGroupChildren] = require_hooks_use_async_callback_index.useAsyncCallback(async () => {
@@ -232,6 +233,8 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 			onGroupChildren().then(() => {
 				onOpen();
 				onExpandedChange(value);
+			}).catch(() => {
+				initialAsyncRef.current = false;
 			});
 		} else {
 			onOpen();
@@ -322,7 +325,7 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		if (ev.key.length !== 1) return;
 		if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
 		ev.preventDefault();
-		onSearch(ev.key, value);
+		onSearch(ev.key, query ?? value);
 	}, [
 		activeDescendant,
 		descendants,
@@ -341,14 +344,15 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		onSearch,
 		onSelect,
 		onSelectedChange,
+		query,
 		value
 	]);
 	const onItemClick = (0, react.useCallback)((ev) => {
+		ev.stopPropagation();
 		if (disabled || !value) return;
 		if (group && !groupLoading) {
 			if (!ev.ctrlKey && !ev.metaKey && !ev.shiftKey) onGroupToggle();
 		}
-		ev.stopPropagation();
 		onSelect(ev);
 	}, [
 		disabled,
@@ -391,15 +395,23 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		descendants,
 		context
 	]);
-	require_effect.useUpdateEffect(() => {
+	require_effect.useSafeLayoutEffect(() => {
 		if (defaultExpanded) if (async && !initialAsyncRef.current) {
 			initialAsyncRef.current = true;
 			onGroupChildren().then(() => {
 				onOpen();
+			}).catch(() => {
+				initialAsyncRef.current = false;
 			});
 		} else onOpen();
 		else onClose();
-	}, [defaultExpanded]);
+	}, [
+		async,
+		defaultExpanded,
+		onClose,
+		onGroupChildren,
+		onOpen
+	]);
 	require_effect.useSafeLayoutEffect(() => {
 		if (!group || !checkable) return;
 		const { children: children$1 } = getChildDescendants(descendants)(value);
@@ -473,6 +485,7 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, labelId),
 			"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
 			checked,
+			disabled,
 			indeterminate,
 			tabIndex: -1,
 			...props,
@@ -482,6 +495,7 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 			labelId,
 			selected,
 			checked,
+			disabled,
 			indeterminate,
 			onCheckboxChange
 		]),