@luxfi/ui 7.4.10 → 7.4.11

package/src/popover.tsx

@@ -195,7 +195,7 @@ export const PopoverContent = React.forwardRef<
       className={ cn(
         'z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]',
         'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
-        'shadow-[var(--shadow-popover,var(--shadow-lg))]',
+        'shadow-[var(--shadow-popover)]',
         'outline-none',
         'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',

package/src/select.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as RadixSelect from '@radix-ui/react-select';
+import { Select as GuiSelect } from '@hanzo/gui';
 import { useDebounce } from '@uidotdev/usehooks';
 import * as React from 'react';
 
@@ -229,15 +229,14 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
 
     return (
       <SelectInternalContext.Provider value={ ctxValue }>
-        <RadixSelect.Root
+        <GuiSelect
           value={ currentValue[0] ?? '' }
           defaultValue={ defaultValueArr?.[0] }
           onValueChange={ handleRadixValueChange }
           open={ isOpen }
           onOpenChange={ handleOpenChange }
-          disabled={ disabled || readOnly }
+          disablePreventBodyScroll
           name={ name }
-          required={ required }
         >
           <div
             ref={ ref }
@@ -250,7 +249,7 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
           >
             { children }
           </div>
-        </RadixSelect.Root>
+        </GuiSelect>
       </SelectInternalContext.Provider>
     );
   },
@@ -263,7 +262,7 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
 export interface SelectControlProps {
   children?: React.ReactNode;
   noIndicator?: boolean;
-  triggerProps?: React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+  triggerProps?: React.ComponentProps<typeof GuiSelect.Trigger> & {
     asChild?: boolean;
     px?: string | number;
     className?: string;
@@ -286,9 +285,10 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
     const { asChild, px: _px, className: triggerClassName, ...radixTriggerProps } = triggerProps ?? {};
 
     const trigger = (
-      <RadixSelect.Trigger
-        ref={ ref }
+      <GuiSelect.Trigger
+        ref={ ref as never }
         asChild={ asChild }
+        unstyled
         className={ cn(
           'group peer inline-flex items-center gap-2 cursor-pointer',
           'rounded-lg text-sm transition-colors outline-none',
@@ -314,7 +314,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
             ) }
           </>
         ) }
-      </RadixSelect.Trigger>
+      </GuiSelect.Trigger>
     );
 
     if (loading) {
@@ -376,39 +376,33 @@ export interface SelectContentProps {
 }
 
 export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(
-  function SelectContent(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
+  function SelectContent(props, _ref) {
+    // `portalled` and `portalRef` stay in the type because callers pass them,
+    // but gui's Select.Content owns its own layering — it mounts through the
+    // engine's portal and z-index stack whatever we say. There is no second
+    // way to place it, so there is nothing here to switch on.
+    const { portalled: _portalled, portalRef: _portalRef, children, className, ...rest } = props;
 
-    const content = (
-      <RadixSelect.Content
-        ref={ ref }
-        position="popper"
-        sideOffset={ 4 }
-        className={ cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-lg',
-          'bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]',
-          'border border-[var(--color-border-divider)]',
-          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-          className,
-        ) }
-        { ...rest }
-      >
-        <RadixSelect.Viewport className="p-1">
-          { children }
-        </RadixSelect.Viewport>
-      </RadixSelect.Content>
-    );
+    // One counter per render, walked over the rows below.
+    let n = 0;
+    const counter = () => n++;
 
-    if (portalled) {
-      return (
-        <RadixSelect.Portal container={ portalRef?.current ?? undefined }>
-          { content }
-        </RadixSelect.Portal>
-      );
-    }
-
-    return content;
+    return (
+      // Content is the focus scope — it takes no style props at all. The
+      // Viewport is the box you can see, so the surface is declared there.
+      <GuiSelect.Content { ...rest }>
+        <GuiSelect.Viewport
+          className={ cn(
+            'min-w-[8rem] overflow-hidden rounded-lg p-1',
+            'bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]',
+            'border border-[var(--color-border-divider)]',
+            className,
+          ) }
+        >
+          { stampIndices(children, counter) }
+        </GuiSelect.Viewport>
+      </GuiSelect.Content>
+    );
   },
 );
 
@@ -420,17 +414,44 @@ export interface SelectItemProps {
   item: SelectOption;
   children?: React.ReactNode;
   className?: string;
+
+  /**
+   * The row's position in the list. gui's Select is positional — it keeps its
+   * own map of index to value to drive type-ahead, the active descendant and
+   * scrolling, so a row without one is a row the keyboard cannot reach. It is
+   * stamped by `SelectContent` rather than asked of the caller, because the
+   * caller writing `<SelectItem item={x}/>` has no idea what its own ordinal is
+   * and would have to be told twice.
+   */
+  index?: number;
 }
 
+/**
+ * Number every `SelectItem` beneath a node, depth first, in render order.
+ *
+ * Depth first because rows are routinely nested — inside a `SelectItemGroup`,
+ * inside the `React.Fragment` that pairs a row with its `afterElement`. A
+ * shallow pass over the content's direct children would number the groups and
+ * leave every actual row at index 0, which reads as a list whose keyboard
+ * silently only ever lands on the first entry.
+ */
+const stampIndices = (children: React.ReactNode, next: () => number): React.ReactNode =>
+  React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === SelectItem) return React.cloneElement(child, { index: next() } as never);
+    const kids = (child.props as { children?: React.ReactNode }).children;
+    return kids === undefined ? child : React.cloneElement(child, undefined, stampIndices(kids, next));
+  });
+
 export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
   function SelectItem(props, ref) {
-    const { item, children, className, ...rest } = props;
+    const { item, children, className, index, ...rest } = props;
 
     return (
-      <RadixSelect.Item
-        ref={ ref }
+      <GuiSelect.Item
+        ref={ ref as never }
+        index={ index ?? 0 }
         value={ item.value }
-        textValue={ item.label }
         className={ cn(
           'relative flex cursor-pointer select-none items-center gap-2',
           'rounded-md px-3 py-2 text-sm outline-none',
@@ -443,13 +464,13 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
         { ...rest }
       >
         { item.icon }
-        <RadixSelect.ItemText>
-          { children }
-        </RadixSelect.ItemText>
-        <RadixSelect.ItemIndicator className="ml-auto shrink-0">
+        <GuiSelect.ItemText>
+          { children ?? item.label }
+        </GuiSelect.ItemText>
+        <GuiSelect.ItemIndicator className="ml-auto shrink-0">
           <CheckIcon className="h-5 w-5"/>
-        </RadixSelect.ItemIndicator>
-      </RadixSelect.Item>
+        </GuiSelect.ItemIndicator>
+      </GuiSelect.Item>
     );
   },
 );
@@ -529,14 +550,14 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
     // Radix SelectValue renders the selected value or placeholder.
     // We override with our custom content.
     return (
-      <RadixSelect.Value
-        ref={ ref }
+      <GuiSelect.Value
+        ref={ ref as never }
         placeholder={ placeholderText }
         className={ cn('flex flex-col justify-center min-w-0 truncate', className) }
         { ...rest }
       >
         { content }
-      </RadixSelect.Value>
+      </GuiSelect.Value>
     );
   },
 );
