@yamada-ui/react 2.2.5-dev-20260720084813 → 2.2.5-dev-20260720123845

package/dist/esm/components/slider/use-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLRefAttributes,\n  Orientation,\n  PropGetter,\n  RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  clampNumber,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isNumber,\n  mergeRefs,\n  percentToValue,\n  roundNumberToStep,\n  runKeyAction,\n  valueToPercent,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] | number = number>\n  extends\n    Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * The minimum distance between slider thumbs.\n   * Useful for preventing the thumbs from being too close together.\n   *\n   * @default 0\n   */\n  betweenThumbs?: number\n  /**\n   * The initial value of the slider.\n   */\n  defaultValue?: Y\n  /**\n   * The base `id` to use for the slider.\n   */\n  id?: string\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 100\n   */\n  max?: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The orientation of the slider.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * The value of the slider.\n   */\n  value?: Y\n  /**\n   * This is used to format the value so that screen readers\n   * can speak out a more human-friendly value.\n   *\n   * It is used to set the `aria-valuetext` property of the input.\n   */\n  getAriaValueText?: (value: number, index: number) => string | undefined\n  /**\n   * Function called whenever the slider value changes.\n   */\n  onChange?: (value: Y) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: Y) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] | number = number>(\n  props: UseSliderProps<Y> = {},\n) => {\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      betweenThumbs = 0,\n      defaultValue = 0 as Y,\n      disabled,\n      getAriaValueText,\n      max = 100,\n      min = 0,\n      orientation = \"horizontal\",\n      readOnly,\n      required,\n      step = 1,\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeEnd,\n      onChangeStart,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { t } = useI18n(\"slider\")\n  const currentIndex = useRef(0)\n  const interactive = !(disabled || readOnly)\n  const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n    onEnd: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      if (range) {\n        const start = currentIndex.current === 0\n        const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n        const oppositeValue = value[oppositeIndex]\n\n        onChangeEnd?.(\n          (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n        )\n      } else {\n        onChangeEnd?.(panValue as Y)\n      }\n    },\n    onMove: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChange(currentIndex.current, panValue)\n    },\n    onStart: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      if (range) {\n        const distances = value.map((value) => Math.abs(value - panValue))\n        const closest = Math.min(...distances)\n        const index = distances.indexOf(closest)\n\n        currentIndex.current = index\n\n        const start = index === 0\n        const oppositeIndex = index === 0 ? 1 : 0\n        const oppositeValue = value[oppositeIndex]\n\n        onChangeStart?.(\n          (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n        )\n      } else {\n        currentIndex.current = 0\n\n        onChangeStart?.(value)\n      }\n\n      onChange(currentIndex.current, panValue)\n    },\n  })\n  const range = !isNumber(value)\n  const percent = (\n    range\n      ? value.map((value) => valueToPercent(value, min, max))\n      : valueToPercent(value, min, max)\n  ) as Y extends number ? number : number[]\n  const tenStep = (max - min) / 10\n  const oneStep = step || (max - min) / 100\n\n  if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n  const getMinMax = useCallback(\n    (index: number) => {\n      const start = index === 0\n      const oppositeIndex = index === 0 ? 1 : 0\n      const oppositeValue = range ? value[oppositeIndex] : value\n\n      return {\n        max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n        min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n      }\n    },\n    [betweenThumbs, max, min, range, value],\n  )\n\n  const getPanValue = useCallback(\n    ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n      const diff = orientation === \"horizontal\" ? x - left : bottom - y\n      const length = orientation === \"horizontal\" ? width : height\n      const percent = diff / length\n\n      let nextValue = percentToValue(percent, min, max)\n\n      nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n      nextValue = clampNumber(nextValue, min, max)\n\n      return nextValue\n    },\n    [orientation, min, max, step],\n  )\n\n  const onChange = useCallback(\n    (index: number, value: number) => {\n      if (!interactive) return\n\n      const { max, min } = getMinMax(index)\n\n      value = parseFloat(roundNumberToStep(value, min, oneStep))\n      value = clampNumber(value, min, max)\n\n      setValue((prev) => {\n        if (isArray(prev)) {\n          const next = [...prev]\n\n          next[index] = value\n\n          return next as Y\n        } else {\n          return value as Y\n        }\n      })\n    },\n    [getMinMax, interactive, oneStep, setValue],\n  )\n\n  const stepUp = useCallback(\n    (index: number, step = oneStep) =>\n      range\n        ? onChange(index, value[index]! + step)\n        : onChange(index, value + step),\n    [oneStep, range, onChange, value],\n  )\n\n  const stepDown = useCallback(\n    (index: number, step = oneStep) =>\n      range\n        ? onChange(index, value[index]! - step)\n        : onChange(index, value - step),\n    [oneStep, range, onChange, value],\n  )\n\n  const onKeyDown = useCallback(\n    (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n      const { max, min } = getMinMax(index)\n\n      runKeyAction(ev, {\n        ArrowDown: () => stepDown(index),\n        ArrowLeft: () => stepDown(index),\n        ArrowRight: () => stepUp(index),\n        ArrowUp: () => stepUp(index),\n        End: () => onChange(index, max),\n        Home: () => onChange(index, min),\n        PageDown: () => stepDown(index, tenStep),\n        PageUp: () => stepUp(index, tenStep),\n      })\n    },\n    [getMinMax, onChange, stepDown, stepUp, tenStep],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => {\n      const computedProps: HTMLProps = mergeProps(\n        dataProps,\n        { \"data-orientation\": orientation },\n        rest,\n        props,\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n      )()\n\n      computedProps.style ??= {}\n\n      if (isArray(percent)) {\n        computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n        computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n      } else {\n        computedProps.style[\"--range-start\"] = \"0%\"\n        computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n      }\n\n      return computedProps\n    },\n    [dataProps, eventProps, orientation, percent, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n    ({ index = 0, ...props } = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...dataProps,\n      ...ariaProps,\n      id,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: range ? value[index]! : value,\n      ...props,\n      ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      disabled,\n      readOnly,\n      required,\n      range,\n      value,\n      ref,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props) =>\n      getPanEventProps({\n        ...dataProps,\n        \"data-orientation\": orientation,\n        ...props,\n      }),\n    [dataProps, getPanEventProps, orientation],\n  )\n\n  const getRangeProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      \"data-orientation\": orientation,\n      \"data-range\": dataAttr(range),\n      ...props,\n    }),\n    [dataProps, orientation, range],\n  )\n\n  const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n    useCallback(\n      ({ style, value: valueProp, ...props }) => {\n        const between = range\n          ? value[0] < valueProp && valueProp < value[1]\n          : valueProp < value\n        const percent = valueToPercent(valueProp, min, max)\n\n        return {\n          ...dataProps,\n          \"aria-hidden\": true,\n          \"data-between\": dataAttr(between),\n          \"data-orientation\": orientation,\n          role: \"presentation\",\n          ...props,\n          style: { ...style, \"--mark-position\": `${percent}%` },\n        }\n      },\n      [dataProps, max, min, orientation, range, value],\n    )\n\n  const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index = 0, ...rest } = {}) => {\n      const { max, min } = getMinMax(index)\n\n      const props: HTMLProps = {\n        ...dataProps,\n        ...ariaProps,\n        \"aria-label\": t(\"Slider thumb\"),\n        \"aria-orientation\": orientation,\n        \"aria-valuemax\": max,\n        \"aria-valuemin\": min,\n        role: \"slider\",\n        tabIndex: interactive ? 0 : -1,\n        ...rest,\n        \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n        onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n      }\n\n      if (range) {\n        const currentValue = value[index]!\n\n        props[\"data-start\"] = dataAttr(index === 0)\n        props[\"data-end\"] = dataAttr(index === 1)\n        props[\"aria-valuenow\"] = currentValue\n        props[\"aria-valuetext\"] =\n          ariaValueText ??\n          getAriaValueText?.(currentValue, index) ??\n          currentValue.toString()\n      } else {\n        props[\"data-end\"] = dataAttr(index === 0)\n        props[\"aria-valuenow\"] = value\n        props[\"aria-valuetext\"] =\n          ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n      }\n\n      return props\n    },\n    [\n      t,\n      ariaLabelledBy,\n      ariaProps,\n      ariaValueText,\n      dataProps,\n      getAriaValueText,\n      getMinMax,\n      interactive,\n      onKeyDown,\n      orientation,\n      range,\n      value,\n    ],\n  )\n\n  return {\n    percent,\n    range,\n    setValue,\n    stepDown,\n    stepUp,\n    value,\n    getInputProps,\n    getMarkProps,\n    getRangeProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n    onChange,\n  }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLRefAttributes,\n  Orientation,\n  PropGetter,\n  RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  clampNumber,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isNumber,\n  mergeRefs,\n  percentToValue,\n  roundNumberToStep,\n  runKeyAction,\n  valueToPercent,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] | number = number>\n  extends\n    Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * The minimum distance between slider thumbs.\n   * Useful for preventing the thumbs from being too close together.\n   *\n   * @default 0\n   */\n  betweenThumbs?: number\n  /**\n   * The initial value of the slider.\n   */\n  defaultValue?: Y\n  /**\n   * The base `id` to use for the slider.\n   */\n  id?: string\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 100\n   */\n  max?: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The orientation of the slider.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * The value of the slider.\n   */\n  value?: Y\n  /**\n   * This is used to format the value so that screen readers\n   * can speak out a more human-friendly value.\n   *\n   * It is used to set the `aria-valuetext` property of the input.\n   */\n  getAriaValueText?: (value: number, index: number) => string | undefined\n  /**\n   * Function called whenever the slider value changes.\n   */\n  onChange?: (value: Y) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: Y) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] | number = number>(\n  props: UseSliderProps<Y> = {},\n) => {\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      betweenThumbs = 0,\n      defaultValue = 0 as Y,\n      disabled,\n      getAriaValueText,\n      max = 100,\n      min = 0,\n      orientation = \"horizontal\",\n      readOnly,\n      required,\n      step = 1,\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeEnd,\n      onChangeStart,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { t } = useI18n(\"slider\")\n  const currentIndex = useRef(0)\n  const interactive = !(disabled || readOnly)\n  const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n    onEnd: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      if (range) {\n        const start = currentIndex.current === 0\n        const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n        const oppositeValue = value[oppositeIndex]\n\n        onChangeEnd?.(\n          (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n        )\n      } else {\n        onChangeEnd?.(panValue as Y)\n      }\n    },\n    onMove: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChange(currentIndex.current, panValue)\n    },\n    onStart: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      if (range) {\n        const distances = value.map((value) => Math.abs(value - panValue))\n        const closest = Math.min(...distances)\n        const index = distances.indexOf(closest)\n\n        currentIndex.current = index\n\n        const start = index === 0\n        const oppositeIndex = index === 0 ? 1 : 0\n        const oppositeValue = value[oppositeIndex]\n\n        onChangeStart?.(\n          (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n        )\n      } else {\n        currentIndex.current = 0\n\n        onChangeStart?.(value)\n      }\n\n      onChange(currentIndex.current, panValue)\n    },\n  })\n  const range = !isNumber(value)\n  const percent = (\n    range\n      ? value.map((value) => valueToPercent(value, min, max))\n      : valueToPercent(value, min, max)\n  ) as Y extends number ? number : number[]\n  const tenStep = (max - min) / 10\n  const oneStep = step || (max - min) / 100\n\n  if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n  const getMinMax = useCallback(\n    (index: number) => {\n      const start = index === 0\n      const oppositeIndex = index === 0 ? 1 : 0\n      const oppositeValue = range ? value[oppositeIndex] : value\n\n      return {\n        max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n        min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n      }\n    },\n    [betweenThumbs, max, min, range, value],\n  )\n\n  const getPanValue = useCallback(\n    ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n      const diff = orientation === \"horizontal\" ? x - left : bottom - y\n      const length = orientation === \"horizontal\" ? width : height\n      const percent = diff / length\n\n      let nextValue = percentToValue(percent, min, max)\n\n      nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n      nextValue = clampNumber(nextValue, min, max)\n\n      return nextValue\n    },\n    [orientation, min, max, step],\n  )\n\n  const onChange = useCallback(\n    (index: number, value: number) => {\n      if (!interactive) return\n\n      const { max, min } = getMinMax(index)\n\n      value = parseFloat(roundNumberToStep(value, min, oneStep))\n      value = clampNumber(value, min, max)\n\n      setValue((prev) => {\n        if (isArray(prev)) {\n          const next = [...prev]\n\n          next[index] = value\n\n          return next as Y\n        } else {\n          return value as Y\n        }\n      })\n    },\n    [getMinMax, interactive, oneStep, setValue],\n  )\n\n  const stepUp = useCallback(\n    (index: number, step = oneStep) =>\n      range\n        ? onChange(index, value[index]! + step)\n        : onChange(index, value + step),\n    [oneStep, range, onChange, value],\n  )\n\n  const stepDown = useCallback(\n    (index: number, step = oneStep) =>\n      range\n        ? onChange(index, value[index]! - step)\n        : onChange(index, value - step),\n    [oneStep, range, onChange, value],\n  )\n\n  const onKeyDown = useCallback(\n    (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n      const { max, min } = getMinMax(index)\n\n      runKeyAction(ev, {\n        ArrowDown: () => stepDown(index),\n        ArrowLeft: () => stepDown(index),\n        ArrowRight: () => stepUp(index),\n        ArrowUp: () => stepUp(index),\n        End: () => onChange(index, max),\n        Home: () => onChange(index, min),\n        PageDown: () => stepDown(index, tenStep),\n        PageUp: () => stepUp(index, tenStep),\n      })\n    },\n    [getMinMax, onChange, stepDown, stepUp, tenStep],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => {\n      const computedProps: HTMLProps = mergeProps(\n        dataProps,\n        { \"data-orientation\": orientation },\n        rest,\n        props,\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n      )()\n\n      computedProps.style ??= {}\n\n      if (isArray(percent)) {\n        computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n        computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n      } else {\n        computedProps.style[\"--range-start\"] = \"0%\"\n        computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n      }\n\n      return computedProps\n    },\n    [dataProps, eventProps, orientation, percent, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n    ({ index = 0, ...props } = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...dataProps,\n      ...ariaProps,\n      id,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: range ? value[index]! : value,\n      ...props,\n      ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      disabled,\n      readOnly,\n      required,\n      range,\n      value,\n      ref,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props) =>\n      getPanEventProps({\n        ...dataProps,\n        \"data-orientation\": orientation,\n        ...props,\n      }),\n    [dataProps, getPanEventProps, orientation],\n  )\n\n  const getRangeProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      \"data-orientation\": orientation,\n      \"data-range\": dataAttr(range),\n      ...props,\n    }),\n    [dataProps, orientation, range],\n  )\n\n  const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n    useCallback(\n      ({ style, value: valueProp, ...props }) => {\n        const between = range\n          ? value[0] < valueProp && valueProp < value[1]\n          : valueProp < value\n        const percent = valueToPercent(valueProp, min, max)\n\n        return {\n          ...dataProps,\n          \"aria-hidden\": true,\n          \"data-between\": dataAttr(between),\n          \"data-orientation\": orientation,\n          role: \"presentation\",\n          ...props,\n          style: { ...style, \"--mark-position\": `${percent}%` },\n        }\n      },\n      [dataProps, max, min, orientation, range, value],\n    )\n\n  const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index = 0, ...rest } = {}) => {\n      const { max, min } = getMinMax(index)\n\n      const props: HTMLProps = {\n        ...dataProps,\n        ...ariaProps,\n        \"aria-label\": t(\"Slider thumb\"),\n        \"aria-orientation\": orientation,\n        \"aria-valuemax\": max,\n        \"aria-valuemin\": min,\n        role: \"slider\",\n        tabIndex: interactive ? 0 : -1,\n        ...rest,\n        \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n        onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n      }\n\n      if (range) {\n        const currentValue = value[index]!\n\n        props[\"data-start\"] = dataAttr(index === 0)\n        props[\"data-end\"] = dataAttr(index === 1)\n        props[\"aria-valuenow\"] = currentValue\n        props[\"aria-valuetext\"] =\n          ariaValueText ??\n          getAriaValueText?.(currentValue, index) ??\n          currentValue.toString()\n      } else {\n        props[\"data-end\"] = dataAttr(index === 0)\n        props[\"aria-valuenow\"] = value\n        props[\"aria-valuetext\"] =\n          ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n      }\n\n      return props\n    },\n    [\n      t,\n      ariaLabelledBy,\n      ariaProps,\n      ariaValueText,\n      dataProps,\n      getAriaValueText,\n      getMinMax,\n      interactive,\n      onKeyDown,\n      orientation,\n      range,\n      value,\n    ],\n  )\n\n  return {\n    percent,\n    range,\n    setValue,\n    stepDown,\n    stepUp,\n    value,\n    getInputProps,\n    getMarkProps,\n    getRangeProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n    onChange,\n  }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}

package/dist/esm/components/tag/tag.js

@@ -16,8 +16,9 @@ const { ComponentContext, PropsContext: TagPropsContext, useComponentContext, us
 * @see https://yamada-ui.com/docs/components/tag
 */
 const Tag = withProvider(({ children, disabled, endIcon, startIcon, closeButtonProps, contentProps, iconProps, onClose, ...rest }) => {
+	const context = useMemo(() => ({ disabled }), [disabled]);
 	return /* @__PURE__ */ jsx(ComponentContext, {
-		value: useMemo(() => ({ disabled }), [disabled]),
+		value: context,
 		children: /* @__PURE__ */ jsxs(styled.span, {
 			"data-disabled": (0, utils_exports.dataAttr)(disabled),
 			...rest,

package/dist/esm/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n  extends HTMLStyledProps<\"span\">, ThemeProps<TagStyle> {\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Icon to be displayed to the end of the tag.\n   */\n  endIcon?: ReactNode\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactNode\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: TagContentProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLStyledProps<\"span\">\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TagPropsContext,\n  useComponentContext,\n  usePropsContext: useTagPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\nexport { TagPropsContext, useTagPropsContext }\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see https://yamada-ui.com/docs/components/tag\n */\nexport const Tag = withProvider<\"span\", TagProps, \"disabled\">(\n  ({\n    children,\n    disabled,\n    endIcon,\n    startIcon,\n    closeButtonProps,\n    contentProps,\n    iconProps,\n    onClose,\n    ...rest\n  }) => {\n    const context = useMemo(() => ({ disabled }), [disabled])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n          {startIcon ? (\n            <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n          ) : null}\n\n          {children ? (\n            <TagContent {...contentProps}>{children}</TagContent>\n          ) : null}\n\n          {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n          {onClose ? (\n            <TagCloseButton onClick={onClose} {...closeButtonProps} />\n          ) : null}\n        </styled.span>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n  undefined,\n  (props) => {\n    const { disabled } = useComponentContext()\n\n    return { \"data-disabled\": dataAttr(disabled), ...props }\n  },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n  \"icon\",\n  \"start\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n  \"icon\",\n  \"end\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n  \"icon\",\n  \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const { disabled } = useComponentContext()\n  const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n  const { t } = useI18n(\"tag\")\n\n  return {\n    \"aria-label\": t(\"Close tag\"),\n    \"data-disabled\": dataAttr(disabled),\n    children: children || <XIcon />,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;AAiDA,MAAM,EACJ,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,iBACE,oBAA0D,OAAO,QAAQ;;;;;;AAS7E,MAAa,MAAM,cAChB,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,SACA,GAAG,WACC;CAGJ,OACE,oBAAC,kBAAD;EAAkB,OAHJ,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAGtB;YAC7B,qBAAC,OAAO,MAAR;GAAa,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;GAAG,GAAI;aAApD;IACG,YACC,oBAAC,cAAD;KAAc,GAAI;eAAY;IAAwB,CAAA,IACpD;IAEH,WACC,oBAAC,YAAD;KAAY,GAAI;KAAe;IAAqB,CAAA,IAClD;IAEH,UAAU,oBAAC,YAAD;KAAY,GAAI;eAAY;IAAoB,CAAA,IAAI;IAE9D,UACC,oBAAC,gBAAD;KAAgB,SAAS;KAAS,GAAI;IAAmB,CAAA,IACvD;GACO;;CACG,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAChC,CAAC,CAAC;AAIF,MAAM,aAAa,YAAqC,QAAQ,SAAS,CAAC,CACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CACF;AAIA,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACF,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACF,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACF,CAAC,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,GAAG,YAAY;CACxC,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,aAAa,oBAAoB;CACzC,MAAM,OAAO,aAA8B;EAAE;EAAK;EAAU,GAAG;CAAM,CAAC;CACtE,MAAM,EAAE,MAAM,QAAQ,KAAK;CAE3B,OAAO;EACL,cAAc,EAAE,WAAW;EAC3B,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,UAAU,YAAY,oBAAC,OAAD,CAAQ,CAAA;EAC9B,GAAG;CACL;AACF,CAAC"}
+{"version":3,"file":"tag.js","names":[],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n  extends HTMLStyledProps<\"span\">, ThemeProps<TagStyle> {\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Icon to be displayed to the end of the tag.\n   */\n  endIcon?: ReactNode\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactNode\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: TagContentProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLStyledProps<\"span\">\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TagPropsContext,\n  useComponentContext,\n  usePropsContext: useTagPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\nexport { TagPropsContext, useTagPropsContext }\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see https://yamada-ui.com/docs/components/tag\n */\nexport const Tag = withProvider<\"span\", TagProps, \"disabled\">(\n  ({\n    children,\n    disabled,\n    endIcon,\n    startIcon,\n    closeButtonProps,\n    contentProps,\n    iconProps,\n    onClose,\n    ...rest\n  }) => {\n    const context = useMemo(() => ({ disabled }), [disabled])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n          {startIcon ? (\n            <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n          ) : null}\n\n          {children ? (\n            <TagContent {...contentProps}>{children}</TagContent>\n          ) : null}\n\n          {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n          {onClose ? (\n            <TagCloseButton onClick={onClose} {...closeButtonProps} />\n          ) : null}\n        </styled.span>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n  undefined,\n  (props) => {\n    const { disabled } = useComponentContext()\n\n    return { \"data-disabled\": dataAttr(disabled), ...props }\n  },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n  \"icon\",\n  \"start\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n  \"icon\",\n  \"end\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n  \"icon\",\n  \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const { disabled } = useComponentContext()\n  const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n  const { t } = useI18n(\"tag\")\n\n  return {\n    \"aria-label\": t(\"Close tag\"),\n    \"data-disabled\": dataAttr(disabled),\n    children: children || <XIcon />,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;AAiDA,MAAM,EACJ,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,iBACE,oBAA0D,OAAO,QAAQ;;;;;;AAS7E,MAAa,MAAM,cAChB,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,SACA,GAAG,WACC;CACJ,MAAM,UAAU,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;CAExD,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,qBAAC,OAAO,MAAR;GAAa,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;GAAG,GAAI;aAApD;IACG,YACC,oBAAC,cAAD;KAAc,GAAI;eAAY;IAAwB,CAAA,IACpD;IAEH,WACC,oBAAC,YAAD;KAAY,GAAI;KAAe;IAAqB,CAAA,IAClD;IAEH,UAAU,oBAAC,YAAD;KAAY,GAAI;eAAY;IAAoB,CAAA,IAAI;IAE9D,UACC,oBAAC,gBAAD;KAAgB,SAAS;KAAS,GAAI;IAAmB,CAAA,IACvD;GACO;;CACG,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAChC,CAAC,CAAC;AAIF,MAAM,aAAa,YAAqC,QAAQ,SAAS,CAAC,CACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CACF;AAIA,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACF,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACF,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACF,CAAC,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,GAAG,YAAY;CACxC,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,aAAa,oBAAoB;CACzC,MAAM,OAAO,aAA8B;EAAE;EAAK;EAAU,GAAG;CAAM,CAAC;CACtE,MAAM,EAAE,MAAM,QAAQ,KAAK;CAE3B,OAAO;EACL,cAAc,EAAE,WAAW;EAC3B,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,UAAU,YAAY,oBAAC,OAAD,CAAQ,CAAA;EAC9B,GAAG;CACL;AACF,CAAC"}

package/dist/esm/components/tree/tree.js

@@ -47,70 +47,72 @@ const TreeRoot = withProvider(({ size, animated, children, endElement, indicator
 		...rest,
 		children: computedChildren
 	});
+	const context = useMemo(() => ({
+		activeDescendant,
+		checkable,
+		checkedValue,
+		expandedValue,
+		multiple,
+		selectedValue,
+		onActiveDescendant,
+		onCheckedChange,
+		onCollapseAll,
+		onExpandAll,
+		onExpandedChange,
+		onSearch,
+		onSelectedChange
+	}), [
+		activeDescendant,
+		checkable,
+		checkedValue,
+		expandedValue,
+		multiple,
+		selectedValue,
+		onActiveDescendant,
+		onCheckedChange,
+		onSearch,
+		onCollapseAll,
+		onExpandAll,
+		onExpandedChange,
+		onSelectedChange
+	]);
+	const componentContext = useMemo(() => ({
+		size,
+		animated,
+		endElement,
+		indicator,
+		indicatorHidden,
+		loadingScheme,
+		startElement,
+		checkboxProps,
+		endElementProps,
+		groupProps,
+		indicatorProps,
+		itemProps,
+		labelProps,
+		startElementProps
+	}), [
+		size,
+		animated,
+		endElement,
+		indicator,
+		indicatorHidden,
+		startElement,
+		endElementProps,
+		groupProps,
+		indicatorProps,
+		itemProps,
+		labelProps,
+		startElementProps,
+		checkboxProps,
+		loadingScheme
+	]);
 	return /* @__PURE__ */ jsx(TreeDescendantsContext, {
 		value: descendants,
 		children: /* @__PURE__ */ jsx(TreeContext, {
-			value: useMemo(() => ({
-				activeDescendant,
-				checkable,
-				checkedValue,
-				expandedValue,
-				multiple,
-				selectedValue,
-				onActiveDescendant,
-				onCheckedChange,
-				onCollapseAll,
-				onExpandAll,
-				onExpandedChange,
-				onSearch,
-				onSelectedChange
-			}), [
-				activeDescendant,
-				checkable,
-				checkedValue,
-				expandedValue,
-				multiple,
-				selectedValue,
-				onActiveDescendant,
-				onCheckedChange,
-				onSearch,
-				onCollapseAll,
-				onExpandAll,
-				onExpandedChange,
-				onSelectedChange
-			]),
+			value: context,
 			children: /* @__PURE__ */ jsx(ComponentContext, {
-				value: useMemo(() => ({
-					size,
-					animated,
-					endElement,
-					indicator,
-					indicatorHidden,
-					loadingScheme,
-					startElement,
-					checkboxProps,
-					endElementProps,
-					groupProps,
-					indicatorProps,
-					itemProps,
-					labelProps,
-					startElementProps
-				}), [
-					size,
-					animated,
-					endElement,
-					indicator,
-					indicatorHidden,
-					startElement,
-					endElementProps,
-					groupProps,
-					indicatorProps,
-					itemProps,
-					labelProps,
-					startElementProps,
-					checkboxProps,
-					loadingScheme
-				]),
+				value: componentContext,
 				children: /* @__PURE__ */ jsx(styled.ul, { ...getRootProps() })
 			})
 		})
@@ -127,7 +129,8 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 	const itemStartElement = getReactNodeOrFunction("item", startElement, componentContext.startElement);
 	const itemEndElement = getReactNodeOrFunction("item", endElement, componentContext.endElement);
 	const asyncChildren = useCallback(async () => {
-		return recursiveTreeItem(await asyncChildrenProp?.());
+		const items = await asyncChildrenProp?.();
+		return recursiveTreeItem(items);
 	}, [asyncChildrenProp]);
 	const { branchOpen, children, disabled, group, groupLoading, groupOpen, level, props, value, getCheckboxProps, getGroupItemProps, getGroupProps, getIndicatorProps, getItemProps, getLabelProps, onGroupClose, onGroupOpen, onGroupToggle } = useTreeItem({
 		...componentContext.itemProps,
@@ -147,65 +150,67 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 		disabled,
 		expanded: groupOpen
 	};
+	const context = useMemo(() => ({
+		branchOpen,
+		groupOpen,
+		level,
+		value,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle
+	}), [
+		branchOpen,
+		groupOpen,
+		level,
+		value,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle
+	]);
+	const itemComponentContext = useMemo(() => ({
+		checkboxProps: {
+			size: componentContext.size,
+			...getCheckboxProps({
+				...componentContext.checkboxProps,
+				...checkboxProps
+			})
+		},
+		endElementProps: {
+			...componentContext.endElementProps,
+			...endElementProps
+		},
+		indicatorProps: { ...getIndicatorProps({
+			...componentContext.indicatorProps,
+			...indicatorProps
+		}) },
+		labelProps: { ...getLabelProps({
+			...componentContext.labelProps,
+			...labelProps
+		}) },
+		startElementProps: {
+			...componentContext.startElementProps,
+			...startElementProps
+		}
+	}), [
+		checkboxProps,
+		componentContext.checkboxProps,
+		componentContext.endElementProps,
+		componentContext.indicatorProps,
+		componentContext.labelProps,
+		componentContext.size,
+		componentContext.startElementProps,
+		endElementProps,
+		getCheckboxProps,
+		getIndicatorProps,
+		getLabelProps,
+		indicatorProps,
+		labelProps,
+		startElementProps
+	]);
 	return /* @__PURE__ */ jsx(TreeItemContext, {
-		value: useMemo(() => ({
-			branchOpen,
-			groupOpen,
-			level,
-			value,
-			onGroupClose,
-			onGroupOpen,
-			onGroupToggle
-		}), [
-			branchOpen,
-			groupOpen,
-			level,
-			value,
-			onGroupClose,
-			onGroupOpen,
-			onGroupToggle
-		]),
+		value: context,
 		children: /* @__PURE__ */ jsx(ItemComponentContext, {
-			value: useMemo(() => ({
-				checkboxProps: {
-					size: componentContext.size,
-					...getCheckboxProps({
-						...componentContext.checkboxProps,
-						...checkboxProps
-					})
-				},
-				endElementProps: {
-					...componentContext.endElementProps,
-					...endElementProps
-				},
-				indicatorProps: { ...getIndicatorProps({
-					...componentContext.indicatorProps,
-					...indicatorProps
-				}) },
-				labelProps: { ...getLabelProps({
-					...componentContext.labelProps,
-					...labelProps
-				}) },
-				startElementProps: {
-					...componentContext.startElementProps,
-					...startElementProps
-				}
-			}), [
-				checkboxProps,
-				componentContext.checkboxProps,
-				componentContext.endElementProps,
-				componentContext.indicatorProps,
-				componentContext.labelProps,
-				componentContext.size,
-				componentContext.startElementProps,
-				endElementProps,
-				getCheckboxProps,
-				getIndicatorProps,
-				getLabelProps,
-				indicatorProps,
-				labelProps,
-				startElementProps
-			]),
+			value: itemComponentContext,
 			children: group ? /* @__PURE__ */ jsxs(styled.li, {
 				...getGroupItemProps(itemProps),
 				children: [/* @__PURE__ */ jsxs(styled.div, {

package/dist/esm/components/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":["createContext"],"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, mergeProps, 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) return custom\n  else if (isObject(root) && (\"group\" in root || \"item\" in root))\n    return root[type]\n  else return root\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 mergeProps(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 mergeProps(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 mergeProps(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 mergeProps(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 mergeProps(labelProps, props)()\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAM,qBAAqB,UAAuB;CAChD,OAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MACJ,MAAM,WAAA,GAAA,cAAA,SAAA,CAAmB,MAAM,KAAK,IAAI,GAAG,MAAM,MAAM,GAAG,UAAU;EAEtE,IAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;GAE9B,OACE,oBAAC,UAAD;IAAoB,GAAI;cACrB,kBAAkB,QAAQ;GACnB,GAFK,GAEL;EAEd,OACE,OAAO,oBAAC,UAAD,EAAoB,GAAI,MAAQ,GAAjB,GAAiB;CAE3C,CAAC;AACH;AAEA,MAAM,0BACJ,MACA,QACA,SAC2C;CAC3C,KAAA,GAAA,cAAA,SAAA,CAAa,MAAM,MAAM,WAAW,UAAU,UAAU,SACtD,OAAO,OAAO;MACX,IAAI,QAAQ,OAAO;MACnB,KAAA,GAAA,cAAA,SAAA,CAAa,IAAI,MAAM,WAAW,QAAQ,UAAU,OACvD,OAAO,KAAK;MACT,OAAO;AACd;AA4BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAoC,EAAE,MAAM,uBAAuB,CAAC;AAwCtE,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,SACF;;;;;;AASA,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,GAAG,WAC0B;CAC7B,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,kBAAkB,KAAK;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,EACJ,kBACA,WACA,cACA,aACA,eACA,UACA,eACA,cACA,oBACA,iBACA,eACA,aACA,kBACA,UACA,qBACE,QAAQ;EAAE,GAAG;EAAM,UAAU;CAAiB,CAAC;CAoEnD,OACE,oBAAC,wBAAD;EAAwB,OAAO;YAC7B,oBAAC,aAAD;GAAa,OArED,eACP;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,IACA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAuC4B;aACxB,oBAAC,kBAAD;IAAkB,OAtCC,eAChB;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF,IACA;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF,CAM4C;cACtC,oBAAC,OAAO,IAAR,EAAW,GAAI,aAAa,EAAI,CAAA;GAChB,CAAA;EACP,CAAA;CACS,CAAA;AAE5B,GACA,QACA,EAAE,eAAe,CAAC,MAAM,EAAE,CAC5B,CAAC,CAAC;AAsEF,MAAa,WAAW,aACrB,EACC,WACA,KACA,aACA,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,OACA,cACA,OAAO,aAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA,GAC7C,eACA,iBACA,YACA,gBACA,YACA,WACA,mBACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,UAAU,oBACd,iBAAiB,iBAAiB,iBAAiB,MACrD;CACA,MAAM,WAAW,gBAAgB,iBAAiB;CAClD,MAAM,YAAY,iBAAiB,iBAAiB;CACpD,MAAM,oBAAoB,uBACxB,SACA,cACA,iBAAiB,YACnB;CACA,MAAM,kBAAkB,uBACtB,SACA,YACA,iBAAiB,UACnB;CACA,MAAM,mBAAmB,uBACvB,QACA,cACA,iBAAiB,YACnB;CACA,MAAM,iBAAiB,uBACrB,QACA,YACA,iBAAiB,UACnB;CACA,MAAM,gBAAgB,YAAY,YAAY;EAG5C,OAAO,kBAAkB,MAFL,oBAAoB,CAEV;CAChC,GAAG,CAAC,iBAAiB,CAAC;CACtB,MAAM,EACJ,YACA,UACA,UACA,OACA,cACA,WACA,OACA,OACA,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,cACA,aACA,kBACE,YAAY;EACd,GAAG,iBAAiB;EACpB,GAAG;EACH,eAAe,oBAAoB,gBAAgB,KAAA;EACnD,OAAO,WAAA,GAAA,cAAA,SAAA,CAAmB,KAAK,IAAI,QAAQ,KAAA;EAC3C,OAAO;CACT,CAAC;CACD,MAAM,YAAY;EAChB;EACA;EACA;EACA,WAAW,MAAM,SAAS;EAC1B,GAAG;CACL;CACA,MAAM,gBAAgB;EAAE;EAAU,UAAU;CAAU;CAqEtD,OACE,oBAAC,iBAAD;EAAiB,OArEH,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAmD8B;YAC5B,oBAAC,sBAAD;GAAsB,OAlDG,eACpB;IACL,eAAe;KACb,MAAM,iBAAiB;KACvB,GAAG,iBAAiB;MAClB,GAAG,iBAAiB;MACpB,GAAG;KACL,CAAC;IACH;IACA,iBAAiB;KACf,GAAG,iBAAiB;KACpB,GAAG;IACL;IACA,gBAAgB,EACd,GAAG,kBAAkB;KACnB,GAAG,iBAAiB;KACpB,GAAG;IACL,CAAC,EACH;IACA,YAAY,EACV,GAAG,cAAc;KACf,GAAG,iBAAiB;KACpB,GAAG;IACL,CAAC,EACH;IACA,mBAAmB;KACjB,GAAG,iBAAiB;KACpB,GAAG;IACL;GACF,IACA;IACE;IACA,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAKkD;aAC7C,QACC,qBAAC,OAAO,IAAR;IAAW,GAAI,kBAAkB,SAAS;cAA1C,CACE,qBAAC,OAAO,KAAR;KAAY,gBAAA;KAAa,GAAI;eAA7B;MACE,oBAAC,eAAD;OAAe,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;iBAC5C,eACC,oBAAC,SAAD,CAAU,CAAA,KAAA,GAAA,cAAA,QAAA,CAEF,WAAW,aAAa;MAErB,CAAA;MACd,YAAY,oBAAC,cAAD,CAAe,CAAA,IAAI;MAC/B,oBACC,oBAAC,kBAAD,EAAA,WAAA,GAAA,cAAA,QAAA,CACW,mBAAmB,aAAa,EACzB,CAAA,IAChB;MACH,QAAQ,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,IAAI;MACzC,kBACC,oBAAC,gBAAD,EAAA,WAAA,GAAA,cAAA,QAAA,CACW,iBAAiB,aAAa,EACzB,CAAA,IACd;KACM;QAEZ,oBAAC,WAAD;KACE,UAAU,CAAC,WAAW,IAAI,KAAA;KAC1B,MAAM;KACN,GAAI,cAAc;MAChB,GAAG,iBAAiB;MACpB,GAAG;KACL,CAAC;KAEA;IACQ,CAAA,CACF;QAEX,oBAAC,OAAO,IAAR;IAAW,GAAI,aAAa,SAAS;cACnC,qBAAC,OAAO,KAAR;KAAY,gBAAA;KAAa,GAAI;eAA7B;MACE,oBAAC,eAAD,EAAe,eAAA,KAAa,CAAA;MAC3B,YAAY,oBAAC,cAAD,CAAe,CAAA,IAAI;MAC/B,mBACC,oBAAC,kBAAD,EAAA,WAAA,GAAA,cAAA,QAAA,CACW,kBAAkB,aAAa,EACxB,CAAA,IAChB;MACH,QAAQ,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,IAAI;MACzC,iBACC,oBAAC,gBAAD,EAAA,WAAA,GAAA,cAAA,QAAA,CACW,gBAAgB,aAAa,EACxB,CAAA,IACd;KACM;;GACH,CAAA;EAEO,CAAA;CACP,CAAA;AAErB,GACA,MACF,CAAC,CAAC;AAOF,MAAM,YAAY,aAAmC,UAAU;CAC7D,OAAO,oBAAC,UAAD;EAAU,IAAG;EAAK,IAAA,GAAA,cAAA,KAAA,CAAwB,KAAK;CAAI,CAAA;AAC5D,GAAG,OAAO,CAAC,CAAC;AAIZ,MAAM,gBAAgB,aACnB,EAAE,WAAW,oBAAC,kBAAD,CAAmB,CAAA,GAAG,GAAG,WAAW;CAChD,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,IAAI,iBAAiB,OAAO;CAE5B,IAAI,eAAiC,QAAQ,GAC3C,OAAO,aAAa,UAAU;EAAE,GAAG;EAAM,GAAG,SAAS;CAAM,CAAC;CAE9D,OAAO,SAAS,MAAM,QAAQ,IAAI,IAAI,SAAS,KAAK,IAAI,IAAI;AAC9D,GACA,WACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,wBAAwB;CAEnD,OAAO,WAAW,gBAAgB,KAAK,CAAC,CAAC;AAC3C,CAAC;AAID,MAAM,eAAe,YACnB,UACA,UACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,kBAAkB,wBAAwB;CAElD,OAAO,WAAW,eAAe,KAAK,CAAC,CAAC;AAC1C,CAAC;AAID,MAAM,mBAAmB,YAA0C,OAAO;CACxE,MAAM;CACN,MAAM,CAAC,WAAW,OAAO;AAC3B,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,sBAAsB,wBAAwB;CAEtD,OAAO,WAAW,mBAAmB,KAAK,CAAC,CAAC;AAC9C,CAAC;AAID,MAAM,iBAAiB,YAAwC,OAAO;CACpE,MAAM;CACN,MAAM,CAAC,WAAW,KAAK;AACzB,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,oBAAoB,wBAAwB;CAEpD,OAAO,WAAW,iBAAiB,KAAK,CAAC,CAAC;AAC5C,CAAC;AAID,MAAM,YAAY,YAAoC,QAAQ,OAAO,CAAC,CACpE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,eAAe,wBAAwB;CAE/C,OAAO,WAAW,YAAY,KAAK,CAAC,CAAC;AACvC,CACF"}
+{"version":3,"file":"tree.js","names":["createContext"],"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, mergeProps, 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) return custom\n  else if (isObject(root) && (\"group\" in root || \"item\" in root))\n    return root[type]\n  else return root\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 mergeProps(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 mergeProps(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 mergeProps(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 mergeProps(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 mergeProps(labelProps, props)()\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAM,qBAAqB,UAAuB;CAChD,OAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MACJ,MAAM,WAAA,GAAA,cAAA,SAAA,CAAmB,MAAM,KAAK,IAAI,GAAG,MAAM,MAAM,GAAG,UAAU;EAEtE,IAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;GAE9B,OACE,oBAAC,UAAD;IAAoB,GAAI;cACrB,kBAAkB,QAAQ;GACnB,GAFK,GAEL;EAEd,OACE,OAAO,oBAAC,UAAD,EAAoB,GAAI,MAAQ,GAAjB,GAAiB;CAE3C,CAAC;AACH;AAEA,MAAM,0BACJ,MACA,QACA,SAC2C;CAC3C,KAAA,GAAA,cAAA,SAAA,CAAa,MAAM,MAAM,WAAW,UAAU,UAAU,SACtD,OAAO,OAAO;MACX,IAAI,QAAQ,OAAO;MACnB,KAAA,GAAA,cAAA,SAAA,CAAa,IAAI,MAAM,WAAW,QAAQ,UAAU,OACvD,OAAO,KAAK;MACT,OAAO;AACd;AA4BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAoC,EAAE,MAAM,uBAAuB,CAAC;AAwCtE,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,SACF;;;;;;AASA,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,GAAG,WAC0B;CAC7B,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,kBAAkB,KAAK;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,EACJ,kBACA,WACA,cACA,aACA,eACA,UACA,eACA,cACA,oBACA,iBACA,eACA,aACA,kBACA,UACA,qBACE,QAAQ;EAAE,GAAG;EAAM,UAAU;CAAiB,CAAC;CACnD,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,mBAAmB,eAChB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,wBAAD;EAAwB,OAAO;YAC7B,oBAAC,aAAD;GAAa,OAAO;aAClB,oBAAC,kBAAD;IAAkB,OAAO;cACvB,oBAAC,OAAO,IAAR,EAAW,GAAI,aAAa,EAAI,CAAA;GAChB,CAAA;EACP,CAAA;CACS,CAAA;AAE5B,GACA,QACA,EAAE,eAAe,CAAC,MAAM,EAAE,CAC5B,CAAC,CAAC;AAsEF,MAAa,WAAW,aACrB,EACC,WACA,KACA,aACA,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,OACA,cACA,OAAO,aAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA,GAC7C,eACA,iBACA,YACA,gBACA,YACA,WACA,mBACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,UAAU,oBACd,iBAAiB,iBAAiB,iBAAiB,MACrD;CACA,MAAM,WAAW,gBAAgB,iBAAiB;CAClD,MAAM,YAAY,iBAAiB,iBAAiB;CACpD,MAAM,oBAAoB,uBACxB,SACA,cACA,iBAAiB,YACnB;CACA,MAAM,kBAAkB,uBACtB,SACA,YACA,iBAAiB,UACnB;CACA,MAAM,mBAAmB,uBACvB,QACA,cACA,iBAAiB,YACnB;CACA,MAAM,iBAAiB,uBACrB,QACA,YACA,iBAAiB,UACnB;CACA,MAAM,gBAAgB,YAAY,YAAY;EAC5C,MAAM,QAAQ,MAAM,oBAAoB;EAExC,OAAO,kBAAkB,KAAK;CAChC,GAAG,CAAC,iBAAiB,CAAC;CACtB,MAAM,EACJ,YACA,UACA,UACA,OACA,cACA,WACA,OACA,OACA,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,cACA,aACA,kBACE,YA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"}

package/dist/esm/components/tree/use-tree.js

@@ -41,7 +41,8 @@ const useTree = ({ checkable = false, checkedValue: checkedValueProp, children,
 	});
 	const timeoutRef = useRef(null);
 	const onExpandAll = useCallback(() => {
-		setExpandedValue(descendants.enabledValues().filter(({ group }) => group).map(({ value }) => value));
+		const value = descendants.enabledValues().filter(({ group }) => group).map(({ value }) => value);
+		setExpandedValue(value);
 	}, [descendants, setExpandedValue]);
 	const onCollapseAll = useCallback(() => {
 		setExpandedValue([]);
@@ -199,7 +200,8 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		value
 	});
 	const [groupLoading, onGroupChildren] = useAsyncCallback(async () => {
-		setChildren(await asyncChildren?.());
+		const children = await asyncChildren?.();
+		setChildren(children);
 	}, [asyncChildren]);
 	const onSelect = useCallback((ev = {}) => {
 		const selectedValue = ev.value ?? value;
@@ -266,7 +268,8 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		runKeyAction(ev, {
 			a: () => {
 				if (!multiple || !(ev.ctrlKey || ev.metaKey)) return;
-				onSelectedChange(descendants.enabledValues().map(({ value }) => value).filter((value) => !(0, utils_exports.isUndefined)(value)));
+				const values = descendants.enabledValues().map(({ value }) => value).filter((value) => !(0, utils_exports.isUndefined)(value));
+				onSelectedChange(values);
 			},
 			ArrowDown: () => {
 				if ((ev.ctrlKey || ev.metaKey) && ev.shiftKey) onExpandAll();
@@ -281,18 +284,24 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 			},
 			ArrowLeft: () => {
 				if (group && groupOpen) onGroupClose();
-				else if (nested) onActiveDescendant(getParentDescendant(descendants)(value));
+				else if (nested) {
+					const descendant = getParentDescendant(descendants)(value);
+					onActiveDescendant(descendant);
+				}
 			},
 			ArrowRight: () => {
 				if (!group) return;
-				if (groupOpen) onActiveDescendant(descendants.enabledNextValue(activeDescendant.current, false, { expanded: true }));
-				else if (!groupLoading) onGroupOpen();
+				if (groupOpen) {
+					const descendant = descendants.enabledNextValue(activeDescendant.current, false, { expanded: true });
+					onActiveDescendant(descendant);
+				} else if (!groupLoading) onGroupOpen();
 			},
 			ArrowUp: () => {
 				if ((ev.ctrlKey || ev.metaKey) && ev.shiftKey) {
 					onCollapseAll();
 					if (!nested) return;
-					onActiveDescendant(getRootDescendant(descendants)(value));
+					const descendant = getRootDescendant(descendants)(value);
+					onActiveDescendant(descendant);
 				} else {
 					const descendant = descendants.enabledPrevValue(activeDescendant.current, false, { expanded: true });
 					onActiveDescendant(descendant);
@@ -303,14 +312,16 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 				}
 			},
 			End: () => {
-				onActiveDescendant(descendants.enabledValues({ expanded: true }).at(-1));
+				const descendant = descendants.enabledValues({ expanded: true }).at(-1);
+				onActiveDescendant(descendant);
 			},
 			Enter: () => {
 				if (group) onGroupToggle();
 				onSelect(ev);
 			},
 			Home: () => {
-				onActiveDescendant(descendants.enabledValues({ expanded: true }).at(0));
+				const descendant = descendants.enabledValues({ expanded: true }).at(0);
+				onActiveDescendant(descendant);
 			},
 			Space: () => {
 				if (group) onGroupToggle();