@chassis-ui/react 0.2.0 → 0.3.0

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -1,9 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react'
-
-// `useLayoutEffect` logs a console warning ("does nothing on the server") whenever it's called
-// during SSR, even though no effect — layout or otherwise — ever actually runs server-side;
-// React only cares that the hook itself was invoked under `renderToString`/
-// `renderToPipeableStream`. Swapping to `useEffect` in that environment silences the warning with
-// no behavior change, since neither hook runs server-side anyway — this only picks which one
-// no-ops there.
-export const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect

package/src/hooks/useModal.ts

@@ -1,9 +0,0 @@
-import { useContext } from 'react'
-import { ModalContext, ModalContextProps } from '../components/modal/Modal'
-
-export type UseModalResult = ModalContextProps
-
-// Reach the enclosing `Modal`'s close handler from anywhere in its composed markup — e.g. to
-// close it from a plain `Button` placed in a `ModalFooter`. Only meaningful inside a `Modal`;
-// outside one it returns a no-op `close`.
-export const useModal = (): UseModalResult => useContext(ModalContext)

package/src/hooks/useNotification.ts

@@ -1,10 +0,0 @@
-import { useContext } from 'react'
-import { NotificationContext, NotificationContextProps } from '../components/notification/context'
-
-export type UseNotificationResult = NotificationContextProps
-
-// Reach the enclosing `Notification`'s dismiss handler from anywhere in its composed markup —
-// e.g. to close it from a plain `Button` placed alongside other `actions`, instead of the
-// built-in `dismissible` close button. Only meaningful inside a `Notification`; outside one it
-// returns a no-op `close`.
-export const useNotification = (): UseNotificationResult => useContext(NotificationContext)

package/src/hooks/useOverlayPlacement.ts

