@dxos/react-ui-stack 0.8.1-main.ae460ac → 0.8.1-staging.391c573

package/src/components/Stack.tsx

@@ -46,7 +46,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
   ) => {
     const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);
     const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);
-    const arrowNavigationGroup = useArrowNavigationGroup({ axis: orientation });
+    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: orientation });
 
     const styles: CSSProperties = {
       [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
@@ -79,14 +79,14 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
         <div
           {...props}
-          {...arrowNavigationGroup}
+          {...arrowNavigationAttrs}
           className={mx(
             'grid relative',
             gridClasses,
             (size === 'contain' || size === 'contain-fit-content') &&
               (orientation === 'horizontal'
-                ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'
-                : 'overflow-y-auto min-is-0 is-full max-is-full'),
+                ? 'overflow-x-auto min-bs-0 max-bs-full bs-full'
+                : 'overflow-y-auto min-is-0 max-is-full is-full'),
             classNames,
           )}
           data-rail={rail}
@@ -110,4 +110,5 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
 );
 
 export { StackContext };
+
 export type { StackContextValue };

package/src/components/StackItem.tsx

@@ -96,6 +96,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
       if (!itemElement || !onRearrange || disableRearrange) {
         return;
       }
+
       return combine(
         draggable({
           element: itemElement,
@@ -146,14 +147,14 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
       );
     }, [orientation, item, onRearrange, selfDragHandleElement, itemElement]);
 
-    const focusGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+    const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
     return (
       <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize }}>
         <Root
           {...props}
           tabIndex={0}
-          {...focusGroupAttrs}
+          {...focusableGroupAttrs}
           className={mx(
             'group/stack-item grid relative',
             focusIndicatorVariant === 'over-all'

package/src/components/StackItemHeading.tsx

@@ -16,6 +16,7 @@ export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'di
 export const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {
   const { orientation } = useStack();
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+
   return (
     <div
       role='heading'
@@ -38,6 +39,7 @@ export type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'
 export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHeadingLabelProps>(
   ({ attendableId, related, classNames, ...props }, forwardedRef) => {
     const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+
     return (
       <h1
         {...props}