@react-spectrum/s2 3.0.0-nightly-56da82e3e-250212 → 3.0.0-nightly-3dbdc1e8e-250214

package/icons/Skeleton.css

@@ -16,24 +16,24 @@
     color: #0000;
   }
 
-  ._wb {
+  ._tb {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  ._zb {
+  ._wb {
     border-start-start-radius: .25rem;
   }
 
-  ._Ab {
+  ._xb {
     border-start-end-radius: .25rem;
   }
 
-  ._Bb {
+  ._yb {
     border-end-start-radius: .25rem;
   }
 
-  ._Cb {
+  ._zb {
     border-end-end-radius: .25rem;
   }
 }

package/icons/Skeleton.mjs

@@ -81,7 +81,7 @@ function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $cHM3s$inertValue)(true),
         ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
-        className: $5ad421ec19460c48$export$d2353276f167b21f + " aa _wb _zb _Ab _Bb _Cb",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " aa _tb _wb _xb _yb _zb",
         children: children
     });
 }
@@ -101,7 +101,7 @@ function $5ad421ec19460c48$export$6069cbe61f690103({ children: children }) {
 }
 function $5ad421ec19460c48$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" _zb _Ab _Bb _Cb", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" _wb _xb _yb _zb", styles);
     return styles || '';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "3.0.0-nightly-56da82e3e-250212",
+  "version": "3.0.0-nightly-3dbdc1e8e-250214",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -57,27 +57,27 @@
     "src"
   ],
   "dependencies": {
-    "@react-aria/collections": "3.0.0-nightly-56da82e3e-250212",
-    "@react-aria/focus": "3.0.0-nightly-56da82e3e-250212",
-    "@react-aria/i18n": "3.0.0-nightly-56da82e3e-250212",
-    "@react-aria/interactions": "3.0.0-nightly-56da82e3e-250212",
-    "@react-aria/live-announcer": "3.0.0-nightly-56da82e3e-250212",
-    "@react-aria/tree": "3.0.0-nightly-56da82e3e-250212",
-    "@react-aria/utils": "3.0.0-nightly-56da82e3e-250212",
-    "@react-spectrum/utils": "3.0.0-nightly-56da82e3e-250212",
-    "@react-stately/layout": "3.0.0-nightly-56da82e3e-250212",
-    "@react-stately/utils": "3.0.0-nightly-56da82e3e-250212",
-    "@react-stately/virtualizer": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/color": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/dialog": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/grid": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/provider": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/shared": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/table": "3.0.0-nightly-56da82e3e-250212",
-    "@react-types/textfield": "3.0.0-nightly-56da82e3e-250212",
+    "@react-aria/collections": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-aria/focus": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-aria/i18n": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-aria/interactions": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-aria/live-announcer": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-aria/tree": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-aria/utils": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-spectrum/utils": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-stately/layout": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-stately/utils": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-stately/virtualizer": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/color": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/dialog": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/grid": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/provider": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/shared": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/table": "3.0.0-nightly-3dbdc1e8e-250214",
+    "@react-types/textfield": "3.0.0-nightly-3dbdc1e8e-250214",
     "csstype": "^3.0.2",
-    "react-aria": "3.0.0-nightly-56da82e3e-250212",
-    "react-aria-components": "3.0.0-nightly-56da82e3e-250212"
+    "react-aria": "3.0.0-nightly-3dbdc1e8e-250214",
+    "react-aria-components": "3.0.0-nightly-3dbdc1e8e-250214"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0-rc.1",

package/src/TreeView.tsx

@@ -15,10 +15,10 @@ import {ActionMenuContext} from './ActionMenu';
 import {
   Button,
   ButtonContext,
-  Collection,
   Provider,
   TreeItemProps as RACTreeItemProps,
   TreeProps as RACTreeProps,
+  TreeItemContentProps,
   UNSTABLE_ListLayout,
   UNSTABLE_Tree,
   UNSTABLE_TreeItem,
@@ -35,8 +35,8 @@ import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-u
 import {IconContext} from './Icon';
 import {isAndroid} from '@react-aria/utils';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, isValidElement, JSXElementConstructor, ReactElement, useContext, useMemo, useRef} from 'react';
-import {Text, TextContext} from './Content';
+import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';
+import {TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale} from 'react-aria';
 import {useScale} from './utils';
@@ -66,10 +66,6 @@ interface TreeRendererContextValue {
 }
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
-function useTreeRendererContext(): TreeRendererContextValue {
-  return useContext(TreeRendererContext)!;
-}
-
 
 let InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});
 
