@react-spectrum/s2 3.0.0-nightly-a7b1a28e0-250707 → 3.0.0-nightly-e67726023-250709

package/dist/Slider.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Slider as AriaSlider,\n  SliderProps as AriaSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderThumb,\n  SliderThumbRenderProps,\n  SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {\n  children?: ReactNode,\n  /**\n   * The size of the Slider.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Slider should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean,\n  /**\n   * The style of the Slider's track.\n   *\n   * @default 'thin'\n   */\n  trackStyle?: 'thin' | 'thick', // TODO: add ramp\n  /**\n   * The style of the Slider's thumb.\n   *\n   * @default 'default'\n   */\n  thumbStyle?: 'default' | 'precise'\n  // TODO\n  // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n  /**\n   * The offset from which to start the fill.\n   */\n  fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n  font: controlFont(),\n  alignItems: {\n    labelPosition: {\n      side: 'center'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled'\n  },\n  columnGap: {\n    size: {\n      S: 16,\n      M: 16,\n      L: 20,\n      XL: 24\n    },\n    isInForm: 12\n  }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n  display: {\n    labelPosition: {\n      top: 'grid'\n    }\n  },\n  gridArea: 'label',\n  width: 'full',\n  gridTemplateAreas: {\n    labelPosition: {\n      top: ['label output']\n    }\n  },\n  gridTemplateColumns: {\n    labelPosition: {\n      top: [\n        '1fr auto'\n      ]\n    }\n  },\n  textAlign: {\n    labelPosition: {\n      side: {\n        labelAlign: {\n          start: 'start',\n          end: 'end'\n        }\n      }\n    }\n  },\n  '--field-gap': {\n    type: 'paddingBottom',\n    value: 0\n  }\n});\n\nconst output = style({\n  gridArea: 'output',\n  textAlign: {\n    labelPosition: {\n      top: {\n        direction: {\n          ltr: 'end',\n          rtl: 'start'\n        }\n      },\n      side: {\n        direction: {\n          ltr: 'start',\n          rtl: 'end'\n        },\n        isInForm: 'end'\n      }\n    }\n  }\n});\n\nexport let track = style({\n  gridArea: 'track',\n  position: 'relative',\n  width: 'full',\n  height: {\n    size: {\n      S: 24,\n      M: 32,\n      L: 40,\n      XL: 48\n    }\n  }\n});\n\nexport let thumbContainer = style({\n  size: {\n    size: {\n      S: 18,\n      M: 20,\n      L: 22,\n      XL: 24\n    }\n  },\n  display: 'inline-block',\n  position: 'absolute',\n  top: '50%'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n  size: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 26\n        }\n      }\n    }\n  }\n});\n\nexport let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL', thumbStyle: 'default' | 'precise'}>({\n  ...focusRing(),\n  display: 'inline-block',\n  boxSizing: 'border-box',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translateY(-50%) translateX(-50%)',\n  width: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: 6\n    }\n  },\n  height: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 26\n        }\n      }\n    }\n  },\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  borderWidth: '[2px]',\n  borderColor: {\n    default: 'gray-800',\n    isHovered: 'gray-900',\n    isDragging: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n  height: {\n    trackStyle: {\n      thin: 4,\n      thick: 16\n    }\n  },\n  top: '50%',\n  borderRadius: {\n    trackStyle: {\n      thin: 'lg',\n      thick: 'sm'\n    }\n  }\n} as const;\n\nexport let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick'}>({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-300',\n    isDisabled: 'disabled'\n  },\n  translateY: '-50%',\n  width: 'full',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  }\n});\n\nexport let filledTrack = style<{isDisabled?: boolean, isEmphasized?: boolean, trackStyle: 'thin' | 'thick'}>({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-700',\n    isEmphasized: 'accent-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  translateY: '-50%'\n});\n\nexport function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}): ReactNode {\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    size = 'M',\n    minValue = 0,\n    maxValue = 100,\n    formatOptions\n  } = props;\n  let formatter = useNumberFormatter(formatOptions);\n  let {direction} = useLocale();\n\n  return (\n    <AriaSlider\n      {...props}\n      ref={props.sliderRef}\n      className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n      {({state}) => {\n        let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n        switch (state.values.length) {\n          case 1:\n            break;\n          case 2:\n            // This should really use the NumberFormat#formatRange proposal...\n            // https://github.com/tc39/ecma402/issues/393\n            // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n            maxLabelLength = 3 + 2 * Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n            );\n            break;\n          default:\n            throw new Error('Only sliders with 1 or 2 handles are supported!');\n        }\n\n        let outputValue = (\n          <SliderOutput\n            style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n            className={output({direction, labelPosition, isInForm: !!formContext})}>\n            {({state}) =>\n              state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n          </SliderOutput>\n        );\n\n        return (\n          <>\n            <div className={labelContainer({labelPosition, labelAlign})}>\n              <FieldLabel\n                isDisabled={props.isDisabled}\n                size={props.size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                contextualHelp={props.contextualHelp}>\n                {label}\n              </FieldLabel>\n              {labelPosition === 'top' && outputValue}\n            </div>\n            <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n              {props.children}\n              {labelPosition === 'side' && outputValue}\n            </div>\n          </>\n        );\n      }}\n    </AriaSlider>\n  );\n}\n\n/**\n * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.\n */\nexport const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    labelPosition = 'top',\n    size = 'M',\n    fillOffset,\n    isEmphasized,\n    trackStyle = 'thin',\n    thumbStyle = 'default'\n  } = props;\n  let thumbRef = useRef(null);\n  let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n  let domRef = useFocusableRef(ref, inputRef);\n  let {direction} = useLocale();\n  let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n  return (\n    <SliderBase\n      {...props}\n      sliderRef={domRef}>\n      <SliderTrack\n        className={track({size, labelPosition, isInForm: !!formContext})}>\n        {({state, isDisabled}) => {\n\n          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n          let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n          let isRightOfOffset = fillWidth > 0;\n          let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n          return (\n            <>\n              <div className={upperTrack({isDisabled, trackStyle})} />\n              <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n              <SliderThumb  className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n                {(renderProps) => (\n                  <div className={thumbHitArea({size})}>\n                    <div\n                      className={thumb({\n                        ...renderProps,\n                        size,\n                        thumbStyle\n                      })} />\n                  </div>\n                )}\n              </SliderThumb>\n            </>\n          );\n        }}\n      </SliderTrack>\n    </SliderBase>\n  );\n});\n"],"names":[],"version":3,"file":"Slider.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Slider as AriaSlider,\n  SliderProps as AriaSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderThumb,\n  SliderThumbRenderProps,\n  SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {\n  children?: ReactNode,\n  /**\n   * The size of the Slider.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Slider should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean,\n  /**\n   * The style of the Slider's track.\n   *\n   * @default 'thin'\n   */\n  trackStyle?: 'thin' | 'thick', // TODO: add ramp\n  /**\n   * The style of the Slider's thumb.\n   *\n   * @default 'default'\n   */\n  thumbStyle?: 'default' | 'precise'\n  // TODO\n  // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n  /**\n   * The offset from which to start the fill.\n   */\n  fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n  font: controlFont(),\n  alignItems: {\n    labelPosition: {\n      side: 'center'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled'\n  },\n  columnGap: {\n    size: {\n      S: 16,\n      M: 16,\n      L: 20,\n      XL: 24\n    },\n    isInForm: 12\n  }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n  display: {\n    labelPosition: {\n      top: 'grid'\n    }\n  },\n  gridArea: 'label',\n  width: 'full',\n  gridTemplateAreas: {\n    labelPosition: {\n      top: ['label output']\n    }\n  },\n  gridTemplateColumns: {\n    labelPosition: {\n      top: [\n        '1fr auto'\n      ]\n    }\n  },\n  textAlign: {\n    labelPosition: {\n      side: {\n        labelAlign: {\n          start: 'start',\n          end: 'end'\n        }\n      }\n    }\n  },\n  '--field-gap': {\n    type: 'paddingBottom',\n    value: 0\n  }\n});\n\nconst output = style({\n  gridArea: 'output',\n  textAlign: {\n    labelPosition: {\n      top: {\n        direction: {\n          ltr: 'end',\n          rtl: 'start'\n        }\n      },\n      side: {\n        direction: {\n          ltr: 'start',\n          rtl: 'end'\n        },\n        isInForm: 'end'\n      }\n    }\n  }\n});\n\nexport let track = style({\n  gridArea: 'track',\n  position: 'relative',\n  width: 'full',\n  height: {\n    size: {\n      S: 24,\n      M: 32,\n      L: 40,\n      XL: 48\n    }\n  }\n});\n\nexport let thumbContainer = style({\n  size: {\n    size: {\n      S: 18,\n      M: 20,\n      L: 22,\n      XL: 24\n    }\n  },\n  display: 'inline-block',\n  position: 'absolute',\n  top: '50%'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n  size: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 26\n        }\n      }\n    }\n  }\n});\n\nexport let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL', thumbStyle: 'default' | 'precise'}>({\n  ...focusRing(),\n  display: 'inline-block',\n  boxSizing: 'border-box',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translateY(-50%) translateX(-50%)',\n  width: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: 6\n    }\n  },\n  height: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 26\n        }\n      }\n    }\n  },\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  borderWidth: '[2px]',\n  borderColor: {\n    default: 'gray-800',\n    isHovered: 'gray-900',\n    isDragging: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n  height: {\n    trackStyle: {\n      thin: 4,\n      thick: 16\n    }\n  },\n  top: '50%',\n  borderRadius: {\n    trackStyle: {\n      thin: 'lg',\n      thick: 'sm'\n    }\n  }\n} as const;\n\nexport let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick'}>({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-300',\n    isDisabled: 'disabled'\n  },\n  translateY: '-50%',\n  width: 'full',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  }\n});\n\nexport let filledTrack = style<{isDisabled?: boolean, isEmphasized?: boolean, trackStyle: 'thin' | 'thick'}>({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-700',\n    isEmphasized: 'accent-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  translateY: '-50%'\n});\n\nexport function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}): ReactNode {\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    size = 'M',\n    minValue = 0,\n    maxValue = 100,\n    formatOptions\n  } = props;\n  let formatter = useNumberFormatter(formatOptions);\n  let {direction} = useLocale();\n\n  return (\n    <AriaSlider\n      {...props}\n      ref={props.sliderRef}\n      className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n      {({state}) => {\n        let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n        switch (state.values.length) {\n          case 1:\n            break;\n          case 2:\n            // This should really use the NumberFormat#formatRange proposal...\n            // https://github.com/tc39/ecma402/issues/393\n            // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n            maxLabelLength = 3 + 2 * Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n            );\n            break;\n          default:\n            throw new Error('Only sliders with 1 or 2 handles are supported!');\n        }\n\n        let outputValue = (\n          <SliderOutput\n            style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n            className={output({direction, labelPosition, isInForm: !!formContext})}>\n            {({state}) =>\n              state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n          </SliderOutput>\n        );\n\n        return (\n          <>\n            <div className={labelContainer({labelPosition, labelAlign})}>\n              <FieldLabel\n                isDisabled={props.isDisabled}\n                size={props.size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                contextualHelp={props.contextualHelp}>\n                {label}\n              </FieldLabel>\n              {labelPosition === 'top' && outputValue}\n            </div>\n            <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n              {props.children}\n              {labelPosition === 'side' && outputValue}\n            </div>\n          </>\n        );\n      }}\n    </AriaSlider>\n  );\n}\n\n/**\n * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.\n */\nexport const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    labelPosition = 'top',\n    size = 'M',\n    fillOffset,\n    isEmphasized,\n    trackStyle = 'thin',\n    thumbStyle = 'default'\n  } = props;\n  let thumbRef = useRef(null);\n  let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n  let domRef = useFocusableRef(ref, inputRef);\n  let {direction} = useLocale();\n  let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n  return (\n    <SliderBase\n      {...props}\n      sliderRef={domRef}>\n      <SliderTrack\n        className={track({size, labelPosition, isInForm: !!formContext})}>\n        {({state, isDisabled}) => {\n\n          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n          let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n          let isRightOfOffset = fillWidth > 0;\n          let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n          return (\n            <>\n              <div className={upperTrack({isDisabled, trackStyle})} />\n              <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n              <SliderThumb  className={thumbContainer} index={0} name={props.name} form={props.form} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n                {(renderProps) => (\n                  <div className={thumbHitArea({size})}>\n                    <div\n                      className={thumb({\n                        ...renderProps,\n                        size,\n                        thumbStyle\n                      })} />\n                  </div>\n                )}\n              </SliderThumb>\n            </>\n          );\n        }}\n      </SliderTrack>\n    </SliderBase>\n  );\n});\n"],"names":[],"version":3,"file":"Slider.mjs.map"}

package/dist/TreeView.cjs

@@ -81,7 +81,7 @@ const $8a2a97a0cb171e69$var$tree = function anonymous(props, overrides) {
     rules += ' -lPUMEc-Zu92';
     return rules;
 };
-function $8a2a97a0cb171e69$var$TreeView(props, ref) {
+const $8a2a97a0cb171e69$var$TreeView = /*#__PURE__*/ (0, $6K4Mt$react.forwardRef)(function TreeView(props, ref) {
     let { children: children, isDetached: isDetached, isEmphasized: isEmphasized, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
     let renderer;
@@ -116,7 +116,7 @@ function $8a2a97a0cb171e69$var$TreeView(props, ref) {
             })
         })
     });
