@dxos/react-ui 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/src/components/Main/Main.tsx

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { createContext } from '@radix-ui/react-context';
-import { Root as DialogRoot, DialogContent } from '@radix-ui/react-dialog';
+import { Root as DialogRoot, DialogContent, DialogTitle } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -70,8 +69,9 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
     },
     [propsOnKeyDown],
   );
-  const focusableAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
-  return { onKeyDown: handleKeyDown, [landmarkAttr]: landmark, tabIndex: 0, ...focusableAttrs };
+  const focusableGroupAttrs = window ? {} : { tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } };
+
+  return { onKeyDown: handleKeyDown, [landmarkAttr]: landmark, tabIndex: 0, ...focusableGroupAttrs };
 };
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
@@ -91,6 +91,7 @@ const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME
 const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } =
     useMainContext(consumerName);
+
   return {
     navigationSidebarState,
     setNavigationSidebarState,
@@ -221,8 +222,10 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
       [props.onKeyDown],
     );
     const Root = isLg ? Primitive.div : DialogContent;
+
     return (
       <DialogRoot open={state !== 'closed'} aria-label={toLocalizedString(label, t)} modal={false}>
+        {!isLg && <DialogTitle className='sr-only'>{toLocalizedString(label, t)}</DialogTitle>}
         <Root
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...props}
@@ -246,6 +249,7 @@ type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '0');
+
   return (
     <MainSidebar
       {...mover}
@@ -267,6 +271,7 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
   const { complementarySidebarState, setComplementarySidebarState, resizing } =
     useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '2');
+
   return (
     <MainSidebar
       {...mover}

package/src/hooks/index.ts

@@ -4,6 +4,7 @@
 
 export * from './useDensityContext';
 export * from './useElevationContext';
+export * from './useIconHref';
 export * from './useSafeArea';
 export * from './useTranslationsContext';
 export * from './useThemeContext';

package/src/hooks/useIconHref.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useThemeContext } from './useThemeContext';
+
+const ICONS_URL = '/icons.svg';
+
+export const useIconHref = (icon?: string) => {
+  const { noCache } = useThemeContext();
+  const url = noCache ? `${ICONS_URL}?nocache=${new Date().getMinutes()}` : ICONS_URL;
+  return icon ? `${url}#${icon}` : undefined;
+};

package/dist/types/src/components/Avatars/AvatarGroup.d.ts

@@ -1,21 +0,0 @@
-import React, { type ComponentPropsWithRef } from 'react';
-import { type AvatarRootProps } from './Avatar';
-import { type ThemedClassName } from '../../util';
-type AvatarGroupRootProps = Omit<AvatarRootProps, 'status' | 'maskId' | 'inGroup'> & ThemedClassName<ComponentPropsWithRef<'div'>>;
-type AvatarGroupItemRootProps = Omit<AvatarRootProps, 'labelId' | 'descriptionId' | 'inGroup'>;
-type AvatarGroupLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & {
-    srOnly?: boolean;
-};
-type AvatarGroupDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & {
-    srOnly?: boolean;
-};
-export declare const AvatarGroup: {
-    Root: React.ForwardRefExoticComponent<Omit<AvatarGroupRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<AvatarGroupLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<AvatarGroupDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-};
-export declare const AvatarGroupItem: {
-    Root: ({ maskId, size, variant, status, children, ...rest }: AvatarGroupItemRootProps) => import("react/jsx-runtime").JSX.Element;
-};
-export type { AvatarGroupRootProps, AvatarGroupItemRootProps, AvatarGroupLabelProps, AvatarGroupDescriptionProps };
-//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/types/src/components/Avatars/AvatarGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Avatars/AvatarGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAItE,OAAO,EAAU,KAAK,eAAe,EAAoB,MAAM,UAAU,CAAC;AAE1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,GAChF,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;AAiChD,KAAK,wBAAwB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC,CAAC;AA2B/F,KAAK,qBAAqB,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkB/G,KAAK,2BAA2B,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkBrH,eAAO,MAAM,WAAW;;;;CAA0F,CAAC;AACnH,eAAO,MAAM,eAAe;iEA9DuD,wBAAwB;CA8D/C,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}

package/src/components/Avatars/AvatarGroup.tsx

@@ -1,112 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
-
-import { useId } from '@dxos/react-hooks';
-
-import { Avatar, type AvatarRootProps, useAvatarContext } from './Avatar';
-import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-
-type AvatarGroupRootProps = Omit<AvatarRootProps, 'status' | 'maskId' | 'inGroup'> &
-  ThemedClassName<ComponentPropsWithRef<'div'>>;
-
-const AvatarGroupRoot = forwardRef<HTMLDivElement, AvatarGroupRootProps>(
-  (
-    {
-      labelId: propsLabelId,
-      descriptionId: propsDescriptionId,
-      size,
-      variant,
-      children,
-      classNames,
-    }: AvatarGroupRootProps,
-    forwardedRef,
-  ) => {
-    const { tx } = useThemeContext();
-    const labelId = useId('avatar-group__label', propsLabelId);
-    const descriptionId = useId('avatar-group__description', propsDescriptionId);
-    return (
-      <Avatar.Root {...{ labelId, descriptionId, size, variant, inGroup: true }}>
-        <div
-          role='group'
-          className={tx('avatar.group', 'avatar-group', {}, classNames)}
-          aria-labelledby={labelId}
-          aria-describedby={descriptionId}
-          ref={forwardedRef}
-        >
-          {children}
-        </div>
-      </Avatar.Root>
-    );
-  },
-);
-
-type AvatarGroupItemRootProps = Omit<AvatarRootProps, 'labelId' | 'descriptionId' | 'inGroup'>;
-
-const AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }: AvatarGroupItemRootProps) => {
-  const {
-    labelId,
-    descriptionId,
-    size: contextSize,
-    variant: contextVariant,
-  } = useAvatarContext('AvatarGroupItemRoot');
-  return (
-    <Avatar.Root
-      {...{
-        labelId,
-        descriptionId,
-        maskId,
-        status,
-        size: size ?? contextSize,
-        variant: variant ?? contextVariant,
-        inGroup: true,
-        ...rest,
-      }}
-    >
-      {children}
-    </Avatar.Root>
-  );
-};
-
-type AvatarGroupLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & { srOnly?: boolean };
-
-const AvatarGroupLabel = forwardRef<HTMLSpanElement, AvatarGroupLabelProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
-    const { labelId, size } = useAvatarContext('AvatarGroupLabel');
-    const { tx } = useThemeContext();
-    return (
-      <span
-        {...props}
-        id={labelId}
-        className={tx('avatar.groupLabel', 'avatar-group__label', { srOnly, size }, classNames)}
-      >
-        {children}
-      </span>
-    );
-  },
-);
-
-type AvatarGroupDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & { srOnly?: boolean };
-
-const AvatarGroupDescription = forwardRef<HTMLSpanElement, AvatarGroupDescriptionProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
-    const { descriptionId } = useAvatarContext('AvatarGroupDescription');
-    const { tx } = useThemeContext();
-    return (
-      <span
-        {...props}
-        id={descriptionId}
-        className={tx('avatar.groupDescription', 'avatar-group__description', { srOnly }, classNames)}
-      >
-        {children}
-      </span>
-    );
-  },
-);
-
-export const AvatarGroup = { Root: AvatarGroupRoot, Label: AvatarGroupLabel, Description: AvatarGroupDescription };
-export const AvatarGroupItem = { Root: AvatarGroupItemRoot };
-export type { AvatarGroupRootProps, AvatarGroupItemRootProps, AvatarGroupLabelProps, AvatarGroupDescriptionProps };