@hitachivantara/uikit-react-core 5.61.0 → 5.62.0

package/dist/esm/TimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef,\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}

package/dist/esm/TimePicker/Unit/Unit.js.map

@@ -1 +1 @@
-{"version":3,"file":"Unit.js","sources":["../../../../src/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\n\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvToggleButton } from \"../../ToggleButton\";\n\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["AddTimeIcon","SubtractTimeIcon"],"mappings":";;;;;;AA4BO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACT,QAAA,EAAE,YAAY;AACd,QAAA,EAAE,MAAM,KAAS,IAAA;AACjB,QAAA,cAAc,mBAAmB,QAAQ;AAE/C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA,SAAS,aAAa,oBAACA,UAAY,EAAA,SAAS,OAAO;AAAA,IACnD,SAAS,aAAa,oBAAC,SAAI,WAAW,QAAQ,WAAY,UAAK,MAAA;AAAA,IAC/D,SAAS,eACP,oBAAA,gBAAA,EAAe,WAAW,QAAQ,cAAc,SAAS,OACvD,UACH,KAAA,CAAA;AAAA,IAED,CAAC,QAAQ,UAAU,QAAQ,EAAE,SAAS,IAAI,KACzC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,UACL,GAAG,MAAM,WAAW;AAAA,QACtB;AAAA,QACA,SAAS;AAAA,UACP,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UACd,sBAAsB,QAAQ;AAAA,UAC9B,WAAW,QAAQ;AAAA,QACrB;AAAA,QACA,WAAW,CAAC,UAAU;AACf,cAAA,MAAwB,QAAQ,SAAS;AAC5C,kBAAM,eAAe;AACrB,kBAAM,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,QACA,UAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,OAAO,KAAK,SAAS,GAAG,GAAG;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,YAAY,EAAE,cAAc,OAAO,MAAM,SAAS;AAAA,MAAA;AAAA,IACpD;AAAA,IAED,SAAS,aAAc,oBAAAC,YAAA,EAAiB,SAAS,OAAO;AAAA,EAC3D,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Unit.js","sources":["../../../../src/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n  DropUpXS as AddTimeIcon,\n  DropDownXS as SubtractTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvToggleButton } from \"../../ToggleButton\";\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["AddTimeIcon","SubtractTimeIcon"],"mappings":";;;;;;AAyBO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACT,QAAA,EAAE,YAAY;AACd,QAAA,EAAE,MAAM,KAAS,IAAA;AACjB,QAAA,cAAc,mBAAmB,QAAQ;AAE/C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA,SAAS,aAAa,oBAACA,UAAY,EAAA,SAAS,OAAO;AAAA,IACnD,SAAS,aAAa,oBAAC,SAAI,WAAW,QAAQ,WAAY,UAAK,MAAA;AAAA,IAC/D,SAAS,eACP,oBAAA,gBAAA,EAAe,WAAW,QAAQ,cAAc,SAAS,OACvD,UACH,KAAA,CAAA;AAAA,IAED,CAAC,QAAQ,UAAU,QAAQ,EAAE,SAAS,IAAI,KACzC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,UACL,GAAG,MAAM,WAAW;AAAA,QACtB;AAAA,QACA,SAAS;AAAA,UACP,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UACd,sBAAsB,QAAQ;AAAA,UAC9B,WAAW,QAAQ;AAAA,QACrB;AAAA,QACA,WAAW,CAAC,UAAU;AACf,cAAA,MAAwB,QAAQ,SAAS;AAC5C,kBAAM,eAAe;AACrB,kBAAM,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,QACA,UAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,OAAO,KAAK,SAAS,GAAG,GAAG;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,YAAY,EAAE,cAAc,OAAO,MAAM,SAAS;AAAA,MAAA;AAAA,IACpD;AAAA,IAED,SAAS,aAAc,oBAAAC,YAAA,EAAiB,SAAS,OAAO;AAAA,EAC3D,EAAA,CAAA;AAEJ;"}

package/dist/esm/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAErC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGnB,QAAA,iBAAiB,CAAC,UAA+C;AACrE,kBAAc,CAAC,UAAU;AACf,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAI5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAI;AAAA,MACJ,gBAAc;AAAA,MACd,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA,aAAa,CAAC,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { HvButton } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean,\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAErC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGnB,QAAA,iBAAiB,CAAC,UAA+C;AACrE,kBAAc,CAAC,UAAU;AACf,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAI5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAI;AAAA,MACJ,gBAAc;AAAA,MACd,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA,aAAa,CAAC,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;"}

package/dist/esm/Tooltip/Tooltip.js

@@ -1,9 +1,9 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
-import Tooltip from "@mui/material/Tooltip";
 import Fade from "@mui/material/Fade";
-import { useTheme } from "../hooks/useTheme.js";
+import Tooltip from "@mui/material/Tooltip";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useTheme } from "../hooks/useTheme.js";
 import { getElementById } from "../utils/document.js";
 import { useClasses } from "./Tooltip.styles.js";
 import { staticClasses } from "./Tooltip.styles.js";