@@ -1,93 +0,0 @@
-import { CSSProperties, HTMLAttributes, RefObject } from 'react'
-import { mergeProps, useOverlay, useOverlayPosition } from 'react-aria'
-import { OverlayTriggerState } from 'react-stately'
-
-import { resolveDataPlacement, toAriaPlacement } from '../utils/overlayPlacement'
-
-interface UseOverlayPlacementProps {
-  overlayRef: RefObject<HTMLElement | null>
-  state: OverlayTriggerState
-  triggerRef: RefObject<HTMLElement | null>
-}
-
-interface UseOverlayPlacementResult {
-  overlayStyle: CSSProperties
-  placementAttr: string
-  // Re-typed as plain HTML attributes for the same `rollup-plugin-dts` portability reason as
-  // before (see git history) — react-aria's own return type pulls in a `FocusableElement`
-  // reference the bundled `.d.ts` can't always resolve a portable name for.
-  overlayDismissProps: HTMLAttributes<HTMLElement>
-}
-
-// Shared by `DatePicker` and `DateRangePicker` — both position their calendar overlay the same
-// way (`bottom-start`, 2px offset, closing on Escape, on any click outside it, or when focus leaves
-// the trigger group). Lives in `hooks/` rather than `components/datepicker/` like every other hook
-// in this library, regardless of how many components use it — see `useFormField` for the same
-// treatment despite having many more callers.
-//
-// Built directly on `useOverlay` + `useOverlayPosition` rather than the higher-level `usePopover`
-// combo hook. `usePopover` computes its own internal `onClose` for `useOverlayPosition` from
-// `isNonModal` (`isNonModal && !isSubmenu ? state.close : null`, neither overridable by a caller),
-// and `isNonModal: true` — needed so the calendar doesn't lock page scroll or aria-hide the rest of
-// the page, since it was never meant to be modal — unconditionally arms `useOverlayPosition`'s
-// close-on-any-window-scroll listener (`useCloseOnScroll`, keyed off `onClose !== null`) as a side
-// effect. That's wrong here: the calendar should reposition with its trigger when the page scrolls,
-// not disappear. Calling the two lower-level hooks directly, with `onClose: null` passed to
-// `useOverlayPosition` alone, gets the positioning and Escape/blur dismissal this calendar needs
-// without arming that listener — the same fix already applied to `Autocomplete`/`Combobox`/
-// `Menu`/`MenuSubmenu`/`Popover`, none of which use `usePopover` either, all for this same reason.
-export const useOverlayPlacement = ({
-  overlayRef,
-  state,
-  triggerRef
-}: UseOverlayPlacementProps): UseOverlayPlacementResult => {
-  // The trigger's own toggle button lives inside `triggerRef`, not `overlayRef` — without this,
-  // focus moving there when the button is pressed would count as an "outside" interaction and
-  // close the overlay, which the button's own `onPress` then immediately reopens on click.
-  const shouldCloseOnInteractOutside = (element: Element) => !triggerRef.current?.contains(element)
-
-  // Escape key + outside-interaction dismissal — the two pieces of `usePopover`'s bundled behavior
-  // this calendar still needs. `isDismissable: true` — *not* `usePopover`'s own default of `false`
-  // whenever `isNonModal` is true — is required to actually get outside-*click* dismissal:
-  // `useOverlay`'s `shouldCloseOnBlur` only closes on a focus-based blur, and explicitly bails when
-  // the click target isn't focusable (`relatedTarget` is `null`, i.e. focus lands on `document.body`,
-  // as it does for an ordinary click on plain page content) — its own source comments that this case
-  // is intentionally left to the separate pointerdown-outside listener `useOverlay` only wires up
-  // when `isDismissable` is true. Leaving it at the `usePopover`-matching default therefore silently
-  // drops the single most common way users try to dismiss a popover.
-  const { overlayProps } = useOverlay(
-    {
-      isDismissable: true,
-      isOpen: state.isOpen,
-      onClose: state.close,
-      shouldCloseOnBlur: true,
-      shouldCloseOnInteractOutside
-    },
-    overlayRef
-  )
-
-  const { overlayProps: positionProps, placement: resolvedPlacement } = useOverlayPosition({
-    isOpen: state.isOpen,
-    offset: 2,
-    // Opts out of `useOverlayPosition`'s own close-on-any-window-scroll listener — see this hook's
-    // own comment above. Leaving this `undefined` would NOT disable it: `useCloseOnScroll` only
-    // early-returns on `onClose === null`, not merely falsy.
-    onClose: null,
-    overlayRef,
-    placement: toAriaPlacement('bottom-start'),
-    targetRef: triggerRef
-  })
-
-  const { style: overlayPositionStyle, ...overlayDismissProps } = mergeProps(
-    overlayProps,
-    positionProps
-  )
-  const overlayStyle: CSSProperties = {
-    position: overlayPositionStyle?.position as CSSProperties['position'],
-    top: overlayPositionStyle?.top,
-    left: overlayPositionStyle?.left
-  }
-  const placementAttr = resolveDataPlacement('bottom-start', resolvedPlacement)
-
-  return { overlayStyle, placementAttr, overlayDismissProps }
-}

package/src/hooks/usePagination.ts

