@dxos/react-ui 0.7.2 → 0.7.3-staging.0905f03

package/src/components/Clipboard/CopyButton.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps } from '@phosphor-icons/react';
+import React, { useState } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { useClipboard } from './ClipboardProvider';
+import { Button, type ButtonProps } from '../Buttons';
+import { Icon } from '../Icon';
+import { useTranslation } from '../ThemeProvider';
+import { Tooltip } from '../Tooltip';
+
+export type CopyButtonProps = ButtonProps & {
+  value: string;
+  iconProps?: IconProps;
+};
+
+const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
+
+export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButtonProps) => {
+  const { t } = useTranslation('os');
+  const { textValue, setTextValue } = useClipboard();
+  const isCopied = textValue === value;
+  return (
+    <Button
+      {...props}
+      classNames={['inline-flex flex-col justify-center', classNames]}
+      onClick={() => setTextValue(value)}
+      data-testid='copy-invitation'
+    >
+      <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
+        <span className='pli-1'>{t('copy label')}</span>
+        {/* TODO(wittjosiah): Why do these need as any? */}
+        <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
+      </div>
+      <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
+        <span className='pli-1'>{t('copy success label')}</span>
+        <Icon icon='ph--check--regular' size={5 as any} {...iconProps} />
+      </div>
+    </Button>
+  );
+};
+
+export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonProps) => {
+  const { t } = useTranslation('os');
+  const { textValue, setTextValue } = useClipboard();
+  const isCopied = textValue === value;
+  const label = isCopied ? t('copy success label') : t('copy label');
+  const [open, setOpen] = useState(false);
+  return (
+    <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom' sideOffset={12} classNames='z-30'>
+          <span>{label}</span>
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+      <Tooltip.Trigger
+        aria-label={label}
+        {...props}
+        onClick={() => setTextValue(value).then(() => setOpen(true))}
+        data-testid='copy-invitation'
+        asChild
+      >
+        <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
+          <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
+        </Button>
+      </Tooltip.Trigger>
+    </Tooltip.Root>
+  );
+};

package/src/components/Clipboard/index.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ClipboardProvider } from './ClipboardProvider';
+import { CopyButton, CopyButtonIconOnly } from './CopyButton';
+
+export const Clipboard = {
+  Button: CopyButton,
+  IconButton: CopyButtonIconOnly,
+  Provider: ClipboardProvider,
+};
+
+export { useClipboard } from './ClipboardProvider';

package/src/components/Dialogs/AlertDialog.tsx

@@ -91,18 +91,27 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   },
 );
 
-type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps>;
+type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' };
 
 const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
   HTMLDivElement,
   AlertDialogOverlayProps
->(({ classNames, children, ...props }, forwardedRef) => {
+>(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
     <AlertDialogOverlayPrimitive
       {...props}
-      className={tx('dialog.overlay', 'dialog--alert__overlay', {}, classNames)}
+      className={tx(
+        'dialog.overlay',
+        'dialog--alert__overlay',
+        {},
+        classNames,
+        'data-[block-align=start]:justify-center',
+        'data-[block-align=start]:items-start',
+        'data-[block-align=center]:place-content-center',
+      )}
       ref={forwardedRef}
+      data-block-align={blockAlign}
     >
       <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
     </AlertDialogOverlayPrimitive>

package/src/components/Icon/Icon.tsx

@@ -10,14 +10,17 @@ import { type Size } from '@dxos/react-ui-types';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
+const ICONS_URL = '/icons.svg';
+
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & { icon: string; size?: Size };
 
 export const Icon = memo(
   forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+    const { tx, noCache } = useThemeContext();
+    const url = noCache ? `${ICONS_URL}?nocache=${new Date().getMinutes()}` : ICONS_URL;
     return (
       <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
-        <use href={`/icons.svg#${icon}`} />
+        <use href={`${url}#${icon}`} />
       </svg>
     );
   }),

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -18,6 +18,7 @@ export type ThemeContextValue = {
   tx: ThemeFunction<any>;
   themeMode: ThemeMode;
   hasIosKeyboard: boolean;
+  noCache?: boolean;
 };
 
 /**
@@ -41,6 +42,7 @@ export const ThemeProvider = ({
   themeMode = 'dark',
   rootDensity = 'fine',
   rootElevation = 'base',
+  ...rest
 }: ThemeProviderProps) => {
   useEffect(() => {
     if (document.defaultView) {
@@ -51,7 +53,7 @@ export const ThemeProvider = ({
   }, []);
 
   return (
-    <ThemeContext.Provider value={{ tx, themeMode, hasIosKeyboard: hasIosKeyboard() }}>
+    <ThemeContext.Provider value={{ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), ...rest }}>
       <TranslationsProvider
         {...{
           fallback,

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './AnchoredOverflow';
 export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Buttons';
+export * from './Clipboard';
 export * from './Dialogs';
 export * from './Menus';
 export * from './Icon';