package/dist/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport Fade from \"@mui/material/Fade\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAmEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAW,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAkEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAW,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -1,5 +1,5 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { tooltipClasses } from "@mui/material/Tooltip";
+import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../utils/classes.js";
 const { staticClasses, useClasses } = createClasses("HvTooltip", {
   root: {},

package/dist/esm/Tooltip/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: \"15px 20px\",\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,cAAc,CAAC;AAAA,EACf,QAAQ;AAAA,IACN,CAAC,MAAMA,eAAkB,MAAM,EAAE,GAAG;AAAA,MAClC,SAAS;AAAA,IACX;AAAA,IACA,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,YAAY,MAAM,WAAW;AAAA,MAC7B,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,iBAAiB,CAAC;AAAA,EAClB,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AACjB,CAAC;"}
+{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: \"15px 20px\",\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,cAAc,CAAC;AAAA,EACf,QAAQ;AAAA,IACN,CAAC,MAAMA,eAAkB,MAAM,EAAE,GAAG;AAAA,MAClC,SAAS;AAAA,IACX;AAAA,IACA,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,YAAY,MAAM,WAAW;AAAA,MAC7B,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,iBAAiB,CAAC;AAAA,EAClB,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AACjB,CAAC;"}

package/dist/esm/TreeView/TreeItem/DefaultContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { ExtractNames, createClasses } from \"../../utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;AAOO,MAAM,EAAE,WAAA,IAAe,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAO;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAW,QAAQ,MAAM;AAAA,YACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5C,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { createClasses, ExtractNames } from \"../../utils/classes\";\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAMO,MAAM,EAAE,WAAA,IAAe,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAO;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAW,QAAQ,MAAM;AAAA,YACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5C,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/TreeView/TreeItem/TreeItem.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
 import Collapse from "@mui/material/Collapse";
-import { useForkRef } from "../../hooks/useForkRef.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useTreeViewContext } from "../internals/TreeViewProvider.js";
+import { useForkRef } from "../../hooks/useForkRef.js";
 import { useDescendant, DescendantProvider } from "../internals/DescendantProvider.js";
+import { useTreeViewContext } from "../internals/TreeViewProvider.js";
+import { DefaultContent } from "./DefaultContent.js";
 import { useClasses } from "./TreeItem.styles.js";
 import { staticClasses } from "./TreeItem.styles.js";
-import { DefaultContent } from "./DefaultContent.js";
 const HvTreeItem = forwardRef(
   (props, ref) => {
     const {

package/dist/esm/TreeView/TreeItem/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\nexport interface HvTreeItemProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: React.ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: React.ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: React.ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: React.ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: React.JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement]\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\n    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n    const focused = instance ? instance.isNodeFocused(nodeId) : false;\n    const selected = instance ? instance.isNodeSelected(nodeId) : false;\n    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n    const expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: React.FocusEvent<HTMLLIElement>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeItem.js","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\nexport interface HvTreeItemProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: React.ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: React.ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: React.ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: React.ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: React.JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement],\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\n    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n    const focused = instance ? instance.isNodeFocused(nodeId) : false;\n    const selected = instance ? instance.isNodeSelected(nodeId) : false;\n    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n    const expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase(),\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: React.FocusEvent<HTMLLIElement>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/TreeView/TreeItem/useHvTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHvTreeItem.js","sources":["../../../../src/TreeView/TreeItem/useHvTreeItem.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\n\nexport function useHvTreeItem(nodeId: string) {\n  const { instance, multiSelect } =\n    useTreeViewContext<DefaultTreeViewPlugins>();\n\n  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;\n  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n  const focused = instance ? instance.isNodeFocused(nodeId) : false;\n  const selected = instance ? instance.isNodeSelected(nodeId) : false;\n  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n  const handleExpansion = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    // If already expanded and trying to toggle selection don't close\n    if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {\n      instance.toggleNodeExpansion(event, nodeId);\n    }\n  };\n\n  const handleSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    if (multiple) {\n      if (event.shiftKey) {\n        instance.selectRange(event, { end: nodeId });\n      } else {\n        instance.selectNode(event, nodeId, true);\n      }\n    } else {\n      instance.selectNode(event, nodeId);\n    }\n  };\n\n  const preventSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n      // Prevent text selection\n      event.preventDefault();\n    }\n  };\n\n  return {\n    instance,\n    disabled,\n    expanded,\n    selected,\n    focused,\n    handleExpansion,\n    handleSelection,\n    preventSelection,\n  };\n}\n"],"names":[],"mappings":";AAKO,SAAS,cAAc,QAAgB;AAC5C,QAAM,EAAE,UAAU,YAAY,IAC5B,mBAA2C;AAE7C,QAAM,aAAa,WAAW,SAAS,iBAAiB,MAAM,IAAI;AAClE,QAAM,WAAW,WAAW,SAAS,eAAe,MAAM,IAAI;AAC9D,QAAM,UAAU,WAAW,SAAS,cAAc,MAAM,IAAI;AAC5D,QAAM,WAAW,WAAW,SAAS,eAAe,MAAM,IAAI;AAC9D,QAAM,WAAW,WAAW,SAAS,eAAe,MAAM,IAAI;AAExD,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,CAAC,YAAY;AAAU;AAE3B,QAAI,CAAC,SAAS;AACH,eAAA,UAAU,OAAO,MAAM;AAAA,IAClC;AAEA,UAAM,WACJ,gBAAgB,MAAM,YAAY,MAAM,WAAW,MAAM;AAG3D,QAAI,cAAc,EAAE,YAAY,SAAS,eAAe,MAAM,IAAI;AACvD,eAAA,oBAAoB,OAAO,MAAM;AAAA,IAC5C;AAAA,EAAA;AAGI,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,CAAC,YAAY;AAAU;AAE3B,QAAI,CAAC,SAAS;AACH,eAAA,UAAU,OAAO,MAAM;AAAA,IAClC;AAEA,UAAM,WACJ,gBAAgB,MAAM,YAAY,MAAM,WAAW,MAAM;AAE3D,QAAI,UAAU;AACZ,UAAI,MAAM,UAAU;AAClB,iBAAS,YAAY,OAAO,EAAE,KAAK,OAAQ,CAAA;AAAA,MAAA,OACtC;AACI,iBAAA,WAAW,OAAO,QAAQ,IAAI;AAAA,MACzC;AAAA,IAAA,OACK;AACI,eAAA,WAAW,OAAO,MAAM;AAAA,IACnC;AAAA,EAAA;AAGI,QAAA,mBAAmB,CAAC,UAA4C;AACpE,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,WAAW,UAAU;AAEhE,YAAM,eAAe;AAAA,IACvB;AAAA,EAAA;AAGK,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useHvTreeItem.js","sources":["../../../../src/TreeView/TreeItem/useHvTreeItem.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\n\nexport function useHvTreeItem(nodeId: string) {\n  const { instance, multiSelect } =\n    useTreeViewContext<DefaultTreeViewPlugins>();\n\n  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;\n  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n  const focused = instance ? instance.isNodeFocused(nodeId) : false;\n  const selected = instance ? instance.isNodeSelected(nodeId) : false;\n  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n  const handleExpansion = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    // If already expanded and trying to toggle selection don't close\n    if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {\n      instance.toggleNodeExpansion(event, nodeId);\n    }\n  };\n\n  const handleSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    if (multiple) {\n      if (event.shiftKey) {\n        instance.selectRange(event, { end: nodeId });\n      } else {\n        instance.selectNode(event, nodeId, true);\n      }\n    } else {\n      instance.selectNode(event, nodeId);\n    }\n  };\n\n  const preventSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n      // Prevent text selection\n      event.preventDefault();\n    }\n  };\n\n  return {\n    instance,\n    disabled,\n    expanded,\n    selected,\n    focused,\n    handleExpansion,\n    handleSelection,\n    preventSelection,\n  };\n}\n"],"names":[],"mappings":";AAKO,SAAS,cAAc,QAAgB;AAC5C,QAAM,EAAE,UAAU,YAAY,IAC5B,mBAA2C;AAE7C,QAAM,aAAa,WAAW,SAAS,iBAAiB,MAAM,IAAI;AAClE,QAAM,WAAW,WAAW,SAAS,eAAe,MAAM,IAAI;AAC9D,QAAM,UAAU,WAAW,SAAS,cAAc,MAAM,IAAI;AAC5D,QAAM,WAAW,WAAW,SAAS,eAAe,MAAM,IAAI;AAC9D,QAAM,WAAW,WAAW,SAAS,eAAe,MAAM,IAAI;AAExD,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,CAAC,YAAY;AAAU;AAE3B,QAAI,CAAC,SAAS;AACH,eAAA,UAAU,OAAO,MAAM;AAAA,IAClC;AAEA,UAAM,WACJ,gBAAgB,MAAM,YAAY,MAAM,WAAW,MAAM;AAG3D,QAAI,cAAc,EAAE,YAAY,SAAS,eAAe,MAAM,IAAI;AACvD,eAAA,oBAAoB,OAAO,MAAM;AAAA,IAC5C;AAAA,EAAA;AAGI,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,CAAC,YAAY;AAAU;AAE3B,QAAI,CAAC,SAAS;AACH,eAAA,UAAU,OAAO,MAAM;AAAA,IAClC;AAEA,UAAM,WACJ,gBAAgB,MAAM,YAAY,MAAM,WAAW,MAAM;AAE3D,QAAI,UAAU;AACZ,UAAI,MAAM,UAAU;AAClB,iBAAS,YAAY,OAAO,EAAE,KAAK,OAAQ,CAAA;AAAA,MAAA,OACtC;AACI,iBAAA,WAAW,OAAO,QAAQ,IAAI;AAAA,MACzC;AAAA,IAAA,OACK;AACI,eAAA,WAAW,OAAO,MAAM;AAAA,IACnC;AAAA,EAAA;AAGI,QAAA,mBAAmB,CAAC,UAA4C;AACpE,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,WAAW,UAAU;AAEhE,YAAM,eAAe;AAAA,IACvB;AAAA,EAAA;AAGK,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/TreeView/TreeView.js

@@ -1,8 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useSlotProps } from "@mui/base/utils";
 import { DropDownXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
-import { fixedForwardRef } from "../types/generic.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { fixedForwardRef } from "../types/generic.js";
 import { useTreeView } from "./internals/hooks/useTreeView.js";
 import { TreeViewProvider } from "./internals/TreeViewProvider.js";
 import { useClasses } from "./TreeView.styles.js";

package/dist/esm/TreeView/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","sources":["../../../src/TreeView/TreeView.tsx"],"sourcesContent":["import { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps, fixedForwardRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport {\n  DEFAULT_TREE_VIEW_PLUGINS,\n  DefaultTreeViewPluginParameters,\n} from \"./internals/hooks/plugins\";\nimport { useTreeView } from \"./internals/hooks/useTreeView\";\nimport { TreeViewProvider } from \"./internals/TreeViewProvider\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean | undefined>\n  extends HvBaseProps<HTMLUListElement>,\n    DefaultTreeViewPluginParameters<Multiple> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvTreeViewClasses;\n  /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */\n  children?: React.ReactNode;\n}\n\n/**\n * A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n *\n * Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n *\n * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n *\n * @example\n * ```tsx\n * <HvTreeView>\n *   <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nexport const HvTreeView = fixedForwardRef(function HvTreeView<\n  Multiple extends boolean | undefined\n>(props: HvTreeViewProps<Multiple>, ref: React.Ref<HTMLUListElement>) {\n  const {\n    id,\n    children,\n    classes: classesProp,\n    className,\n\n    disabledItemsFocusable,\n    multiSelect,\n    expanded,\n    defaultExpanded,\n    selected,\n    defaultSelected,\n    disableSelection,\n    defaultCollapseIcon = <DropDownXS role=\"none\" />,\n    defaultExpandIcon = <DropRightXS role=\"none\" />,\n    defaultEndIcon,\n    defaultParentIcon,\n    onNodeSelect,\n    onNodeToggle,\n    onNodeFocus,\n    ...others\n  } = useDefaultProps(\"HvTreeView\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { getRootProps, contextValue } = useTreeView({\n    disabledItemsFocusable,\n    expanded,\n    defaultExpanded,\n    onNodeToggle,\n    onNodeFocus,\n    disableSelection,\n    defaultSelected,\n    selected,\n    multiSelect,\n    onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n    id,\n    defaultCollapseIcon,\n    defaultEndIcon,\n    defaultExpandIcon,\n    defaultParentIcon,\n    plugins: DEFAULT_TREE_VIEW_PLUGINS,\n    rootRef: ref,\n  });\n\n  const rootProps = useSlotProps({\n    elementType: \"ul\",\n    externalSlotProps: {},\n    externalForwardedProps: others,\n    className: classes.root,\n    getSlotProps: getRootProps,\n    ownerState: props,\n  });\n\n  return (\n    <TreeViewProvider value={contextValue}>\n      <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n        {children}\n      </ul>\n    </TreeViewProvider>\n  );\n});\n"],"names":["HvTreeView"],"mappings":";;;;;;;;;;AA4CO,MAAM,aAAa,gBAAgB,SAASA,YAEjD,OAAkC,KAAkC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB,oBAAC,YAAW,EAAA,MAAK,OAAO,CAAA;AAAA,IAC9C,oBAAoB,oBAAC,aAAY,EAAA,MAAK,OAAO,CAAA;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,cAAc,aAAa,IAAI,YAAY;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,aAAa;AAAA,IACb,mBAAmB,CAAC;AAAA,IACpB,wBAAwB;AAAA,IACxB,WAAW,QAAQ;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO,cACvB,UAAA,oBAAC,QAAG,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,WAAY,GAAG,QAC5D,UACH,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"TreeView.js","sources":["../../../src/TreeView/TreeView.tsx"],"sourcesContent":["import { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { fixedForwardRef, HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  DEFAULT_TREE_VIEW_PLUGINS,\n  DefaultTreeViewPluginParameters,\n} from \"./internals/hooks/plugins\";\nimport { useTreeView } from \"./internals/hooks/useTreeView\";\nimport { TreeViewProvider } from \"./internals/TreeViewProvider\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean | undefined>\n  extends HvBaseProps<HTMLUListElement>,\n    DefaultTreeViewPluginParameters<Multiple> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvTreeViewClasses;\n  /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */\n  children?: React.ReactNode;\n}\n\n/**\n * A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n *\n * Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n *\n * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n *\n * @example\n * ```tsx\n * <HvTreeView>\n *   <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nexport const HvTreeView = fixedForwardRef(function HvTreeView<\n  Multiple extends boolean | undefined,\n>(props: HvTreeViewProps<Multiple>, ref: React.Ref<HTMLUListElement>) {\n  const {\n    id,\n    children,\n    classes: classesProp,\n    className,\n\n    disabledItemsFocusable,\n    multiSelect,\n    expanded,\n    defaultExpanded,\n    selected,\n    defaultSelected,\n    disableSelection,\n    defaultCollapseIcon = <DropDownXS role=\"none\" />,\n    defaultExpandIcon = <DropRightXS role=\"none\" />,\n    defaultEndIcon,\n    defaultParentIcon,\n    onNodeSelect,\n    onNodeToggle,\n    onNodeFocus,\n    ...others\n  } = useDefaultProps(\"HvTreeView\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { getRootProps, contextValue } = useTreeView({\n    disabledItemsFocusable,\n    expanded,\n    defaultExpanded,\n    onNodeToggle,\n    onNodeFocus,\n    disableSelection,\n    defaultSelected,\n    selected,\n    multiSelect,\n    onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n    id,\n    defaultCollapseIcon,\n    defaultEndIcon,\n    defaultExpandIcon,\n    defaultParentIcon,\n    plugins: DEFAULT_TREE_VIEW_PLUGINS,\n    rootRef: ref,\n  });\n\n  const rootProps = useSlotProps({\n    elementType: \"ul\",\n    externalSlotProps: {},\n    externalForwardedProps: others,\n    className: classes.root,\n    getSlotProps: getRootProps,\n    ownerState: props,\n  });\n\n  return (\n    <TreeViewProvider value={contextValue}>\n      <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n        {children}\n      </ul>\n    </TreeViewProvider>\n  );\n});\n"],"names":["HvTreeView"],"mappings":";;;;;;;;;;AA2CO,MAAM,aAAa,gBAAgB,SAASA,YAEjD,OAAkC,KAAkC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB,oBAAC,YAAW,EAAA,MAAK,OAAO,CAAA;AAAA,IAC9C,oBAAoB,oBAAC,aAAY,EAAA,MAAK,OAAO,CAAA;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,cAAc,aAAa,IAAI,YAAY;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,aAAa;AAAA,IACb,mBAAmB,CAAC;AAAA,IACpB,wBAAwB;AAAA,IACxB,WAAW,QAAQ;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO,cACvB,UAAA,oBAAC,QAAG,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,WAAY,GAAG,QAC5D,UACH,EACF,CAAA;AAEJ,CAAC;"}

package/dist/esm/TreeView/internals/DescendantProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescendantProvider.js","sources":["../../../../src/TreeView/internals/DescendantProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { unstable_useEnhancedEffect as useEnhancedEffect } from \"@mui/material/utils\";\n\n/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *  Modified slightly to suit our purposes.\n */\n\n// To replace with .findIndex() once we stop IE11 support.\nfunction findIndex<T>(array: T[], comp: (item: T) => boolean) {\n  for (let i = 0; i < array.length; i += 1) {\n    if (comp(array[i])) {\n      return i;\n    }\n  }\n\n  return -1;\n}\n\nfunction binaryFindElement(\n  array: TreeItemDescendant[],\n  element: HTMLLIElement\n) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    if (\n      // eslint-disable-next-line no-bitwise\n      array[middle].element.compareDocumentPosition(element) &\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nexport interface TreeItemDescendant {\n  element: HTMLLIElement;\n  id: string;\n}\n\ninterface DescendantContextValue {\n  registerDescendant?: (params: TreeItemDescendant & { index: number }) => void;\n  unregisterDescendant?: (params: HTMLLIElement) => void;\n  descendants?: TreeItemDescendant[];\n  parentId?: string | null;\n}\n\nconst DescendantContext = React.createContext<DescendantContextValue>({});\n\nfunction usePrevious<T>(value: T) {\n  const ref = React.useRef<T | null>(null);\n  React.useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant: TreeItemDescendant) {\n  const [, forceUpdate] = React.useState<{}>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n  } = React.useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render, and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = findIndex(\n    descendants,\n    (item) => item.element === descendant.element\n  );\n\n  const previousDescendants = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants &&\n        previousDescendants[position] &&\n        previousDescendants[position].element !== newDescendant.element\n      );\n    }\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element!);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index };\n}\n\ninterface DescendantProviderProps {\n  id?: string;\n  children: React.ReactNode;\n}\n\nexport const DescendantProvider = (props: DescendantProviderProps) => {\n  const { children, id } = props;\n\n  const [items, set] = React.useState<\n    (TreeItemDescendant & { index: number })[]\n  >([]);\n\n  const registerDescendant = React.useCallback(\n    ({ element, ...other }: TreeItemDescendant) => {\n      set((oldItems) => {\n        if (oldItems.length === 0) {\n          // If there are no items, register at index 0 and bail.\n          return [\n            {\n              ...other,\n              element,\n              index: 0,\n            },\n          ];\n        }\n\n        const index = binaryFindElement(oldItems, element);\n        let newItems: typeof oldItems;\n\n        if (oldItems[index] && oldItems[index].element === element) {\n          // If the element is already registered, just use the same array\n          newItems = oldItems;\n        } else {\n          // When registering a descendant, we need to make sure we insert in\n          // into the array in the same order that it appears in the DOM. So as\n          // new descendants are added or maybe some are removed, we always know\n          // that the array is up-to-date and correct.\n          //\n          // So here we look at our registered descendants and see if the new\n          // element we are adding appears earlier than an existing descendant's\n          // DOM node via `node.compareDocumentPosition`. If it does, we insert\n          // the new element at this index. Because `registerDescendant` will be\n          // called in an effect every time the descendants state value changes,\n          // we should be sure that this index is accurate when descendent\n          // elements come or go from our component.\n\n          const newItem = {\n            ...other,\n            element,\n            index,\n          };\n\n          // If an index is not found we will push the element to the end.\n          newItems = oldItems.slice();\n          newItems.splice(index, 0, newItem);\n        }\n        newItems.forEach((item, position) => {\n          item.index = position;\n        });\n        return newItems;\n      });\n    },\n    []\n  );\n\n  const unregisterDescendant = React.useCallback((element: HTMLLIElement) => {\n    set((oldItems) => oldItems.filter((item) => element !== item.element));\n  }, []);\n\n  const value = React.useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n    }),\n    [items, registerDescendant, unregisterDescendant, id]\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n};\n"],"names":["useEnhancedEffect"],"mappings":"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"}
+{"version":3,"file":"DescendantProvider.js","sources":["../../../../src/TreeView/internals/DescendantProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { unstable_useEnhancedEffect as useEnhancedEffect } from \"@mui/material/utils\";\n\n/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *  Modified slightly to suit our purposes.\n */\n\n// To replace with .findIndex() once we stop IE11 support.\nfunction findIndex<T>(array: T[], comp: (item: T) => boolean) {\n  for (let i = 0; i < array.length; i += 1) {\n    if (comp(array[i])) {\n      return i;\n    }\n  }\n\n  return -1;\n}\n\nfunction binaryFindElement(\n  array: TreeItemDescendant[],\n  element: HTMLLIElement,\n) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    if (\n      // eslint-disable-next-line no-bitwise\n      array[middle].element.compareDocumentPosition(element) &\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nexport interface TreeItemDescendant {\n  element: HTMLLIElement;\n  id: string;\n}\n\ninterface DescendantContextValue {\n  registerDescendant?: (params: TreeItemDescendant & { index: number }) => void;\n  unregisterDescendant?: (params: HTMLLIElement) => void;\n  descendants?: TreeItemDescendant[];\n  parentId?: string | null;\n}\n\nconst DescendantContext = React.createContext<DescendantContextValue>({});\n\nfunction usePrevious<T>(value: T) {\n  const ref = React.useRef<T | null>(null);\n  React.useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant: TreeItemDescendant) {\n  const [, forceUpdate] = React.useState<{}>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n  } = React.useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render, and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = findIndex(\n    descendants,\n    (item) => item.element === descendant.element,\n  );\n\n  const previousDescendants = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants &&\n        previousDescendants[position] &&\n        previousDescendants[position].element !== newDescendant.element\n      );\n    },\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element!);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index };\n}\n\ninterface DescendantProviderProps {\n  id?: string;\n  children: React.ReactNode;\n}\n\nexport const DescendantProvider = (props: DescendantProviderProps) => {\n  const { children, id } = props;\n\n  const [items, set] = React.useState<\n    (TreeItemDescendant & { index: number })[]\n  >([]);\n\n  const registerDescendant = React.useCallback(\n    ({ element, ...other }: TreeItemDescendant) => {\n      set((oldItems) => {\n        if (oldItems.length === 0) {\n          // If there are no items, register at index 0 and bail.\n          return [\n            {\n              ...other,\n              element,\n              index: 0,\n            },\n          ];\n        }\n\n        const index = binaryFindElement(oldItems, element);\n        let newItems: typeof oldItems;\n\n        if (oldItems[index] && oldItems[index].element === element) {\n          // If the element is already registered, just use the same array\n          newItems = oldItems;\n        } else {\n          // When registering a descendant, we need to make sure we insert in\n          // into the array in the same order that it appears in the DOM. So as\n          // new descendants are added or maybe some are removed, we always know\n          // that the array is up-to-date and correct.\n          //\n          // So here we look at our registered descendants and see if the new\n          // element we are adding appears earlier than an existing descendant's\n          // DOM node via `node.compareDocumentPosition`. If it does, we insert\n          // the new element at this index. Because `registerDescendant` will be\n          // called in an effect every time the descendants state value changes,\n          // we should be sure that this index is accurate when descendent\n          // elements come or go from our component.\n\n          const newItem = {\n            ...other,\n            element,\n            index,\n          };\n\n          // If an index is not found we will push the element to the end.\n          newItems = oldItems.slice();\n          newItems.splice(index, 0, newItem);\n        }\n        newItems.forEach((item, position) => {\n          item.index = position;\n        });\n        return newItems;\n      });\n    },\n    [],\n  );\n\n  const unregisterDescendant = React.useCallback((element: HTMLLIElement) => {\n    set((oldItems) => oldItems.filter((item) => element !== item.element));\n  }, []);\n\n  const value = React.useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n    }),\n    [items, registerDescendant, unregisterDescendant, id],\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n};\n"],"names":["useEnhancedEffect"],"mappings":"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"}

