@chassis-ui/react 0.1.2 → 0.2.0

package/src/utils/renderMenuItemContent.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-import { Icon } from '../components/icon/Icon'
+import { IconSlot } from './iconSlot'
 
 export interface MenuItemContentDef {
   /**
@@ -16,13 +16,9 @@ export interface MenuItemContentDef {
    */
   description?: ReactNode
   /**
-   * Renders a `.menu-item-check` at the trailing edge when true.
+   * Renders a `.menu-item-check` at the trailing edge when true — `IconProvider`'s `check` icon.
    */
   selected?: boolean
-  /**
-   * Icon name for the selected-state check. Defaults to chassis-css's own doc example.
-   */
-  checkIcon?: string
 }
 
 // Chassis-css defines identical markup for rich item content in both Menu and Combobox items
@@ -36,8 +32,7 @@ export const renderMenuItemContent = ({
   icon,
   label,
   description,
-  selected,
-  checkIcon = 'check-solid'
+  selected
 }: MenuItemContentDef): ReactNode => {
   if (icon == null && description == null && !selected) return label
 
@@ -56,7 +51,7 @@ export const renderMenuItemContent = ({
       ) : (
         label
       )}
-      {selected && <Icon name={checkIcon} className="menu-item-check" />}
+      {selected && <IconSlot icon="check" className="menu-item-check" />}
     </>
   )
 }

package/src/utils/slot.tsx

@@ -0,0 +1,78 @@
+import React, {
+  cloneElement,
+  createContext,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  Ref,
+  useContext,
+  version
+} from 'react'
+import { mergeProps } from 'react-aria'
+
+import { useForkedRef } from '../hooks/useForkedRef'
+import { devWarning } from './devWarning'
+
+// Backs the `asChild` prop every polymorphic component accepts (see `createPolymorphicComponent`).
+// The component renders `Slot` as its `component`, exactly like any other component reference;
+// `Slot` then renders the caller's child element in its place, with the props the component
+// computed (className, handlers, ARIA attributes, ref) merged onto it.
+//
+// The child element travels through context rather than a prop because a render function spreads
+// its `rest` props onto `component` in its own way (some filter them, some don't forward every
+// one) — context reaches `Slot` no matter how the render function wires it up. `Slot` resets the
+// context for its own subtree, so a polymorphic component nested *inside* the child doesn't pick
+// up the outer one's element.
+type SlotElement = ReactElement<Record<string, unknown>>
+
+const SlotContext = createContext<SlotElement | null>(null)
+
+export const SlotProvider = SlotContext.Provider
+
+// React 19 moved `ref` onto `props` (and warns on reading `element.ref`); React 18 only has
+// `element.ref`. The package supports both (`peerDependencies.react: >=18`).
+const REACT_19 = parseInt(version, 10) >= 19
+
+function getElementRef(element: SlotElement): Ref<unknown> | undefined {
+  return REACT_19
+    ? (element.props as { ref?: Ref<unknown> }).ref
+    : (element as unknown as { ref?: Ref<unknown> }).ref
+}
+
+// `Record` rather than a declared prop list: `Slot` forwards whatever the render function hands it.
+type SlotProps = Record<string, unknown>
+
+export const Slot = forwardRef<unknown, SlotProps>(function Slot({ children, ...slotProps }, ref) {
+  const element = useContext(SlotContext)
+  const forkedRef = useForkedRef(ref, element ? getElementRef(element) : undefined)
+  if (!element) return null
+
+  return (
+    <SlotContext.Provider value={null}>
+      {cloneElement(
+        element,
+        // react-aria's `mergeProps`: the child's own props win over the component's, except that
+        // classNames concatenate, event handlers chain (the component's first), and ids merge.
+        { ...mergeProps(slotProps, element.props), ref: forkedRef } as Record<string, unknown>,
+        children as ReactNode
+      )}
+    </SlotContext.Provider>
+  )
+})
+
+// The single element `asChild` renders in place of the component's own element, or `null` (with
+// a dev warning) when `children` isn't exactly one — the component then falls back to rendering
+// its default element, so a misuse degrades to a working, if unstyled-as-intended, UI.
+export function getSlotChild(children: ReactNode, displayName: string): SlotElement | null {
+  if (isValidElement<Record<string, unknown>>(children) && children.type !== Fragment) {
+    return children
+  }
+  devWarning(
+    true,
+    `${displayName}: \`asChild\` expects exactly one React element as its child (not text, a ` +
+      `fragment, or several elements); rendering the default element instead.`
+  )
+  return null
+}

package/src/utils/tableClassName.ts

@@ -0,0 +1,93 @@
+import classNames from 'classnames'
+
+import { Breakpoint, ContextColor } from '../types'
+
+// The styling props `Table` and `StaticTable` share. Kept in one place so the two can't drift into
+// applying different chassis-css classes for the same prop — `StaticTable` exists to be the
+// zero-JS twin of `Table`'s look, so a prop meaning something different on each would defeat it.
+export interface TableStyleProps {
+  /**
+   * Set the vertical alignment of cell content.
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * Add borders on all sides of the table and cells.
+   */
+  bordered?: boolean
+  /**
+   * Remove borders on all sides of the table and cells.
+   */
+  borderless?: boolean
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Sets the color of the component.
+   */
+  color?: ContextColor
+  /**
+   * Enable a hover state on table rows.
+   */
+  hover?: boolean
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint.
+   */
+  responsive?: boolean | Breakpoint
+  /**
+   * Make table more compact by cutting all cell padding.
+   */
+  sm?: boolean
+  /**
+   * Convert rows into stacked label/value blocks below a container width, for tables with too
+   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a
+   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set
+   * separately, since stacking needs the same `.table-responsive` container-query ancestor.
+   */
+  stacked?: boolean | Breakpoint
+  /**
+   * Add zebra-striping to table rows.
+   */
+  striped?: boolean
+}
+
+export function tableClassName({
+  align,
+  bordered,
+  borderless,
+  className,
+  color,
+  hover,
+  sm,
+  stacked,
+  striped
+}: TableStyleProps): string | undefined {
+  return (
+    classNames(
+      'table',
+      color,
+      {
+        [`align-${align}`]: align,
+        bordered,
+        borderless,
+        hoverable: hover,
+        sm,
+        stacked: stacked === true,
+        striped
+      },
+      typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,
+      className
+    ) || undefined
+  )
+}
+
+// `undefined` when the table needs no wrapper at all. Stacking needs the same `.table-responsive`
+// container-query ancestor as horizontal scrolling, so `stacked` alone still gets one.
+export function tableWrapperClassName({
+  responsive,
+  stacked
+}: Pick<TableStyleProps, 'responsive' | 'stacked'>): string | undefined {
+  if (!responsive && !stacked) return undefined
+  if (!responsive || responsive === true) return 'table-responsive'
+  return `max-${responsive}:table-responsive`
+}