@@ -226,66 +222,21 @@ const treeCellGrid = style({
       forcedColors: 'Highlight'
     }
   },
-  borderTopColor: {
-    default: 'transparent',
-    isSelected: {
-      isFirst: 'transparent'
-    },
-    isDetached: {
-      default: 'transparent',
-      isSelected: '--rowSelectedBorderColor'
-    }
-  },
-  borderInlineEndColor: {
-    default: 'transparent',
-    isSelected: 'transparent',
-    isDetached: {
-      default: 'transparent',
-      isSelected: '--rowSelectedBorderColor'
-    }
-  },
-  borderBottomColor: {
-    default: 'transparent',
-    isSelected: 'transparent',
-    isNextSelected: 'transparent',
-    isNextFocused: 'transparent',
+  borderColor: {
     isDetached: {
       default: 'transparent',
       isSelected: '--rowSelectedBorderColor'
     }
   },
-  borderInlineStartColor: {
-    default: 'transparent',
-    isSelected: 'transparent',
-    isDetached: {
-      default: 'transparent',
-      isSelected: '--rowSelectedBorderColor'
-    }
-  },
-  borderTopWidth: {
-    default: 0,
-    isFirst: {
-      default: 1,
-      forcedColors: 0
-    },
-    isDetached: 1
-  },
-  borderBottomWidth: {
-    default: 0,
-    isDetached: 1
-  },
-  borderStartWidth: {
-    default: 0,
-    isDetached: 1
-  },
-  borderEndWidth: {
-    default: 0,
+  borderWidth: {
     isDetached: 1
   },
   borderRadius: {
     isDetached: 'default'
   },
-  borderStyle: 'solid'
+  borderStyle: {
+    isDetached: 'solid'
+  }
 });
 
 const treeCheckbox = style({
@@ -348,92 +299,73 @@ const treeRowFocusIndicator = raw(`
   }`
 );
 
-
 export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
   let {
-    children,
-    childItems,
-    hasChildItems,
     href
   } = props;
-
-  let content;
-  let nestedRows;
-  let {renderer} = useTreeRendererContext();
   let {isDetached, isEmphasized} = useContext(InternalTreeContext);
-  let scale = useScale();
-
-  if (typeof children === 'string') {
-    content = <Text>{children}</Text>;
-  } else {
-    content = [];
-    nestedRows = [];
-    React.Children.forEach(children, node => {
-      if (isValidElement(node) && node.type === TreeViewItem) {
-        nestedRows.push(node);
-      } else {
-        content.push(node);
-      }
-    });
-  }
-
-  if (childItems != null && renderer) {
-    nestedRows = (
-      <Collection items={childItems}>
-        {renderer}
-      </Collection>
-    );
-  }
 
   return (
     <UNSTABLE_TreeItem
       {...props}
-      className={(renderProps) => treeRow({...renderProps, isLink: !!href, isEmphasized}) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')}>
-      <UNSTABLE_TreeItemContent>
-        {({isExpanded, hasChildRows, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {
-          let isNextSelected = false;
-          let isNextFocused = false;
-          let keyAfter = state.collection.getKeyAfter(id);
-          if (keyAfter != null) {
-            isNextSelected = state.selectionManager.isSelected(keyAfter);
-          }
-          let isFirst = state.collection.getFirstKey() === id;
-          return (
-            <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>
-              {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
-                // TODO: add transition?
-                <div className={treeCheckbox}>
-                  <Checkbox
-                    isEmphasized={isEmphasized}
-                    slot="selection" />
-                </div>
-              )}
-              <div
-                className={style({
-                  gridArea: 'level-padding',
-                  width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]'
-                })} />
-              {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
-              <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildRows || hasChildItems)} />
-              <Provider
-                values={[
-                  [TextContext, {styles: treeContent}],
-                  [IconContext, {
-                    render: centerBaseline({slot: 'icon', styles: treeIcon}),
-                    styles: style({size: fontRelative(20), flexShrink: 0})
-                  }],
-                  [ActionButtonGroupContext, {styles: treeActions}],
-                  [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]
-                ]}>
-                {content}
-              </Provider>
-              {isFocusVisible && isDetached && <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}
-            </div>
-          );
-        }}
-      </UNSTABLE_TreeItemContent>
-      {nestedRows}
-    </UNSTABLE_TreeItem>
+      className={(renderProps) => treeRow({
+        ...renderProps,
+        isLink: !!href, isEmphasized
+      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />
+  );
+};
+
+export const TreeItemContent = (props: Omit<TreeItemContentProps, 'children'> & {children: ReactNode}) => {
+  let {
+    children
+  } = props;
+  let {isDetached, isEmphasized} = useContext(InternalTreeContext);
+  let scale = useScale();
+
+  return (
+    <UNSTABLE_TreeItemContent>
+      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {
+        let isNextSelected = false;
+        let isNextFocused = false;
+        let keyAfter = state.collection.getKeyAfter(id);
+        if (keyAfter != null) {
+          isNextSelected = state.selectionManager.isSelected(keyAfter);
+        }
+        let isFirst = state.collection.getFirstKey() === id;
+        return (
+          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>
+            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
+              // TODO: add transition?
+              <div className={treeCheckbox}>
+                <Checkbox
+                  isEmphasized={isEmphasized}
+                  slot="selection" />
+              </div>
+            )}
+            <div
+              className={style({
+                gridArea: 'level-padding',
+                width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]'
+              })} />
+            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
+            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />
+            <Provider
+              values={[
+                [TextContext, {styles: treeContent}],
+                [IconContext, {
+                  render: centerBaseline({slot: 'icon', styles: treeIcon}),
+                  styles: style({size: fontRelative(20), flexShrink: 0})
+                }],
+                [ActionButtonGroupContext, {styles: treeActions}],
+                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]
+              ]}>
+              {children}
+            </Provider>
+            {isFocusVisible && isDetached && <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}
+          </div>
+        );
+      }}
+    </UNSTABLE_TreeItemContent>
   );
 };
 