-}
+});
 const $8a2a97a0cb171e69$var$selectedBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 10%))]";
 const $8a2a97a0cb171e69$var$selectedActiveBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 15%))]";
 const $8a2a97a0cb171e69$var$rowBackgroundColor = {
@@ -437,7 +437,7 @@ function $8a2a97a0cb171e69$var$ExpandableRowChevron(props1) {
 }
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
- */ const $8a2a97a0cb171e69$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $6K4Mt$react.forwardRef)($8a2a97a0cb171e69$var$TreeView);
+ */ const $8a2a97a0cb171e69$export$6940b0d9c820eca7 = $8a2a97a0cb171e69$var$TreeView;
 
 
 //# sourceMappingURL=TreeView.cjs.map

package/dist/TreeView.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps extends Omit<RACTreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nfunction TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n}\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = forwardRef(TreeView);\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, DOMRefValue, forwardRefType, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nconst TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n});\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView: <T extends object>(props: TreeViewProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null = TreeView;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.cjs.map"}

package/dist/TreeView.css.map

@@ -1 +1 @@
-{"mappings":"ACuEa;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqFG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeO;;;;;;;;;;;;;EAgEL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWC;;;;EAAA;;;;EAAA;;;;EAOuD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgB5D;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5QH;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAsFC;;;;;;AAtFD;EAAA;IAAA;;;;IAAA;;;;IA2BK;;;;IAAA;;;;IAmMA","sources":["56ed516746d0036e","packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["@import \"9f0cb543acce7895\";\n@import \"1efe6bd9df94f465\";\n@import \"bdf071bf66df1ce3\";\n@import \"0330b2193d88b3df\";\n@import \"888ae06603582201\";\n@import \"73010de75c5ff12a\";\n@import \"6f9cf7ba5fc61169\";\n@import \"e3d8cbff54f98abf\";\n@import \"5ce50fd84b82affa\";\n@import \"e7f15e944ad73835\";\n@import \"17e37b578317afa7\";\n@import \"664b85d9761c64e2\";\n@import \"b6201a1b57a21b4e\";\n@import \"73100caf88a76f92\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps extends Omit<RACTreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nfunction TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n}\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = forwardRef(TreeView);\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.css.map"}
+{"mappings":"ACuEa;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqFG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeO;;;;;;;;;;;;;EAgEL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWC;;;;EAAA;;;;EAAA;;;;EAOuD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgB5D;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5QH;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAsFC;;;;;;AAtFD;EAAA;IAAA;;;;IAAA;;;;IA2BK;;;;IAAA;;;;IAmMA","sources":["56ed516746d0036e","packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["@import \"9f0cb543acce7895\";\n@import \"1efe6bd9df94f465\";\n@import \"bdf071bf66df1ce3\";\n@import \"0330b2193d88b3df\";\n@import \"888ae06603582201\";\n@import \"73010de75c5ff12a\";\n@import \"6f9cf7ba5fc61169\";\n@import \"e3d8cbff54f98abf\";\n@import \"5ce50fd84b82affa\";\n@import \"e7f15e944ad73835\";\n@import \"17e37b578317afa7\";\n@import \"664b85d9761c64e2\";\n@import \"b6201a1b57a21b4e\";\n@import \"73100caf88a76f92\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, DOMRefValue, forwardRefType, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nconst TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n});\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView: <T extends object>(props: TreeViewProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null = TreeView;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.css.map"}

package/dist/TreeView.mjs

@@ -9,7 +9,7 @@ import {TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Conten
 import {useScale as $859432f3b3573fcb$export$a8d2043b2d807f4d} from "./utils.mjs";
 import {jsx as $iOVFT$jsx, jsxs as $iOVFT$jsxs} from "react/jsx-runtime";
 import {Virtualizer as $iOVFT$Virtualizer, ListLayout as $iOVFT$ListLayout, Tree as $iOVFT$Tree, TreeItem as $iOVFT$TreeItem, TreeItemContent as $iOVFT$TreeItemContent, Provider as $iOVFT$Provider, useContextProps as $iOVFT$useContextProps, ButtonContext as $iOVFT$ButtonContext, Button as $iOVFT$Button} from "react-aria-components";
-import {createContext as $iOVFT$createContext, useContext as $iOVFT$useContext, useRef as $iOVFT$useRef, forwardRef as $iOVFT$forwardRef} from "react";
+import {createContext as $iOVFT$createContext, forwardRef as $iOVFT$forwardRef, useContext as $iOVFT$useContext, useRef as $iOVFT$useRef} from "react";
 import {useDOMRef as $iOVFT$useDOMRef} from "@react-spectrum/utils";
 import {useLocale as $iOVFT$useLocale} from "react-aria";
 
@@ -73,7 +73,7 @@ const $03960a2740ca2b19$var$tree = function anonymous(props, overrides) {
     rules += ' -lPUMEc-Zu92';
     return rules;
 };
-function $03960a2740ca2b19$var$TreeView(props, ref) {
+const $03960a2740ca2b19$var$TreeView = /*#__PURE__*/ (0, $iOVFT$forwardRef)(function TreeView(props, ref) {
     let { children: children, isDetached: isDetached, isEmphasized: isEmphasized, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
     let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)();
     let renderer;
@@ -108,7 +108,7 @@ function $03960a2740ca2b19$var$TreeView(props, ref) {
             })
         })
     });
-}
+});
 const $03960a2740ca2b19$var$selectedBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 10%))]";
 const $03960a2740ca2b19$var$selectedActiveBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 15%))]";
 const $03960a2740ca2b19$var$rowBackgroundColor = {
@@ -429,7 +429,7 @@ function $03960a2740ca2b19$var$ExpandableRowChevron(props1) {
 }
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
- */ const $03960a2740ca2b19$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $iOVFT$forwardRef)($03960a2740ca2b19$var$TreeView);
+ */ const $03960a2740ca2b19$export$6940b0d9c820eca7 = $03960a2740ca2b19$var$TreeView;
 
 
 export {$03960a2740ca2b19$export$6e77ea6719814e9c as TreeViewItem, $03960a2740ca2b19$export$9a5779ed3fade674 as TreeViewItemContent, $03960a2740ca2b19$export$6940b0d9c820eca7 as TreeView};

