@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/popover/Popover.tsx

@@ -1,269 +0,0 @@
-import React, {
-  FC,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef
-} from 'react'
-import { createPortal } from 'react-dom'
-import classNames from 'classnames'
-import { mergeProps, useDialog, useOverlayPosition, useOverlayTrigger } from 'react-aria'
-import { useOverlayTriggerState } from 'react-stately'
-import { Transition } from 'react-transition-group'
-
-import {
-  getOverlayArrowStyle,
-  getOverlayTransitionClass,
-  useFloatingOverlay,
-  useForkedRef
-} from '../../hooks'
-import { Placement, resolveDataPlacement, toAriaPlacement } from '../../utils/overlayPlacement'
-import { asTriggerElement, getTriggerRef } from '../../utils/triggerElement'
-
-interface PopoverPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
-  arrowProps: HTMLAttributes<HTMLDivElement>
-  content: ReactNode | string
-  overlayRef: RefObject<HTMLDivElement | null>
-  overlayTriggerProps: HTMLAttributes<HTMLDivElement>
-  title?: ReactNode | string
-}
-
-// A distinct component (rather than inline JSX from the `Transition` render prop) so
-// `useDialog`'s own mount-focus effect — which only fires on this component's mount, not on
-// `overlayRef.current` merely becoming non-null — actually runs each time the popover opens.
-// `Transition`'s `unmountOnExit` genuinely unmounts and remounts this component on every
-// open, giving `useDialog` a fresh mount each time.
-const PopoverPanel = ({
-  arrowProps,
-  content,
-  overlayRef,
-  overlayTriggerProps,
-  title,
-  ...rest
-}: PopoverPanelProps) => {
-  const { dialogProps, titleProps } = useDialog({}, overlayRef)
-
-  return (
-    <div {...mergeProps(overlayTriggerProps, dialogProps, rest)} ref={overlayRef}>
-      <div className="popover-arrow" {...arrowProps} style={getOverlayArrowStyle(arrowProps)}></div>
-      {title && (
-        <div className="popover-header" {...titleProps}>
-          {title}
-        </div>
-      )}
-      <div className="popover-body">{content}</div>
-    </div>
-  )
-}
-
-export interface PopoverProps extends Pick<
-  HTMLAttributes<HTMLDivElement>,
-  'aria-label' | 'aria-labelledby'
-> {
-  children: ReactElement
-  /**
-   * Content node for your component.
-   */
-  content: ReactNode | string
-  /**
-   * Offset of the popover relative to its target, as `[crossAxis, mainAxis]`.
-   */
-  offset?: [number, number]
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Title node for your component.
-   */
-  title?: ReactNode | string
-  /**
-   * Describes the preferred placement of your component. Chassis will flip it to keep it in
-   * view.
-   */
-  placement?: Placement
-  /**
-   * Toggle the visibility of popover component.
-   */
-  visible?: boolean
-}
-
-export const Popover: FC<PopoverProps> = ({
-  children,
-  content,
-  placement = 'right',
-  offset: offsetProp = [0, 8],
-  onHide,
-  onShow,
-  title,
-  visible,
-  ...rest
-}) => {
-  const arrowRef = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLElement | null>(null)
-  const floatingRef = useRef<HTMLDivElement>(null)
-
-  // `cloneElement`'s config replaces the child's own `ref` outright rather than merging with it,
-  // so capturing the trigger node has to be forked with whatever ref the caller already put on
-  // that child — otherwise `<Popover><Button ref={mine} /></Popover>` silently never populates
-  // `mine`.
-  const setTriggerRef = useCallback((node: HTMLElement | null) => {
-    triggerRef.current = node
-  }, [])
-  const triggerElement = asTriggerElement(children)
-  const forkedTriggerRef = useForkedRef<HTMLElement>(setTriggerRef, getTriggerRef(triggerElement))
-
-  const state = useOverlayTriggerState({ defaultOpen: !!visible })
-  const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    triggerProps: { onPress: _onPress, ...triggerProps },
-    overlayProps: overlayTriggerProps
-  } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef)
-
-  const portalContainer = useFloatingOverlay({
-    close: state.close,
-    isOpen: state.isOpen,
-    open: state.open,
-    onHide,
-    onShow,
-    triggerRef,
-    visible
-  })
-
-  // Escape should always close the popover, regardless of where focus currently is — a
-  // mouse-opened popover leaves focus on the trigger, not inside the panel. Mirrors
-  // `Menu.tsx`'s own window-level Escape handling. `onExited` below already returns focus to the
-  // trigger once the exit transition finishes, so this doesn't need to do that itself.
-  useEffect(() => {
-    if (!state.isOpen) return undefined
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape') return
-      state.close()
-    }
-
-    window.addEventListener('keydown', handleEscape)
-    return () => window.removeEventListener('keydown', handleEscape)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.isOpen, state.close])
-
-  // Deferred so the click that opened the popover doesn't immediately close it again — mirrors
-  // `Menu.tsx`'s own outside-click handling.
-  useEffect(() => {
-    if (!state.isOpen) return undefined
-
-    const handleDismiss = (event: MouseEvent) => {
-      const target = event.target as Node
-      if (triggerRef.current?.contains(target)) return
-      if (floatingRef.current?.contains(target)) return
-      state.close()
-    }
-
-    const id = window.setTimeout(() => {
-      window.addEventListener('click', handleDismiss)
-    })
-
-    return () => {
-      window.clearTimeout(id)
-      window.removeEventListener('click', handleDismiss)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.isOpen, state.close])
-
-  const {
-    overlayProps,
-    arrowProps,
-    placement: resolvedPlacement
-  } = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: floatingRef,
-    placement: toAriaPlacement(placement),
-    offset: offsetProp[1],
-    crossOffset: offsetProp[0],
-    arrowSize: 8,
-    arrowRef,
-    isOpen: state.isOpen,
-    // `useOverlayPosition` closes on any window scroll via a backward-compat `WeakMap` that
-    // `useOverlayTrigger` populates for `triggerRef.current` above. Passing `null` opts out so
-    // the popover repositions with its trigger instead of vanishing — matching
-    // `Autocomplete`/`Combobox`, neither of which is wired into that map.
-    onClose: null
-  })
-
-  const floatingStyle: React.CSSProperties = {
-    position: overlayProps.style?.position as React.CSSProperties['position'],
-    top: overlayProps.style?.top,
-    left: overlayProps.style?.left
-  }
-  const placementAttr = resolveDataPlacement(placement, resolvedPlacement)
-
-  return (
-    <>
-      {/* `mergeProps` chains the child's own `onClick` ahead of this one, so this no longer
-          calls `children.props.onClick` itself the way it did when it spread `triggerProps`
-          raw — doing both would fire the caller's handler twice per click. */}
-      {React.cloneElement(triggerElement, {
-        ...mergeProps(triggerElement.props, triggerProps, { onClick: () => state.toggle() }),
-        ref: forkedTriggerRef
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
-          <Transition
-            in={state.isOpen}
-            mountOnEnter
-            nodeRef={floatingRef}
-            onExited={() => {
-              const trigger = triggerRef.current
-              if (!trigger || !document.contains(trigger)) return
-              // Only reclaim focus when the popover still owns it, or when nothing does.
-              // `useDialog` moves focus into the panel on open, so the panel still holds it here
-              // for an Escape/inside close (`onExited` runs before `unmountOnExit` detaches the
-              // node, so this reads the pre-removal state); an outside click on plain page
-              // content instead leaves focus loose on `<body>`. Both are worth restoring. Any
-              // other active element means the user deliberately put focus there — dismissing by
-              // clicking another control, or the app closing the popover via `visible` while
-              // they were typing somewhere else — and this used to steal it straight back off
-              // them. Mirrors react-aria's own `shouldRestoreFocus` condition.
-              const active = document.activeElement
-              const focusIsLoose = !active || active === document.body
-              const focusIsInPanel = !!active && !!floatingRef.current?.contains(active)
-              if (!focusIsLoose && !focusIsInPanel) return
-              trigger.focus()
-            }}
-            timeout={{
-              enter: 0,
-              exit: 200
-            }}
-            unmountOnExit
-          >
-            {(transitionState) => {
-              const transitionClass = getOverlayTransitionClass(transitionState)
-              return (
-                <PopoverPanel
-                  className={classNames('popover cx-popover-auto', transitionClass)}
-                  data-cx-placement={placementAttr}
-                  style={floatingStyle}
-                  overlayTriggerProps={overlayTriggerProps}
-                  overlayRef={floatingRef}
-                  arrowProps={arrowProps}
-                  title={title}
-                  content={content}
-                  {...rest}
-                />
-              )
-            }}
-          </Transition>,
-          portalContainer ?? document.body
-        )}
-    </>
-  )
-}
-
-Popover.displayName = 'Popover'

