@dxos/react-ui 0.1.12 → 0.1.14

package/src/components/Heading/Heading.tsx

@@ -2,9 +2,10 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { createElement, PropsWithChildren, ReactNode } from 'react';
 
+import { mx } from '../../util';
+
 export interface HeadingProps extends React.ComponentProps<'h1'> {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   children?: ReactNode;
@@ -19,10 +20,10 @@ const levelClassNameMap = new Map<number, string>([
   [6, 'text-lg']
 ]);
 
-export const Heading = ({ level, ...props }: PropsWithChildren<HeadingProps>) => {
+export const Heading = ({ level, ...rootSlot }: PropsWithChildren<HeadingProps>) => {
   const resolvedLevel = level || 1;
   return createElement(`h${resolvedLevel}`, {
-    ...props,
-    className: cx('font-bold font-display', levelClassNameMap.get(resolvedLevel), props.className)
+    ...rootSlot,
+    className: mx('font-bold font-display', levelClassNameMap.get(resolvedLevel), rootSlot.className)
   });
 };

package/src/components/Input/BarePinInput.tsx

@@ -2,13 +2,13 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import { CodeInput, getSegmentCssWidth } from 'rci';
 import React, { forwardRef, useCallback, ComponentProps } from 'react';
 
 import { useForwardedRef, useIsFocused } from '../../hooks';
 import { staticInput } from '../../styles/input';
-import { InputProps } from './InputProps';
+import { mx } from '../../util';
+import { InputProps, InputSlots } from './InputProps';
 
 const bareInputStyleProps = {
   padding: '8px',
@@ -16,12 +16,15 @@ const bareInputStyleProps = {
   fontFamily: ''
 };
 
-export type BarePinInputProps = Omit<InputProps, 'ref' | 'label' | 'onChange'> &
-  Pick<ComponentProps<typeof CodeInput>, 'onChange' | 'value' | 'length'>;
+export type BarePinInputProps = Omit<InputProps, 'ref' | 'label' | 'onChange' | 'slots'> &
+  Pick<ComponentProps<typeof CodeInput>, 'onChange' | 'value' | 'length'> & { inputSlot: InputSlots['input'] };
 
 // TODO(thure): supplying a `value` prop to CodeInput does not yield correct controlled input interactivity; this may be an issue with RCI (filed as https://github.com/leonardodino/rci/issues/25).
 export const BarePinInput = forwardRef<HTMLInputElement, BarePinInputProps>(
-  ({ initialValue, size, validationMessage, validationValence, value, ...inputProps }, ref) => {
+  (
+    { initialValue, size, validationMessage, validationValence, value, onChange, placeholder, disabled, inputSlot },
+    ref
+  ) => {
     const width = getSegmentCssWidth('13px');
     const inputRef = useForwardedRef(ref);
     const inputFocused = useIsFocused(inputRef);
@@ -32,29 +35,31 @@ export const BarePinInput = forwardRef<HTMLInputElement, BarePinInputProps>(
           key={index}
           className={staticInput({
             focused: inputFocused && !!state,
-            disabled: inputProps.disabled,
+            disabled,
             ...(validationMessage && { validationValence })
           })}
           data-state={state}
           style={{ width, height: '100%' }}
         />
       ),
-      [inputFocused, validationValence, validationMessage, inputProps.disabled]
+      [inputFocused, validationValence, validationMessage, disabled]
     );
 
     return (
       <CodeInput
         {...{
           spellCheck: false,
-          ...inputProps,
           ...bareInputStyleProps,
+          ...inputSlot,
+          placeholder,
+          onChange,
           inputRef,
-          className: cx(
+          renderSegment,
+          className: mx(
             'font-mono selection:bg-transparent mli-auto',
-            inputProps.disabled && 'cursor-not-allowed',
-            inputProps.className
-          ),
-          renderSegment
+            disabled && 'cursor-not-allowed',
+            inputSlot?.className
+          )
         }}
       />
     );

package/src/components/Input/BareTextInput.tsx

@@ -2,11 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { ComponentProps } from 'react';
 
 import { defaultInput } from '../../styles/input';
-import { InputProps, InputSize } from './InputProps';
+import { mx } from '../../util';
+import { InputProps, InputSize, InputSlots } from './InputProps';
 
 const sizeMap: Record<InputSize, string> = {
   md: 'text-base',
@@ -15,30 +15,33 @@ const sizeMap: Record<InputSize, string> = {
   textarea: ''
 };
 
-export type BareTextInputProps = Omit<InputProps, 'label' | 'initialValue' | 'onChange'> &
-  Pick<ComponentProps<'input'>, 'onChange'>;
+export type BareTextInputProps = Omit<InputProps, 'label' | 'initialValue' | 'onChange' | 'slots'> &
+  Pick<ComponentProps<'input'>, 'onChange' | 'value'> & { inputSlot: InputSlots['input'] };
 
 export const BareTextInput = ({
   validationValence,
   validationMessage,
   size,
-  borders,
-  typography,
-  rounding,
-  ...inputProps
+  disabled,
+  placeholder,
+  onChange,
+  value,
+  inputSlot
 }: BareTextInputProps) => {
   return (
     <input
-      {...inputProps}
-      className={cx(
+      {...inputSlot}
+      placeholder={placeholder}
+      onChange={onChange}
+      value={value}
+      className={mx(
         defaultInput({
-          borders,
-          rounding,
-          typography: typography ?? sizeMap[size ?? 'md'],
-          disabled: inputProps.disabled,
+          disabled,
           ...(validationMessage && { validationValence })
         }),
-        'block w-full px-2.5 py-2'
+        sizeMap[size ?? 'md'],
+        'block w-full px-2.5 py-2',
+        inputSlot?.className
       )}
     />
   );

package/src/components/Input/BareTextareaInput.tsx

@@ -2,36 +2,37 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { ComponentProps } from 'react';
 
 import { defaultInput } from '../../styles/input';
-import { TextareaProps } from './InputProps';
+import { mx } from '../../util';
+import { TextareaProps, TextareaSlots } from './InputProps';
 
-export type BareTextareaInputProps = Omit<TextareaProps, 'label' | 'initialValue' | 'onChange'> &
-  Pick<ComponentProps<'textarea'>, 'onChange'>;
+export type BareTextareaInputProps = Omit<TextareaProps, 'label' | 'initialValue' | 'onChange' | 'slots'> &
+  Pick<ComponentProps<'textarea'>, 'onChange' | 'value'> & { inputSlot: TextareaSlots['input'] };
 
 export const BareTextareaInput = ({
   validationValence,
   validationMessage,
-  size,
-  borders,
-  typography,
-  rounding,
-  ...inputProps
+  onChange,
+  value,
+  disabled,
+  placeholder,
+  inputSlot
 }: BareTextareaInputProps) => {
   return (
     <textarea
-      {...inputProps}
-      className={cx(
+      {...inputSlot}
+      placeholder={placeholder}
+      onChange={onChange}
+      value={value}
+      className={mx(
         defaultInput({
-          borders,
-          typography,
-          rounding,
-          disabled: inputProps.disabled,
+          disabled,
           ...(validationMessage && { validationValence })
         }),
-        'block w-full px-2.5 py-2'
+        'block w-full px-2.5 py-2',
+        inputSlot?.className
       )}
     />
   );

package/src/components/Input/Input.tsx

@@ -2,11 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { ChangeEvent, useCallback, useState, useTransition } from 'react';
 
 import { useId } from '../../hooks';
 import { defaultDescription, valenceColorText } from '../../styles';
+import { mx } from '../../util';
 import { BarePinInput } from './BarePinInput';
 import { BareTextInput } from './BareTextInput';
 import { BareTextareaInput, BareTextareaInputProps } from './BareTextareaInput';
@@ -17,25 +17,19 @@ export type InputProps = NaturalInputProps;
 export const Input = ({
   label,
   labelVisuallyHidden,
-  placeholder,
   description,
   descriptionVisuallyHidden,
-  required,
   initialValue,
   onChange,
   disabled,
-  className,
+  placeholder,
   size,
   length = 6,
-  spacing,
-  borders,
-  typography,
-  rounding,
   validationMessage,
   validationValence,
-  ...inputProps
+  slots = {}
 }: InputProps) => {
-  const inputId = inputProps.id ?? useId('input');
+  const inputId = slots.input?.id ?? useId('input');
   const descriptionId = useId('input-description');
   const validationId = useId('input-validation');
 
@@ -58,23 +52,21 @@ export const Input = ({
   );
 
   const bareInputBaseProps = {
-    ...inputProps,
+    ...slots.input,
     id: inputId,
-    ...(required && { required: true }),
+    ...(slots.input?.required && { required: true }),
     ...(disabled && { disabled: true }),
     ...(description && { 'aria-describedby': descriptionId }),
     ...(isInvalid && {
       'aria-invalid': 'true' as const,
       'aria-errormessage': validationId
     }),
-    ...(placeholder && { placeholder }),
+    placeholder,
     value: internalValue,
     onChange: onInternalChange,
+    inputSlot: slots.input,
     validationMessage,
-    validationValence,
-    borders,
-    typography,
-    rounding
+    validationValence
   };
 
   const bareInput =
@@ -87,12 +79,14 @@ export const Input = ({
     );
 
   return (
-    <div role='none' className={cx(spacing ?? 'mlb-4', className)}>
+    <div role='none' className={mx('mlb-4', slots.root?.className)}>
       <label
+        {...slots.label}
         htmlFor={inputId}
-        className={cx(
+        className={mx(
           'block pbe-1 text-sm font-medium text-neutral-900 dark:text-neutral-100',
-          labelVisuallyHidden && 'sr-only'
+          labelVisuallyHidden && 'sr-only',
+          slots.label?.className
         )}
       >
         {label}
@@ -101,16 +95,16 @@ export const Input = ({
       {(description || validationMessage) && (
         <p
           {...(!isInvalid && { id: descriptionId })}
-          className={cx(descriptionVisuallyHidden && !isInvalid && 'sr-only')}
+          className={mx(descriptionVisuallyHidden && !isInvalid && 'sr-only')}
         >
           {validationMessage && (
-            <span id={validationId} className={valenceColorText(validationValence)}>
+            <span id={validationId} className={mx(valenceColorText(validationValence), slots.validation?.className)}>
               {validationMessage}{' '}
             </span>
           )}
           <span
             {...(isInvalid && { id: descriptionId })}
-            className={cx(defaultDescription, descriptionVisuallyHidden && 'sr-only')}
+            className={mx(defaultDescription, descriptionVisuallyHidden && 'sr-only', slots.description?.className)}
           >
             {description}
           </span>

package/src/components/Input/InputProps.ts

@@ -8,8 +8,9 @@ import { MessageValence } from '../../props';
 
 export type InputSize = 'md' | 'lg' | 'pin' | 'textarea';
 
-interface InputPropsExtension {
+interface SharedTextInputProps {
   label: ReactNode;
+  placeholder?: string;
   labelVisuallyHidden?: boolean;
   description?: ReactNode;
   descriptionVisuallyHidden?: boolean;
@@ -20,16 +21,27 @@ interface InputPropsExtension {
   validationMessage?: ReactNode;
   validationValence?: MessageValence;
   length?: number;
-  spacing?: string;
-  borders?: string;
-  typography?: string;
-  rounding?: string;
 }
 
-export interface InputProps
-  extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size' | 'ref'>,
-    InputPropsExtension {}
+interface SharedSlots {
+  root?: Omit<ComponentProps<'div'>, 'children'>;
+  label?: Omit<ComponentProps<'label'>, 'children'>;
+  description?: Pick<ComponentProps<'span'>, 'className'>;
+  validation?: Pick<ComponentProps<'span'>, 'className'>;
+}
+
+export interface InputSlots extends SharedSlots {
+  input?: Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size' | 'ref' | 'disabled' | 'placeholder'>;
+}
+
+export interface TextareaSlots extends SharedSlots {
+  input?: Omit<ComponentProps<'textarea'>, 'value' | 'onChange' | 'size' | 'ref' | 'disabled' | 'placeholder'>;
+}
+
+export interface InputProps extends SharedTextInputProps {
+  slots?: InputSlots;
+}
 
-export interface TextareaProps
-  extends Omit<ComponentProps<'textarea'>, 'value' | 'onChange' | 'size' | 'ref'>,
-    InputPropsExtension {}
+export interface TextareaProps extends SharedTextInputProps {
+  slots?: TextareaSlots;
+}

package/src/components/Loading/Loading.tsx

@@ -2,20 +2,25 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 import { useId } from '../../hooks';
+import { mx } from '../../util';
 
 export type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
 
 export type LoadingColor = 'primary' | 'neutral';
 
+export interface LoadingSlots {
+  root?: Omit<ComponentProps<'div'>, 'children'>;
+  svg?: Pick<ComponentProps<'svg'>, 'className'>;
+}
+
 export interface LoadingProps {
   label: string;
   size?: LoadingSize;
   color?: LoadingColor;
-  className?: string;
+  slots?: LoadingSlots;
 }
 
 const sizeMap = new Map<LoadingSize, string>([
@@ -25,18 +30,23 @@ const sizeMap = new Map<LoadingSize, string>([
   ['xl', 'w-16 h-16']
 ]);
 
-export const Loading = ({ size, color, className, label }: LoadingProps & { label: string }) => {
+export const Loading = ({ size, color, label, slots = {} }: LoadingProps) => {
   const labelId = useId('loading-label');
   const sizeClassName = sizeMap.get(size ?? 'md');
   return (
-    <div role='status' className={cx('flex justify-center p-4', className)} aria-labelledby={labelId}>
+    <div
+      {...slots.root}
+      className={mx('flex justify-center p-4', slots.root?.className)}
+      role='status'
+      aria-labelledby={labelId}
+    >
       <svg
         role='none'
-        aria-hidden='true'
-        className={cx(
+        className={mx(
           sizeClassName,
           'text-neutral-200/50 animate-spin dark:text-neutral-600/50',
-          color === 'neutral' ? 'fill-neutral-400' : 'fill-primary-400'
+          color === 'neutral' ? 'fill-neutral-400' : 'fill-primary-400',
+          slots.svg?.className
         )}
         viewBox='0 0 100 101'
         fill='none'

package/src/components/NavMenu/NavMenu.stories.tsx

@@ -46,7 +46,7 @@ Default.args = {
       triggerLinkProps: { href: '#Goodbye' },
       tooltip: {
         content: 'More info about Goodbye',
-        sideOffset: 8
+        slots: { content: { sideOffset: 8 } }
       },
       children: 'Goodbye'
     }

package/src/components/NavMenu/NavMenu.tsx

@@ -3,10 +3,10 @@
 //
 
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import cx from 'classnames';
 import React, { ComponentProps, ForwardedRef, forwardRef, ReactNode } from 'react';
 
 import { defaultFocus, defaultHover, defaultInlineSeparator } from '../../styles';
+import { mx } from '../../util';
 import { defaultButtonColors, primaryButtonColors } from '../Button';
 import { Tooltip, TooltipProps } from '../Tooltip';
 
@@ -40,8 +40,17 @@ export type NavMenuItem =
   | NavMenuInvokerItemProps
   | NavMenuSeparatorProps;
 
-export interface NavMenuProps extends ComponentProps<typeof NavigationMenuPrimitive.Root> {
+export interface NavMenuSlots {
+  root?: Omit<ComponentProps<typeof NavigationMenuPrimitive.Root>, 'children'>;
+  viewport?: Omit<ComponentProps<typeof NavigationMenuPrimitive.Viewport>, 'children'>;
+  list?: Omit<ComponentProps<typeof NavigationMenuPrimitive.List>, 'children'>;
+  indicator?: Omit<ComponentProps<typeof NavigationMenuPrimitive.Indicator>, 'children'>;
+  indicatorIcon?: Pick<ComponentProps<'div'>, 'className'>;
+}
+
+export interface NavMenuProps {
   items: NavMenuItem[];
+  slots?: NavMenuSlots;
 }
 
 const NavMenuInvokerItem = forwardRef(
@@ -49,7 +58,7 @@ const NavMenuInvokerItem = forwardRef(
     return (
       <NavigationMenuPrimitive.Item ref={ref}>
         <NavigationMenuPrimitive.Trigger
-          className={cx(
+          className={mx(
             'px-3 py-2 text-sm rounded-md text-sm font-medium transition-color',
             active ? primaryButtonColors : defaultButtonColors,
             defaultFocus,
@@ -59,7 +68,7 @@ const NavMenuInvokerItem = forwardRef(
           {children}
         </NavigationMenuPrimitive.Trigger>
         <NavigationMenuPrimitive.Content
-          className={cx(
+          className={mx(
             'absolute w-auto top-0 left-0 rounded-lg',
             'radix-motion-from-start:animate-enter-from-left',
             'radix-motion-from-end:animate-enter-from-right',
@@ -80,7 +89,7 @@ const NavMenuLinkItem = forwardRef(
       <NavigationMenuPrimitive.Link
         {...triggerLinkProps}
         active={active}
-        className={cx(
+        className={mx(
           'px-3 py-2 text-sm rounded-md transition-color',
           active ? primaryButtonColors : defaultButtonColors,
           active ? 'font-medium' : 'font-normal',
@@ -103,7 +112,7 @@ const NavMenuTooltipLinkItem = forwardRef(
         <NavigationMenuPrimitive.Link
           {...triggerLinkProps}
           active={active}
-          className={cx(
+          className={mx(
             'px-3 py-2 text-sm rounded-md transition-color',
             active ? primaryButtonColors : defaultButtonColors,
             active ? 'font-medium' : 'font-normal',
@@ -122,17 +131,23 @@ const NavMenuTooltipLinkItem = forwardRef(
 export const NavMenuLink = NavigationMenuPrimitive.Link;
 
 export const NavMenuSeparatorItem = (_props: NavMenuSeparatorProps) => {
-  return <span role='none' className={cx(defaultInlineSeparator, 'bs-5')} />;
+  return <span role='none' className={mx(defaultInlineSeparator, 'bs-5')} />;
 };
 
 const isTooltipLinkItem = (o: any): o is NavMenuTooltipLinkItemProps => 'tooltip' in o;
 const isLinkItem = (o: any): o is NavMenuLinkItemProps => 'triggerLinkProps' in o;
 const isSeparator = (o: any): o is NavMenuSeparatorProps => 'separator' in o;
 
-export const NavMenu = ({ items, ...rootProps }: NavMenuProps) => {
+export const NavMenu = ({ items, slots = {} }: NavMenuProps) => {
   return (
-    <NavigationMenuPrimitive.Root {...rootProps} className={cx('flex justify-center', rootProps.className)}>
-      <NavigationMenuPrimitive.List className='relative flex flex-row items-center gap-1 rounded-lg bg-white dark:bg-neutral-750 p-1 button-elevation overflow-x-auto'>
+    <NavigationMenuPrimitive.Root {...slots.root} className={mx('flex justify-center', slots.root?.className)}>
+      <NavigationMenuPrimitive.List
+        {...slots.list}
+        className={mx(
+          'relative flex flex-row items-center gap-1 rounded-lg bg-white dark:bg-neutral-750 p-1 button-elevation overflow-x-auto',
+          slots.list?.className
+        )}
+      >
         {items.map((item: NavMenuItem, i) => {
           return isTooltipLinkItem(item) ? (
             <NavMenuTooltipLinkItem key={i} {...item} />
@@ -146,32 +161,40 @@ export const NavMenu = ({ items, ...rootProps }: NavMenuProps) => {
         })}
 
         <NavigationMenuPrimitive.Indicator
-          className={cx(
-            'z-10',
-            'top-[100%] flex items-end justify-center h-2 overflow-hidden',
+          {...slots.indicator}
+          className={mx(
+            'z-10 top-[100%] flex items-end justify-center h-2 overflow-hidden',
             'radix-state-visible:animate-fade-in',
             'radix-state-hidden:animate-fade-out',
-            'transition-[width_transform] duration-[250ms] ease-[ease]'
+            'transition-[width_transform] duration-[250ms] ease-[ease]',
+            slots.indicator?.className
           )}
         >
-          <div className='top-1 relative bg-white dark:bg-neutral-750 w-2 h-2 rotate-45' />
+          <div
+            className={mx(
+              'top-1 relative bg-white dark:bg-neutral-750 w-2 h-2 rotate-45',
+              slots.indicatorIcon?.className
+            )}
+          />
         </NavigationMenuPrimitive.Indicator>
       </NavigationMenuPrimitive.List>
 
       <div
-        className={cx('absolute flex justify-center', 'w-[140%] left-[-20%] top-[100%]')}
+        className={mx('absolute flex justify-center', 'w-[140%] left-[-20%] top-[100%]')}
         style={{
           perspective: '2000px'
         }}
       >
         <NavigationMenuPrimitive.Viewport
-          className={cx(
-            'relative mt-2 shadow-lg rounded-md bg-white dark:bg-neutral-750 overflow-hidden',
+          {...slots.viewport}
+          className={mx(
+            'relative mbs-2 shadow-lg rounded-md bg-white dark:bg-neutral-750 overflow-hidden',
             'w-radix-navigation-menu-viewport',
             'h-radix-navigation-menu-viewport',
             'radix-state-open:animate-scale-in-content',
             'radix-state-closed:animate-scale-out-content',
-            'origin-[top_center] transition-[width_height] duration-300 ease-[ease]'
+            'origin-[top_center] transition-[width_height] duration-300 ease-[ease]',
+            slots.viewport?.className
           )}
         />
       </div>

package/src/components/Popover/Popover.stories.tsx

@@ -3,11 +3,11 @@
 //
 
 import '@dxosTheme';
-import cx from 'classnames';
 import React from 'react';
 
 import { defaultFocus, defaultHover, defaultActive } from '../../styles';
 import { templateForComponent } from '../../testing';
+import { mx } from '../../util';
 import { Avatar } from '../Avatar';
 import { Button } from '../Button';
 import { Popover, PopoverProps } from './Popover';
@@ -34,10 +34,14 @@ Default.args = {
 export const AvatarTrigger = templateForComponent(Template)({
   openTrigger: (
     <Avatar
-      tabIndex={0}
+      slots={{
+        root: {
+          tabIndex: 0,
+          className: mx('button-elevation cursor-pointer rounded-md', defaultHover({}), defaultFocus, defaultActive)
+        }
+      }}
       label={<span className='sr-only'>Open popover</span>}
       fallbackValue='open popover'
-      className={cx('button-elevation cursor-pointer rounded-md', defaultHover({}), defaultFocus, defaultActive)}
     />
   ),
   closeLabel: 'Close',