package/dist/TreeView.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps extends Omit<RACTreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nfunction TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n}\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = forwardRef(TreeView);\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  Button,\n  ButtonContext,\n  ListLayout,\n  Provider,\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  useContextProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {DOMRef, DOMRefValue, forwardRefType, Key} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from 'react-aria';\nimport {useScale} from './utils';\n\ninterface S2TreeProps {\n  // Only detatched is supported right now with the current styles from Spectrum\n  isDetached?: boolean,\n  onAction?: (key: Key) => void,\n  // not fully supported yet\n  isEmphasized?: boolean\n}\n\nexport interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n\nlet InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n}, getAllowedOverrides({height: true}));\n\nconst TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        rowHeight: scale === 'large' ? 50 : 40,\n        gap: isDetached ? 2 : 0\n      }}>\n      <TreeRendererContext.Provider value={{renderer}}>\n        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>\n          <Tree\n            {...props}\n            style={UNSAFE_style}\n            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}\n            selectionBehavior=\"toggle\"\n            ref={domRef}>\n            {props.children}\n          </Tree>\n        </InternalTreeContext.Provider>\n      </TreeRendererContext.Provider>\n    </Virtualizer>\n  );\n});\n\nconst selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));\nconst selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 10),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isEmphasized: selectedBackground,\n    isFocusVisibleWithin: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isHovered: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    },\n    isPressed: {\n      default: colorMix('gray-25', 'gray-900', 10),\n      isEmphasized: selectedActiveBackground\n    }\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style({\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--rowFocusIndicatorColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  }\n});\n\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  alignContent: 'center',\n  alignItems: 'center',\n  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  backgroundColor: '--rowBackgroundColor',\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  borderColor: {\n    isDetached: {\n      default: 'transparent',\n      isSelected: '--rowSelectedBorderColor'\n    }\n  },\n  borderWidth: {\n    isDetached: 1\n  },\n  borderRadius: {\n    isDetached: 'default'\n  },\n  borderStyle: {\n    isDetached: 'solid'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 12,\n  marginEnd: 0,\n  paddingEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst cellFocus = {\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineOffset: -2,\n  outlineWidth: 2,\n  outlineColor: 'focus-ring',\n  borderRadius: '[6px]'\n} as const;\n\nconst treeRowFocusIndicator = raw(`\n  &:before {\n    content: \"\";\n    display: inline-block;\n    position: sticky;\n    inset-inline-start: 0;\n    width: 3px;\n    height: 100%;\n    margin-inline-end: -3px;\n    margin-block-end: 1px;\n    z-index: 3;\n    background-color: var(--rowFocusIndicatorColor);\n  }`\n);\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href, isEmphasized\n      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n  let {isDetached, isEmphasized} = useContext(InternalTreeContext);\n  let scale = useScale();\n\n  return (\n    <TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {\n        let isNextSelected = false;\n        let isNextFocused = false;\n        let keyAfter = state.collection.getKeyAfter(id);\n        if (keyAfter != null) {\n          isNextSelected = state.selectionManager.isSelected(keyAfter);\n        }\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <div className={treeCheckbox}>\n                <Checkbox\n                  isEmphasized={isEmphasized}\n                  slot=\"selection\" />\n              </div>\n            )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\n                }],\n                [ActionButtonGroupContext, {styles: treeActions}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]\n              ]}>\n              {children}\n            </Provider>\n            {isFocusVisible && isDetached && <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean,\n  scale: 'medium' | 'large',\n  isHidden?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})} />\n    </Button>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView: <T extends object>(props: TreeViewProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null = TreeView;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.mjs.map"}

package/dist/types.d.ts

@@ -1374,6 +1374,12 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
      * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
      */
     endName?: string;
+    /**
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+     */
+    form?: string;
 }
 export const RangeSliderContext: Context<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
 export const RangeSlider: ForwardRefExoticComponent<RangeSliderProps & RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
@@ -1769,7 +1775,7 @@ interface S2TreeProps {
     onAction?: (key: Key) => void;
     isEmphasized?: boolean;
 }
-export interface TreeViewProps extends Omit<TreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
+export interface TreeViewProps<T> extends Omit<TreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesPropWithHeight;
 }
@@ -1786,7 +1792,7 @@ export const TreeViewItemContent: (props: TreeViewItemContentProps) => ReactNode
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
-export const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
+export const TreeView: <T extends object>(props: TreeViewProps<T> & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null;
 export { Autocomplete } from 'react-aria-components';
 export { Collection } from 'react-aria-components';
 export { FileTrigger } from 'react-aria-components';