package/dist/esm/TreeView/internals/TreeViewProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewProvider.js","sources":["../../../../src/TreeView/internals/TreeViewProvider.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nimport { TreeViewAnyPluginSignature, TreeViewInstance } from \"./types\";\nimport { DescendantProvider } from \"./DescendantProvider\";\n\nexport interface TreeViewContextValue<\n  TPlugins extends readonly TreeViewAnyPluginSignature[]\n> {\n  treeId: string | undefined;\n  instance: TreeViewInstance<TPlugins> | null;\n  multiSelect: boolean;\n  disabledItemsFocusable: boolean;\n  icons: {\n    defaultCollapseIcon: React.ReactNode;\n    defaultExpandIcon: React.ReactNode;\n    defaultParentIcon: React.ReactNode;\n    defaultEndIcon: React.ReactNode;\n  };\n}\n\nexport const DEFAULT_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue<any> = {\n  instance: null,\n  multiSelect: false,\n  disabledItemsFocusable: false,\n  treeId: undefined,\n  icons: {\n    defaultCollapseIcon: null,\n    defaultExpandIcon: null,\n    defaultParentIcon: null,\n    defaultEndIcon: null,\n  },\n};\n\n/**\n * @ignore - internal component.\n */\nexport const TreeViewContext = createContext<TreeViewContextValue<any>>(\n  DEFAULT_TREE_VIEW_CONTEXT_VALUE\n);\n\nexport interface TreeViewProviderProps<\n  TPlugins extends readonly TreeViewAnyPluginSignature[]\n> {\n  value: TreeViewContextValue<TPlugins>;\n  children: React.ReactNode;\n}\n\n/**\n * Sets up the contexts for the underlying TreeItem components.\n *\n * @ignore - do not document.\n */\nexport const TreeViewProvider = <\n  TPlugins extends readonly TreeViewAnyPluginSignature[]\n>(\n  props: TreeViewProviderProps<TPlugins>\n) => {\n  const { value, children } = props;\n\n  return (\n    <TreeViewContext.Provider value={value}>\n      <DescendantProvider>{children}</DescendantProvider>\n    </TreeViewContext.Provider>\n  );\n};\n\nexport const useTreeViewContext = <\n  TPlugins extends readonly TreeViewAnyPluginSignature[]\n>() => useContext(TreeViewContext) as TreeViewContextValue<TPlugins>;\n"],"names":[],"mappings":";;;AAoBO,MAAM,kCAA6D;AAAA,EACxE,UAAU;AAAA,EACV,aAAa;AAAA,EACb,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR,OAAO;AAAA,IACL,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,EAClB;AACF;AAKO,MAAM,kBAAkB;AAAA,EAC7B;AACF;AAca,MAAA,mBAAmB,CAG9B,UACG;AACG,QAAA,EAAE,OAAO,SAAa,IAAA;AAG1B,SAAA,oBAAC,gBAAgB,UAAhB,EAAyB,OACxB,UAAC,oBAAA,oBAAA,EAAoB,SAAS,CAAA,EAChC,CAAA;AAEJ;AAEa,MAAA,qBAAqB,MAE3B,WAAW,eAAe;"}
+{"version":3,"file":"TreeViewProvider.js","sources":["../../../../src/TreeView/internals/TreeViewProvider.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nimport { DescendantProvider } from \"./DescendantProvider\";\nimport { TreeViewAnyPluginSignature, TreeViewInstance } from \"./types\";\n\nexport interface TreeViewContextValue<\n  TPlugins extends readonly TreeViewAnyPluginSignature[],\n> {\n  treeId: string | undefined;\n  instance: TreeViewInstance<TPlugins> | null;\n  multiSelect: boolean;\n  disabledItemsFocusable: boolean;\n  icons: {\n    defaultCollapseIcon: React.ReactNode;\n    defaultExpandIcon: React.ReactNode;\n    defaultParentIcon: React.ReactNode;\n    defaultEndIcon: React.ReactNode;\n  };\n}\n\nexport const DEFAULT_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue<any> = {\n  instance: null,\n  multiSelect: false,\n  disabledItemsFocusable: false,\n  treeId: undefined,\n  icons: {\n    defaultCollapseIcon: null,\n    defaultExpandIcon: null,\n    defaultParentIcon: null,\n    defaultEndIcon: null,\n  },\n};\n\n/**\n * @ignore - internal component.\n */\nexport const TreeViewContext = createContext<TreeViewContextValue<any>>(\n  DEFAULT_TREE_VIEW_CONTEXT_VALUE,\n);\n\nexport interface TreeViewProviderProps<\n  TPlugins extends readonly TreeViewAnyPluginSignature[],\n> {\n  value: TreeViewContextValue<TPlugins>;\n  children: React.ReactNode;\n}\n\n/**\n * Sets up the contexts for the underlying TreeItem components.\n *\n * @ignore - do not document.\n */\nexport const TreeViewProvider = <\n  TPlugins extends readonly TreeViewAnyPluginSignature[],\n>(\n  props: TreeViewProviderProps<TPlugins>,\n) => {\n  const { value, children } = props;\n\n  return (\n    <TreeViewContext.Provider value={value}>\n      <DescendantProvider>{children}</DescendantProvider>\n    </TreeViewContext.Provider>\n  );\n};\n\nexport const useTreeViewContext = <\n  TPlugins extends readonly TreeViewAnyPluginSignature[],\n>() => useContext(TreeViewContext) as TreeViewContextValue<TPlugins>;\n"],"names":[],"mappings":";;;AAoBO,MAAM,kCAA6D;AAAA,EACxE,UAAU;AAAA,EACV,aAAa;AAAA,EACb,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR,OAAO;AAAA,IACL,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,EAClB;AACF;AAKO,MAAM,kBAAkB;AAAA,EAC7B;AACF;AAca,MAAA,mBAAmB,CAG9B,UACG;AACG,QAAA,EAAE,OAAO,SAAa,IAAA;AAG1B,SAAA,oBAAC,gBAAgB,UAAhB,EAAyB,OACxB,UAAC,oBAAA,oBAAA,EAAoB,SAAS,CAAA,EAChC,CAAA;AAEJ;AAEa,MAAA,qBAAqB,MAE3B,WAAW,eAAe;"}

