@react-spectrum/s2 3.0.0-nightly-5334df7f1-250226 → 3.0.0-nightly-9b3385ac6-250228
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/CardView.cjs +24 -4
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css.map +1 -1
- package/dist/CardView.mjs +24 -4
- package/dist/CardView.mjs.map +1 -1
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs.map +1 -1
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/TableView.cjs +1 -0
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +1 -0
- package/dist/TableView.mjs.map +1 -1
- package/dist/TreeView.cjs +13 -8
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +28 -28
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +13 -8
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +4 -6
- package/dist/types.d.ts.map +1 -1
- package/package.json +21 -21
- package/src/CardView.tsx +9 -3
- package/src/Menu.tsx +1 -1
- package/src/StatusLight.tsx +1 -1
- package/src/TableView.tsx +1 -0
- package/src/TreeView.tsx +11 -12
package/dist/Menu.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.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 Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuSection as AriaMenuSection,\n MenuSectionProps as AriaMenuSectionProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n SubmenuTriggerProps as AriaSubmenuTriggerProps,\n ContextValue,\n DEFAULT_SLOT,\n Provider,\n Separator,\n SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n /**\n * Alignment of the menu relative to the trigger.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /**\n * Where the Menu opens relative to its trigger.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies'>, StyleProps {\n /**\n * The size of the Menu.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The contents of the collection.\n */\n children: ReactNode | ((item: T) => ReactNode),\n /** Hides the default link out icons on menu items that open links in a new tab. */\n hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n} as const;\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: menuItemGrid,\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n width: 'full',\n overflow: {\n isPopover: 'auto'\n },\n maxWidth: {\n isPopover: 320\n },\n padding: {\n isPopover: 8\n },\n fontFamily: 'sans',\n fontSize: 'control',\n gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n gridColumnStart: 1,\n gridColumnEnd: -1,\n alignItems: 'center',\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n color: 'neutral',\n gridColumnStart: 2,\n gridColumnEnd: -2,\n boxSizing: 'border-box',\n minHeight: 'control',\n paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n font: 'ui',\n fontWeight: 'bold',\n margin: 0\n});\n\nexport let menuitem = style({\n ...focusRing(),\n boxSizing: 'border-box',\n borderRadius: 'control',\n font: 'control',\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n paddingBottom: '--labelPadding',\n backgroundColor: { // TODO: revisit color when I have access to dev mode again\n default: {\n default: 'transparent',\n isFocused: baseColor('gray-100').isFocusVisible\n }\n },\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n position: 'relative',\n // each menu item should take up the entire width, the subgrid will handle within the item\n gridColumnStart: 1,\n gridColumnEnd: -1,\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: 'subgrid',\n gridTemplateRows: {\n // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n default: 'auto minmax(0, min-content)',\n ':has([slot=description])': 'auto auto'\n },\n rowGap: {\n ':has([slot=description])': space(1)\n },\n alignItems: 'baseline',\n minHeight: 'control',\n height: 'min',\n textDecoration: 'none',\n cursor: {\n default: 'default',\n isLink: 'pointer'\n },\n transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n visibility: {\n default: 'hidden',\n isSelected: 'visible'\n },\n gridArea: 'checkmark',\n color: 'accent',\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'currentColor',\n forcedColors: 'Highlight'\n }\n },\n marginEnd: 'text-to-control',\n aspectRatio: 'square'\n});\n\nlet checkbox = style({\n gridArea: 'checkmark',\n marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n display: 'block',\n size: fontRelative(20),\n // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n // reminder, size of WF is applied via font size\n marginEnd: 'text-to-visual',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport let iconCenterWrapper = style({\n display: 'flex',\n gridArea: 'icon'\n});\n\nlet image = style({\n gridArea: 'icon',\n gridRowEnd: 'span 2',\n marginEnd: 'text-to-visual',\n marginTop: fontRelative(6), // made up, need feedback\n alignSelf: 'center',\n borderRadius: 'sm',\n size: {\n default: 40,\n size: {\n S: 32,\n M: 40,\n L: 44,\n XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n }\n },\n aspectRatio: 'square',\n objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n gridArea: 'label',\n font: 'control',\n color: '[inherit]',\n fontWeight: 'medium',\n // TODO: token values for padding not defined yet, revisit\n marginTop: '--labelPadding'\n});\n\nexport let description = style({\n gridArea: 'description',\n font: {\n default: 'ui-sm',\n size: {\n S: 'ui-xs',\n M: 'ui-sm',\n L: 'ui',\n XL: 'ui-lg'\n }\n },\n color: {\n default: 'neutral-subdued',\n // Ideally this would use the same token as hover, but we don't have access to that here.\n // TODO: should we always consider isHovered and isFocused to be the same thing?\n isFocused: 'gray-800',\n isDisabled: 'disabled'\n },\n transition: 'default'\n});\n\nlet value = style({\n gridArea: 'value',\n marginStart: 8\n});\n\nlet keyboard = style({\n gridArea: 'keyboard',\n marginStart: 8,\n font: 'ui',\n fontWeight: 'light',\n color: {\n default: 'gray-600',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n background: 'gray-25',\n unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n gridArea: 'descriptor',\n marginStart: 8,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n size: 'M',\n isSubmenu: false,\n hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n let {\n children,\n size = ctxSize,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n hideLinkOutIcon = false\n } = props;\n let ctx = useContext(InternalMenuTriggerContext);\n let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n // TODO: change offset/crossoffset based on size? scale?\n // actual values?\n let initialPlacement: Placement;\n switch (direction) {\n case 'left':\n case 'right':\n case 'start':\n case 'end':\n initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n break;\n case 'bottom':\n case 'top':\n default:\n initialPlacement = `${direction} ${align}` as Placement;\n }\n if (isSubmenu) {\n initialPlacement = 'end top' as Placement;\n }\n\n let content = (\n <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <AriaMenu\n {...props}\n className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n {children}\n </AriaMenu>\n </Provider>\n </InternalMenuContext.Provider>\n );\n\n if (ctx || isSubmenu) {\n return (\n <PopoverBase\n ref={ref}\n hideArrow\n placement={initialPlacement}\n shouldFlip={shouldFlip}\n // For submenus, the offset from the edge of the popover should be 10px.\n // Subtract 8px for the padding around the parent menu.\n offset={isSubmenu ? -2 : 8}\n // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n crossOffset={isSubmenu ? -9 : 0}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}>\n {content}\n </PopoverBase>\n );\n }\n\n return content;\n});\n\nexport function Divider(props: SeparatorProps) {\n return (\n <Separator\n {...props}\n className={mergeStyles(\n divider({\n size: 'M',\n orientation: 'horizontal',\n isStaticColor: false\n }), style({\n display: {\n default: 'grid',\n ':last-child': 'none'\n },\n gridColumnStart: 2,\n gridColumnEnd: -2,\n marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n })\n )} />\n );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>) {\n // remember, context doesn't work if it's around Section nor inside\n let {size} = useContext(InternalMenuContext);\n return (\n <>\n <AriaMenuSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaMenuSection>\n <Divider />\n </>\n );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n /**\n * The contents of the item.\n */\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n S: 'M',\n M: 'L',\n L: 'XL',\n XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let isLinkOut = isLink && props.target === '_blank';\n let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n let {direction} = useLocale();\n return (\n <AriaMenuItem\n {...props}\n textValue={textValue}\n ref={ref}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n }\n }],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})},\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})},\n value: {styles: value}\n }\n }],\n [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n [ImageContext, {styles: image({size})}]\n ]}>\n {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={iconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n {isLinkOut && !hideLinkOutIcon && (\n <div slot=\"descriptor\" className={descriptor}>\n <LinkOutIcon\n size={linkIconSize[size]}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n {renderProps.hasSubmenu && (\n <div slot=\"descriptor\" className={descriptor}>\n <ChevronRightIcon\n size={size}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n </Provider>\n </>\n );\n }}\n </AriaMenuItem>\n );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps) {\n // RAC sets isPressed via PressResponder when the menu is open.\n // We don't want press scaling to appear to get \"stuck\", so override this.\n // For mouse interactions, menus open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(document, 'pointerup', () => {\n setPressed(false);\n }, {once: true, capture: true});\n };\n\n return (\n <InternalMenuTriggerContext.Provider\n value={{\n align: props.align,\n direction: props.direction,\n shouldFlip: props.shouldFlip\n }}>\n <AriaMenuTrigger {...props}>\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n {props.children}\n </PressResponder>\n </AriaMenuTrigger>\n </InternalMenuTriggerContext.Provider>\n );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.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 Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuSection as AriaMenuSection,\n MenuSectionProps as AriaMenuSectionProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n SubmenuTriggerProps as AriaSubmenuTriggerProps,\n ContextValue,\n DEFAULT_SLOT,\n Provider,\n Separator,\n SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n /**\n * Alignment of the menu relative to the trigger.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /**\n * Where the Menu opens relative to its trigger.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n /**\n * The size of the Menu.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The contents of the collection.\n */\n children: ReactNode | ((item: T) => ReactNode),\n /** Hides the default link out icons on menu items that open links in a new tab. */\n hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n} as const;\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: menuItemGrid,\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n width: 'full',\n overflow: {\n isPopover: 'auto'\n },\n maxWidth: {\n isPopover: 320\n },\n padding: {\n isPopover: 8\n },\n fontFamily: 'sans',\n fontSize: 'control',\n gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n gridColumnStart: 1,\n gridColumnEnd: -1,\n alignItems: 'center',\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n color: 'neutral',\n gridColumnStart: 2,\n gridColumnEnd: -2,\n boxSizing: 'border-box',\n minHeight: 'control',\n paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n font: 'ui',\n fontWeight: 'bold',\n margin: 0\n});\n\nexport let menuitem = style({\n ...focusRing(),\n boxSizing: 'border-box',\n borderRadius: 'control',\n font: 'control',\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n paddingBottom: '--labelPadding',\n backgroundColor: { // TODO: revisit color when I have access to dev mode again\n default: {\n default: 'transparent',\n isFocused: baseColor('gray-100').isFocusVisible\n }\n },\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n position: 'relative',\n // each menu item should take up the entire width, the subgrid will handle within the item\n gridColumnStart: 1,\n gridColumnEnd: -1,\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: 'subgrid',\n gridTemplateRows: {\n // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n default: 'auto minmax(0, min-content)',\n ':has([slot=description])': 'auto auto'\n },\n rowGap: {\n ':has([slot=description])': space(1)\n },\n alignItems: 'baseline',\n minHeight: 'control',\n height: 'min',\n textDecoration: 'none',\n cursor: {\n default: 'default',\n isLink: 'pointer'\n },\n transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n visibility: {\n default: 'hidden',\n isSelected: 'visible'\n },\n gridArea: 'checkmark',\n color: 'accent',\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'currentColor',\n forcedColors: 'Highlight'\n }\n },\n marginEnd: 'text-to-control',\n aspectRatio: 'square'\n});\n\nlet checkbox = style({\n gridArea: 'checkmark',\n marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n display: 'block',\n size: fontRelative(20),\n // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n // reminder, size of WF is applied via font size\n marginEnd: 'text-to-visual',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport let iconCenterWrapper = style({\n display: 'flex',\n gridArea: 'icon'\n});\n\nlet image = style({\n gridArea: 'icon',\n gridRowEnd: 'span 2',\n marginEnd: 'text-to-visual',\n marginTop: fontRelative(6), // made up, need feedback\n alignSelf: 'center',\n borderRadius: 'sm',\n size: {\n default: 40,\n size: {\n S: 32,\n M: 40,\n L: 44,\n XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n }\n },\n aspectRatio: 'square',\n objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n gridArea: 'label',\n font: 'control',\n color: '[inherit]',\n fontWeight: 'medium',\n // TODO: token values for padding not defined yet, revisit\n marginTop: '--labelPadding'\n});\n\nexport let description = style({\n gridArea: 'description',\n font: {\n default: 'ui-sm',\n size: {\n S: 'ui-xs',\n M: 'ui-sm',\n L: 'ui',\n XL: 'ui-lg'\n }\n },\n color: {\n default: 'neutral-subdued',\n // Ideally this would use the same token as hover, but we don't have access to that here.\n // TODO: should we always consider isHovered and isFocused to be the same thing?\n isFocused: 'gray-800',\n isDisabled: 'disabled'\n },\n transition: 'default'\n});\n\nlet value = style({\n gridArea: 'value',\n marginStart: 8\n});\n\nlet keyboard = style({\n gridArea: 'keyboard',\n marginStart: 8,\n font: 'ui',\n fontWeight: 'light',\n color: {\n default: 'gray-600',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n background: 'gray-25',\n unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n gridArea: 'descriptor',\n marginStart: 8,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n size: 'M',\n isSubmenu: false,\n hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n let {\n children,\n size = ctxSize,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n hideLinkOutIcon = false\n } = props;\n let ctx = useContext(InternalMenuTriggerContext);\n let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n // TODO: change offset/crossoffset based on size? scale?\n // actual values?\n let initialPlacement: Placement;\n switch (direction) {\n case 'left':\n case 'right':\n case 'start':\n case 'end':\n initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n break;\n case 'bottom':\n case 'top':\n default:\n initialPlacement = `${direction} ${align}` as Placement;\n }\n if (isSubmenu) {\n initialPlacement = 'end top' as Placement;\n }\n\n let content = (\n <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <AriaMenu\n {...props}\n className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n {children}\n </AriaMenu>\n </Provider>\n </InternalMenuContext.Provider>\n );\n\n if (ctx || isSubmenu) {\n return (\n <PopoverBase\n ref={ref}\n hideArrow\n placement={initialPlacement}\n shouldFlip={shouldFlip}\n // For submenus, the offset from the edge of the popover should be 10px.\n // Subtract 8px for the padding around the parent menu.\n offset={isSubmenu ? -2 : 8}\n // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n crossOffset={isSubmenu ? -9 : 0}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}>\n {content}\n </PopoverBase>\n );\n }\n\n return content;\n});\n\nexport function Divider(props: SeparatorProps) {\n return (\n <Separator\n {...props}\n className={mergeStyles(\n divider({\n size: 'M',\n orientation: 'horizontal',\n isStaticColor: false\n }), style({\n display: {\n default: 'grid',\n ':last-child': 'none'\n },\n gridColumnStart: 2,\n gridColumnEnd: -2,\n marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n })\n )} />\n );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>) {\n // remember, context doesn't work if it's around Section nor inside\n let {size} = useContext(InternalMenuContext);\n return (\n <>\n <AriaMenuSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaMenuSection>\n <Divider />\n </>\n );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n /**\n * The contents of the item.\n */\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n S: 'M',\n M: 'L',\n L: 'XL',\n XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let isLinkOut = isLink && props.target === '_blank';\n let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n let {direction} = useLocale();\n return (\n <AriaMenuItem\n {...props}\n textValue={textValue}\n ref={ref}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n }\n }],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})},\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})},\n value: {styles: value}\n }\n }],\n [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n [ImageContext, {styles: image({size})}]\n ]}>\n {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={iconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n {isLinkOut && !hideLinkOutIcon && (\n <div slot=\"descriptor\" className={descriptor}>\n <LinkOutIcon\n size={linkIconSize[size]}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n {renderProps.hasSubmenu && (\n <div slot=\"descriptor\" className={descriptor}>\n <ChevronRightIcon\n size={size}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n </Provider>\n </>\n );\n }}\n </AriaMenuItem>\n );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps) {\n // RAC sets isPressed via PressResponder when the menu is open.\n // We don't want press scaling to appear to get \"stuck\", so override this.\n // For mouse interactions, menus open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(document, 'pointerup', () => {\n setPressed(false);\n }, {once: true, capture: true});\n };\n\n return (\n <InternalMenuTriggerContext.Provider\n value={{\n align: props.align,\n direction: props.direction,\n shouldFlip: props.shouldFlip\n }}>\n <AriaMenuTrigger {...props}>\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n {props.children}\n </PressResponder>\n </AriaMenuTrigger>\n </InternalMenuTriggerContext.Provider>\n );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.mjs.map"}
|
package/dist/StatusLight.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gCAAC,CAAA,GAAA,wCAAa;0BACZ,cAAA,gCAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gCAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gCAAC,CAAA,GAAA,8BAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gCAAC,CAAA,GAAA,wCAAa;0BACZ,cAAA,gCAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gCAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gCAAC,CAAA,GAAA,8BAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label']) {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.cjs.map"}
|
package/dist/StatusLight.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children
|
|
1
|
+
{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label']) {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
|
package/dist/StatusLight.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label']) {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}
|
package/dist/TableView.cjs
CHANGED
|
@@ -170,6 +170,7 @@ class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomp
|
|
|
170
170
|
layoutInfo.isSticky = true;
|
|
171
171
|
return layoutNode;
|
|
172
172
|
}
|
|
173
|
+
// y is the height of the headers
|
|
173
174
|
buildBody(y) {
|
|
174
175
|
let layoutNode = super.buildBody(y);
|
|
175
176
|
let { children: children, layoutInfo: layoutInfo } = layoutNode;
|
package/dist/TableView.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 TableLayout,\n TableRenderProps,\n UNSTABLE_TableLoadingIndicator,\n useSlottedContext,\n useTableOptions,\n Virtualizer\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, focusRing, fontRelative, lightDark, space, style} from '../style' 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_MoveHorizontalTableWidget.svg';\nimport {ProgressCircle} from './ProgressCircle';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactElement, 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 {useActionBarContainer} from './ActionBar';\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 /** Provides the ActionBar to display when rows are selected in the TableView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\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 position: 'relative',\n // Clip ActionBar animation.\n overflow: 'clip'\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 borderColor: 'gray-300',\n borderStyle: 'solid',\n borderWidth: {\n default: 1,\n isQuiet: 0\n },\n ...focusRing(),\n outlineOffset: -1, // Cover the border\n borderRadius: {\n default: '[6px]',\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 TableLayout<T> {\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<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);\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 */\nexport const TableView = forwardRef(function 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\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<HTMLElement | null>(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 let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\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 <Virtualizer\n layout={S2TableLayout}\n layoutOptions={{\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 loaderHeight: 60\n }}>\n <InternalTableContext.Provider value={context}>\n <RACTable\n ref={scrollRef as any}\n style={{\n // Fix webkit bug where scrollbars appear above the checkboxes/other table elements\n WebkitTransform: 'translateZ(0)',\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so navigating with the keyboard doesn't go behind the action bar.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n }}\n className={renderProps => table({\n ...renderProps,\n isCheckboxSelection,\n isQuiet\n })}\n selectionBehavior=\"toggle\"\n onRowAction={onAction}\n {...otherProps}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange} />\n </InternalTableContext.Provider>\n </Virtualizer>\n {actionBar}\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 const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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\nconst cellFocus = {\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n outlineOffset: -2,\n outlineWidth: 2,\n outlineColor: 'focus-ring',\n borderRadius: '[6px]'\n} as const;\n\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 {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}) => (\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} 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: '--resizerDisplay',\n isResizing: 'block',\n isInResizeMode: 'block'\n },\n width: 12,\n height: 'full',\n position: 'absolute',\n top: 0,\n insetEnd: space(-6),\n cursor: {\n default: 'none',\n resizableDirection: {\n 'left': 'e-resize',\n 'right': 'w-resize',\n 'both': 'ew-resize'\n }\n }\n});\n\nconst resizerHandle = style({\n backgroundColor: {\n default: 'gray-300',\n isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version\n isResizing: lightDark('informative-900', 'informative-700'),\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: 1,\n isResizing: 2\n },\n position: 'absolute',\n insetStart: space(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: space(-1),\n size: fontRelative(16),\n fill: {\n default: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that won't be the background color value\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'>, Pick<ColumnProps, 'align' | 'children'> {}\n\nfunction ResizableColumnContents(props: ResizableColumnContentProps) {\n let {allowsSorting, sortDirection, sort, startResize, children, 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, isInResizeMode})}>\n {({isFocusVisible, isResizing}) => (\n <>\n <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />\n {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}\n </>\n )}\n </ColumnResizer>\n </div>\n </>\n );\n}\n\nfunction ResizerIndicator({isFocusVisible, isResizing, isInResizeMode}) {\n return (\n <div className={resizerHandle({isFocusVisible, 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 '--resizerDisplay': {\n type: 'display',\n value: {\n default: 'none',\n isHovered: 'block'\n }\n }\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\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 const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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 domRef = useDOMRef(ref);\n\n return (\n <RACTableHeader\n // @ts-ignore\n ref={domRef}\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 );\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 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: '--s2-container-bg'\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 const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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"],"names":[],"version":3,"file":"TableView.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;AA2GD,IAAI,2DAAuB,CAAA,GAAA,0BAAY,EAA2H,CAAC;AAEnK,MAAM;AAWN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCN,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,sCAAU;IACpC,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,CAAE,WAAW,CAAC,KAAK,GAAG;QAGhE,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,CAAE,WAAW,CAAC,KAAK;QAC3D,WAAW,QAAQ,GAAG;QACtB,OAAO;IACT;IAEA,iCAAiC;IACvB,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,CAAE,WAAW,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM,GAAG;YACpH,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;AAEO,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAsE;AAKvG,MAAM,yDAAY,CAAA,GAAA,uBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,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;IAEnB,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,EAAsB;IAC3C,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,IAAI,gBAAC,YAAY,qBAAE,iBAAiB,aAAE,SAAS,mBAAE,eAAe,EAAC,GAAG,CAAA,GAAA,+CAAoB,EAAE;QAAC,GAAG,KAAK;mBAAE;IAAS;IAE9G,qBACE,iCAAC,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;;0BACP,gCAAC,CAAA,GAAA,sCAAU;gBACT,QAAQ;gBACR,eAAe;oBACb,WAAW,iBAAiB,SACxB,YACA,iCAAW,CAAC,QAAQ,CAAC,MAAM;oBAC/B,oBAAoB,iBAAiB,SACnC,iCAAW,CAAC,QAAQ,CAAC,MAAM,GAC3B;oBACF,+FAA+F;oBAC/F,eAAe,2CAAqB,CAAC,MAAM;oBAC3C,cAAc;gBAChB;0BACA,cAAA,gCAAC,2CAAqB,QAAQ;oBAAC,OAAO;8BACpC,cAAA,gCAAC,CAAA,GAAA,gCAAO;wBACN,KAAK;wBACL,OAAO;4BACL,mFAAmF;4BACnF,iBAAiB;4BACjB,kGAAkG;4BAClG,4FAA4F;4BAC5F,eAAe,kBAAkB,IAAI,kBAAkB,IAAI;4BAC3D,qBAAqB,kBAAkB,IAAI,kBAAkB,IAAI;wBACnE;wBACA,WAAW,CAAA,cAAe,4BAAM;gCAC9B,GAAG,WAAW;qDACd;yCACA;4BACF;wBACA,mBAAkB;wBAClB,aAAa;wBACZ,GAAG,UAAU;wBACd,cAAc;wBACd,qBAAqB;wBACrB,mBAAmB;;;;YAGxB;;;AAGP;AAEA,MAAM;AAaC,MAAM,4CAA0B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,UAA4B,KAAwB,EAAE,GAA2B;IAC9J,IAAI,SAAC,KAAK,oBAAE,gBAAgB,YAAE,QAAQ,EAAC,GAAG;IAC1C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,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,aAAa;QACb,KAAK;QACL,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,cAAc;AAChB;AAEA,SAAS;IACP,qBAAO,gCAAC;QAAI,MAAK;QAAe,WAAW;;;;;;;;;;;;;;;;;;UAAsD;YAAC,gBAAgB;QAAI;;AACxH;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DC,MAAM,0DAAS,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAA2B;IAC9F,IAAI,WAAC,OAAO,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,kBAAC,cAAc,YAAE,QAAQ,SAAE,QAAQ,SAAQ,GAAG;IAClD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,oBAAoB;IAExB,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QAAG,GAAG,KAAK;QAAE,KAAK;QAAQ,OAAO;YAAC,sBAAsB;QAAa;QAAG,WAAW,CAAA,cAAe,mCAAa;gBAAC,GAAG,WAAW;mCAAE;uBAAmB;yBAAO;YAAO;kBACvK,CAAC,iBAAC,aAAa,iBAAE,aAAa,kBAAE,cAAc,QAAE,IAAI,eAAE,WAAW,EAAC,iBACjE;;oBAIG,gCAAkB,gCAAC;oBACnB,kCAEG,gCAAC;wBAAwB,eAAe;wBAAe,eAAe;wBAAe,MAAM;wBAAM,aAAa;wBAAa,OAAO;kCAC/H;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;;;;;;;;;;;;;;;;AAqBN,MAAM;;;;;;;;;;;;;;;;;AAwBN,MAAM;AASN,MAAM;AAWN,MAAM;AAoBN,SAAS,8CAAwB,KAAkC;IACjE,IAAI,iBAAC,aAAa,iBAAE,aAAa,QAAE,IAAI,eAAE,WAAW,YAAE,QAAQ,SAAE,KAAK,EAAC,GAAG;IACzE,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;4CAAY;wBAAc;8BACxK,CAAC,kBAAC,cAAc,cAAE,UAAU,EAAC,iBAC5B;;8CACE,gCAAC;oCAAiB,gBAAgB;oCAAgB,gBAAgB;oCAAgB,YAAY;;gCAC5F,CAAA,kBAAkB,cAAa,KAAM,4BAAc,gCAAC;oCAAI,WAAW;8CAAQ,cAAA,gCAAC,CAAA,GAAA,iCAAK;;;;;;;;AAOjG;AAEA,SAAS,uCAAiB,kBAAC,cAAc,cAAE,UAAU,kBAAE,cAAc,EAAC;IACpE,qBACE,gCAAC;QAAI,WAAW,oCAAc;4BAAC;4BAAgB;wBAAgB;QAAU;;AAE7E;AAEA,MAAM;;;;;;;;;;AAeN,MAAM;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;AA0BC,MAAM,4CAA4B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,YAA8B,WAAC,OAAO,YAAE,QAAQ,EAAsB,EAAE,GAA2B;IAClL,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,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,iCAAC,CAAA,GAAA,sCAAa;QACZ,aAAa;QACb,KAAK;QACL,WAAW;;YAEV,sBAAsB,YACrB,kGAAkG;YAClG,aAAa;0BACb,gCAAC,CAAA,GAAA,iCAAQ;gBAAE,QAAQ;gBAAC,OAAO,UAAU,WAAW,KAAK;gBAAI,UAAU,UAAU,WAAW,KAAK;gBAAI,WAAW,8CAAwB;6BAAC;gBAAO;0BACzI,CAAC,kBAAC,cAAc,EAAC,iBAChB;;4BACG,kBAAkB,0BACjB;;oCACG,gCAAkB,gCAAC;kDACpB,gCAAC;;;4BAGJ,kBAAkB,4BACjB,gCAAC,CAAA,GAAA,kCAAO;gCAAE,YAAY;gCAAC,QAAQ;gCAAmB,MAAK;;;;;0BAMjE,gCAAC,CAAA,GAAA,qCAAS;gBAAE,OAAO;0BAChB;;;;AAIT;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,MAAM,0DAAO,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YAAC,QAAQ,YAAE,QAAQ,eAAE,cAAc,cAAO,KAAK,aAAE,SAAS,EAAE,GAAG,YAAW,GAAG;IACjF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,qBAAqB,CAAA,GAAA,uBAAS,EAAE;IACpC,cAAc,OAAO,aAAa,WAAW,WAAW;IAExD,qBACE,gCAAC,CAAA,GAAA,+BAAM;QACL,KAAK;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,MAAM,4CAAoB,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,IAAsB,MAAC,EAAE,WAAE,OAAO,YAAE,QAAQ,EAAE,GAAG,YAAwB,EAAE,GAA2B;IAC7K,IAAI,qBAAC,iBAAiB,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,0CAAc;IACvD,IAAI,qBAAqB,CAAA,GAAA,uBAAS,EAAE;IACpC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,iCAAC,CAAA,GAAA,8BAAK;QACJ,aAAa;QACb,KAAK;QACL,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","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 TableLayout,\n TableRenderProps,\n UNSTABLE_TableLoadingIndicator,\n useSlottedContext,\n useTableOptions,\n Virtualizer\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, focusRing, fontRelative, lightDark, space, style} from '../style' 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_MoveHorizontalTableWidget.svg';\nimport {ProgressCircle} from './ProgressCircle';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactElement, 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 {useActionBarContainer} from './ActionBar';\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 /** Provides the ActionBar to display when rows are selected in the TableView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\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 position: 'relative',\n // Clip ActionBar animation.\n overflow: 'clip'\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 borderColor: 'gray-300',\n borderStyle: 'solid',\n borderWidth: {\n default: 1,\n isQuiet: 0\n },\n ...focusRing(),\n outlineOffset: -1, // Cover the border\n borderRadius: {\n default: '[6px]',\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 TableLayout<T> {\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 // y is the height of the headers\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<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);\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 */\nexport const TableView = forwardRef(function 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\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<HTMLElement | null>(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 let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\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 <Virtualizer\n layout={S2TableLayout}\n layoutOptions={{\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 loaderHeight: 60\n }}>\n <InternalTableContext.Provider value={context}>\n <RACTable\n ref={scrollRef as any}\n style={{\n // Fix webkit bug where scrollbars appear above the checkboxes/other table elements\n WebkitTransform: 'translateZ(0)',\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so navigating with the keyboard doesn't go behind the action bar.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n }}\n className={renderProps => table({\n ...renderProps,\n isCheckboxSelection,\n isQuiet\n })}\n selectionBehavior=\"toggle\"\n onRowAction={onAction}\n {...otherProps}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange} />\n </InternalTableContext.Provider>\n </Virtualizer>\n {actionBar}\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 const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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\nconst cellFocus = {\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n outlineOffset: -2,\n outlineWidth: 2,\n outlineColor: 'focus-ring',\n borderRadius: '[6px]'\n} as const;\n\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 {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}) => (\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} 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: '--resizerDisplay',\n isResizing: 'block',\n isInResizeMode: 'block'\n },\n width: 12,\n height: 'full',\n position: 'absolute',\n top: 0,\n insetEnd: space(-6),\n cursor: {\n default: 'none',\n resizableDirection: {\n 'left': 'e-resize',\n 'right': 'w-resize',\n 'both': 'ew-resize'\n }\n }\n});\n\nconst resizerHandle = style({\n backgroundColor: {\n default: 'gray-300',\n isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version\n isResizing: lightDark('informative-900', 'informative-700'),\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: 1,\n isResizing: 2\n },\n position: 'absolute',\n insetStart: space(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: space(-1),\n size: fontRelative(16),\n fill: {\n default: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that won't be the background color value\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'>, Pick<ColumnProps, 'align' | 'children'> {}\n\nfunction ResizableColumnContents(props: ResizableColumnContentProps) {\n let {allowsSorting, sortDirection, sort, startResize, children, 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, isInResizeMode})}>\n {({isFocusVisible, isResizing}) => (\n <>\n <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />\n {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}\n </>\n )}\n </ColumnResizer>\n </div>\n </>\n );\n}\n\nfunction ResizerIndicator({isFocusVisible, isResizing, isInResizeMode}) {\n return (\n <div className={resizerHandle({isFocusVisible, 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 '--resizerDisplay': {\n type: 'display',\n value: {\n default: 'none',\n isHovered: 'block'\n }\n }\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\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 const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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 domRef = useDOMRef(ref);\n\n return (\n <RACTableHeader\n // @ts-ignore\n ref={domRef}\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 );\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 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: '--s2-container-bg'\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 const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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"],"names":[],"version":3,"file":"TableView.cjs.map"}
|