package/src/components/popover/index.ts

@@ -1,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Popover } from './Popover'
-export type { PopoverProps } from './Popover'

package/src/components/progress/Progress.tsx

@@ -1,154 +0,0 @@
-import React, {
-  CSSProperties,
-  ElementType,
-  ForwardRefRenderFunction,
-  ReactElement,
-  ReactNode,
-  useId
-} from 'react'
-import classNames from 'classnames'
-
-import { ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { ProgressBar } from './ProgressBar'
-
-type ProgressStyle = CSSProperties & {
-  '--cx-height'?: string
-}
-
-type ProgressOwnProps<C extends ElementType> = {
-  /**
-   * Use to animate the stripes right to left via CSS3 animations.
-   */
-  animated?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Sets the height of the component, via the `--cx-height` custom property. If you set that
-   * value the inner bar (and the striped pattern's tile size) automatically resizes accordingly.
-   */
-  height?: number
-  /**
-   * Shows the current value as text inside the bar, independently of `showValue` — combine both
-   * to get a `label` + `showValue` caption above the bar alongside an `inlineValue` reading
-   * inside it.
-   */
-  inlineValue?: boolean
-  /**
-   * A text label describing the progress. Rendered in a caption row above the bar. Also used as
-   * the default accessible name when no `aria-label`/`aria-labelledby` is supplied.
-   */
-  label?: ReactNode
-  /**
-   * Shows the current value as text in the caption row above the bar, alongside `label` when
-   * both are set, or alone otherwise. Use `inlineValue` to show it inside the bar instead.
-   */
-  showValue?: boolean
-  /**
-   * Adds a diagonal stripe pattern over the bar's background.
-   */
-  striped?: boolean
-  /**
-   * The percent to progress the ProgressBar (out of 100).
-   */
-  value?: number
-}
-
-export type ProgressProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ProgressOwnProps<C>
->
-
-type ProgressComponent = (<C extends ElementType = 'div'>(
-  props: ProgressProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ProgressRender<C extends ElementType = 'div'>(
-  {
-    'aria-label': ariaLabel,
-    animated,
-    children,
-    className,
-    color,
-    component,
-    height,
-    inlineValue,
-    label,
-    showValue,
-    striped,
-    style,
-    value = 0,
-    ...rest
-  }: ProgressProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('progress', className)
-  const clampedValue = Math.min(100, Math.max(0, value))
-
-  const barChildren =
-    children !== undefined ? children : inlineValue ? `${clampedValue}%` : undefined
-  const hasCaption = Boolean(label || showValue)
-
-  const labelId = useId()
-  const isNodeLabel = label != null && typeof label !== 'string'
-
-  const _style: ProgressStyle = { ...style }
-  if (height !== undefined) _style['--cx-height'] = `${height}px`
-
-  const progressElement = (
-    <Component
-      {...rest}
-      className={_className}
-      role="progressbar"
-      aria-valuenow={clampedValue}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}
-      aria-labelledby={!ariaLabel && isNodeLabel ? labelId : undefined}
-      style={_style}
-      ref={ref}
-    >
-      <ProgressBar animated={animated} color={color} striped={striped} value={clampedValue}>
-        {barChildren}
-      </ProgressBar>
-    </Component>
-  )
-
-  if (!hasCaption) return progressElement
-
-  return (
-    <div className="d-flex flex-column gap-xs">
-      <div
-        className={classNames('d-flex', label ? 'justify-content-between' : 'justify-content-end')}
-      >
-        {label ? (
-          <span className="font-strong" id={isNodeLabel ? labelId : undefined}>
-            {label}
-          </span>
-        ) : null}
-        {showValue ? <span className="font-strong">{clampedValue}%</span> : null}
-      </div>
-      {progressElement}
-    </div>
-  )
-}
-
-export const Progress = createPolymorphicComponent<ProgressComponent>(
-  ProgressRender as ForwardRefRenderFunction<Element, ProgressProps<ElementType>>,
-  'Progress'
-)

package/src/components/progress/ProgressBar.tsx

@@ -1,88 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ProgressBarOwnProps<C extends ElementType> = {
-  /**
-   * Use to animate the stripes right to left via CSS3 animations.
-   */
-  animated?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Adds a diagonal stripe pattern over the bar's background.
-   */
-  striped?: boolean
-  /**
-   * The percent to progress the ProgressBar.
-   */
-  value?: number
-}
-
-export type ProgressBarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ProgressBarOwnProps<C>
->
-
-type ProgressBarComponent = (<C extends ElementType = 'div'>(
-  props: ProgressBarProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ProgressBarRender<C extends ElementType = 'div'>(
-  {
-    children,
-    animated,
-    className,
-    color,
-    component,
-    striped,
-    style,
-    value = 0,
-    ...rest
-  }: ProgressBarProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const clampedValue = Math.min(100, Math.max(0, value))
-  const _className = classNames(
-    'progress-bar',
-    color && `bg-${color} fg-contrast`,
-    {
-      striped,
-      animated
-    },
-    className
-  )
-
-  return (
-    <Component
-      {...rest}
-      className={_className}
-      style={{ width: `${clampedValue}%`, ...style }}
-      ref={ref}
-    >
-      <span className="mx-2xs">{children}</span>
-    </Component>
-  )
-}
-
-export const ProgressBar = createPolymorphicComponent<ProgressBarComponent>(
-  ProgressBarRender as ForwardRefRenderFunction<Element, ProgressBarProps<ElementType>>,
-  'ProgressBar'
-)

package/src/components/progress/index.ts

@@ -1,8 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Progress } from './Progress'
-export type { ProgressProps } from './Progress'
-export { ProgressBar } from './ProgressBar'
-export type { ProgressBarProps } from './ProgressBar'

package/src/components/radio/Radio.tsx

@@ -1,98 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, useContext, useRef } from 'react'
-import classNames from 'classnames'
-import { AriaRadioProps, useRadio } from 'react-aria'
-
-import { useForkedRef } from '../../hooks'
-import { ContextColor } from '../../types'
-import { validationClassName } from '../../utils/validationClassName'
-
-import { RadioGroupContext } from './context'
-import { ButtonObject, renderFormCheck } from '../form/renderFormCheck'
-
-export interface RadioProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'defaultChecked' | 'onChange' | 'size'
-> {
-  /**
-   * Create button-like radios. Combine with `<RadioGroup>` to build radio toggle-button groups.
-   */
-  button?: ButtonObject
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the radio indicator to one of Chassis context colors. Ignored when `button` is set.
-   */
-  color?: ContextColor
-  /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-   */
-  id?: string
-  /**
-   * The element represents a caption for a component.
-   *
-   * Children are accepted as an alias for this prop — `label` wins when both are given.
-   * react-aria, which backs this component, calls the same thing `children`; this package renames
-   * it to `label`, and honouring both means the shape React developers reach for first still
-   * names the control instead of silently producing an unlabelled one.
-   */
-  label?: ReactNode
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * The value of the radio button, used to identify it within its `<RadioGroup>`.
-   */
-  value: string
-}
-
-// `<Radio>` must be rendered inside a `<RadioGroup>` — react-aria has no standalone
-// radio hook, only useRadio(props, RadioGroupState, ref), because a lone radio with no group is
-// not a meaningful accessible control (see https://chassis-ui.com/css/docs/forms/checkbox-radio).
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ button, children, className, color, disabled, id, label, size, ...rest }, ref) => {
-    const group = useContext(RadioGroupContext)
-
-    if (!group) {
-      throw new Error('Radio must be rendered inside a RadioGroup.')
-    }
-
-    const { state: groupState, valid } = group
-    const invalid = groupState.isInvalid
-
-    const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, inputRef)
-
-    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
-    // shape React developers reach for first (`<Radio>Label</Radio>`) names the control instead of
-    // being silently dropped — see the note on `label` in `RadioProps`.
-    const resolvedLabel = label ?? children
-
-    const { inputProps } = useRadio(
-      {
-        ...rest,
-        children: resolvedLabel,
-        isDisabled: disabled
-      } as AriaRadioProps,
-      groupState,
-      inputRef
-    )
-
-    const inputClassName = classNames(validationClassName(invalid, valid))
-
-    return renderFormCheck({
-      button,
-      className,
-      color,
-      input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
-      invalid,
-      label: resolvedLabel,
-      size,
-      valid
-    })
-  }
-)
-
-Radio.displayName = 'Radio'