@dxos/react-ui 0.1.12 → 0.1.14

package/src/components/Popover/Popover.tsx

@@ -3,18 +3,29 @@
 //
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import cx from 'classnames';
+import { Button as ToolbarButtonItem } from '@radix-ui/react-toolbar';
 import { X } from 'phosphor-react';
 import React, { ComponentProps, ReactNode, useCallback, useState } from 'react';
 
-import { defaultFocus, defaultHover } from '../../styles';
+import { defaultActive, defaultFocus, defaultHover, getSize } from '../../styles';
+import { mx } from '../../util';
 
-export interface PopoverProps extends Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'children'> {
+export interface PopoverSlots {
+  content?: Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'children'>;
+  arrow?: Pick<ComponentProps<typeof PopoverPrimitive.Arrow>, 'className'>;
+  close?: Omit<ComponentProps<typeof PopoverPrimitive.Close>, 'children'>;
+  closeIcon?: ComponentProps<typeof X>;
+  trigger?: Omit<ComponentProps<typeof PopoverPrimitive.Trigger>, 'children'>;
+}
+
+export interface PopoverProps {
   openTrigger: ReactNode;
   children: ReactNode;
   closeLabel?: string;
   initiallyOpen?: boolean;
   mountAsSibling?: boolean;
+  triggerIsInToolbar?: boolean;
+  slots?: PopoverSlots;
 }
 
 type KeyUpEvent = Parameters<Exclude<ComponentProps<typeof PopoverPrimitive.Trigger>['onKeyUp'], undefined>>[0];
@@ -25,51 +36,74 @@ export const Popover = ({
   closeLabel,
   initiallyOpen,
   mountAsSibling,
-  ...contentProps
+  triggerIsInToolbar,
+  slots = {}
 }: PopoverProps) => {
   const [isOpen, setIsOpen] = useState(!!initiallyOpen);
-  const onKeyUp = useCallback((e: KeyUpEvent) => {
-    const keyUpId = (document.activeElement as HTMLElement).dataset.keyupid;
-    if (keyUpId && e.key === ' ') {
-      setIsOpen(keyUpId === 'open');
-    }
-  }, []);
+  const onKeyUp = useCallback(
+    (e: KeyUpEvent) => {
+      const keyUpId = (document.activeElement as HTMLElement).dataset.keyupid;
+      if (keyUpId && e.key === ' ') {
+        setIsOpen(keyUpId === 'open');
+      }
+      slots.trigger?.onKeyUp?.(e);
+    },
+    [slots.trigger?.onKeyUp]
+  );
 
   const popoverContent = (
     <PopoverPrimitive.Content
       align='center'
-      {...contentProps}
-      className={cx(
+      {...slots.content}
+      className={mx(
         'radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down',
         'rounded-lg p-4 shadow-xl elevated-buttons',
         'bg-white dark:bg-neutral-800',
         defaultFocus,
-        contentProps.className
+        slots.content?.className
       )}
     >
-      <PopoverPrimitive.Arrow className='fill-current text-white dark:text-neutral-800' />
+      <PopoverPrimitive.Arrow className={mx('fill-current text-white dark:text-neutral-800', slots.arrow?.className)} />
       {children}
       {closeLabel && (
         <PopoverPrimitive.Close
-          className={cx(
+          {...slots.close}
+          className={mx(
             'absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1',
             defaultFocus,
-            defaultHover({})
+            defaultHover({}),
+            slots.close?.className
           )}
           aria-label={closeLabel}
           data-keyupid='close'
         >
-          <X className='h-4 w-4 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400' />
+          <X
+            {...slots.closeIcon}
+            className={mx(
+              getSize(4),
+              'text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400',
+              slots.closeIcon?.className
+            )}
+          />
         </PopoverPrimitive.Close>
       )}
     </PopoverPrimitive.Content>
   );
 
+  const trigger = (
+    <PopoverPrimitive.Trigger
+      {...slots.trigger}
+      onKeyUp={onKeyUp}
+      data-keyupid='open'
+      className={mx(defaultHover({}), defaultFocus, defaultActive, slots.trigger?.className)}
+    >
+      {openTrigger}
+    </PopoverPrimitive.Trigger>
+  );
+
   return (
     <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverPrimitive.Trigger asChild onKeyUp={onKeyUp} data-keyupid='open'>
-        {openTrigger}
-      </PopoverPrimitive.Trigger>
+      {triggerIsInToolbar ? <ToolbarButtonItem asChild>{trigger}</ToolbarButtonItem> : trigger}
       {mountAsSibling ? popoverContent : <PopoverPrimitive.Portal>{popoverContent}</PopoverPrimitive.Portal>}
     </PopoverPrimitive.Root>
   );

package/src/components/QrCode/QrCode.tsx

@@ -2,59 +2,73 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import { QrCode as QrCodeIcon, CopySimple } from 'phosphor-react';
 import { QRCodeSVG } from 'qrcode.react';
-import React, { useCallback, ReactHTMLElement } from 'react';
+import React, { useCallback, ReactHTMLElement, ComponentProps } from 'react';
 
 import { useId } from '../../hooks';
 import { Size } from '../../props';
 import { getSize } from '../../styles';
-import { Button, ButtonGroup, ButtonProps } from '../Button';
-import { Tooltip, TooltipProps } from '../Tooltip';
+import { mx } from '../../util';
+import { Button, ButtonGroup } from '../Button';
+import { Tooltip, TooltipSlots } from '../Tooltip';
 
-interface SharedQrCodeProps
-  extends Omit<ButtonProps, 'onClick' | 'ref' | 'variant'>,
-    Pick<TooltipProps, 'side' | 'sideOffset' | 'collisionPadding'> {
+interface SharedQrCodeProps {
   value: string;
   buttonCompact?: boolean;
 }
 
+interface FullQrCodeSlots {
+  tooltipContent?: TooltipSlots['content'];
+  tooltipArrow?: TooltipSlots['arrow'];
+  button?: Omit<ComponentProps<'button'>, 'ref' | 'children'>;
+  qrSvg?: ComponentProps<typeof QRCodeSVG>;
+}
+
 export interface FullQrCodeProps extends SharedQrCodeProps {
   label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
   size?: Size;
+  slots?: FullQrCodeSlots;
 }
 
 export type QrCodeProps = FullQrCodeProps;
 
+interface CompactQrCodeSlots {
+  qrTooltipContent?: TooltipSlots['content'];
+  qrTooltipArrow?: TooltipSlots['arrow'];
+  qrButton?: Omit<ComponentProps<'button'>, 'ref' | 'children'>;
+  copyTooltipContent?: TooltipSlots['content'];
+  copyTooltipArrow?: TooltipSlots['arrow'];
+  copyButton?: Omit<ComponentProps<'button'>, 'ref' | 'children'>;
+  qrSvg?: ComponentProps<typeof QRCodeSVG>;
+}
+
 export interface CompactQrCodeProps extends SharedQrCodeProps {
   displayQrLabel: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
   copyLabel: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+  slots?: CompactQrCodeSlots;
 }
 
-export const FullQrCode = ({
-  value,
-  label,
-  size,
-  side,
-  sideOffset,
-  collisionPadding,
-  buttonCompact = true,
-  ...buttonProps
-}: FullQrCodeProps) => {
+export const FullQrCode = ({ value, label, size, buttonCompact = true, slots = {} }: FullQrCodeProps) => {
   const labelId = useId('qr-label');
   const copyValue = useCallback(() => {
     void navigator.clipboard.writeText(value);
   }, [value]);
   return (
-    <Tooltip content={label} {...{ side, sideOffset, collisionPadding }}>
+    <Tooltip content={label} {...slots.tooltipContent}>
       <Button
         compact={buttonCompact}
-        {...buttonProps}
-        className={cx('overflow-hidden p-0', getSize(size ?? 32), buttonProps.className)}
+        {...slots.button}
+        className={mx('overflow-hidden p-0', getSize(size ?? 32), slots.button?.className)}
         onClick={copyValue}
       >
-        <QRCodeSVG value={value} includeMargin role='none' className='w-full h-auto' />
+        <QRCodeSVG
+          includeMargin
+          role='none'
+          {...slots.qrSvg}
+          value={value}
+          className={mx('w-full h-auto', slots.qrSvg?.className)}
+        />
         <div id={labelId} className='sr-only'>
           {label}
         </div>
@@ -63,17 +77,7 @@ export const FullQrCode = ({
   );
 };
 
-export const CompactQrCode = ({
-  value,
-  displayQrLabel,
-  copyLabel,
-  side,
-  sideOffset,
-  collisionPadding,
-  compact,
-  buttonCompact,
-  ...buttonProps
-}: CompactQrCodeProps) => {
+export const CompactQrCode = ({ value, displayQrLabel, copyLabel, buttonCompact, slots = {} }: CompactQrCodeProps) => {
   const labelId = useId('qr-label');
   const copyValue = useCallback(() => {
     void navigator.clipboard.writeText(value);
@@ -86,29 +90,33 @@ export const CompactQrCode = ({
         </span>
         <Tooltip
           compact
+          slots={{ content: { ...slots.qrTooltipContent, side: slots?.qrTooltipContent?.side ?? 'left' } }}
           content={
             <div role='none' className='overflow-hidden rounded-md'>
-              <QRCodeSVG value={value} includeMargin role='none' className={getSize(32)} />
+              <QRCodeSVG
+                includeMargin
+                role='none'
+                {...slots.qrSvg}
+                value={value}
+                className={mx(getSize(32), slots.qrSvg?.className)}
+              />
             </div>
           }
-          {...{ side: side ?? 'left', sideOffset, collisionPadding }}
         >
           <Button
-            rounding='rounded-is-md'
             compact={buttonCompact}
-            {...buttonProps}
-            className={cx('border-ie-0 grow', buttonProps.className)}
+            {...slots.qrButton}
+            className={mx('border-ie-0 grow rounded-is-md', slots.qrButton?.className)}
             aria-labelledby={labelId}
           >
             <QrCodeIcon className={getSize(5)} />
           </Button>
         </Tooltip>
-        <Tooltip content={copyLabel} tooltipLabelsTrigger {...{ side, sideOffset, collisionPadding }}>
+        <Tooltip content={copyLabel} tooltipLabelsTrigger slots={{ content: slots.qrTooltipContent }}>
           <Button
-            rounding='rounded-ie-md grow'
             compact={buttonCompact}
-            {...buttonProps}
-            className={buttonProps.className}
+            {...slots.copyButton}
+            className={mx('rounded-ie-md grow', slots.copyButton?.className)}
             onClick={copyValue}
           >
             <CopySimple className={getSize(5)} />
@@ -118,28 +126,32 @@ export const CompactQrCode = ({
       <ButtonGroup className='hidden md:inline-flex'>
         <Tooltip
           compact
+          slots={{ content: { ...slots.qrTooltipContent, side: slots?.qrTooltipContent?.side ?? 'left' } }}
           content={
             <div role='none' className='overflow-hidden rounded-md'>
-              <QRCodeSVG value={value} includeMargin role='none' className={getSize(32)} />
+              <QRCodeSVG
+                includeMargin
+                role='none'
+                {...slots.qrSvg}
+                value={value}
+                className={mx(getSize(32), slots.qrSvg?.className)}
+              />
             </div>
           }
-          {...{ side: side ?? 'left', sideOffset, collisionPadding }}
         >
           <Button
-            rounding='rounded-is-md'
             compact={buttonCompact}
-            {...buttonProps}
-            className={cx('border-ie-0 flex gap-1', buttonProps.className)}
+            {...slots.qrButton}
+            className={mx('border-ie-0 flex gap-1 rounded-is-md', slots.qrButton?.className)}
           >
             <QrCodeIcon className={getSize(5)} />
             {displayQrLabel}
           </Button>
         </Tooltip>
         <Button
-          rounding='rounded-ie-md'
           compact={buttonCompact}
-          {...buttonProps}
-          className={cx('flex gap-1', buttonProps.className)}
+          {...slots.copyButton}
+          className={mx('flex gap-1 rounded-ie-md', slots.copyButton?.className)}
           onClick={copyValue}
         >
           <CopySimple className={getSize(5)} />

package/src/components/Tag/Tag.tsx

@@ -2,12 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
 import { MessageValence } from '../../props';
+import { mx } from '../../util';
 
-export interface TagProps extends React.ComponentProps<'span'> {
+export interface TagProps extends ComponentProps<'span'> {
   valence?: MessageValence;
   children?: ReactNode;
 }
@@ -20,11 +20,11 @@ const valenceColorMap: Record<MessageValence, string> = {
   error: 'bg-error-100 text-error-800 dark:bg-error-700 dark:text-error-300'
 };
 
-export const Tag = ({ children, valence = 'neutral', ...props }: PropsWithChildren<TagProps>) => {
+export const Tag = ({ children, valence = 'neutral', ...rootSlot }: PropsWithChildren<TagProps>) => {
   return (
     <span
-      {...props}
-      className={cx('text-xs font-semibold px-2.5 py-0.5 rounded', valenceColorMap[valence], props.className)}
+      {...rootSlot}
+      className={mx('text-xs font-semibold px-2.5 py-0.5 rounded', valenceColorMap[valence], rootSlot?.className)}
     >
       {children}
     </span>

package/src/components/Toast/Toast.tsx

@@ -3,12 +3,21 @@
 //
 
 import * as ToastPrimitive from '@radix-ui/react-toast';
-import cx from 'classnames';
 import React, { cloneElement, ComponentProps, ReactHTMLElement, ReactNode, useState } from 'react';
 
 import { defaultDescription, defaultFocus } from '../../styles';
+import { mx } from '../../util';
 import { Button } from '../Button';
 
+export interface ToastSlots {
+  root?: Omit<ComponentProps<typeof ToastPrimitive.Root>, 'children'>;
+  heading?: Omit<ComponentProps<'div'>, 'children'>;
+  headingInner?: Omit<ComponentProps<'div'>, 'children'>;
+  title?: Omit<ComponentProps<typeof ToastPrimitive.Title>, 'children'>;
+  description?: Omit<ComponentProps<typeof ToastPrimitive.Description>, 'children'>;
+  actions?: Omit<ComponentProps<'div'>, 'children'>;
+}
+
 export interface ToastProps extends Omit<ComponentProps<typeof ToastPrimitive.Root>, 'title'> {
   title: ReactNode;
   openTrigger?: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
@@ -17,6 +26,7 @@ export interface ToastProps extends Omit<ComponentProps<typeof ToastPrimitive.Ro
   titleVisuallyHidden?: boolean;
   description?: ReactNode;
   initiallyOpen?: boolean;
+  slots?: ToastSlots;
 }
 
 export const Toast = ({
@@ -27,7 +37,7 @@ export const Toast = ({
   closeTrigger,
   actionTriggers,
   initiallyOpen,
-  ...rootProps
+  slots = {}
 }: ToastProps) => {
   const [isOpen, setIsOpen] = useState(!!initiallyOpen);
 
@@ -42,42 +52,54 @@ export const Toast = ({
       <ToastPrimitive.Root
         open={isOpen}
         onOpenChange={setIsOpen}
-        {...rootProps}
-        className={cx(
-          'shadow-lg rounded-lg',
+        {...slots.root}
+        className={mx(
+          'shadow-lg rounded-lg elevated-buttons flex',
           'bg-white dark:bg-neutral-800',
           'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
           'radix-state-closed:animate-toast-hide',
           'radix-swipe-end:animate-toast-swipe-out',
           'translate-x-radix-toast-swipe-move-x',
           'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-          'elevated-buttons',
           defaultFocus,
-          rootProps.className
+          slots.root?.className
         )}
       >
-        <div role='none' className='flex'>
-          <div role='none' className='w-0 flex-1 flex items-center pl-5 py-4 min-h-full'>
-            <div role='none' className='w-full radix flex flex-col justify-center min-h-full gap-1'>
-              <ToastPrimitive.Title className={cx('text-md font-medium', titleVisuallyHidden && 'sr-only')}>
-                {title}
-              </ToastPrimitive.Title>
-              {description && (
-                <ToastPrimitive.Description className={defaultDescription}>{description}</ToastPrimitive.Description>
-              )}
-            </div>
-          </div>
-          <div role='none' className='flex flex-col px-3 py-2 gap-1 items-stretch justify-center min-h-full'>
-            {(actionTriggers || []).map(({ altText, trigger }, index) => (
-              <ToastPrimitive.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
-                {trigger}
-              </ToastPrimitive.Action>
-            ))}
-            {closeTrigger && (
-              <ToastPrimitive.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</ToastPrimitive.Close>
+        <div
+          role='none'
+          {...slots.heading}
+          className={mx('w-0 flex-1 flex items-center pl-5 py-4 min-h-full', slots.heading?.className)}
+        >
+          <div
+            role='none'
+            {...slots.headingInner}
+            className={mx('w-full radix flex flex-col justify-center min-h-full gap-1', slots.headingInner?.className)}
+          >
+            <ToastPrimitive.Title className={mx('text-md font-medium', titleVisuallyHidden && 'sr-only')}>
+              {title}
+            </ToastPrimitive.Title>
+            {description && (
+              <ToastPrimitive.Description className={defaultDescription}>{description}</ToastPrimitive.Description>
             )}
           </div>
         </div>
+        <div
+          role='none'
+          {...slots.actions}
+          className={mx(
+            'flex flex-col px-3 py-2 gap-1 items-stretch justify-center min-h-full',
+            slots.actions?.className
+          )}
+        >
+          {(actionTriggers || []).map(({ altText, trigger }, index) => (
+            <ToastPrimitive.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
+              {trigger}
+            </ToastPrimitive.Action>
+          ))}
+          {closeTrigger && (
+            <ToastPrimitive.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</ToastPrimitive.Close>
+          )}
+        </div>
       </ToastPrimitive.Root>
     </>
   );

package/src/components/Tooltip/Tooltip.tsx

@@ -2,30 +2,42 @@
 // Copyright 2022 DXOS.org
 //
 
+import * as PortalPrimitive from '@radix-ui/react-portal';
+import { Button as ToolbarButtonItem } from '@radix-ui/react-toolbar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import cx from 'classnames';
 import React, { ComponentProps, ReactNode, useState } from 'react';
 
 import { useId } from '../../hooks';
 import { defaultTooltip } from '../../styles';
+import { mx } from '../../util';
 
-export interface TooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'children'> {
+export interface TooltipSlots {
+  content?: Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'children'>;
+  arrow?: Pick<ComponentProps<typeof TooltipPrimitive.Arrow>, 'className'>;
+}
+
+export interface TooltipProps {
   content: ReactNode;
   children: ReactNode;
+  side?: TooltipPrimitive.TooltipContentProps['side'];
   compact?: boolean;
   tooltipLabelsTrigger?: boolean;
   mountAsSibling?: boolean;
+  triggerIsInToolbar?: boolean;
   zIndex?: string;
+  slots?: TooltipSlots;
 }
 
 export const Tooltip = ({
   content,
   children,
+  side,
   compact,
   tooltipLabelsTrigger,
   mountAsSibling,
+  triggerIsInToolbar,
   zIndex = 'z-[2]',
-  ...contentProps
+  slots = {}
 }: TooltipProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const labelId = useId('tooltipLabel');
@@ -33,8 +45,9 @@ export const Tooltip = ({
   const tooltipContent = (
     <TooltipPrimitive.Content
       forceMount
-      {...contentProps}
-      className={cx(
+      {...slots.content}
+      side={side ?? slots.content?.side ?? 'top'}
+      className={mx(
         'radix-side-top:animate-slide-down-fade',
         'radix-side-right:animate-slide-left-fade',
         'radix-side-bottom:animate-slide-up-fade',
@@ -45,23 +58,29 @@ export const Tooltip = ({
         'shadow-lg bg-white dark:bg-neutral-800',
         !isOpen && 'sr-only',
         defaultTooltip,
-        contentProps.className
+        slots.content?.className
       )}
     >
-      <TooltipPrimitive.Arrow className='fill-current text-white dark:text-neutral-800' />
+      <TooltipPrimitive.Arrow className={mx('fill-current text-white dark:text-neutral-800', slots.arrow?.className)} />
       {content}
     </TooltipPrimitive.Content>
   );
 
+  const triggerContent = (
+    <TooltipPrimitive.Trigger asChild {...(tooltipLabelsTrigger && { 'aria-labelledby': labelId })}>
+      {children}
+    </TooltipPrimitive.Trigger>
+  );
+
   return (
     <TooltipPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
-      <TooltipPrimitive.Trigger asChild {...(tooltipLabelsTrigger && { 'aria-labelledby': labelId })}>
-        {children}
-      </TooltipPrimitive.Trigger>
+      {triggerIsInToolbar ? <ToolbarButtonItem asChild>{triggerContent}</ToolbarButtonItem> : triggerContent}
       {tooltipLabelsTrigger && (
-        <span id={labelId} className='sr-only'>
-          {content}
-        </span>
+        <PortalPrimitive.Root asChild>
+          <span id={labelId} className='sr-only'>
+            {content}
+          </span>
+        </PortalPrimitive.Root>
       )}
       {mountAsSibling ? tooltipContent : <TooltipPrimitive.Portal forceMount>{tooltipContent}</TooltipPrimitive.Portal>}
     </TooltipPrimitive.Root>

package/src/components/UiProvider/UiProvider.tsx

@@ -9,10 +9,10 @@ import {
   ToastViewportProps
 } from '@radix-ui/react-toast';
 import { Provider as TooltipProvider, TooltipProviderProps } from '@radix-ui/react-tooltip';
-import cx from 'classnames';
 import React, { PropsWithChildren } from 'react';
 
 import { defaultFocus } from '../../styles';
+import { mx } from '../../util';
 
 export type UiProviderProps = PropsWithChildren<{
   tooltipProviderProps?: TooltipProviderProps;
@@ -33,8 +33,8 @@ export const UiProvider = ({
       </TooltipProvider>
       <ToastViewport
         {...toastViewportProps}
-        className={cx(
-          'z-50 fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm rounded-lg',
+        className={mx(
+          'z-50 fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm rounded-lg flex flex-col gap-2',
           defaultFocus,
           toastViewportProps?.className
         )}

package/src/config/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './tailwind';