@react-spectrum/s2 3.0.0-nightly-bebc9764a-241010 → 3.0.0-nightly-db60babaf-241012
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Card.cjs +3 -3
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +3 -3
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +7 -2
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css.map +1 -1
- package/dist/CardView.mjs +9 -5
- package/dist/CardView.mjs.map +1 -1
- package/dist/Meter.cjs +3 -3
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +3 -3
- package/dist/Meter.mjs.map +1 -1
- package/dist/Slider.cjs +33 -33
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +86 -86
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +33 -33
- package/dist/Slider.mjs.map +1 -1
- package/dist/TableView.cjs +34 -7
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +34 -8
- package/dist/TableView.mjs.map +1 -1
- package/dist/main.cjs +2 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -3
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +15 -6
- package/dist/types.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/Card.tsx +2 -2
- package/src/CardView.tsx +17 -12
- package/src/Meter.tsx +13 -5
- package/src/Slider.tsx +2 -3
- package/src/TableView.tsx +47 -19
- package/src/index.ts +2 -2
package/dist/Slider.mjs.map
CHANGED
|
@@ -1 +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 SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, 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<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\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 ...fieldInput(),\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: size(18),\n M: 20,\n L: size(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: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n }\n});\n\nexport let thumb = style({\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: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: size(6)\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(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({\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({\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>}) {\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({gridArea: 'input', 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\nfunction 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)) : 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\nlet _Slider = /*#__PURE__*/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.mjs.map"}
|
|
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 SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, 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<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\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: size(18),\n M: 20,\n L: size(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: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(26)\n }\n }\n }\n }\n});\n\nexport let thumb = style({\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: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: size(6)\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: size(18),\n M: 20,\n L: size(22),\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: size(22),\n L: 24,\n XL: size(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({\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({\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>}) {\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\nfunction 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\nlet _Slider = /*#__PURE__*/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.mjs.map"}
|
package/dist/TableView.cjs
CHANGED
|
@@ -10,6 +10,7 @@ var $1c116ea4b0d2d023$exports = require("./ProgressCircle.cjs");
|
|
|
10
10
|
var $22bf2407c3628a21$exports = require("../icons/SortDown.cjs");
|
|
11
11
|
var $2197830b90e71c31$exports = require("../icons/SortUp.cjs");
|
|
12
12
|
var $ee7b4c497f520c08$exports = require("./utils.cjs");
|
|
13
|
+
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
|
|
13
14
|
var $iLVc8$reactjsxruntime = require("react/jsx-runtime");
|
|
14
15
|
var $iLVc8$reactariacomponents = require("react-aria-components");
|
|
15
16
|
var $iLVc8$react = require("react");
|
|
@@ -28,6 +29,7 @@ function $parcel$export(e, n, v, s) {
|
|
|
28
29
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
29
30
|
}
|
|
30
31
|
|
|
32
|
+
$parcel$export(module.exports, "TableContext", () => $bed37377ec7a3a9e$export$93e4b0b2cc49b648);
|
|
31
33
|
$parcel$export(module.exports, "TableBody", () => $bed37377ec7a3a9e$export$76ccd210b9029917);
|
|
32
34
|
$parcel$export(module.exports, "Column", () => $bed37377ec7a3a9e$export$816b5d811295e6bc);
|
|
33
35
|
$parcel$export(module.exports, "TableHeader", () => $bed37377ec7a3a9e$export$f850895b287ef28e);
|
|
@@ -63,6 +65,7 @@ $parcel$export(module.exports, "TableView", () => $bed37377ec7a3a9e$export$b3c27
|
|
|
63
65
|
|
|
64
66
|
|
|
65
67
|
|
|
68
|
+
|
|
66
69
|
let $bed37377ec7a3a9e$var$InternalTableContext = /*#__PURE__*/ (0, $iLVc8$react.createContext)({});
|
|
67
70
|
const $bed37377ec7a3a9e$var$tableWrapper = " . oa oba qa qba _Zd __Fa __R-yksgrp";
|
|
68
71
|
const $bed37377ec7a3a9e$var$table = function anonymous(props, overrides) {
|
|
@@ -214,7 +217,9 @@ class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomp
|
|
|
214
217
|
return layoutNode;
|
|
215
218
|
}
|
|
216
219
|
}
|
|
220
|
+
const $bed37377ec7a3a9e$export$93e4b0b2cc49b648 = /*#__PURE__*/ (0, $iLVc8$react.createContext)(null);
|
|
217
221
|
function $bed37377ec7a3a9e$var$TableView(props, ref) {
|
|
222
|
+
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $bed37377ec7a3a9e$export$93e4b0b2cc49b648);
|
|
218
223
|
let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, isQuiet: isQuiet = false, density: density = 'regular', overflowMode: overflowMode = 'truncate', styles: styles, loadingState: loadingState, onLoadMore: onLoadMore, onResize: propsOnResize, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd, onAction: onAction, ...otherProps } = props;
|
|
219
224
|
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
|
|
220
225
|
let scale = (0, $ee7b4c497f520c08$exports.useScale)();
|
|
@@ -303,8 +308,9 @@ function $bed37377ec7a3a9e$var$TableView(props, ref) {
|
|
|
303
308
|
});
|
|
304
309
|
}
|
|
305
310
|
const $bed37377ec7a3a9e$var$centeredWrapper = " . _Zd _1c _2d l4 k4";
|
|
306
|
-
function $bed37377ec7a3a9e$
|
|
311
|
+
function $bed37377ec7a3a9e$var$TableBody(props, ref) {
|
|
307
312
|
let { items: items, renderEmptyState: renderEmptyState, children: children } = props;
|
|
313
|
+
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
|
|
308
314
|
let { loadingState: loadingState } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
|
|
309
315
|
let emptyRender;
|
|
310
316
|
let renderer = children;
|
|
@@ -350,6 +356,8 @@ function $bed37377ec7a3a9e$export$76ccd210b9029917(props) {
|
|
|
350
356
|
})
|
|
351
357
|
});
|
|
352
358
|
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.TableBody), {
|
|
359
|
+
// @ts-ignore
|
|
360
|
+
ref: domRef,
|
|
353
361
|
className: " . k4",
|
|
354
362
|
...props,
|
|
355
363
|
renderEmptyState: emptyRender,
|
|
@@ -359,6 +367,9 @@ function $bed37377ec7a3a9e$export$76ccd210b9029917(props) {
|
|
|
359
367
|
children: renderer
|
|
360
368
|
});
|
|
361
369
|
}
|
|
370
|
+
/**
|
|
371
|
+
* The body of a `<Table>`, containing the table rows.
|
|
372
|
+
*/ let $bed37377ec7a3a9e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)($bed37377ec7a3a9e$var$TableBody);
|
|
362
373
|
const $bed37377ec7a3a9e$var$cellFocus = {
|
|
363
374
|
outlineStyle: {
|
|
364
375
|
default: 'none',
|
|
@@ -458,13 +469,15 @@ const $bed37377ec7a3a9e$var$columnStyles = function anonymous(props) {
|
|
|
458
469
|
rules += ' _zb';
|
|
459
470
|
return rules;
|
|
460
471
|
};
|
|
461
|
-
|
|
472
|
+
const $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Column(props, ref) {
|
|
462
473
|
let { isHeaderRowHovered: isHeaderRowHovered } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableHeaderContext);
|
|
463
474
|
let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
|
|
464
475
|
let { allowsResizing: allowsResizing, children: children, align: align = 'start' } = props;
|
|
476
|
+
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
|
|
465
477
|
let isColumnResizable = allowsResizing;
|
|
466
478
|
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Column), {
|
|
467
479
|
...props,
|
|
480
|
+
ref: domRef,
|
|
468
481
|
style: {
|
|
469
482
|
borderInlineEndColor: 'transparent'
|
|
470
483
|
},
|
|
@@ -493,7 +506,7 @@ function $bed37377ec7a3a9e$export$816b5d811295e6bc(props) {
|
|
|
493
506
|
]
|
|
494
507
|
})
|
|
495
508
|
});
|
|
496
|
-
}
|
|
509
|
+
});
|
|
497
510
|
const $bed37377ec7a3a9e$var$columnContentWrapper = " . qa qba _Zd _1c l4";
|
|
498
511
|
const $bed37377ec7a3a9e$var$sortIcon = function anonymous(props) {
|
|
499
512
|
let rules = " .";
|
|
@@ -790,16 +803,19 @@ const $bed37377ec7a3a9e$var$selectAllCheckboxColumn = function anonymous(props)
|
|
|
790
803
|
let $bed37377ec7a3a9e$var$InternalTableHeaderContext = /*#__PURE__*/ (0, $iLVc8$react.createContext)({
|
|
791
804
|
isHeaderRowHovered: false
|
|
792
805
|
});
|
|
793
|
-
function $bed37377ec7a3a9e$
|
|
806
|
+
function $bed37377ec7a3a9e$var$TableHeader({ columns: columns, children: children }, ref) {
|
|
794
807
|
let scale = (0, $ee7b4c497f520c08$exports.useScale)();
|
|
795
808
|
let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $iLVc8$reactariacomponents.useTableOptions)();
|
|
796
809
|
let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
|
|
797
810
|
let [isHeaderRowHovered, setHeaderRowHovered] = (0, $iLVc8$react.useState)(false);
|
|
811
|
+
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
|
|
798
812
|
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$InternalTableHeaderContext.Provider, {
|
|
799
813
|
value: {
|
|
800
814
|
isHeaderRowHovered: isHeaderRowHovered
|
|
801
815
|
},
|
|
802
816
|
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.TableHeader), {
|
|
817
|
+
// @ts-ignore
|
|
818
|
+
ref: domRef,
|
|
803
819
|
onHoverChange: setHeaderRowHovered,
|
|
804
820
|
className: $bed37377ec7a3a9e$var$tableHeader,
|
|
805
821
|
children: [
|
|
@@ -836,6 +852,9 @@ function $bed37377ec7a3a9e$export$f850895b287ef28e({ columns: columns, children:
|
|
|
836
852
|
})
|
|
837
853
|
});
|
|
838
854
|
}
|
|
855
|
+
/**
|
|
856
|
+
* A header within a `<Table>`, containing the table columns.
|
|
857
|
+
*/ let $bed37377ec7a3a9e$export$f850895b287ef28e = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)($bed37377ec7a3a9e$var$TableHeader);
|
|
839
858
|
function $bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel() {
|
|
840
859
|
let checkboxProps = (0, $iLVc8$reactariacomponents.useSlottedContext)((0, $iLVc8$reactariacomponents.CheckboxContext), 'selection');
|
|
841
860
|
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactaria.VisuallyHidden), {
|
|
@@ -949,11 +968,13 @@ const $bed37377ec7a3a9e$var$cellContent = function anonymous(props) {
|
|
|
949
968
|
else rules += ' ba';
|
|
950
969
|
return rules;
|
|
951
970
|
};
|
|
952
|
-
|
|
971
|
+
const $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Cell(props, ref) {
|
|
953
972
|
let { children: children, isSticky: isSticky, showDivider: showDivider = false, align: align, textValue: textValue, ...otherProps } = props;
|
|
973
|
+
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
|
|
954
974
|
let tableVisualOptions = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
|
|
955
975
|
textValue ||= typeof children === 'string' ? children : undefined;
|
|
956
976
|
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Cell), {
|
|
977
|
+
ref: domRef,
|
|
957
978
|
// Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
|
|
958
979
|
// @ts-ignore
|
|
959
980
|
isSticky: isSticky,
|
|
@@ -978,7 +999,7 @@ function $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea(props) {
|
|
|
978
999
|
]
|
|
979
1000
|
})
|
|
980
1001
|
});
|
|
981
|
-
}
|
|
1002
|
+
});
|
|
982
1003
|
// Use color-mix instead of transparency so sticky cells work correctly.
|
|
983
1004
|
const $bed37377ec7a3a9e$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%))]";
|
|
984
1005
|
const $bed37377ec7a3a9e$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%))]";
|
|
@@ -1030,10 +1051,13 @@ const $bed37377ec7a3a9e$var$row = function anonymous(props) {
|
|
|
1030
1051
|
rules += ' _zb';
|
|
1031
1052
|
return rules;
|
|
1032
1053
|
};
|
|
1033
|
-
function $bed37377ec7a3a9e$
|
|
1054
|
+
function $bed37377ec7a3a9e$var$Row({ id: id, columns: columns, children: children, ...otherProps }, ref) {
|
|
1034
1055
|
let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $iLVc8$reactariacomponents.useTableOptions)();
|
|
1035
1056
|
let tableVisualOptions = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
|
|
1057
|
+
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
|
|
1036
1058
|
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.Row), {
|
|
1059
|
+
// @ts-ignore
|
|
1060
|
+
ref: domRef,
|
|
1037
1061
|
id: id,
|
|
1038
1062
|
className: (renderProps)=>$bed37377ec7a3a9e$var$row({
|
|
1039
1063
|
...renderProps,
|
|
@@ -1056,6 +1080,9 @@ function $bed37377ec7a3a9e$export$b59bdbef9ce70de2({ id: id, columns: columns, c
|
|
|
1056
1080
|
]
|
|
1057
1081
|
});
|
|
1058
1082
|
}
|
|
1083
|
+
/**
|
|
1084
|
+
* A row within a `<Table>`.
|
|
1085
|
+
*/ let $bed37377ec7a3a9e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)($bed37377ec7a3a9e$var$Row);
|
|
1059
1086
|
/**
|
|
1060
1087
|
* Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
|
|
1061
1088
|
*/ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)($bed37377ec7a3a9e$var$TableView);
|
package/dist/TableView.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;AAsGD,IAAI,2DAAuB,CAAA,GAAA,0BAAY,EAA2H,CAAC;AAEnK,MAAM;AAQN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,uBAAuB;AACvB,MAAM,8CAAwB;IAC5B,QAAQ;IACR,OAAO;AACT;AAEA,MAAM,oCAAc;IAClB,SAAS;QACP,QAAQ;QACR,OAAO;IACT;IACA,SAAS;QACP,QAAQ;QACR,OAAO;IACT;IACA,UAAU;QACR,QAAQ;QACR,OAAO;IACT;AACF;AAEO,MAAM,kDAAyB,CAAA,GAAA,+CAAmB;IACvD,YAAY,OAAO,CAAE;QACnB,KAAK,CAAC;YAAC,GAAG,OAAO;YAAE,cAAc;QAAE;IACrC;IAEU,eAAe,IAAiB,EAAW;QACnD,OAAO,KAAK,KAAK,CAAC,QAAQ;IAC5B;IAEU,kBAAgC;QACxC,IAAI,CAAC,QAAQ,KAAK,GAAG,KAAK,CAAC;QAC3B,IAAI,YAAC,QAAQ,cAAE,UAAU,EAAC,GAAG;QAC7B,0GAA0G;QAC1G,uGAAuG;QACvG,IAAI,UAAU,WAAW,GACvB,WAAW,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG;QAG/D,OAAO;YACL;YACA;SACD;IACH;IAEU,YAAY,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACrE,IAAI,aAAa,KAAK,CAAC,YAAY,MAAM,GAAG;QAC5C,IAAI,cAAC,UAAU,EAAC,GAAG;QACnB,WAAW,aAAa,GAAG;QAC3B,WAAW,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK;QAC1D,WAAW,QAAQ,GAAG;QACtB,OAAO;IACT;IAEU,UAAU,CAAS,EAAc;QACzC,IAAI,aAAa,KAAK,CAAC,UAAU;QACjC,IAAI,YAAC,QAAQ,cAAE,UAAU,EAAC,GAAG;QAC7B,mCAAmC;QACnC,WAAW,aAAa,GAAG;QAC3B,qEAAqE;QACrE,IAAI,UAAU,WAAW,GAAG;YAC1B,WAAW,IAAI,GAAG,IAAI,CAAA,GAAA,mCAAG,EAAE,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG;YAClH,WAAW,QAAQ,GAAG;QACxB;QAEA,OAAO;YAAC,GAAG,UAAU;wBAAE;QAAU;IACnC;IAEU,SAAS,IAAiB,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,IAAI,aAAa,KAAK,CAAC,SAAS,MAAM,GAAG;QACzC,WAAW,UAAU,CAAC,aAAa,GAAG;QACtC,iDAAiD;QACjD,OAAO;IACT;IAEU,mBAA+B;QACvC,IAAI,aAAa,KAAK,CAAC;QACvB,kDAAkD;QAClD,WAAW,UAAU,CAAC,aAAa,GAAG;QACtC,OAAO;IACT;IAEU,YAAY,IAAiB,EAAE,CAAS,EAAE,CAAS,EAAc;QACzE,IAAI,aAAa,KAAK,CAAC,YAAY,MAAM,GAAG;QAC5C,uCAAuC;QACvC,WAAW,UAAU,CAAC,aAAa,GAAG;QACtC,OAAO;IACT;AACF;AAEA,SAAS,gCAAU,KAAqB,EAAE,GAA2B;IACnE,IAAI,gBACF,YAAY,oBACZ,gBAAgB,WAChB,UAAU,gBACV,UAAU,yBACV,eAAe,oBACf,MAAM,gBACN,YAAY,cACZ,UAAU,EACV,UAAU,aAAa,EACvB,eAAe,kBAAkB,EACjC,aAAa,gBAAgB,YAC7B,QAAQ,EACR,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QAAQ,CAAA,GAAA,kCAAO;IACnB,IAAI,SAAS,CAAA,GAAA,oBAAM,EAAE;QACnB,OAAO,IAAI,0CAAc;YACvB,WAAW,iBAAiB,SACxB,YACA,iCAAW,CAAC,QAAQ,CAAC,MAAM;YAC/B,oBAAoB,iBAAiB,SACnC,iCAAW,CAAC,QAAQ,CAAC,MAAM,GAC3B;YACF,+FAA+F;YAC/F,eAAe,2CAAqB,CAAC,MAAM;QAC7C;IACF,GAAG;QAAC;QAAc;QAAS;KAAM;IAEjC,6EAA6E;IAC7E,uDAAuD;IACvD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IACnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC/B,qBAAqB;IACvB,GAAG;QAAC;KAAmB;IACvB,IAAI,cAAc,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC7B,kBAAkB;QAClB,mBAAmB;IACrB,GAAG;QAAC;QAAkB;KAAkB;IAExC,IAAI,UAAU,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;qBAC3B;qBACA;0BACA;0BACA;4BACA;+BACA;QACF,CAAA,GAAI;QAAC;QAAS;QAAS;QAAc;QAAc;QAAgB;KAAkB;IAErF,IAAI,YAAY,iBAAiB,aAAa,iBAAiB;IAC/D,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,sBAAsB,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;YACvC,WAAW;wBACX;QACF,CAAA,GAAI;QAAC;QAAW;KAAW;IAC3B,CAAA,GAAA,iCAAU,EAAE,qBAAqB;IACjC,IAAI,sBAAsB,MAAM,aAAa,KAAK,cAAc,MAAM,aAAa,KAAK;IAExF,qBACE,gCAAC,CAAA,GAAA,kDAAsB;QACrB,qIAAqI;QACrI,KAAK;QACL,UAAU;QACV,aAAa;QACb,eAAe;QACf,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,CAAA,GAAA,qCAAU,EAAE,oCAAc;QAChE,OAAO;kBACP,cAAA,gCAAC,CAAA,GAAA,+CAAmB;YAAE,QAAQ;sBAC5B,cAAA,gCAAC,2CAAqB,QAAQ;gBAAC,OAAO;0BACpC,cAAA,gCAAC,CAAA,GAAA,gCAAO;oBACN,KAAK;oBACL,mFAAmF;oBACnF,OAAO;wBAAC,iBAAiB;oBAAe;oBACxC,WAAW,CAAA,cAAe,4BAAM;4BAC9B,GAAG,WAAW;iDACd;qCACA;wBACF;oBACA,mBAAkB;oBAClB,aAAa;oBACZ,GAAG,UAAU;;;;;AAK1B;AAEA,MAAM;AAaC,SAAS,0CAA4B,KAAwB;IAClE,IAAI,SAAC,KAAK,oBAAE,gBAAgB,YAAE,QAAQ,EAAC,GAAG;IAC1C,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAChC,IAAI;IACJ,IAAI,WAAW;IACf,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,gCACF,gCAAC,CAAA,GAAA,yDAA6B;QAAE,SAAS;kBACvC,cAAA,gCAAC;YAAI,WAAW;sBACd,cAAA,gCAAC,CAAA,GAAA,wCAAa;gBACZ,eAAe;gBACf,cAAY,gBAAgB,MAAM,CAAC;;;;IAK3C,oHAAoH;IACpH,kGAAkG;IAClG,8HAA8H;IAC9H,+GAA+G;IAC/G,IAAI,OAAO,aAAa,cAAc,OACpC,yBACE;;0BACE,gCAAC,CAAA,GAAA,qCAAS;gBAAE,OAAO;0BAChB;;YAEF,iBAAiB,iBAAiB;;;SAIvC,yBACE;;YACG;YACA,iBAAiB,iBAAiB;;;IAKzC,IAAI,oBAAoB,QAAQ,iBAAiB,WAC/C,cAAc,CAAC,sBACb,gCAAC;YAAI,WAAW;sBACb,iBAAiB;;SAGjB,IAAI,iBAAiB,WAC1B,cAAc,kBACZ,gCAAC;YAAI,WAAW;sBACd,cAAA,gCAAC,CAAA,GAAA,wCAAa;gBACZ,eAAe;gBACf,cAAY,gBAAgB,MAAM,CAAC;;;IAK3C,qBACE,gCAAC,CAAA,GAAA,oCAAW;QACV,SAAS;QACR,GAAG,KAAK;QACT,kBAAkB;QAClB,cAAc;YAAC;SAAa;kBAC3B;;AAGP;AAEA,MAAM,kCAAY;IAChB,cAAc;QACZ,SAAS;QACT,gBAAgB;IAClB;IACA,eAAe;IACf,cAAc;IACd,cAAc;IACd,YAAY;;;;AACd;AAEA,SAAS;IACP,qBAAO,gCAAC;QAAI,MAAK;QAAe,WAAW;;;;;;;;;;;;;;;;;;;;;;UAAsD;YAAC,gBAAgB;QAAI;;AACxH;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DC,SAAS,0CAAO,KAAkB;IACvC,IAAI,sBAAC,kBAAkB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACtC,IAAI,WAAC,OAAO,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,kBAAC,cAAc,YAAE,QAAQ,SAAE,QAAQ,SAAQ,GAAG;IAClD,IAAI,oBAAoB;IAExB,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QAAG,GAAG,KAAK;QAAE,OAAO;YAAC,sBAAsB;QAAa;QAAG,WAAW,CAAA,cAAe,mCAAa;gBAAC,GAAG,WAAW;mCAAE;uBAAmB;yBAAO;YAAO;kBAC1J,CAAC,iBAAC,aAAa,iBAAE,aAAa,kBAAE,cAAc,QAAE,IAAI,eAAE,WAAW,aAAE,SAAS,EAAC,iBAC5E;;oBAIG,gCAAkB,gCAAC;oBACnB,kCAEG,gCAAC;wBAAwB,eAAe;wBAAe,eAAe;wBAAe,MAAM;wBAAM,aAAa;wBAAa,WAAW,sBAAsB;wBAAW,OAAO;kCAC3K;uCAGH,gCAAC;wBAAe,eAAe;wBAAe,eAAe;kCAC1D;;;;;AAQjB;AAEA,MAAM;AAON,MAAM;;;;;;;;;;;;;;AAmBN,SAAS,qCAAe,KAAyB;IAC/C,IAAI,iBAAC,aAAa,iBAAE,aAAa,YAAE,QAAQ,EAAC,GAAG;IAE/C,qBACE,iCAAC;QAAI,WAAW;;YACb,+BACC,gCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,qCAAU;wBAAG;4BACZ,QAAQ,+BAAS,CAAC;wBACpB;qBAAE;iBACH;0BACA,iBAAiB,QAChB,CAAA,kBAAkB,4BAAc,gCAAC,CAAA,GAAA,iCAAU,uBAAO,gCAAC,CAAA,GAAA,iCAAY,MAAG;;0BAIxE,gCAAC;gBAAK,SAAS;0BACZ;;;;AAIT;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;AA0BN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;AASN,MAAM;AAWN,MAAM;AAoBN,SAAS,8CAAwB,KAAkC;IACjE,IAAI,iBAAC,aAAa,iBAAE,aAAa,QAAE,IAAI,eAAE,WAAW,YAAE,QAAQ,aAAE,SAAS,SAAE,KAAK,EAAC,GAAG;IACpF,IAAI,qBAAC,iBAAiB,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACrD,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,MAAM,eAAe,CAAC;QACpB,OAAQ;YACN,KAAK;gBACH,KAAK;gBACL;YACF,KAAK;gBACH,KAAK;gBACL;YACF,KAAK;gBACH,oBAAoB;gBACpB;gBACA;QACJ;IACF;IAEA,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE;QAClB,IAAI,UAAU;YACZ;gBACE,OAAO,gBAAgB,MAAM,CAAC;gBAC9B,IAAI;YACN;SACD;QACD,IAAI,eACF,UAAU;YACR;gBACE,OAAO,gBAAgB,MAAM,CAAC;gBAC9B,IAAI;YACN;YACA;gBACE,OAAO,gBAAgB,MAAM,CAAC;gBAC9B,IAAI;YACN;eACG;SACJ;QAEH,OAAO;IACT,uDAAuD;IACvD,GAAG;QAAC;KAAc;IAElB,IAAI,kBAAkB;IACtB,IAAI,YAAY;IAChB,IAAI,UAAU,UACZ,kBAAkB;SACb,IAAI,UAAU,OAAO;QAC1B,kBAAkB;QAClB,YAAY;IACd;IAEA,qBACE;;0BACE,iCAAC,CAAA,GAAA,qCAAU;gBAAE,OAAO;;kCAClB,iCAAC,CAAA,GAAA,iCAAK;wBAAE,WAAW,CAAC,cAAgB,iDAA2B;gCAAC,GAAG,WAAW;gCAAE,OAAO;4BAAe;;4BACnG,+BACC,gCAAC,CAAA,GAAA,mCAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,qCAAU;wCAAG;4CACZ,QAAQ,+BAAS;gDAAC,UAAU;4CAAI;wCAClC;qCAAE;iCACH;0CACA,iBAAiB,QAChB,CAAA,kBAAkB,4BAAc,gCAAC,CAAA,GAAA,iCAAU,uBAAO,gCAAC,CAAA,GAAA,iCAAY,MAAG;;0CAIxE,gCAAC;gCAAI,WAAW;0CACb;;0CAEH,gCAAC,CAAA,GAAA,iCAAM;gCAAE,MAAK;gCAAI,WAAW;;;;kCAE/B,gCAAC,CAAA,GAAA,8BAAG;wBAAE,UAAU;wBAAc,OAAO;wBAAO,MAAM;kCAC/C,CAAC,qBAAS,gCAAC,CAAA,GAAA,kCAAO;0CAAG,MAAM;;;;;0BAGhC,gCAAC;gBAAI,iCAA8B;0BACjC,cAAA,gCAAC,CAAA,GAAA,wCAAY;oBAAE,iCAA8B;oBAAO,WAAW,CAAC,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAK,6CAAuB;gDAAC;wCAAoB;4BAAY,WAAW,kBAAkB;wBAAS;8BAChM,CAAC,kBAAC,cAAc,cAAE,UAAU,EAAC,iBAC5B;;8CACE,gCAAC;oCAAiB,gBAAgB;oCAAgB,gBAAgB;oCAAgB,WAAW;oCAAW,YAAY;;gCAClH,CAAA,kBAAkB,cAAa,KAAM,4BAAc,gCAAC;oCAAI,WAAW;8CAAQ,cAAA,gCAAC,CAAA,GAAA,iCAAK;;;;;;;;AAOjG;AAEA,SAAS,uCAAiB,kBAAC,cAAc,aAAE,SAAS,cAAE,UAAU,kBAAE,cAAc,EAAC;IAC/E,qBACE,gCAAC;QAAI,WAAW,oCAAc;4BAAC;YAAgB,WAAW,aAAa;wBAAgB;QAAU;;AAErG;AAEA,MAAM;AAQN,MAAM;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;AAqBN,IAAI,iEAA6B,CAAA,GAAA,0BAAY,EAAkC;IAAC,oBAAoB;AAAK;AAOlG,SAAS,0CAA8B,WAAC,OAAO,YAAE,QAAQ,EAAsB;IACpF,IAAI,QAAQ,CAAA,GAAA,kCAAO;IACnB,IAAI,qBAAC,iBAAiB,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,0CAAc;IACvD,IAAI,WAAC,OAAO,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,CAAC,oBAAoB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEzD,qBACE,gCAAC,iDAA2B,QAAQ;QAAC,OAAO;gCAAC;QAAkB;kBAC7D,cAAA,iCAAC,CAAA,GAAA,sCAAa;YAAE,eAAe;YAAqB,WAAW;;gBAE5D,sBAAsB,YACrB,kGAAkG;gBAClG,aAAa;8BACb,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,QAAQ;oBAAC,OAAO,UAAU,WAAW,KAAK;oBAAI,UAAU,UAAU,WAAW,KAAK;oBAAI,WAAW,8CAAwB;iCAAC;oBAAO;8BACzI,CAAC,kBAAC,cAAc,EAAC,iBAChB;;gCACG,kBAAkB,0BACjB;;wCACG,gCAAkB,gCAAC;sDACpB,gCAAC;;;gCAGJ,kBAAkB,4BACjB,gCAAC,CAAA,GAAA,kCAAO;oCAAE,YAAY;oCAAC,QAAQ;oCAAmB,MAAK;;;;;8BAMjE,gCAAC,CAAA,GAAA,qCAAS;oBAAE,OAAO;8BAChB;;;;;AAKX;AAEA,SAAS;IACP,IAAI,gBAAgB,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,0CAAiB,GAAG;IAE1D,qBACE,gCAAC,CAAA,GAAA,+BAAa;kBAAG,eAAe,CAAC,aAAa;;AAElD;AAEA,MAAM,yCAAmB;IACvB,aAAa;IACb,mBAAmB;IACnB,gBAAgB;IAChB,cAAc;IACd,aAAa;IACb,UAAU;IACV,OAAO;QACL,SAAS;QACT,cAAc;IAChB;IACA,cAAc;IACd,UAAU,GAAG,wBAAwB;AACvC;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BN,MAAM,mCAAa;IACjB,iBAAiB;AACnB;AAEA,MAAM;AAUN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,SAAS,0CAAK,KAAgB;IACnC,IAAI,YAAC,QAAQ,YAAE,QAAQ,eAAE,cAAc,cAAO,KAAK,aAAE,SAAS,EAAE,GAAG,YAAW,GAAG;IACjF,IAAI,qBAAqB,CAAA,GAAA,uBAAS,EAAE;IACpC,cAAc,OAAO,aAAa,WAAW,WAAW;IAExD,qBACE,gCAAC,CAAA,GAAA,+BAAM;QACL,kGAAkG;QAClG,aAAa;QACb,UAAU;QACV,WAAW,CAAA,cAAe,2BAAK;gBAC7B,GAAG,WAAW;gBACd,GAAG,kBAAkB;gBACrB,WAAW;YACb;QACA,WAAW;QACV,GAAG,UAAU;kBACb,CAAC,kBAAC,cAAc,EAAC,iBAChB;;oBACG,gCAAkB,gCAAC;kCACpB,gCAAC;wBAAK,WAAW,kCAAY;4BAAC,GAAG,kBAAkB;sCAAE;4BAAU,OAAO,SAAS;wBAAO;kCAAK;;;;;AAKrG;AAEA,wEAAwE;AACxE,MAAM;AACN,MAAM;AACN,MAAM,2CAAqB;IACzB,SAAS;QACP,SAAS;QACT,SAAS;IACX;IACA,oBAAoB;IACpB,SAAS;IACT,SAAS;IACT,YAAY;QACV,SAAS;QACT,sBAAsB;QACtB,WAAW;QACX,WAAW,+CAAyB,mDAAmD;IACzF;IACA,cAAc;QACZ,SAAS;IACX;AACF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DC,SAAS,0CAAsB,MAAC,EAAE,WAAE,OAAO,YAAE,QAAQ,EAAE,GAAG,YAAwB;IACvF,IAAI,qBAAC,iBAAiB,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,0CAAc;IACvD,IAAI,qBAAqB,CAAA,GAAA,uBAAS,EAAE;IAEpC,qBACE,iCAAC,CAAA,GAAA,8BAAK;QACJ,IAAI;QACJ,WAAW,CAAA,cAAe,0BAAI;gBAC5B,GAAG,WAAW;gBACd,GAAG,kBAAkB;YACvB,KAAM,CAAA,YAAY,cAAc,IAAI,UAA0O;QAC7Q,GAAG,UAAU;;YACb,kBAAkB,UAAU,sBAAsB,0BACjD,gCAAC;gBAAK,QAAQ;gBAAC,WAAW;0BACxB,cAAA,gCAAC,CAAA,GAAA,kCAAO;oBAAE,YAAY;oBAAC,MAAK;;;0BAGhC,gCAAC,CAAA,GAAA,qCAAS;gBAAE,OAAO;0BAChB;;;;AAIT;AAEA;;CAEC,GACD,MAAM,yDAAa,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/TableView.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 Button,\n CellRenderProps,\n Collection,\n ColumnRenderProps,\n ColumnResizer,\n Key,\n Provider,\n Cell as RACCell,\n CellProps as RACCellProps,\n CheckboxContext as RACCheckboxContext,\n Column as RACColumn,\n ColumnProps as RACColumnProps,\n Row as RACRow,\n RowProps as RACRowProps,\n Table as RACTable,\n TableBody as RACTableBody,\n TableBodyProps as RACTableBodyProps,\n TableHeader as RACTableHeader,\n TableHeaderProps as RACTableHeaderProps,\n TableProps as RACTableProps,\n ResizableTableContainer,\n RowRenderProps,\n TableBodyRenderProps,\n TableRenderProps,\n UNSTABLE_TableLayout,\n UNSTABLE_TableLoadingIndicator,\n UNSTABLE_Virtualizer,\n useSlottedContext,\n useTableOptions\n} from 'react-aria-components';\nimport {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, fontRelative, lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {ColumnSize} from '@react-types/table';\nimport {DOMRef, LoadingState, Node} from '@react-types/shared';\nimport {GridNode} from '@react-types/grid';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {LayoutNode} from '@react-stately/layout';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {mergeStyles} from '../style/runtime';\nimport Nubbin from '../ui-icons/S2_Icon_MoveHorizontalCircleTableWidget_16_N.svg';\nimport {ProgressCircle} from './ProgressCircle';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';\nimport {Rect} from '@react-stately/virtualizer';\nimport SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';\nimport SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLoadMore} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useScale} from './utils';\nimport {VisuallyHidden} from 'react-aria';\n\ninterface S2TableProps {\n /** Whether the Table should be displayed with a quiet style. */\n isQuiet?: boolean,\n /**\n * Sets the amount of vertical padding within each cell.\n * @default 'regular'\n */\n density?: 'compact' | 'spacious' | 'regular',\n /**\n * Sets the overflow behavior for the cell contents.\n * @default 'truncate'\n */\n overflowMode?: 'wrap' | 'truncate',\n // TODO: will we contine with onAction or rename to onRowAction like it is in RAC?\n /** Handler that is called when a user performs an action on a row. */\n onAction?: (key: Key) => void,\n /**\n * Handler that is called when a user starts a column resize.\n */\n onResizeStart?: (widths: Map<Key, ColumnSize>) => void,\n /**\n * Handler that is called when a user performs a column resize.\n * Can be used with the width property on columns to put the column widths into\n * a controlled state.\n */\n onResize?: (widths: Map<Key, ColumnSize>) => void,\n /**\n * Handler that is called after a user performs a column resize.\n * Can be used to store the widths of columns for another future session.\n */\n onResizeEnd?: (widths: Map<Key, ColumnSize>) => void,\n /** The current loading state of the table. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => any\n}\n\n// TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody\nexport interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nlet InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});\n\nconst tableWrapper = style({\n minHeight: 0,\n minWidth: 0,\n display: 'flex',\n isolation: 'isolate',\n disableTapHighlight: true\n});\n\nconst table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boolean}>({\n width: 'full',\n userSelect: 'none',\n minHeight: 0,\n minWidth: 0,\n fontFamily: 'sans',\n fontWeight: 'normal',\n overflow: 'auto',\n backgroundColor: {\n default: 'gray-25',\n isQuiet: 'transparent',\n forcedColors: 'Background'\n },\n outlineColor: {\n default: 'gray-300',\n isFocusVisible: 'focus-ring',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: {\n default: 1,\n isQuiet: 0,\n isFocusVisible: 2\n },\n outlineStyle: 'solid',\n borderRadius: {\n default: size(6),\n isQuiet: 'none'\n },\n // Multiple browser bugs from scrollIntoView and scrollPadding:\n // Bug: Table doesn't scroll items into view perfectly in Chrome\n // https://issues.chromium.org/issues/365913982\n // Bug: Table scrolls to the left when navigating up/down through the checkboxes when body is scrolled to the right.\n // https://issues.chromium.org/issues/40067778\n // https://bugs.webkit.org/show_bug.cgi?id=272799\n // Base reproduction: https://codepen.io/lfdanlu/pen/zYVVGPW\n scrollPaddingTop: 32,\n scrollPaddingStart: {\n isCheckboxSelection: 40\n }\n}, getAllowedOverrides({height: true}));\n\n// component-height-100\nconst DEFAULT_HEADER_HEIGHT = {\n medium: 32,\n large: 40\n};\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32, // table-row-height-medium-compact (aka component-height-100)\n large: 40\n },\n regular: {\n medium: 40, // table-row-height-medium-regular\n large: 50\n },\n spacious: {\n medium: 48, // table-row-height-medium-spacious\n large: 60\n }\n};\n\nexport class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {\n constructor(options) {\n super({...options, loaderHeight: 60});\n }\n\n protected isStickyColumn(node: GridNode<T>): boolean {\n return node.props.isSticky;\n }\n\n protected buildCollection(): LayoutNode[] {\n let [header, body] = super.buildCollection();\n let {children, layoutInfo} = body;\n // TableLayout's buildCollection always sets the body width to the max width between the header width, but\n // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty\n if (children?.length === 0) {\n layoutInfo.rect.width = this.virtualizer.visibleRect.width - 80;\n }\n\n return [\n header,\n body\n ];\n }\n\n protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {\n let layoutNode = super.buildLoader(node, x, y);\n let {layoutInfo} = layoutNode;\n layoutInfo.allowOverflow = true;\n layoutInfo.rect.width = this.virtualizer.visibleRect.width;\n layoutInfo.isSticky = true;\n return layoutNode;\n }\n\n protected buildBody(y: number): LayoutNode {\n let layoutNode = super.buildBody(y);\n let {children, layoutInfo} = layoutNode;\n // Needs overflow for sticky loader\n layoutInfo.allowOverflow = true;\n // If loading or empty, we'll want the body to be sticky and centered\n if (children?.length === 0) {\n layoutInfo.rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);\n layoutInfo.isSticky = true;\n }\n\n return {...layoutNode, layoutInfo};\n }\n\n protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {\n let layoutNode = super.buildRow(node, x, y);\n layoutNode.layoutInfo.allowOverflow = true;\n // Needs overflow for sticky selection/drag cells\n return layoutNode;\n }\n\n protected buildTableHeader(): LayoutNode {\n let layoutNode = super.buildTableHeader();\n // Needs overflow for sticky selection/drag column\n layoutNode.layoutInfo.allowOverflow = true;\n return layoutNode;\n }\n\n protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {\n let layoutNode = super.buildColumn(node, x, y);\n // Needs overflow for the resize handle\n layoutNode.layoutInfo.allowOverflow = true;\n return layoutNode;\n }\n}\n\nfunction TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {\n let {\n UNSAFE_style,\n UNSAFE_className,\n isQuiet = false,\n density = 'regular',\n overflowMode = 'truncate',\n styles,\n loadingState,\n onLoadMore,\n onResize: propsOnResize,\n onResizeStart: propsOnResizeStart,\n onResizeEnd: propsOnResizeEnd,\n onAction,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let scale = useScale();\n let layout = useMemo(() => {\n return new S2TableLayout({\n rowHeight: overflowMode === 'wrap'\n ? undefined\n : ROW_HEIGHTS[density][scale],\n estimatedRowHeight: overflowMode === 'wrap'\n ? ROW_HEIGHTS[density][scale]\n : undefined,\n // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap\n headingHeight: DEFAULT_HEADER_HEIGHT[scale]\n });\n }, [overflowMode, density, scale]);\n\n // Starts when the user selects resize from the menu, ends when resizing ends\n // used to control the visibility of the resizer Nubbin\n let [isInResizeMode, setIsInResizeMode] = useState(false);\n let onResizeStart = useCallback((widths) => {\n propsOnResizeStart?.(widths);\n }, [propsOnResizeStart]);\n let onResizeEnd = useCallback((widths) => {\n setIsInResizeMode(false);\n propsOnResizeEnd?.(widths);\n }, [propsOnResizeEnd, setIsInResizeMode]);\n\n let context = useMemo(() => ({\n isQuiet,\n density,\n overflowMode,\n loadingState,\n isInResizeMode,\n setIsInResizeMode\n }), [isQuiet, density, overflowMode, loadingState, isInResizeMode, setIsInResizeMode]);\n\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let scrollRef = useRef(null);\n let memoedLoadMoreProps = useMemo(() => ({\n isLoading: isLoading,\n onLoadMore\n }), [isLoading, onLoadMore]);\n useLoadMore(memoedLoadMoreProps, scrollRef);\n let isCheckboxSelection = props.selectionMode === 'multiple' || props.selectionMode === 'single';\n\n return (\n <ResizableTableContainer\n // TODO: perhaps this ref should be attached to the RACTable but it expects a table type ref which isn't true in the virtualized case\n ref={domRef}\n onResize={propsOnResize}\n onResizeEnd={onResizeEnd}\n onResizeStart={onResizeStart}\n className={(UNSAFE_className || '') + mergeStyles(tableWrapper, styles)}\n style={UNSAFE_style}>\n <UNSTABLE_Virtualizer layout={layout}>\n <InternalTableContext.Provider value={context}>\n <RACTable\n ref={scrollRef}\n // Fix webkit bug where scrollbars appear above the checkboxes/other table elements\n style={{WebkitTransform: 'translateZ(0)'}}\n className={renderProps => table({\n ...renderProps,\n isCheckboxSelection,\n isQuiet\n })}\n selectionBehavior=\"toggle\"\n onRowAction={onAction}\n {...otherProps} />\n </InternalTableContext.Provider>\n </UNSTABLE_Virtualizer>\n </ResizableTableContainer>\n );\n}\n\nconst centeredWrapper = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 'full',\n height: 'full'\n});\n\nexport interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | 'dependencies'> {}\n\n/**\n * The body of a `<Table>`, containing the table rows.\n */\nexport function TableBody<T extends object>(props: TableBodyProps<T>) {\n let {items, renderEmptyState, children} = props;\n let {loadingState} = useContext(InternalTableContext);\n let emptyRender;\n let renderer = children;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let loadMoreSpinner = (\n <UNSTABLE_TableLoadingIndicator className={style({height: 'full', width: 'full'})}>\n <div className={centeredWrapper}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('table.loadingMore')} />\n </div>\n </UNSTABLE_TableLoadingIndicator>\n );\n\n // If the user is rendering their rows in dynamic fashion, wrap their render function in Collection so we can inject\n // the loader. Otherwise it is a static renderer and thus we can simply add the table loader after\n // TODO: this assumes that the user isn't providing their children in some wrapper though and/or isn't doing a map of children\n // (though I guess they wouldn't provide items then so the check for this is still valid in the latter case)...\n if (typeof children === 'function' && items) {\n renderer = (\n <>\n <Collection items={items}>\n {children}\n </Collection>\n {loadingState === 'loadingMore' && loadMoreSpinner}\n </>\n );\n } else {\n renderer = (\n <>\n {children}\n {loadingState === 'loadingMore' && loadMoreSpinner}\n </>\n );\n }\n\n if (renderEmptyState != null && loadingState !== 'loading') {\n emptyRender = (props: TableBodyRenderProps) => (\n <div className={centeredWrapper}>\n {renderEmptyState(props)}\n </div>\n );\n } else if (loadingState === 'loading') {\n emptyRender = () => (\n <div className={centeredWrapper}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('table.loading')} />\n </div>\n );\n }\n\n return (\n <RACTableBody\n className={style({height: 'full'})}\n {...props}\n renderEmptyState={emptyRender}\n dependencies={[loadingState]}>\n {renderer}\n </RACTableBody>\n );\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: size(6)\n} as const;\n\nfunction CellFocusRing() {\n return <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />;\n}\n\nconst columnStyles = style({\n height: '[inherit]',\n boxSizing: 'border-box',\n color: {\n default: 'neutral',\n forcedColors: 'ButtonText'\n },\n paddingX: {\n default: 16,\n isColumnResizable: 0\n },\n textAlign: {\n align: {\n start: 'start',\n center: 'center',\n end: 'end'\n }\n },\n outlineStyle: 'none',\n position: 'relative',\n fontSize: 'control',\n fontFamily: 'sans',\n fontWeight: 'bold',\n display: 'flex',\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n },\n borderTopWidth: {\n default: 0,\n isQuiet: 1\n },\n borderBottomWidth: 1,\n borderStartWidth: 0,\n borderEndWidth: {\n default: 0,\n isColumnResizable: 1\n },\n borderStyle: 'solid',\n forcedColorAdjust: 'none'\n});\n\nexport interface ColumnProps extends RACColumnProps {\n /** Whether the column should render a divider between it and the next column. */\n showDivider?: boolean,\n /** Whether the column allows resizing. */\n allowsResizing?: boolean,\n /**\n * The alignment of the column's contents relative to its allotted width.\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end',\n /** The content to render as the column header. */\n children: ReactNode\n}\n\n/**\n * A column within a `<Table>`.\n */\nexport function Column(props: ColumnProps) {\n let {isHeaderRowHovered} = useContext(InternalTableHeaderContext);\n let {isQuiet} = useContext(InternalTableContext);\n let {allowsResizing, children, align = 'start'} = props;\n let isColumnResizable = allowsResizing;\n\n return (\n <RACColumn {...props} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>\n {({allowsSorting, sortDirection, isFocusVisible, sort, startResize, isHovered}) => (\n <>\n {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity\n (no need to juggle showing this focus ring if focus is on the menu button and not if it is on the resizer) */}\n {/* Separate absolutely positioned element because appyling the ring on the column directly via outline means the ring's required borderRadius will cause the bottom gray border to curve as well */}\n {isFocusVisible && <CellFocusRing />}\n {isColumnResizable ?\n (\n <ResizableColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} isHovered={isHeaderRowHovered || isHovered} align={align}>\n {children}\n </ResizableColumnContents>\n ) : (\n <ColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection}>\n {children}\n </ColumnContents>\n )\n }\n </>\n )}\n </RACColumn>\n );\n}\n\nconst columnContentWrapper = style({\n minWidth: 0,\n display: 'flex',\n alignItems: 'center',\n width: 'full'\n});\n\nconst sortIcon = style({\n size: fontRelative(16),\n flexShrink: 0,\n marginEnd: {\n default: 8,\n isButton: 'text-to-visual'\n },\n verticalAlign: {\n default: 'bottom',\n isButton: 0\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\ninterface ColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sortDirection'>, Pick<ColumnProps, 'children'> {}\n\nfunction ColumnContents(props: ColumnContentProps) {\n let {allowsSorting, sortDirection, children} = props;\n\n return (\n <div className={columnContentWrapper}>\n {allowsSorting && (\n <Provider\n values={[\n [IconContext, {\n styles: sortIcon({})\n }]\n ]}>\n {sortDirection != null && (\n sortDirection === 'ascending' ? <SortUpArrow /> : <SortDownArrow />\n )}\n </Provider>\n )}\n <span className={style({truncate: true, width: 'full'})}>\n {children}\n </span>\n </div>\n );\n}\n\nconst resizableMenuButtonWrapper = style({\n ...cellFocus,\n color: 'gray-800', // body-color\n width: 'full',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: {\n align: {\n default: 'start',\n center: 'center',\n end: 'end'\n }\n },\n // TODO: when align: end, the dropdown arrow is misaligned with the text, not sure how best to make the svg be flush with the end of the button other than modifying the\n // paddingEnd\n paddingX: 16,\n backgroundColor: 'transparent',\n borderStyle: 'none',\n fontSize: 'control',\n fontFamily: 'sans',\n fontWeight: 'bold'\n});\n\nconst resizerHandleContainer = style({\n display: {\n default: 'none',\n isResizing: 'block',\n isHovered: 'block'\n },\n width: 12,\n height: 'full',\n position: 'absolute',\n top: 0,\n insetEnd: size(-6),\n cursor: {\n default: 'none',\n resizableDirection: {\n 'left': 'e-resize',\n 'right': 'w-resize',\n 'both': 'ew-resize'\n }\n },\n // So that the user can still hover + drag the resizer even though it's hit area is partially in the adjacent column's space\n '--focus-ring-color': {\n type: 'outlineColor',\n value: 'focus-ring'\n }\n});\n\nconst resizerHandle = style({\n backgroundColor: {\n default: 'transparent',\n isHovered: 'gray-300',\n isFocusVisible: '--focus-ring-color',\n isResizing: '--focus-ring-color',\n forcedColors: {\n default: 'Background',\n isHovered: 'ButtonBorder',\n isFocusVisible: 'Highlight',\n isResizing: 'Highlight'\n }\n },\n height: {\n default: 'full',\n isResizing: 'screen'\n },\n width: {\n default: size(1),\n isResizing: size(2)\n },\n position: 'absolute',\n insetStart: size(6)\n});\n\nconst columnHeaderText = style({\n truncate: true,\n // Make it so the text doesn't completely disappear when column is resized to smallest width + both sort and chevron icon is rendered\n minWidth: fontRelative(16),\n flexGrow: 0,\n flexShrink: 1,\n flexBasis: 'auto'\n});\n\nconst chevronIcon = style({\n rotate: 90,\n marginStart: 'text-to-visual',\n minWidth: fontRelative(16),\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst nubbin = style({\n position: 'absolute',\n top: 0,\n insetStart: size(-1),\n size: fontRelative(16),\n fill: {\n default: '--focus-ring-color',\n forcedColors: 'Highlight'\n },\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'white',\n forcedColors: 'HighlightText'\n }\n }\n});\n\ninterface ResizableColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sort' | 'sortDirection' | 'startResize' | 'isHovered'>, Pick<ColumnProps, 'align' | 'children'> {}\n\nfunction ResizableColumnContents(props: ResizableColumnContentProps) {\n let {allowsSorting, sortDirection, sort, startResize, children, isHovered, align} = props;\n let {setIsInResizeMode, isInResizeMode} = useContext(InternalTableContext);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n const onMenuSelect = (key) => {\n switch (key) {\n case 'sort-asc':\n sort('ascending');\n break;\n case 'sort-desc':\n sort('descending');\n break;\n case 'resize':\n setIsInResizeMode?.(true);\n startResize();\n break;\n }\n };\n\n let items = useMemo(() => {\n let options = [\n {\n label: stringFormatter.format('table.resizeColumn'),\n id: 'resize'\n }\n ];\n if (allowsSorting) {\n options = [\n {\n label: stringFormatter.format('table.sortAscending'),\n id: 'sort-asc'\n },\n {\n label: stringFormatter.format('table.sortDescending'),\n id: 'sort-desc'\n },\n ...options\n ];\n }\n return options;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [allowsSorting]);\n\n let buttonAlignment = 'start';\n let menuAlign = 'start' as 'start' | 'end';\n if (align === 'center') {\n buttonAlignment = 'center';\n } else if (align === 'end') {\n buttonAlignment = 'end';\n menuAlign = 'end';\n }\n\n return (\n <>\n <MenuTrigger align={menuAlign}>\n <Button className={(renderProps) => resizableMenuButtonWrapper({...renderProps, align: buttonAlignment})}>\n {allowsSorting && (\n <Provider\n values={[\n [IconContext, {\n styles: sortIcon({isButton: true})\n }]\n ]}>\n {sortDirection != null && (\n sortDirection === 'ascending' ? <SortUpArrow /> : <SortDownArrow />\n )}\n </Provider>\n )}\n <div className={columnHeaderText}>\n {children}\n </div>\n <Chevron size=\"M\" className={chevronIcon} />\n </Button>\n <Menu onAction={onMenuSelect} items={items} styles={style({minWidth: 128})}>\n {(item) => <MenuItem>{item?.label}</MenuItem>}\n </Menu>\n </MenuTrigger>\n <div data-react-aria-prevent-focus=\"true\">\n <ColumnResizer data-react-aria-prevent-focus=\"true\" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isHovered: isInResizeMode || isHovered})}>\n {({isFocusVisible, isResizing}) => (\n <>\n <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isHovered={isHovered} isResizing={isResizing} />\n {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}\n </>\n )}\n </ColumnResizer>\n </div>\n </>\n );\n}\n\nfunction ResizerIndicator({isFocusVisible, isHovered, isResizing, isInResizeMode}) {\n return (\n <div className={resizerHandle({isFocusVisible, isHovered: isHovered || isInResizeMode, isResizing})} />\n );\n}\n\nconst tableHeader = style({\n height: 'full',\n width: 'full',\n backgroundColor: 'gray-75',\n // Attempt to prevent 1px area where you can see scrolled cell content between the table outline and the table header\n marginTop: '[-1px]'\n});\n\nconst selectAllCheckbox = style({\n marginStart: 16 // table-edge-to-content, same between mobile and desktop\n});\n\nconst selectAllCheckboxColumn = style({\n padding: 0,\n height: 'full',\n boxSizing: 'border-box',\n outlineStyle: 'none',\n position: 'relative',\n alignContent: 'center',\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n },\n borderXWidth: 0,\n borderTopWidth: {\n default: 0,\n isQuiet: 1\n },\n borderBottomWidth: 1,\n borderStyle: 'solid',\n backgroundColor: 'gray-75'\n});\n\nlet InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({isHeaderRowHovered: false});\n\nexport interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}\n\n/**\n * A header within a `<Table>`, containing the table columns.\n */\nexport function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>) {\n let scale = useScale();\n let {selectionBehavior, selectionMode} = useTableOptions();\n let {isQuiet} = useContext(InternalTableContext);\n let [isHeaderRowHovered, setHeaderRowHovered] = useState(false);\n\n return (\n <InternalTableHeaderContext.Provider value={{isHeaderRowHovered}}>\n <RACTableHeader onHoverChange={setHeaderRowHovered} className={tableHeader}>\n {/* Add extra columns for selection. */}\n {selectionBehavior === 'toggle' && (\n // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later\n // @ts-ignore\n <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}>\n {({isFocusVisible}) => (\n <>\n {selectionMode === 'single' &&\n <>\n {isFocusVisible && <CellFocusRing />}\n <VisuallyHiddenSelectAllLabel />\n </>\n }\n {selectionMode === 'multiple' &&\n <Checkbox isEmphasized styles={selectAllCheckbox} slot=\"selection\" />\n }\n </>\n )}\n </RACColumn>\n )}\n <Collection items={columns}>\n {children}\n </Collection>\n </RACTableHeader>\n </InternalTableHeaderContext.Provider>\n );\n}\n\nfunction VisuallyHiddenSelectAllLabel() {\n let checkboxProps = useSlottedContext(RACCheckboxContext, 'selection');\n\n return (\n <VisuallyHidden>{checkboxProps?.['aria-label']}</VisuallyHidden>\n );\n}\n\nconst commonCellStyles = {\n borderColor: 'transparent',\n borderBottomWidth: 1,\n borderTopWidth: 0,\n borderXWidth: 0,\n borderStyle: 'solid',\n position: 'relative',\n color: {\n default: 'gray-800',\n forcedColors: 'ButtonText'\n },\n outlineStyle: 'none',\n paddingX: 16 // table-edge-to-content\n} as const;\n\nconst cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({\n ...commonCellStyles,\n color: 'neutral',\n paddingY: centerPadding(),\n minHeight: {\n default: 40,\n density: {\n compact: 32,\n spacious: 48\n }\n },\n boxSizing: 'border-box',\n height: 'full',\n width: 'full',\n fontSize: 'control',\n alignItems: 'center',\n display: 'flex',\n borderStyle: {\n default: 'none',\n isDivider: 'solid'\n },\n borderEndWidth: {\n default: 0,\n isDivider: 1\n },\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n }\n});\n\nconst stickyCell = {\n backgroundColor: 'gray-25'\n} as const;\n\nconst checkboxCellStyle = style({\n ...commonCellStyles,\n ...stickyCell,\n paddingStart: 16,\n alignContent: 'center',\n height: '[calc(100% - 1px)]',\n borderBottomWidth: 0,\n backgroundColor: '--rowBackgroundColor'\n});\n\nconst cellContent = style({\n truncate: true,\n whiteSpace: {\n default: 'nowrap',\n overflowMode: {\n wrap: 'normal'\n }\n },\n textAlign: {\n align: {\n start: 'start',\n center: 'center',\n end: 'end'\n }\n },\n width: 'full',\n isolation: 'isolate',\n padding: {\n default: 4,\n isSticky: 0\n },\n margin: {\n default: -4,\n isSticky: 0\n },\n backgroundColor: {\n default: 'transparent',\n isSticky: '--rowBackgroundColor'\n }\n});\n\nexport interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'showDivider'> {\n /** @private */\n isSticky?: boolean,\n /** The content to render as the cell children. */\n children: ReactNode\n}\n\n/**\n * A cell within a table row.\n */\nexport function Cell(props: CellProps) {\n let {children, isSticky, showDivider = false, align, textValue, ...otherProps} = props;\n let tableVisualOptions = useContext(InternalTableContext);\n textValue ||= typeof children === 'string' ? children : undefined;\n\n return (\n <RACCell\n // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later\n // @ts-ignore\n isSticky={isSticky}\n className={renderProps => cell({\n ...renderProps,\n ...tableVisualOptions,\n isDivider: showDivider\n })}\n textValue={textValue}\n {...otherProps}>\n {({isFocusVisible}) => (\n <>\n {isFocusVisible && <CellFocusRing />}\n <span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>\n </>\n )}\n </RACCell>\n );\n}\n\n// Use color-mix instead of transparency so sticky cells work correctly.\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));\nconst rowBackgroundColor = {\n default: {\n default: 'gray-25',\n isQuiet: 'transparent'\n },\n isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color\n isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color\n isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color\n isSelected: {\n default: selectedBackground, // table-selected-row-background-color, opacity /10\n isFocusVisibleWithin: selectedActiveBackground, // table-selected-row-background-color, opacity /15\n isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15\n isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15\n },\n forcedColors: {\n default: 'Background'\n }\n} as const;\n\nconst row = style<RowRenderProps & S2TableProps>({\n height: 'full',\n position: 'relative',\n boxSizing: 'border-box',\n backgroundColor: '--rowBackgroundColor',\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 // TODO: outline here is to emulate v3 forcedColors experience but runs into the same problem where the sticky column covers the outline\n // This doesn't quite work because it gets cut off by the checkbox cell background masking element, figure out another way. Could shrink the checkbox cell's content even more\n // and offset it by margin top but that messes up the checkbox centering a bit\n // outlineWidth: {\n // forcedColors: {\n // isFocusVisible: 2\n // }\n // },\n // outlineOffset: {\n // forcedColors: {\n // isFocusVisible: -1\n // }\n // },\n // outlineColor: {\n // forcedColors: {\n // isFocusVisible: 'ButtonBorder'\n // }\n // },\n // outlineStyle: {\n // default: 'none',\n // forcedColors: {\n // isFocusVisible: 'solid'\n // }\n // },\n outlineStyle: 'none',\n borderTopWidth: 0,\n borderBottomWidth: 1,\n borderStartWidth: 0,\n borderEndWidth: 0,\n borderStyle: 'solid',\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n },\n forcedColorAdjust: 'none'\n});\n\nexport interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue'> {}\n\n/**\n * A row within a `<Table>`.\n */\nexport function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>) {\n let {selectionBehavior, selectionMode} = useTableOptions();\n let tableVisualOptions = useContext(InternalTableContext);\n\n return (\n <RACRow\n id={id}\n className={renderProps => row({\n ...renderProps,\n ...tableVisualOptions\n }) + (renderProps.isFocusVisible && ' ' + raw('&:before { content: \"\"; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px; z-index: 3; background-color: var(--rowFocusIndicatorColor)'))}\n {...otherProps}>\n {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n <Cell isSticky className={checkboxCellStyle}>\n <Checkbox isEmphasized slot=\"selection\" />\n </Cell>\n )}\n <Collection items={columns}>\n {children}\n </Collection>\n </RACRow>\n );\n}\n\n/**\n * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.\n */\nconst _TableView = forwardRef(TableView);\nexport {_TableView as TableView};\n"],"names":[],"version":3,"file":"TableView.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TableView.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 Button,\n CellRenderProps,\n Collection,\n ColumnRenderProps,\n ColumnResizer,\n ContextValue,\n Key,\n Provider,\n Cell as RACCell,\n CellProps as RACCellProps,\n CheckboxContext as RACCheckboxContext,\n Column as RACColumn,\n ColumnProps as RACColumnProps,\n Row as RACRow,\n RowProps as RACRowProps,\n Table as RACTable,\n TableBody as RACTableBody,\n TableBodyProps as RACTableBodyProps,\n TableHeader as RACTableHeader,\n TableHeaderProps as RACTableHeaderProps,\n TableProps as RACTableProps,\n ResizableTableContainer,\n RowRenderProps,\n TableBodyRenderProps,\n TableRenderProps,\n UNSTABLE_TableLayout,\n UNSTABLE_TableLoadingIndicator,\n UNSTABLE_Virtualizer,\n useSlottedContext,\n useTableOptions\n} from 'react-aria-components';\nimport {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {colorMix, fontRelative, lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {ColumnSize} from '@react-types/table';\nimport {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';\nimport {GridNode} from '@react-types/grid';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {LayoutNode} from '@react-stately/layout';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {mergeStyles} from '../style/runtime';\nimport Nubbin from '../ui-icons/S2_Icon_MoveHorizontalCircleTableWidget_16_N.svg';\nimport {ProgressCircle} from './ProgressCircle';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';\nimport {Rect} from '@react-stately/virtualizer';\nimport SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';\nimport SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLoadMore} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useScale} from './utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {VisuallyHidden} from 'react-aria';\n\ninterface S2TableProps {\n /** Whether the Table should be displayed with a quiet style. */\n isQuiet?: boolean,\n /**\n * Sets the amount of vertical padding within each cell.\n * @default 'regular'\n */\n density?: 'compact' | 'spacious' | 'regular',\n /**\n * Sets the overflow behavior for the cell contents.\n * @default 'truncate'\n */\n overflowMode?: 'wrap' | 'truncate',\n // TODO: will we contine with onAction or rename to onRowAction like it is in RAC?\n /** Handler that is called when a user performs an action on a row. */\n onAction?: (key: Key) => void,\n /**\n * Handler that is called when a user starts a column resize.\n */\n onResizeStart?: (widths: Map<Key, ColumnSize>) => void,\n /**\n * Handler that is called when a user performs a column resize.\n * Can be used with the width property on columns to put the column widths into\n * a controlled state.\n */\n onResize?: (widths: Map<Key, ColumnSize>) => void,\n /**\n * Handler that is called after a user performs a column resize.\n * Can be used to store the widths of columns for another future session.\n */\n onResizeEnd?: (widths: Map<Key, ColumnSize>) => void,\n /** The current loading state of the table. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => any\n}\n\n// TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody\nexport interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nlet InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});\n\nconst tableWrapper = style({\n minHeight: 0,\n minWidth: 0,\n display: 'flex',\n isolation: 'isolate',\n disableTapHighlight: true\n});\n\nconst table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boolean}>({\n width: 'full',\n userSelect: 'none',\n minHeight: 0,\n minWidth: 0,\n fontFamily: 'sans',\n fontWeight: 'normal',\n overflow: 'auto',\n backgroundColor: {\n default: 'gray-25',\n isQuiet: 'transparent',\n forcedColors: 'Background'\n },\n outlineColor: {\n default: 'gray-300',\n isFocusVisible: 'focus-ring',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: {\n default: 1,\n isQuiet: 0,\n isFocusVisible: 2\n },\n outlineStyle: 'solid',\n borderRadius: {\n default: size(6),\n isQuiet: 'none'\n },\n // Multiple browser bugs from scrollIntoView and scrollPadding:\n // Bug: Table doesn't scroll items into view perfectly in Chrome\n // https://issues.chromium.org/issues/365913982\n // Bug: Table scrolls to the left when navigating up/down through the checkboxes when body is scrolled to the right.\n // https://issues.chromium.org/issues/40067778\n // https://bugs.webkit.org/show_bug.cgi?id=272799\n // Base reproduction: https://codepen.io/lfdanlu/pen/zYVVGPW\n scrollPaddingTop: 32,\n scrollPaddingStart: {\n isCheckboxSelection: 40\n }\n}, getAllowedOverrides({height: true}));\n\n// component-height-100\nconst DEFAULT_HEADER_HEIGHT = {\n medium: 32,\n large: 40\n};\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32, // table-row-height-medium-compact (aka component-height-100)\n large: 40\n },\n regular: {\n medium: 40, // table-row-height-medium-regular\n large: 50\n },\n spacious: {\n medium: 48, // table-row-height-medium-spacious\n large: 60\n }\n};\n\nexport class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {\n constructor(options) {\n super({...options, loaderHeight: 60});\n }\n\n protected isStickyColumn(node: GridNode<T>): boolean {\n return node.props.isSticky;\n }\n\n protected buildCollection(): LayoutNode[] {\n let [header, body] = super.buildCollection();\n let {children, layoutInfo} = body;\n // TableLayout's buildCollection always sets the body width to the max width between the header width, but\n // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty\n if (children?.length === 0) {\n layoutInfo.rect.width = this.virtualizer.visibleRect.width - 80;\n }\n\n return [\n header,\n body\n ];\n }\n\n protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {\n let layoutNode = super.buildLoader(node, x, y);\n let {layoutInfo} = layoutNode;\n layoutInfo.allowOverflow = true;\n layoutInfo.rect.width = this.virtualizer.visibleRect.width;\n layoutInfo.isSticky = true;\n return layoutNode;\n }\n\n protected buildBody(y: number): LayoutNode {\n let layoutNode = super.buildBody(y);\n let {children, layoutInfo} = layoutNode;\n // Needs overflow for sticky loader\n layoutInfo.allowOverflow = true;\n // If loading or empty, we'll want the body to be sticky and centered\n if (children?.length === 0) {\n layoutInfo.rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);\n layoutInfo.isSticky = true;\n }\n\n return {...layoutNode, layoutInfo};\n }\n\n protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {\n let layoutNode = super.buildRow(node, x, y);\n layoutNode.layoutInfo.allowOverflow = true;\n // Needs overflow for sticky selection/drag cells\n return layoutNode;\n }\n\n protected buildTableHeader(): LayoutNode {\n let layoutNode = super.buildTableHeader();\n // Needs overflow for sticky selection/drag column\n layoutNode.layoutInfo.allowOverflow = true;\n return layoutNode;\n }\n\n protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {\n let layoutNode = super.buildColumn(node, x, y);\n // Needs overflow for the resize handle\n layoutNode.layoutInfo.allowOverflow = true;\n return layoutNode;\n }\n}\n\nexport const TableContext = createContext<ContextValue<TableViewProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, TableContext);\n let {\n UNSAFE_style,\n UNSAFE_className,\n isQuiet = false,\n density = 'regular',\n overflowMode = 'truncate',\n styles,\n loadingState,\n onLoadMore,\n onResize: propsOnResize,\n onResizeStart: propsOnResizeStart,\n onResizeEnd: propsOnResizeEnd,\n onAction,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let scale = useScale();\n let layout = useMemo(() => {\n return new S2TableLayout({\n rowHeight: overflowMode === 'wrap'\n ? undefined\n : ROW_HEIGHTS[density][scale],\n estimatedRowHeight: overflowMode === 'wrap'\n ? ROW_HEIGHTS[density][scale]\n : undefined,\n // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap\n headingHeight: DEFAULT_HEADER_HEIGHT[scale]\n });\n }, [overflowMode, density, scale]);\n\n // Starts when the user selects resize from the menu, ends when resizing ends\n // used to control the visibility of the resizer Nubbin\n let [isInResizeMode, setIsInResizeMode] = useState(false);\n let onResizeStart = useCallback((widths) => {\n propsOnResizeStart?.(widths);\n }, [propsOnResizeStart]);\n let onResizeEnd = useCallback((widths) => {\n setIsInResizeMode(false);\n propsOnResizeEnd?.(widths);\n }, [propsOnResizeEnd, setIsInResizeMode]);\n\n let context = useMemo(() => ({\n isQuiet,\n density,\n overflowMode,\n loadingState,\n isInResizeMode,\n setIsInResizeMode\n }), [isQuiet, density, overflowMode, loadingState, isInResizeMode, setIsInResizeMode]);\n\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let scrollRef = useRef(null);\n let memoedLoadMoreProps = useMemo(() => ({\n isLoading: isLoading,\n onLoadMore\n }), [isLoading, onLoadMore]);\n useLoadMore(memoedLoadMoreProps, scrollRef);\n let isCheckboxSelection = props.selectionMode === 'multiple' || props.selectionMode === 'single';\n\n return (\n <ResizableTableContainer\n // TODO: perhaps this ref should be attached to the RACTable but it expects a table type ref which isn't true in the virtualized case\n ref={domRef}\n onResize={propsOnResize}\n onResizeEnd={onResizeEnd}\n onResizeStart={onResizeStart}\n className={(UNSAFE_className || '') + mergeStyles(tableWrapper, styles)}\n style={UNSAFE_style}>\n <UNSTABLE_Virtualizer layout={layout}>\n <InternalTableContext.Provider value={context}>\n <RACTable\n ref={scrollRef}\n // Fix webkit bug where scrollbars appear above the checkboxes/other table elements\n style={{WebkitTransform: 'translateZ(0)'}}\n className={renderProps => table({\n ...renderProps,\n isCheckboxSelection,\n isQuiet\n })}\n selectionBehavior=\"toggle\"\n onRowAction={onAction}\n {...otherProps} />\n </InternalTableContext.Provider>\n </UNSTABLE_Virtualizer>\n </ResizableTableContainer>\n );\n}\n\nconst centeredWrapper = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 'full',\n height: 'full'\n});\n\nexport interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | 'dependencies'> {}\n\nfunction TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {items, renderEmptyState, children} = props;\n let domRef = useDOMRef(ref);\n let {loadingState} = useContext(InternalTableContext);\n let emptyRender;\n let renderer = children;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let loadMoreSpinner = (\n <UNSTABLE_TableLoadingIndicator className={style({height: 'full', width: 'full'})}>\n <div className={centeredWrapper}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('table.loadingMore')} />\n </div>\n </UNSTABLE_TableLoadingIndicator>\n );\n\n // If the user is rendering their rows in dynamic fashion, wrap their render function in Collection so we can inject\n // the loader. Otherwise it is a static renderer and thus we can simply add the table loader after\n // TODO: this assumes that the user isn't providing their children in some wrapper though and/or isn't doing a map of children\n // (though I guess they wouldn't provide items then so the check for this is still valid in the latter case)...\n if (typeof children === 'function' && items) {\n renderer = (\n <>\n <Collection items={items}>\n {children}\n </Collection>\n {loadingState === 'loadingMore' && loadMoreSpinner}\n </>\n );\n } else {\n renderer = (\n <>\n {children}\n {loadingState === 'loadingMore' && loadMoreSpinner}\n </>\n );\n }\n\n if (renderEmptyState != null && loadingState !== 'loading') {\n emptyRender = (props: TableBodyRenderProps) => (\n <div className={centeredWrapper}>\n {renderEmptyState(props)}\n </div>\n );\n } else if (loadingState === 'loading') {\n emptyRender = () => (\n <div className={centeredWrapper}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('table.loading')} />\n </div>\n );\n }\n\n return (\n <RACTableBody\n // @ts-ignore\n ref={domRef}\n className={style({height: 'full'})}\n {...props}\n renderEmptyState={emptyRender}\n dependencies={[loadingState]}>\n {renderer}\n </RACTableBody>\n );\n}\n\n/**\n * The body of a `<Table>`, containing the table rows.\n */\nlet _TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(TableBody);\nexport {_TableBody as TableBody};\n\nconst cellFocus = {\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n outlineOffset: -2,\n outlineWidth: 2,\n outlineColor: 'focus-ring',\n borderRadius: size(6)\n} as const;\n\nfunction CellFocusRing() {\n return <div role=\"presentation\" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />;\n}\n\nconst columnStyles = style({\n height: '[inherit]',\n boxSizing: 'border-box',\n color: {\n default: 'neutral',\n forcedColors: 'ButtonText'\n },\n paddingX: {\n default: 16,\n isColumnResizable: 0\n },\n textAlign: {\n align: {\n start: 'start',\n center: 'center',\n end: 'end'\n }\n },\n outlineStyle: 'none',\n position: 'relative',\n fontSize: 'control',\n fontFamily: 'sans',\n fontWeight: 'bold',\n display: 'flex',\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n },\n borderTopWidth: {\n default: 0,\n isQuiet: 1\n },\n borderBottomWidth: 1,\n borderStartWidth: 0,\n borderEndWidth: {\n default: 0,\n isColumnResizable: 1\n },\n borderStyle: 'solid',\n forcedColorAdjust: 'none'\n});\n\nexport interface ColumnProps extends RACColumnProps {\n /** Whether the column should render a divider between it and the next column. */\n showDivider?: boolean,\n /** Whether the column allows resizing. */\n allowsResizing?: boolean,\n /**\n * The alignment of the column's contents relative to its allotted width.\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end',\n /** The content to render as the column header. */\n children: ReactNode\n}\n\n/**\n * A column within a `<Table>`.\n */\nexport const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {\n let {isHeaderRowHovered} = useContext(InternalTableHeaderContext);\n let {isQuiet} = useContext(InternalTableContext);\n let {allowsResizing, children, align = 'start'} = props;\n let domRef = useDOMRef(ref);\n let isColumnResizable = allowsResizing;\n\n return (\n <RACColumn {...props} ref={domRef} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>\n {({allowsSorting, sortDirection, isFocusVisible, sort, startResize, isHovered}) => (\n <>\n {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity\n (no need to juggle showing this focus ring if focus is on the menu button and not if it is on the resizer) */}\n {/* Separate absolutely positioned element because appyling the ring on the column directly via outline means the ring's required borderRadius will cause the bottom gray border to curve as well */}\n {isFocusVisible && <CellFocusRing />}\n {isColumnResizable ?\n (\n <ResizableColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} isHovered={isHeaderRowHovered || isHovered} align={align}>\n {children}\n </ResizableColumnContents>\n ) : (\n <ColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection}>\n {children}\n </ColumnContents>\n )\n }\n </>\n )}\n </RACColumn>\n );\n});\n\nconst columnContentWrapper = style({\n minWidth: 0,\n display: 'flex',\n alignItems: 'center',\n width: 'full'\n});\n\nconst sortIcon = style({\n size: fontRelative(16),\n flexShrink: 0,\n marginEnd: {\n default: 8,\n isButton: 'text-to-visual'\n },\n verticalAlign: {\n default: 'bottom',\n isButton: 0\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\ninterface ColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sortDirection'>, Pick<ColumnProps, 'children'> {}\n\nfunction ColumnContents(props: ColumnContentProps) {\n let {allowsSorting, sortDirection, children} = props;\n\n return (\n <div className={columnContentWrapper}>\n {allowsSorting && (\n <Provider\n values={[\n [IconContext, {\n styles: sortIcon({})\n }]\n ]}>\n {sortDirection != null && (\n sortDirection === 'ascending' ? <SortUpArrow /> : <SortDownArrow />\n )}\n </Provider>\n )}\n <span className={style({truncate: true, width: 'full'})}>\n {children}\n </span>\n </div>\n );\n}\n\nconst resizableMenuButtonWrapper = style({\n ...cellFocus,\n color: 'gray-800', // body-color\n width: 'full',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: {\n align: {\n default: 'start',\n center: 'center',\n end: 'end'\n }\n },\n // TODO: when align: end, the dropdown arrow is misaligned with the text, not sure how best to make the svg be flush with the end of the button other than modifying the\n // paddingEnd\n paddingX: 16,\n backgroundColor: 'transparent',\n borderStyle: 'none',\n fontSize: 'control',\n fontFamily: 'sans',\n fontWeight: 'bold'\n});\n\nconst resizerHandleContainer = style({\n display: {\n default: 'none',\n isResizing: 'block',\n isHovered: 'block'\n },\n width: 12,\n height: 'full',\n position: 'absolute',\n top: 0,\n insetEnd: size(-6),\n cursor: {\n default: 'none',\n resizableDirection: {\n 'left': 'e-resize',\n 'right': 'w-resize',\n 'both': 'ew-resize'\n }\n },\n // So that the user can still hover + drag the resizer even though it's hit area is partially in the adjacent column's space\n '--focus-ring-color': {\n type: 'outlineColor',\n value: 'focus-ring'\n }\n});\n\nconst resizerHandle = style({\n backgroundColor: {\n default: 'transparent',\n isHovered: 'gray-300',\n isFocusVisible: '--focus-ring-color',\n isResizing: '--focus-ring-color',\n forcedColors: {\n default: 'Background',\n isHovered: 'ButtonBorder',\n isFocusVisible: 'Highlight',\n isResizing: 'Highlight'\n }\n },\n height: {\n default: 'full',\n isResizing: 'screen'\n },\n width: {\n default: size(1),\n isResizing: size(2)\n },\n position: 'absolute',\n insetStart: size(6)\n});\n\nconst columnHeaderText = style({\n truncate: true,\n // Make it so the text doesn't completely disappear when column is resized to smallest width + both sort and chevron icon is rendered\n minWidth: fontRelative(16),\n flexGrow: 0,\n flexShrink: 1,\n flexBasis: 'auto'\n});\n\nconst chevronIcon = style({\n rotate: 90,\n marginStart: 'text-to-visual',\n minWidth: fontRelative(16),\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst nubbin = style({\n position: 'absolute',\n top: 0,\n insetStart: size(-1),\n size: fontRelative(16),\n fill: {\n default: '--focus-ring-color',\n forcedColors: 'Highlight'\n },\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'white',\n forcedColors: 'HighlightText'\n }\n }\n});\n\ninterface ResizableColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sort' | 'sortDirection' | 'startResize' | 'isHovered'>, Pick<ColumnProps, 'align' | 'children'> {}\n\nfunction ResizableColumnContents(props: ResizableColumnContentProps) {\n let {allowsSorting, sortDirection, sort, startResize, children, isHovered, align} = props;\n let {setIsInResizeMode, isInResizeMode} = useContext(InternalTableContext);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n const onMenuSelect = (key) => {\n switch (key) {\n case 'sort-asc':\n sort('ascending');\n break;\n case 'sort-desc':\n sort('descending');\n break;\n case 'resize':\n setIsInResizeMode?.(true);\n startResize();\n break;\n }\n };\n\n let items = useMemo(() => {\n let options = [\n {\n label: stringFormatter.format('table.resizeColumn'),\n id: 'resize'\n }\n ];\n if (allowsSorting) {\n options = [\n {\n label: stringFormatter.format('table.sortAscending'),\n id: 'sort-asc'\n },\n {\n label: stringFormatter.format('table.sortDescending'),\n id: 'sort-desc'\n },\n ...options\n ];\n }\n return options;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [allowsSorting]);\n\n let buttonAlignment = 'start';\n let menuAlign = 'start' as 'start' | 'end';\n if (align === 'center') {\n buttonAlignment = 'center';\n } else if (align === 'end') {\n buttonAlignment = 'end';\n menuAlign = 'end';\n }\n\n return (\n <>\n <MenuTrigger align={menuAlign}>\n <Button className={(renderProps) => resizableMenuButtonWrapper({...renderProps, align: buttonAlignment})}>\n {allowsSorting && (\n <Provider\n values={[\n [IconContext, {\n styles: sortIcon({isButton: true})\n }]\n ]}>\n {sortDirection != null && (\n sortDirection === 'ascending' ? <SortUpArrow /> : <SortDownArrow />\n )}\n </Provider>\n )}\n <div className={columnHeaderText}>\n {children}\n </div>\n <Chevron size=\"M\" className={chevronIcon} />\n </Button>\n <Menu onAction={onMenuSelect} items={items} styles={style({minWidth: 128})}>\n {(item) => <MenuItem>{item?.label}</MenuItem>}\n </Menu>\n </MenuTrigger>\n <div data-react-aria-prevent-focus=\"true\">\n <ColumnResizer data-react-aria-prevent-focus=\"true\" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isHovered: isInResizeMode || isHovered})}>\n {({isFocusVisible, isResizing}) => (\n <>\n <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isHovered={isHovered} isResizing={isResizing} />\n {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}\n </>\n )}\n </ColumnResizer>\n </div>\n </>\n );\n}\n\nfunction ResizerIndicator({isFocusVisible, isHovered, isResizing, isInResizeMode}) {\n return (\n <div className={resizerHandle({isFocusVisible, isHovered: isHovered || isInResizeMode, isResizing})} />\n );\n}\n\nconst tableHeader = style({\n height: 'full',\n width: 'full',\n backgroundColor: 'gray-75',\n // Attempt to prevent 1px area where you can see scrolled cell content between the table outline and the table header\n marginTop: '[-1px]'\n});\n\nconst selectAllCheckbox = style({\n marginStart: 16 // table-edge-to-content, same between mobile and desktop\n});\n\nconst selectAllCheckboxColumn = style({\n padding: 0,\n height: 'full',\n boxSizing: 'border-box',\n outlineStyle: 'none',\n position: 'relative',\n alignContent: 'center',\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n },\n borderXWidth: 0,\n borderTopWidth: {\n default: 0,\n isQuiet: 1\n },\n borderBottomWidth: 1,\n borderStyle: 'solid',\n backgroundColor: 'gray-75'\n});\n\nlet InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({isHeaderRowHovered: false});\n\nexport interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {\n let scale = useScale();\n let {selectionBehavior, selectionMode} = useTableOptions();\n let {isQuiet} = useContext(InternalTableContext);\n let [isHeaderRowHovered, setHeaderRowHovered] = useState(false);\n let domRef = useDOMRef(ref);\n\n return (\n <InternalTableHeaderContext.Provider value={{isHeaderRowHovered}}>\n <RACTableHeader\n // @ts-ignore\n ref={domRef}\n onHoverChange={setHeaderRowHovered}\n className={tableHeader}>\n {/* Add extra columns for selection. */}\n {selectionBehavior === 'toggle' && (\n // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later\n // @ts-ignore\n <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}>\n {({isFocusVisible}) => (\n <>\n {selectionMode === 'single' &&\n <>\n {isFocusVisible && <CellFocusRing />}\n <VisuallyHiddenSelectAllLabel />\n </>\n }\n {selectionMode === 'multiple' &&\n <Checkbox isEmphasized styles={selectAllCheckbox} slot=\"selection\" />\n }\n </>\n )}\n </RACColumn>\n )}\n <Collection items={columns}>\n {children}\n </Collection>\n </RACTableHeader>\n </InternalTableHeaderContext.Provider>\n );\n}\n\n/**\n * A header within a `<Table>`, containing the table columns.\n */\nlet _TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(TableHeader);\nexport {_TableHeader as TableHeader};\n\nfunction VisuallyHiddenSelectAllLabel() {\n let checkboxProps = useSlottedContext(RACCheckboxContext, 'selection');\n\n return (\n <VisuallyHidden>{checkboxProps?.['aria-label']}</VisuallyHidden>\n );\n}\n\nconst commonCellStyles = {\n borderColor: 'transparent',\n borderBottomWidth: 1,\n borderTopWidth: 0,\n borderXWidth: 0,\n borderStyle: 'solid',\n position: 'relative',\n color: {\n default: 'gray-800',\n forcedColors: 'ButtonText'\n },\n outlineStyle: 'none',\n paddingX: 16 // table-edge-to-content\n} as const;\n\nconst cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({\n ...commonCellStyles,\n color: 'neutral',\n paddingY: centerPadding(),\n minHeight: {\n default: 40,\n density: {\n compact: 32,\n spacious: 48\n }\n },\n boxSizing: 'border-box',\n height: 'full',\n width: 'full',\n fontSize: 'control',\n alignItems: 'center',\n display: 'flex',\n borderStyle: {\n default: 'none',\n isDivider: 'solid'\n },\n borderEndWidth: {\n default: 0,\n isDivider: 1\n },\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n }\n});\n\nconst stickyCell = {\n backgroundColor: 'gray-25'\n} as const;\n\nconst checkboxCellStyle = style({\n ...commonCellStyles,\n ...stickyCell,\n paddingStart: 16,\n alignContent: 'center',\n height: '[calc(100% - 1px)]',\n borderBottomWidth: 0,\n backgroundColor: '--rowBackgroundColor'\n});\n\nconst cellContent = style({\n truncate: true,\n whiteSpace: {\n default: 'nowrap',\n overflowMode: {\n wrap: 'normal'\n }\n },\n textAlign: {\n align: {\n start: 'start',\n center: 'center',\n end: 'end'\n }\n },\n width: 'full',\n isolation: 'isolate',\n padding: {\n default: 4,\n isSticky: 0\n },\n margin: {\n default: -4,\n isSticky: 0\n },\n backgroundColor: {\n default: 'transparent',\n isSticky: '--rowBackgroundColor'\n }\n});\n\nexport interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'showDivider'> {\n /** @private */\n isSticky?: boolean,\n /** The content to render as the cell children. */\n children: ReactNode\n}\n\n/**\n * A cell within a table row.\n */\nexport const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLDivElement>) {\n let {children, isSticky, showDivider = false, align, textValue, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let tableVisualOptions = useContext(InternalTableContext);\n textValue ||= typeof children === 'string' ? children : undefined;\n\n return (\n <RACCell\n ref={domRef}\n // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later\n // @ts-ignore\n isSticky={isSticky}\n className={renderProps => cell({\n ...renderProps,\n ...tableVisualOptions,\n isDivider: showDivider\n })}\n textValue={textValue}\n {...otherProps}>\n {({isFocusVisible}) => (\n <>\n {isFocusVisible && <CellFocusRing />}\n <span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>\n </>\n )}\n </RACCell>\n );\n});\n\n// Use color-mix instead of transparency so sticky cells work correctly.\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));\nconst rowBackgroundColor = {\n default: {\n default: 'gray-25',\n isQuiet: 'transparent'\n },\n isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color\n isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color\n isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color\n isSelected: {\n default: selectedBackground, // table-selected-row-background-color, opacity /10\n isFocusVisibleWithin: selectedActiveBackground, // table-selected-row-background-color, opacity /15\n isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15\n isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15\n },\n forcedColors: {\n default: 'Background'\n }\n} as const;\n\nconst row = style<RowRenderProps & S2TableProps>({\n height: 'full',\n position: 'relative',\n boxSizing: 'border-box',\n backgroundColor: '--rowBackgroundColor',\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 // TODO: outline here is to emulate v3 forcedColors experience but runs into the same problem where the sticky column covers the outline\n // This doesn't quite work because it gets cut off by the checkbox cell background masking element, figure out another way. Could shrink the checkbox cell's content even more\n // and offset it by margin top but that messes up the checkbox centering a bit\n // outlineWidth: {\n // forcedColors: {\n // isFocusVisible: 2\n // }\n // },\n // outlineOffset: {\n // forcedColors: {\n // isFocusVisible: -1\n // }\n // },\n // outlineColor: {\n // forcedColors: {\n // isFocusVisible: 'ButtonBorder'\n // }\n // },\n // outlineStyle: {\n // default: 'none',\n // forcedColors: {\n // isFocusVisible: 'solid'\n // }\n // },\n outlineStyle: 'none',\n borderTopWidth: 0,\n borderBottomWidth: 1,\n borderStartWidth: 0,\n borderEndWidth: 0,\n borderStyle: 'solid',\n borderColor: {\n default: 'gray-300',\n forcedColors: 'ButtonBorder'\n },\n forcedColorAdjust: 'none'\n});\n\nexport interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue'> {}\n\nfunction Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {selectionBehavior, selectionMode} = useTableOptions();\n let tableVisualOptions = useContext(InternalTableContext);\n let domRef = useDOMRef(ref);\n\n return (\n <RACRow\n // @ts-ignore\n ref={domRef}\n id={id}\n className={renderProps => row({\n ...renderProps,\n ...tableVisualOptions\n }) + (renderProps.isFocusVisible && ' ' + raw('&:before { content: \"\"; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px; z-index: 3; background-color: var(--rowFocusIndicatorColor)'))}\n {...otherProps}>\n {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n <Cell isSticky className={checkboxCellStyle}>\n <Checkbox isEmphasized slot=\"selection\" />\n </Cell>\n )}\n <Collection items={columns}>\n {children}\n </Collection>\n </RACRow>\n );\n}\n\n/**\n * A row within a `<Table>`.\n */\nlet _Row = /*#__PURE__*/ (forwardRef as forwardRefType)(Row);\nexport {_Row as Row};\n\n/**\n * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.\n */\nconst _TableView = forwardRef(TableView);\nexport {_TableView as TableView};\n"],"names":[],"version":3,"file":"TableView.cjs.map"}
|