package/dist/esm/TreeView/internals/hooks/plugins/defaultPlugins.js

@@ -1,9 +1,9 @@
-import { useTreeViewNodes } from "./useTreeViewNodes.js";
+import { useTreeViewContextValueBuilder } from "./useTreeViewContextValueBuilder.js";
 import { useTreeViewExpansion } from "./useTreeViewExpansion.js";
-import { useTreeViewSelection } from "./useTreeViewSelection.js";
 import { useTreeViewFocus } from "./useTreeViewFocus.js";
 import { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";
-import { useTreeViewContextValueBuilder } from "./useTreeViewContextValueBuilder.js";
+import { useTreeViewNodes } from "./useTreeViewNodes.js";
+import { useTreeViewSelection } from "./useTreeViewSelection.js";
 const DEFAULT_TREE_VIEW_PLUGINS = [
   useTreeViewNodes,
   useTreeViewExpansion,

package/dist/esm/TreeView/internals/hooks/plugins/defaultPlugins.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultPlugins.js","sources":["../../../../../../src/TreeView/internals/hooks/plugins/defaultPlugins.ts"],"sourcesContent":["import { ConvertPluginsIntoSignatures } from \"../../types\";\nimport {\n  useTreeViewNodes,\n  UseTreeViewNodesParameters,\n} from \"./useTreeViewNodes\";\nimport {\n  useTreeViewExpansion,\n  UseTreeViewExpansionParameters,\n} from \"./useTreeViewExpansion\";\nimport {\n  useTreeViewSelection,\n  UseTreeViewSelectionParameters,\n} from \"./useTreeViewSelection\";\nimport {\n  useTreeViewFocus,\n  UseTreeViewFocusParameters,\n} from \"./useTreeViewFocus\";\nimport { useTreeViewKeyboardNavigation } from \"./useTreeViewKeyboardNavigation\";\nimport {\n  useTreeViewContextValueBuilder,\n  UseTreeViewContextValueBuilderParameters,\n} from \"./useTreeViewContextValueBuilder\";\n\nexport const DEFAULT_TREE_VIEW_PLUGINS = [\n  useTreeViewNodes,\n  useTreeViewExpansion,\n  useTreeViewSelection,\n  useTreeViewFocus,\n  useTreeViewKeyboardNavigation,\n  useTreeViewContextValueBuilder,\n] as const;\n\nexport type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<\n  typeof DEFAULT_TREE_VIEW_PLUGINS\n>;\n\n// We can't infer this type from the plugin, otherwise we would lose the generics.\nexport interface DefaultTreeViewPluginParameters<\n  Multiple extends boolean | undefined\n> extends UseTreeViewNodesParameters,\n    UseTreeViewExpansionParameters,\n    UseTreeViewFocusParameters,\n    UseTreeViewSelectionParameters<Multiple>,\n    UseTreeViewContextValueBuilderParameters {}\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,4BAA4B;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"defaultPlugins.js","sources":["../../../../../../src/TreeView/internals/hooks/plugins/defaultPlugins.ts"],"sourcesContent":["import { ConvertPluginsIntoSignatures } from \"../../types\";\nimport {\n  useTreeViewContextValueBuilder,\n  UseTreeViewContextValueBuilderParameters,\n} from \"./useTreeViewContextValueBuilder\";\nimport {\n  useTreeViewExpansion,\n  UseTreeViewExpansionParameters,\n} from \"./useTreeViewExpansion\";\nimport {\n  useTreeViewFocus,\n  UseTreeViewFocusParameters,\n} from \"./useTreeViewFocus\";\nimport { useTreeViewKeyboardNavigation } from \"./useTreeViewKeyboardNavigation\";\nimport {\n  useTreeViewNodes,\n  UseTreeViewNodesParameters,\n} from \"./useTreeViewNodes\";\nimport {\n  useTreeViewSelection,\n  UseTreeViewSelectionParameters,\n} from \"./useTreeViewSelection\";\n\nexport const DEFAULT_TREE_VIEW_PLUGINS = [\n  useTreeViewNodes,\n  useTreeViewExpansion,\n  useTreeViewSelection,\n  useTreeViewFocus,\n  useTreeViewKeyboardNavigation,\n  useTreeViewContextValueBuilder,\n] as const;\n\nexport type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<\n  typeof DEFAULT_TREE_VIEW_PLUGINS\n>;\n\n// We can't infer this type from the plugin, otherwise we would lose the generics.\nexport interface DefaultTreeViewPluginParameters<\n  Multiple extends boolean | undefined,\n> extends UseTreeViewNodesParameters,\n    UseTreeViewExpansionParameters,\n    UseTreeViewFocusParameters,\n    UseTreeViewSelectionParameters<Multiple>,\n    UseTreeViewContextValueBuilderParameters {}\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,4BAA4B;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/TreeView/internals/hooks/plugins/useTreeViewExpansion.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTreeViewExpansion.js","sources":["../../../../../../src/TreeView/internals/hooks/plugins/useTreeViewExpansion.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useEventCallback } from \"@mui/material/utils\";\n\nimport {\n  DefaultizedProps,\n  TreeViewPlugin,\n  TreeViewPluginSignature,\n} from \"../../types\";\nimport { populateInstance } from \"../utils\";\nimport type { UseTreeViewNodesSignature } from \"./useTreeViewNodes\";\n\nexport interface UseTreeViewExpansionInstance {\n  isNodeExpanded: (nodeId: string) => boolean;\n  isNodeExpandable: (nodeId: string) => boolean;\n  toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;\n  expandAllSiblings: (\n    event: React.KeyboardEvent<HTMLUListElement>,\n    nodeId: string\n  ) => void;\n}\n\nexport interface UseTreeViewExpansionParameters {\n  /**\n   * Expanded node ids.\n   * Used when the item's expansion is controlled.\n   */\n  expanded?: string[];\n  /**\n   * Expanded node ids.\n   * Used when the item's expansion is not controlled.\n   * @default []\n   */\n  defaultExpanded?: string[];\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   * @param {React.SyntheticEvent} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes.\n   */\n  onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;\n}\n\nexport type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<\n  UseTreeViewExpansionParameters,\n  \"defaultExpanded\"\n>;\n\nexport type UseTreeViewExpansionSignature = TreeViewPluginSignature<\n  UseTreeViewExpansionParameters,\n  UseTreeViewExpansionDefaultizedParameters,\n  UseTreeViewExpansionInstance,\n  {},\n  {},\n  \"expanded\",\n  [UseTreeViewNodesSignature]\n>;\n\nexport const useTreeViewExpansion: TreeViewPlugin<\n  UseTreeViewExpansionSignature\n> = ({ instance, params, models }) => {\n  const isNodeExpanded = React.useCallback(\n    (nodeId: string) => {\n      return Array.isArray(models.expanded.value)\n        ? models.expanded.value.indexOf(nodeId) !== -1\n        : false;\n    },\n    [models.expanded.value]\n  );\n\n  const isNodeExpandable = React.useCallback(\n    (nodeId: string) => !!instance.getNode(nodeId)?.expandable,\n    [instance]\n  );\n\n  const toggleNodeExpansion = useEventCallback(\n    (event: React.SyntheticEvent, nodeId: string | null) => {\n      if (nodeId == null) {\n        return;\n      }\n\n      let newExpanded: string[];\n\n      if (models.expanded.value.indexOf(nodeId!) !== -1) {\n        newExpanded = models.expanded.value.filter((id) => id !== nodeId);\n      } else {\n        newExpanded = [nodeId].concat(models.expanded.value);\n      }\n\n      if (params.onNodeToggle) {\n        params.onNodeToggle(event, newExpanded);\n      }\n\n      models.expanded.setValue(newExpanded);\n    }\n  );\n\n  const expandAllSiblings = (\n    event: React.KeyboardEvent<HTMLUListElement>,\n    nodeId: string\n  ) => {\n    const node = instance.getNode(nodeId);\n    const siblings = instance.getChildrenIds(node.parentId);\n\n    const diff = siblings.filter(\n      (child) =>\n        instance.isNodeExpandable(child) && !instance.isNodeExpanded(child)\n    );\n\n    const newExpanded = models.expanded.value.concat(diff);\n\n    if (diff.length > 0) {\n      models.expanded.setValue(newExpanded);\n\n      if (params.onNodeToggle) {\n        params.onNodeToggle(event, newExpanded);\n      }\n    }\n  };\n\n  populateInstance<UseTreeViewExpansionSignature>(instance, {\n    isNodeExpanded,\n    isNodeExpandable,\n    toggleNodeExpansion,\n    expandAllSiblings,\n  });\n};\n\nuseTreeViewExpansion.models = {\n  expanded: {\n    controlledProp: \"expanded\",\n    defaultProp: \"defaultExpanded\",\n  },\n};\n\nconst DEFAULT_EXPANDED: string[] = [];\n\nuseTreeViewExpansion.getDefaultizedParams = (params) => ({\n  ...params,\n  defaultExpanded: params.defaultExpanded ?? DEFAULT_EXPANDED,\n});\n"],"names":[],"mappings":";;;AAwDO,MAAM,uBAET,CAAC,EAAE,UAAU,QAAQ,aAAa;AACpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,WAAmB;AAClB,aAAO,MAAM,QAAQ,OAAO,SAAS,KAAK,IACtC,OAAO,SAAS,MAAM,QAAQ,MAAM,MAAM,KAC1C;AAAA,IACN;AAAA,IACA,CAAC,OAAO,SAAS,KAAK;AAAA,EAAA;AAGxB,QAAM,mBAAmB,MAAM;AAAA,IAC7B,CAAC,WAAmB,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG;AAAA,IAChD,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAA6B,WAA0B;AACtD,UAAI,UAAU,MAAM;AAClB;AAAA,MACF;AAEI,UAAA;AAEJ,UAAI,OAAO,SAAS,MAAM,QAAQ,MAAO,MAAM,IAAI;AACjD,sBAAc,OAAO,SAAS,MAAM,OAAO,CAAC,OAAO,OAAO,MAAM;AAAA,MAAA,OAC3D;AACL,sBAAc,CAAC,MAAM,EAAE,OAAO,OAAO,SAAS,KAAK;AAAA,MACrD;AAEA,UAAI,OAAO,cAAc;AAChB,eAAA,aAAa,OAAO,WAAW;AAAA,MACxC;AAEO,aAAA,SAAS,SAAS,WAAW;AAAA,IACtC;AAAA,EAAA;AAGI,QAAA,oBAAoB,CACxB,OACA,WACG;AACG,UAAA,OAAO,SAAS,QAAQ,MAAM;AACpC,UAAM,WAAW,SAAS,eAAe,KAAK,QAAQ;AAEtD,UAAM,OAAO,SAAS;AAAA,MACpB,CAAC,UACC,SAAS,iBAAiB,KAAK,KAAK,CAAC,SAAS,eAAe,KAAK;AAAA,IAAA;AAGtE,UAAM,cAAc,OAAO,SAAS,MAAM,OAAO,IAAI;AAEjD,QAAA,KAAK,SAAS,GAAG;AACZ,aAAA,SAAS,SAAS,WAAW;AAEpC,UAAI,OAAO,cAAc;AAChB,eAAA,aAAa,OAAO,WAAW;AAAA,MACxC;AAAA,IACF;AAAA,EAAA;AAGF,mBAAgD,UAAU;AAAA,IACxD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,qBAAqB,SAAS;AAAA,EAC5B,UAAU;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AACF;AAEA,MAAM,mBAA6B,CAAA;AAEnC,qBAAqB,uBAAuB,CAAC,YAAY;AAAA,EACvD,GAAG;AAAA,EACH,iBAAiB,OAAO,mBAAmB;AAC7C;"}
+{"version":3,"file":"useTreeViewExpansion.js","sources":["../../../../../../src/TreeView/internals/hooks/plugins/useTreeViewExpansion.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useEventCallback } from \"@mui/material/utils\";\n\nimport {\n  DefaultizedProps,\n  TreeViewPlugin,\n  TreeViewPluginSignature,\n} from \"../../types\";\nimport { populateInstance } from \"../utils\";\nimport type { UseTreeViewNodesSignature } from \"./useTreeViewNodes\";\n\nexport interface UseTreeViewExpansionInstance {\n  isNodeExpanded: (nodeId: string) => boolean;\n  isNodeExpandable: (nodeId: string) => boolean;\n  toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;\n  expandAllSiblings: (\n    event: React.KeyboardEvent<HTMLUListElement>,\n    nodeId: string,\n  ) => void;\n}\n\nexport interface UseTreeViewExpansionParameters {\n  /**\n   * Expanded node ids.\n   * Used when the item's expansion is controlled.\n   */\n  expanded?: string[];\n  /**\n   * Expanded node ids.\n   * Used when the item's expansion is not controlled.\n   * @default []\n   */\n  defaultExpanded?: string[];\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   * @param {React.SyntheticEvent} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes.\n   */\n  onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;\n}\n\nexport type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<\n  UseTreeViewExpansionParameters,\n  \"defaultExpanded\"\n>;\n\nexport type UseTreeViewExpansionSignature = TreeViewPluginSignature<\n  UseTreeViewExpansionParameters,\n  UseTreeViewExpansionDefaultizedParameters,\n  UseTreeViewExpansionInstance,\n  {},\n  {},\n  \"expanded\",\n  [UseTreeViewNodesSignature]\n>;\n\nexport const useTreeViewExpansion: TreeViewPlugin<\n  UseTreeViewExpansionSignature\n> = ({ instance, params, models }) => {\n  const isNodeExpanded = React.useCallback(\n    (nodeId: string) => {\n      return Array.isArray(models.expanded.value)\n        ? models.expanded.value.indexOf(nodeId) !== -1\n        : false;\n    },\n    [models.expanded.value],\n  );\n\n  const isNodeExpandable = React.useCallback(\n    (nodeId: string) => !!instance.getNode(nodeId)?.expandable,\n    [instance],\n  );\n\n  const toggleNodeExpansion = useEventCallback(\n    (event: React.SyntheticEvent, nodeId: string | null) => {\n      if (nodeId == null) {\n        return;\n      }\n\n      let newExpanded: string[];\n\n      if (models.expanded.value.indexOf(nodeId!) !== -1) {\n        newExpanded = models.expanded.value.filter((id) => id !== nodeId);\n      } else {\n        newExpanded = [nodeId].concat(models.expanded.value);\n      }\n\n      if (params.onNodeToggle) {\n        params.onNodeToggle(event, newExpanded);\n      }\n\n      models.expanded.setValue(newExpanded);\n    },\n  );\n\n  const expandAllSiblings = (\n    event: React.KeyboardEvent<HTMLUListElement>,\n    nodeId: string,\n  ) => {\n    const node = instance.getNode(nodeId);\n    const siblings = instance.getChildrenIds(node.parentId);\n\n    const diff = siblings.filter(\n      (child) =>\n        instance.isNodeExpandable(child) && !instance.isNodeExpanded(child),\n    );\n\n    const newExpanded = models.expanded.value.concat(diff);\n\n    if (diff.length > 0) {\n      models.expanded.setValue(newExpanded);\n\n      if (params.onNodeToggle) {\n        params.onNodeToggle(event, newExpanded);\n      }\n    }\n  };\n\n  populateInstance<UseTreeViewExpansionSignature>(instance, {\n    isNodeExpanded,\n    isNodeExpandable,\n    toggleNodeExpansion,\n    expandAllSiblings,\n  });\n};\n\nuseTreeViewExpansion.models = {\n  expanded: {\n    controlledProp: \"expanded\",\n    defaultProp: \"defaultExpanded\",\n  },\n};\n\nconst DEFAULT_EXPANDED: string[] = [];\n\nuseTreeViewExpansion.getDefaultizedParams = (params) => ({\n  ...params,\n  defaultExpanded: params.defaultExpanded ?? DEFAULT_EXPANDED,\n});\n"],"names":[],"mappings":";;;AAwDO,MAAM,uBAET,CAAC,EAAE,UAAU,QAAQ,aAAa;AACpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,WAAmB;AAClB,aAAO,MAAM,QAAQ,OAAO,SAAS,KAAK,IACtC,OAAO,SAAS,MAAM,QAAQ,MAAM,MAAM,KAC1C;AAAA,IACN;AAAA,IACA,CAAC,OAAO,SAAS,KAAK;AAAA,EAAA;AAGxB,QAAM,mBAAmB,MAAM;AAAA,IAC7B,CAAC,WAAmB,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG;AAAA,IAChD,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAA6B,WAA0B;AACtD,UAAI,UAAU,MAAM;AAClB;AAAA,MACF;AAEI,UAAA;AAEJ,UAAI,OAAO,SAAS,MAAM,QAAQ,MAAO,MAAM,IAAI;AACjD,sBAAc,OAAO,SAAS,MAAM,OAAO,CAAC,OAAO,OAAO,MAAM;AAAA,MAAA,OAC3D;AACL,sBAAc,CAAC,MAAM,EAAE,OAAO,OAAO,SAAS,KAAK;AAAA,MACrD;AAEA,UAAI,OAAO,cAAc;AAChB,eAAA,aAAa,OAAO,WAAW;AAAA,MACxC;AAEO,aAAA,SAAS,SAAS,WAAW;AAAA,IACtC;AAAA,EAAA;AAGI,QAAA,oBAAoB,CACxB,OACA,WACG;AACG,UAAA,OAAO,SAAS,QAAQ,MAAM;AACpC,UAAM,WAAW,SAAS,eAAe,KAAK,QAAQ;AAEtD,UAAM,OAAO,SAAS;AAAA,MACpB,CAAC,UACC,SAAS,iBAAiB,KAAK,KAAK,CAAC,SAAS,eAAe,KAAK;AAAA,IAAA;AAGtE,UAAM,cAAc,OAAO,SAAS,MAAM,OAAO,IAAI;AAEjD,QAAA,KAAK,SAAS,GAAG;AACZ,aAAA,SAAS,SAAS,WAAW;AAEpC,UAAI,OAAO,cAAc;AAChB,eAAA,aAAa,OAAO,WAAW;AAAA,MACxC;AAAA,IACF;AAAA,EAAA;AAGF,mBAAgD,UAAU;AAAA,IACxD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,qBAAqB,SAAS;AAAA,EAC5B,UAAU;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AACF;AAEA,MAAM,mBAA6B,CAAA;AAEnC,qBAAqB,uBAAuB,CAAC,YAAY;AAAA,EACvD,GAAG;AAAA,EACH,iBAAiB,OAAO,mBAAmB;AAC7C;"}

package/dist/esm/TreeView/internals/hooks/plugins/useTreeViewFocus.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEventCallback, ownerDocument } from "@mui/material/utils";
-import { populateInstance } from "../utils.js";
 import { useInstanceEventHandler } from "../useInstanceEventHandler.js";
