@dxos/react-ui 0.6.14-staging.934c9de → 0.6.14-staging.9b873ce

package/src/components/Buttons/IconButton.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { Button, type ButtonProps } from './Button';
+import { useThemeContext } from '../../hooks';
+import { Icon, type IconProps } from '../Icon';
+import { Tooltip } from '../Tooltip';
+
+type IconButtonProps = Omit<ButtonProps, 'children'> &
+  Pick<IconProps, 'icon'> & { label: string; iconOnly?: boolean; tooltipPortal?: boolean; tooltipZIndex?: string };
+
+const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
+    const content = (
+      <Tooltip.Content {...(zIndex && { style: { zIndex } })}>
+        {props.label}
+        <Tooltip.Arrow />
+      </Tooltip.Content>
+    );
+    return (
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <LabelledIconButton {...props} ref={forwardedRef} />
+        </Tooltip.Trigger>
+        {tooltipPortal ? <Tooltip.Portal>{content}</Tooltip.Portal> : content}
+      </Tooltip.Root>
+    );
+  },
+);
+
+const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, iconOnly, label, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>
+        <Icon icon={icon} />
+        <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
+      </Button>
+    );
+  },
+);
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
+  props.iconOnly ? (
+    <IconOnlyButton {...props} ref={forwardedRef} />
+  ) : (
+    <LabelledIconButton {...props} ref={forwardedRef} />
+  ),
+);
+
+export { IconButton };
+
+export type { IconButtonProps };

package/src/components/Buttons/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './Button';
+export * from './IconButton';
 export * from './Toggle';
 export * from './ToggleGroup';

package/src/components/Select/Select.tsx

@@ -102,9 +102,22 @@ const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButton
   },
 );
 
-type SelectViewportProps = SelectPrimitive.SelectViewportProps;
+type SelectViewportProps = ThemedClassName<SelectPrimitive.SelectViewportProps>;
 
-const SelectViewport = SelectPrimitive.Viewport;
+const SelectViewport = forwardRef<HTMLDivElement, SelectViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SelectPrimitive.SelectViewport
+        {...props}
+        className={tx('select.viewport', 'select__viewport', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </SelectPrimitive.SelectViewport>
+    );
+  },
+);
 
 type SelectItemProps = ThemedClassName<SelectPrimitive.SelectItemProps>;
 

package/src/components/Status/Status.tsx

@@ -9,22 +9,23 @@ import { type ThemedClassName } from '../../util';
 
 type StatusProps = ThemedClassName<ComponentPropsWithRef<'span'>> & {
   indeterminate?: boolean;
+  variant?: 'default' | 'main-bottom';
   progress?: number;
 };
 
 const Status = forwardRef<HTMLSpanElement, StatusProps>(
-  ({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
+  ({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <span
         role='status'
         {...props}
-        className={tx('status.root', 'status', { indeterminate }, classNames)}
+        className={tx('status.root', 'status', { indeterminate, variant }, classNames)}
         ref={forwardedRef}
       >
         <span
           role='none'
-          className={tx('status.bar', 'status__bar', { indeterminate }, classNames)}
+          className={tx('status.bar', 'status__bar', { indeterminate, variant }, classNames)}
           {...(!indeterminate && { style: { width: `${Math.round(progress * 100)}%` } })}
         />
         {children}