@@ -1,89 +0,0 @@
-import { MouseEvent, RefObject, useEffect, useRef } from 'react'
-
-import { focusRedirect } from '../utils/focusRedirect'
-
-export interface UsePaginationOptions {
-  /**
-   * Whether the Previous control is currently disabled.
-   */
-  prevDisabled: boolean
-  /**
-   * Whether the Next control is currently disabled.
-   */
-  nextDisabled: boolean
-  /**
-   * Called when Previous is clicked, before the state change that may disable it.
-   */
-  onPrev: () => void
-  /**
-   * Called when Next is clicked, before the state change that may disable it.
-   */
-  onNext: () => void
-}
-
-export interface UsePaginationResult<T extends HTMLElement = HTMLButtonElement> {
-  // `RefObject<T | null>`, not `RefObject<T>`: these come from `useRef<T>(null)`, so `.current`
-  // really is null before mount (and whenever the control isn't rendered — a hand-composed
-  // pagination may omit Prev/Next entirely). Declaring the non-null form let a consumer write
-  // `prevRef.current.focus()` with no type error and crash at runtime.
-  prevRef: RefObject<T | null>
-  nextRef: RefObject<T | null>
-  handlePrevClick: (event: MouseEvent<T>) => void
-  handleNextClick: (event: MouseEvent<T>) => void
-}
-
-interface Pending {
-  from: 'prev' | 'next'
-  // A `click` fired by real pointer activation has `detail >= 1`; one fired by keyboard
-  // activation (Enter/Space on a focused button) has `detail === 0`.
-  viaPointer: boolean
-}
-
-// Native `disabled` buttons are blurred by the browser the instant they're disabled. Clicking a
-// Prev/Next control into the first/last page disables that very control, silently dropping focus
-// to `<body>`. Wire `handlePrevClick`/`handleNextClick` up as each control's `onClick` — they call
-// `onPrev`/`onNext` and redirect focus to the still-enabled sibling in one step, so callers don't
-// hand-wrap their own click handler around a separate mark-then-focus call.
-// Works for `Pagination`'s built-in smart mode and for hand-composed Prev/Next controls alike —
-// pass the element type of whatever you're attaching the refs to (`PaginationItem` defaults to
-// an `HTMLButtonElement`, but renders an `HTMLAnchorElement` when given `href` or `component`).
-export function usePagination<T extends HTMLElement = HTMLButtonElement>({
-  prevDisabled,
-  nextDisabled,
-  onPrev,
-  onNext
-}: UsePaginationOptions): UsePaginationResult<T> {
-  const prevRef = useRef<T>(null)
-  const nextRef = useRef<T>(null)
-  const pending = useRef<Pending | null>(null)
-
-  // Deliberately no dependency array: this must run after every render, not just ones where
-  // prevDisabled/nextDisabled change value. A Prev/Next click that doesn't cross a boundary
-  // (e.g. moving between two enabled middle pages) leaves both booleans unchanged, so a
-  // dependency-gated effect would skip and leave `pending` stale — a later, unrelated render
-  // that does flip one of the booleans (e.g. jumping straight to the first/last page via a
-  // page-number click) would then wrongly consume that stale mark and redirect focus.
-  useEffect(() => {
-    const from = pending.current
-    pending.current = null
-    if (!from) return
-    if (from.from === 'prev' && prevDisabled) {
-      focusRedirect(nextRef.current, from.viaPointer)
-    } else if (from.from === 'next' && nextDisabled) {
-      focusRedirect(prevRef.current, from.viaPointer)
-    }
-  })
-
-  return {
-    prevRef,
-    nextRef,
-    handlePrevClick: (event) => {
-      pending.current = { from: 'prev', viaPointer: event.detail !== 0 }
-      onPrev()
-    },
-    handleNextClick: (event) => {
-      pending.current = { from: 'next', viaPointer: event.detail !== 0 }
-      onNext()
-    }
-  }
-}

package/src/hooks/useToast.ts

@@ -1,9 +0,0 @@
-import { useContext } from 'react'
-import { ToastContext, ToastContextProps } from '../components/toast/context'
-
-export type UseToastResult = ToastContextProps
-
-// Reach the enclosing `Toast`'s dismiss handler from anywhere in its composed markup — e.g. to
-// close it from a plain `Button` placed in a `ToastFooter`, instead of a dedicated close
-// component. Only meaningful inside a `Toast`; outside one it returns a no-op `close`.
-export const useToast = (): UseToastResult => useContext(ToastContext)

package/src/hooks/useToastRegionQueue.ts

@@ -1,27 +0,0 @@
-import { ForwardedRef, useRef } from 'react'
-import { ToastRegionAria, useToastRegion } from 'react-aria'
-import { ToastQueue, ToastState, useToastQueue } from 'react-stately'
-
-import { useForkedRef } from './useForkedRef'
-
-export interface UseToastRegionQueueResult<T> {
-  forkedRef: ReturnType<typeof useForkedRef<HTMLDivElement>>
-  regionProps: ToastRegionAria['regionProps']
-  state: ToastState<T>
-}
-
-// Shared setup for `Toaster`/`NotificationStack` — both otherwise duplicated this near-verbatim:
-// subscribe to a `ToastQueue` singleton, wire up react-aria's toast-region accessibility
-// plumbing, and fork the caller's ref onto the same node the region hook needs. Differs only in
-// which queue is passed.
-export function useToastRegionQueue<T>(
-  queue: ToastQueue<T>,
-  ref: ForwardedRef<HTMLDivElement>
-): UseToastRegionQueueResult<T> {
-  const state = useToastQueue(queue)
-  const regionRef = useRef<HTMLDivElement>(null)
-  const { regionProps } = useToastRegion({}, state, regionRef)
-  const forkedRef = useForkedRef(ref, regionRef)
-
-  return { forkedRef, regionProps, state }
-}