package/src/index.ts

@@ -76,7 +76,7 @@ export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextFiel
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext} from './ToggleButtonGroup';
 export {Tooltip, TooltipTrigger} from './Tooltip';
-export {TreeView, TreeViewItem} from './TreeView';
+export {TreeView, TreeViewItem, TreeItemContent} from './TreeView';
 
 export {pressScale} from './pressScale';
 

package/style/__tests__/style-macro.test.js

@@ -40,7 +40,7 @@ describe('style-macro', () => {
       "@layer _.a, _.b, _.c;
 
       @layer _.b {
-        .D-13alit4c {
+        .A-13alit4c {
           &:first-child {
             margin-top: 0.25rem;
           }
@@ -49,7 +49,7 @@ describe('style-macro', () => {
 
       @layer _.c.e {
         @media (min-width: 1024px) {
-          .D-13alit4ed {
+          .A-13alit4ed {
             &:first-child {
               margin-top: 0.5rem;
             }
@@ -59,7 +59,7 @@ describe('style-macro', () => {
 
       "
     `);
-    expect(js).toMatchInlineSnapshot('" D-13alit4c D-13alit4ed"');
+    expect(js).toMatchInlineSnapshot('" A-13alit4c A-13alit4ed"');
   });
 
   it('should support self references', () => {
@@ -73,48 +73,48 @@ describe('style-macro', () => {
       "@layer _.a, _.b;
 
       @layer _.a {
-        .tc {
+        .uc {
           border-top-width: 2px;
         }
 
 
-        .uc {
+        .vc {
           border-bottom-width: 2px;
         }
 
 
-        .r-375tox {
-          border-inline-start-width: var(--r);
+        .s-375toy {
+          border-inline-start-width: var(--s);
         }
 
 
-        .sc {
+        .tc {
           border-inline-end-width: 2px;
         }
 
 
-        .F-375tnp {
-          padding-inline-start: var(--F);
+        .C-375tnm {
+          padding-inline-start: var(--C);
         }
 
 
-        .GI {
-          padding-inline-end: calc(var(--j, var(--n)) * 3 / 8);
+        .DI {
+          padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
         }
 
 
-        .k-4s570k {
-          width: calc(200px - var(--r) - var(--F));
+        .l-4s570k {
+          width: calc(200px - var(--s) - var(--C));
         }
 
 
-        .-_375tox_r-c {
-          --r: 2px;
+        .-_375toy_s-c {
+          --s: 2px;
         }
 
 
-        .-_375tnp_F-I {
-          --F: calc(var(--j, var(--n)) * 3 / 8);
+        .-_375tnm_C-I {
+          --C: calc(var(--k, var(--o)) * 3 / 8);
         }
       }
 

package/style/dist/spectrum-theme.cjs

@@ -669,16 +669,6 @@ const $7dddb03c6ef7d79c$var$borderWidth = {
     2: "2px",
     4: "4px"
 };
-const $7dddb03c6ef7d79c$var$borderColor = (0, $b3643cb9d2948e30$exports.createColorProperty)({
-    ...$7dddb03c6ef7d79c$var$color,
-    negative: {
-        default: "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))",
-        isHovered: "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))",
-        isFocusVisible: "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))",
-        isPressed: "light-dark(rgb(156, 33, 19), rgb(255, 134, 120))"
-    },
-    disabled: "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))"
-});
 const $7dddb03c6ef7d79c$var$radius = {
     none: "0px",
     sm: $7dddb03c6ef7d79c$var$pxToRem("4px"),
@@ -1053,6 +1043,16 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             pasteboard: "light-dark(rgb(233, 233, 233), rgb(17, 17, 17))",
             elevated: "light-dark(rgb(255, 255, 255), rgb(34, 34, 34))"
         }),
+        borderColor: (0, $b3643cb9d2948e30$exports.createColorProperty)({
+            ...$7dddb03c6ef7d79c$var$color,
+            negative: {
+                default: "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))",
+                isHovered: "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))",
+                isFocusVisible: "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))",
+                isPressed: "light-dark(rgb(156, 33, 19), rgb(255, 134, 120))"
+            },
+            disabled: "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))"
+        }),
         outlineColor: (0, $b3643cb9d2948e30$exports.createColorProperty)({
             ...$7dddb03c6ef7d79c$var$color,
             'focus-ring': {
@@ -1125,10 +1125,6 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
         borderEndWidth: (0, $b3643cb9d2948e30$exports.createRenamedProperty)('borderInlineEndWidth', $7dddb03c6ef7d79c$var$borderWidth),
         borderTopWidth: $7dddb03c6ef7d79c$var$borderWidth,
         borderBottomWidth: $7dddb03c6ef7d79c$var$borderWidth,
-        borderInlineStartColor: $7dddb03c6ef7d79c$var$borderColor,
-        borderInlineEndColor: $7dddb03c6ef7d79c$var$borderColor,
-        borderTopColor: $7dddb03c6ef7d79c$var$borderColor,
-        borderBottomColor: $7dddb03c6ef7d79c$var$borderColor,
         borderStyle: [
             'solid',
             'dashed',
@@ -1923,12 +1919,6 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'borderStartWidth',
             'borderEndWidth'
         ],
-        borderColor: [
-            'borderTopColor',
-            'borderBottomColor',
-            'borderInlineStartColor',
-            'borderInlineEndColor'
-        ],
         borderXWidth: [
             'borderStartWidth',
             'borderEndWidth'