@@ -555,12 +576,12 @@ export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupP
   function SelectItemGroup(props, ref) {
     const { children, label, className, ...rest } = props;
     return (
-      <RadixSelect.Group ref={ ref } className={ cn('py-1', className) } { ...rest }>
-        <RadixSelect.Label className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]">
+      <GuiSelect.Group ref={ ref as never } className={ cn('py-1', className) } { ...rest }>
+        <GuiSelect.Label className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]">
           { label }
-        </RadixSelect.Label>
+        </GuiSelect.Label>
         { children }
-      </RadixSelect.Group>
+      </GuiSelect.Group>
     );
   },
 );
@@ -569,8 +590,8 @@ export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupP
 // SelectLabel / SelectItemText
 // ---------------------------------------------------------------------------
 
-export const SelectLabel = RadixSelect.Label;
-export const SelectItemText = RadixSelect.ItemText;
+export const SelectLabel = GuiSelect.Label;
+export const SelectItemText = GuiSelect.ItemText;
 
 // ---------------------------------------------------------------------------
 // Select (composite)

package/src/separator.tsx

@@ -1,8 +1,6 @@
 import { Separator as GuiSeparator } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
-
 type Orientation = 'horizontal' | 'vertical';
 type Variant = 'solid' | 'dashed' | 'dotted';
 type Size = 'xs' | 'sm' | 'md' | 'lg';
@@ -13,50 +11,31 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
   readonly size?: Size;
 }
 
-const VARIANT_CLASSES: Record<Variant, string> = {
-  solid: 'border-solid',
-  dashed: 'border-dashed',
-  dotted: 'border-dotted',
-};
-
-const HORIZONTAL_SIZE_CLASSES: Record<Size, string> = {
-  xs: 'border-t-[0.5px]',
-  sm: 'border-t',
-  md: 'border-t-2',
-  lg: 'border-t-[3px]',
-};
-
-const VERTICAL_SIZE_CLASSES: Record<Size, string> = {
-  xs: 'border-l-[0.5px]',
-  sm: 'border-l',
-  md: 'border-l-2',
-  lg: 'border-l-[3px]',
-};
+/** Border weight by size — the rule is one edge, so the weight is one number. */
+const WEIGHT: Record<Size, number> = { xs: 0.5, sm: 1, md: 2, lg: 3 };
 
 // gui's Separator wearing the Lux border scale. `vertical` is the primitive's
-// own orientation variant, so it lays out correctly on native too; the Tailwind
-// classes only carry border weight and dash pattern.
+// own orientation variant, so it lays out correctly on native too; weight and
+// dash pattern are props rather than classes for the same reason.
 export const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
   function Separator(
-    { orientation = 'horizontal', variant = 'solid', size = 'sm', className, ...rest },
+    { orientation = 'horizontal', variant = 'solid', size = 'sm', ...rest },
     ref,
   ) {
-    const isVertical = orientation === 'vertical';
+    const vertical = orientation === 'vertical';
 
     return (
       <GuiSeparator
         ref={ ref as never }
-        vertical={ isVertical }
+        vertical={ vertical }
         role="separator"
         aria-orientation={ orientation }
-        className={ cn(
-          'border-[var(--color-border-divider)]',
-          'border-0',
-          VARIANT_CLASSES[variant],
-          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
-          isVertical ? 'self-stretch h-auto w-0' : 'w-full',
-          className,
-        ) }
+        borderWidth={ 0 }
+        borderStyle={ variant }
+        borderColor={ 'var(--color-border-divider)' as never }
+        { ...(vertical ?
+          { borderLeftWidth: WEIGHT[size], alignSelf: 'stretch', height: 'auto', width: 0 } :
+          { borderTopWidth: WEIGHT[size], width: '100%' }) }
         { ...(rest as object) }
       />
     );