+import { populateInstance } from "../utils.js";
 const useTreeViewFocus = ({
   instance,
   params,

package/dist/esm/TreeView/internals/hooks/plugins/useTreeViewFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTreeViewFocus.js","sources":["../../../../../../src/TreeView/internals/hooks/plugins/useTreeViewFocus.ts"],"sourcesContent":["import * as React from \"react\";\nimport { EventHandlers } from \"@mui/base/utils\";\nimport { ownerDocument, useEventCallback } from \"@mui/material/utils\";\n\nimport type { TreeViewPlugin, TreeViewPluginSignature } from \"../../types\";\nimport { populateInstance } from \"../utils\";\nimport { useInstanceEventHandler } from \"../useInstanceEventHandler\";\nimport type { UseTreeViewNodesSignature } from \"./useTreeViewNodes\";\nimport type { UseTreeViewSelectionSignature } from \"./useTreeViewSelection\";\nimport type { UseTreeViewExpansionSignature } from \"./useTreeViewExpansion\";\n\nexport interface UseTreeViewFocusInstance {\n  isNodeFocused: (nodeId: string) => boolean;\n  focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;\n}\n\nexport interface UseTreeViewFocusParameters {\n  /**\n   * Callback fired when tree items are focused.\n   * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.\n   * @param {string} nodeId The id of the node focused.\n   * @param {string} value of the focused node.\n   */\n  onNodeFocus?: (event: React.SyntheticEvent, nodeId: string) => void;\n}\n\nexport type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;\n\nexport interface UseTreeViewFocusState {\n  focusedNodeId: string | null;\n}\n\nexport type UseTreeViewFocusSignature = TreeViewPluginSignature<\n  UseTreeViewFocusParameters,\n  UseTreeViewFocusParameters,\n  UseTreeViewFocusInstance,\n  {},\n  UseTreeViewFocusState,\n  never,\n  [\n    UseTreeViewNodesSignature,\n    UseTreeViewSelectionSignature<any>,\n    UseTreeViewExpansionSignature\n  ]\n>;\n\nexport const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({\n  instance,\n  params,\n  state,\n  setState,\n  models,\n  rootRef,\n}) => {\n  const setFocusedNodeId = useEventCallback(\n    (nodeId: React.SetStateAction<string | null>) => {\n      const cleanNodeId =\n        typeof nodeId === \"function\" ? nodeId(state.focusedNodeId) : nodeId;\n      setState((prevState) => ({ ...prevState, focusedNodeId: cleanNodeId }));\n    }\n  );\n\n  const isNodeFocused = React.useCallback(\n    (nodeId: string) => state.focusedNodeId === nodeId,\n    [state.focusedNodeId]\n  );\n\n  const focusNode = useEventCallback(\n    (event: React.SyntheticEvent, nodeId: string | null) => {\n      if (nodeId) {\n        setFocusedNodeId(nodeId);\n\n        if (params.onNodeFocus) {\n          params.onNodeFocus(event, nodeId);\n        }\n      }\n    }\n  );\n\n  populateInstance<UseTreeViewFocusSignature>(instance, {\n    isNodeFocused,\n    focusNode,\n  });\n\n  useInstanceEventHandler(instance as any, \"removeNode\", ({ id }) => {\n    setFocusedNodeId((oldFocusedNodeId) => {\n      if (\n        oldFocusedNodeId === id &&\n        rootRef.current === ownerDocument(rootRef.current).activeElement\n      ) {\n        return instance.getChildrenIds(null)[0];\n      }\n      return oldFocusedNodeId;\n    });\n  });\n\n  const createHandleFocus =\n    (otherHandlers: EventHandlers) =>\n    (event: React.FocusEvent<HTMLUListElement>) => {\n      otherHandlers.onFocus?.(event);\n\n      // if the event bubbled (which is React specific) we don't want to steal focus\n      if (event.target === event.currentTarget) {\n        const isNodeVisible = (nodeId: string) => {\n          const node = instance.getNode(nodeId);\n          return (\n            node &&\n            (node.parentId == null || instance.isNodeExpanded(node.parentId))\n          );\n        };\n\n        let nodeToFocusId: string | null | undefined;\n        if (Array.isArray(models.selected.value)) {\n          nodeToFocusId = models.selected.value.find(isNodeVisible);\n        } else if (\n          models.selected.value != null &&\n          isNodeVisible(models.selected.value)\n        ) {\n          nodeToFocusId = models.selected.value;\n        }\n\n        if (nodeToFocusId == null) {\n          // eslint-disable-next-line prefer-destructuring\n          nodeToFocusId = instance.getNavigableChildrenIds(null)[0];\n        }\n\n        instance.focusNode(event, nodeToFocusId);\n      }\n    };\n\n  const createHandleBlur =\n    (otherHandlers: EventHandlers) =>\n    (event: React.FocusEvent<HTMLUListElement>) => {\n      otherHandlers.onBlur?.(event);\n      setFocusedNodeId(null);\n    };\n\n  const focusedNode = instance.getNode(state.focusedNodeId!);\n  const activeDescendant = focusedNode ? focusedNode.idAttribute : null;\n\n  return {\n    getRootProps: (otherHandlers) => ({\n      onFocus: createHandleFocus(otherHandlers),\n      onBlur: createHandleBlur(otherHandlers),\n      \"aria-activedescendant\": activeDescendant ?? undefined,\n    }),\n  };\n};\n\nuseTreeViewFocus.getInitialState = () => ({ focusedNodeId: null });\n\nuseTreeViewFocus.getDefaultizedParams = (params) => ({\n  ...params,\n  disabledItemsFocusable: params.disabledItemsFocusable ?? false,\n});\n"],"names":[],"mappings":";;;;AA8CO,MAAM,mBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB;AAAA,IACvB,CAAC,WAAgD;AAC/C,YAAM,cACJ,OAAO,WAAW,aAAa,OAAO,MAAM,aAAa,IAAI;AAC/D,eAAS,CAAC,eAAe,EAAE,GAAG,WAAW,eAAe,YAAc,EAAA;AAAA,IACxE;AAAA,EAAA;AAGF,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,WAAmB,MAAM,kBAAkB;AAAA,IAC5C,CAAC,MAAM,aAAa;AAAA,EAAA;AAGtB,QAAM,YAAY;AAAA,IAChB,CAAC,OAA6B,WAA0B;AACtD,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAEvB,YAAI,OAAO,aAAa;AACf,iBAAA,YAAY,OAAO,MAAM;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,mBAA4C,UAAU;AAAA,IACpD;AAAA,IACA;AAAA,EAAA,CACD;AAED,0BAAwB,UAAiB,cAAc,CAAC,EAAE,SAAS;AACjE,qBAAiB,CAAC,qBAAqB;AAEnC,UAAA,qBAAqB,MACrB,QAAQ,YAAY,cAAc,QAAQ,OAAO,EAAE,eACnD;AACA,eAAO,SAAS,eAAe,IAAI,EAAE,CAAC;AAAA,MACxC;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA,CACF;AAED,QAAM,oBACJ,CAAC,kBACD,CAAC,UAA8C;AAC7C,kBAAc,UAAU,KAAK;AAGzB,QAAA,MAAM,WAAW,MAAM,eAAe;AAClC,YAAA,gBAAgB,CAAC,WAAmB;AAClC,cAAA,OAAO,SAAS,QAAQ,MAAM;AACpC,eACE,SACC,KAAK,YAAY,QAAQ,SAAS,eAAe,KAAK,QAAQ;AAAA,MAAA;AAI/D,UAAA;AACJ,UAAI,MAAM,QAAQ,OAAO,SAAS,KAAK,GAAG;AACxC,wBAAgB,OAAO,SAAS,MAAM,KAAK,aAAa;AAAA,MAAA,WAExD,OAAO,SAAS,SAAS,QACzB,cAAc,OAAO,SAAS,KAAK,GACnC;AACA,wBAAgB,OAAO,SAAS;AAAA,MAClC;AAEA,UAAI,iBAAiB,MAAM;AAEzB,wBAAgB,SAAS,wBAAwB,IAAI,EAAE,CAAC;AAAA,MAC1D;AAES,eAAA,UAAU,OAAO,aAAa;AAAA,IACzC;AAAA,EAAA;AAGJ,QAAM,mBACJ,CAAC,kBACD,CAAC,UAA8C;AAC7C,kBAAc,SAAS,KAAK;AAC5B,qBAAiB,IAAI;AAAA,EAAA;AAGzB,QAAM,cAAc,SAAS,QAAQ,MAAM,aAAc;AACnD,QAAA,mBAAmB,cAAc,YAAY,cAAc;AAE1D,SAAA;AAAA,IACL,cAAc,CAAC,mBAAmB;AAAA,MAChC,SAAS,kBAAkB,aAAa;AAAA,MACxC,QAAQ,iBAAiB,aAAa;AAAA,MACtC,yBAAyB,oBAAoB;AAAA,IAAA;AAAA,EAC/C;AAEJ;AAEA,iBAAiB,kBAAkB,OAAO,EAAE,eAAe,KAAK;AAEhE,iBAAiB,uBAAuB,CAAC,YAAY;AAAA,EACnD,GAAG;AAAA,EACH,wBAAwB,OAAO,0BAA0B;AAC3D;"}
+{"version":3,"file":"useTreeViewFocus.js","sources":["../../../../../../src/TreeView/internals/hooks/plugins/useTreeViewFocus.ts"],"sourcesContent":["import * as React from \"react\";\nimport { EventHandlers } from \"@mui/base/utils\";\nimport { ownerDocument, useEventCallback } from \"@mui/material/utils\";\n\nimport type { TreeViewPlugin, TreeViewPluginSignature } from \"../../types\";\nimport { useInstanceEventHandler } from \"../useInstanceEventHandler\";\nimport { populateInstance } from \"../utils\";\nimport type { UseTreeViewExpansionSignature } from \"./useTreeViewExpansion\";\nimport type { UseTreeViewNodesSignature } from \"./useTreeViewNodes\";\nimport type { UseTreeViewSelectionSignature } from \"./useTreeViewSelection\";\n\nexport interface UseTreeViewFocusInstance {\n  isNodeFocused: (nodeId: string) => boolean;\n  focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;\n}\n\nexport interface UseTreeViewFocusParameters {\n  /**\n   * Callback fired when tree items are focused.\n   * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.\n   * @param {string} nodeId The id of the node focused.\n   * @param {string} value of the focused node.\n   */\n  onNodeFocus?: (event: React.SyntheticEvent, nodeId: string) => void;\n}\n\nexport type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;\n\nexport interface UseTreeViewFocusState {\n  focusedNodeId: string | null;\n}\n\nexport type UseTreeViewFocusSignature = TreeViewPluginSignature<\n  UseTreeViewFocusParameters,\n  UseTreeViewFocusParameters,\n  UseTreeViewFocusInstance,\n  {},\n  UseTreeViewFocusState,\n  never,\n  [\n    UseTreeViewNodesSignature,\n    UseTreeViewSelectionSignature<any>,\n    UseTreeViewExpansionSignature,\n  ]\n>;\n\nexport const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({\n  instance,\n  params,\n  state,\n  setState,\n  models,\n  rootRef,\n}) => {\n  const setFocusedNodeId = useEventCallback(\n    (nodeId: React.SetStateAction<string | null>) => {\n      const cleanNodeId =\n        typeof nodeId === \"function\" ? nodeId(state.focusedNodeId) : nodeId;\n      setState((prevState) => ({ ...prevState, focusedNodeId: cleanNodeId }));\n    },\n  );\n\n  const isNodeFocused = React.useCallback(\n    (nodeId: string) => state.focusedNodeId === nodeId,\n    [state.focusedNodeId],\n  );\n\n  const focusNode = useEventCallback(\n    (event: React.SyntheticEvent, nodeId: string | null) => {\n      if (nodeId) {\n        setFocusedNodeId(nodeId);\n\n        if (params.onNodeFocus) {\n          params.onNodeFocus(event, nodeId);\n        }\n      }\n    },\n  );\n\n  populateInstance<UseTreeViewFocusSignature>(instance, {\n    isNodeFocused,\n    focusNode,\n  });\n\n  useInstanceEventHandler(instance as any, \"removeNode\", ({ id }) => {\n    setFocusedNodeId((oldFocusedNodeId) => {\n      if (\n        oldFocusedNodeId === id &&\n        rootRef.current === ownerDocument(rootRef.current).activeElement\n      ) {\n        return instance.getChildrenIds(null)[0];\n      }\n      return oldFocusedNodeId;\n    });\n  });\n\n  const createHandleFocus =\n    (otherHandlers: EventHandlers) =>\n    (event: React.FocusEvent<HTMLUListElement>) => {\n      otherHandlers.onFocus?.(event);\n\n      // if the event bubbled (which is React specific) we don't want to steal focus\n      if (event.target === event.currentTarget) {\n        const isNodeVisible = (nodeId: string) => {\n          const node = instance.getNode(nodeId);\n          return (\n            node &&\n            (node.parentId == null || instance.isNodeExpanded(node.parentId))\n          );\n        };\n\n        let nodeToFocusId: string | null | undefined;\n        if (Array.isArray(models.selected.value)) {\n          nodeToFocusId = models.selected.value.find(isNodeVisible);\n        } else if (\n          models.selected.value != null &&\n          isNodeVisible(models.selected.value)\n        ) {\n          nodeToFocusId = models.selected.value;\n        }\n\n        if (nodeToFocusId == null) {\n          // eslint-disable-next-line prefer-destructuring\n          nodeToFocusId = instance.getNavigableChildrenIds(null)[0];\n        }\n\n        instance.focusNode(event, nodeToFocusId);\n      }\n    };\n\n  const createHandleBlur =\n    (otherHandlers: EventHandlers) =>\n    (event: React.FocusEvent<HTMLUListElement>) => {\n      otherHandlers.onBlur?.(event);\n      setFocusedNodeId(null);\n    };\n\n  const focusedNode = instance.getNode(state.focusedNodeId!);\n  const activeDescendant = focusedNode ? focusedNode.idAttribute : null;\n\n  return {\n    getRootProps: (otherHandlers) => ({\n      onFocus: createHandleFocus(otherHandlers),\n      onBlur: createHandleBlur(otherHandlers),\n      \"aria-activedescendant\": activeDescendant ?? undefined,\n    }),\n  };\n};\n\nuseTreeViewFocus.getInitialState = () => ({ focusedNodeId: null });\n\nuseTreeViewFocus.getDefaultizedParams = (params) => ({\n  ...params,\n  disabledItemsFocusable: params.disabledItemsFocusable ?? false,\n});\n"],"names":[],"mappings":";;;;AA8CO,MAAM,mBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB;AAAA,IACvB,CAAC,WAAgD;AAC/C,YAAM,cACJ,OAAO,WAAW,aAAa,OAAO,MAAM,aAAa,IAAI;AAC/D,eAAS,CAAC,eAAe,EAAE,GAAG,WAAW,eAAe,YAAc,EAAA;AAAA,IACxE;AAAA,EAAA;AAGF,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,WAAmB,MAAM,kBAAkB;AAAA,IAC5C,CAAC,MAAM,aAAa;AAAA,EAAA;AAGtB,QAAM,YAAY;AAAA,IAChB,CAAC,OAA6B,WAA0B;AACtD,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAEvB,YAAI,OAAO,aAAa;AACf,iBAAA,YAAY,OAAO,MAAM;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,mBAA4C,UAAU;AAAA,IACpD;AAAA,IACA;AAAA,EAAA,CACD;AAED,0BAAwB,UAAiB,cAAc,CAAC,EAAE,SAAS;AACjE,qBAAiB,CAAC,qBAAqB;AAEnC,UAAA,qBAAqB,MACrB,QAAQ,YAAY,cAAc,QAAQ,OAAO,EAAE,eACnD;AACA,eAAO,SAAS,eAAe,IAAI,EAAE,CAAC;AAAA,MACxC;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA,CACF;AAED,QAAM,oBACJ,CAAC,kBACD,CAAC,UAA8C;AAC7C,kBAAc,UAAU,KAAK;AAGzB,QAAA,MAAM,WAAW,MAAM,eAAe;AAClC,YAAA,gBAAgB,CAAC,WAAmB;AAClC,cAAA,OAAO,SAAS,QAAQ,MAAM;AACpC,eACE,SACC,KAAK,YAAY,QAAQ,SAAS,eAAe,KAAK,QAAQ;AAAA,MAAA;AAI/D,UAAA;AACJ,UAAI,MAAM,QAAQ,OAAO,SAAS,KAAK,GAAG;AACxC,wBAAgB,OAAO,SAAS,MAAM,KAAK,aAAa;AAAA,MAAA,WAExD,OAAO,SAAS,SAAS,QACzB,cAAc,OAAO,SAAS,KAAK,GACnC;AACA,wBAAgB,OAAO,SAAS;AAAA,MAClC;AAEA,UAAI,iBAAiB,MAAM;AAEzB,wBAAgB,SAAS,wBAAwB,IAAI,EAAE,CAAC;AAAA,MAC1D;AAES,eAAA,UAAU,OAAO,aAAa;AAAA,IACzC;AAAA,EAAA;AAGJ,QAAM,mBACJ,CAAC,kBACD,CAAC,UAA8C;AAC7C,kBAAc,SAAS,KAAK;AAC5B,qBAAiB,IAAI;AAAA,EAAA;AAGzB,QAAM,cAAc,SAAS,QAAQ,MAAM,aAAc;AACnD,QAAA,mBAAmB,cAAc,YAAY,cAAc;AAE1D,SAAA;AAAA,IACL,cAAc,CAAC,mBAAmB;AAAA,MAChC,SAAS,kBAAkB,aAAa;AAAA,MACxC,QAAQ,iBAAiB,aAAa;AAAA,MACtC,yBAAyB,oBAAoB;AAAA,IAAA;AAAA,EAC/C;AAEJ;AAEA,iBAAiB,kBAAkB,OAAO,EAAE,eAAe,KAAK;AAEhE,iBAAiB,uBAAuB,CAAC,YAAY;AAAA,EACnD,GAAG;AAAA,EACH,wBAAwB,OAAO,0BAA0B;AAC3D;"}