@zyncat/ui 0.11.0 → 0.13.0

package/dist/support-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/compound/support-rail/SupportRail.tsx"],"names":[],"mappings":"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","file":"support-rail.js","sourcesContent":["'use client';\n\nimport './support-rail.css';\n\nimport {\n  useId,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n} from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { startDrag, type Layer, type PanInfo } from '../../../engine';\nimport { Motion } from '../../../motion/element';\nimport { Presence } from '../../../motion/presence';\nimport { usePresence } from '../../../motion/presence-context';\nimport type { SupportRailStyle } from '../../../tokens/component-styles.generated';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useReturnFocus } from '../../internal/overlay/focus';\nimport { useOutsidePress, useOverlayEntry } from '../../internal/overlay/layer';\nimport type { SupportAction } from '../../internal/support/types';\nimport { cx } from '../../internal/utils/cx';\n\nexport type { SupportAction };\n\nconst RUBBER_BAND_DIVISOR = 6;\nconst DISMISS_DISTANCE_PX = 88;\nconst DISMISS_VELOCITY_PX_PER_S = 500;\nconst FLICK_DISTANCE_PX = 24;\nconst CONTENT_FADE_IN_DELAY_RATIO = 0.55;\nconst NEUTRAL_RATIO = 1;\nconst STAGGER_STEPS_MAX = 8;\n\nconst DRAG_PROPERTY = '--support-rail-drag';\nconst COLLAPSE_X_PROPERTY = '--support-rail-collapse-x';\nconst COLLAPSE_Y_PROPERTY = '--support-rail-collapse-y';\nconst INDEX_PROPERTY = '--support-rail-index';\nconst DRAGGING_ATTRIBUTE = 'data-dragging';\nconst NO_DRAG = '0px';\n\nconst CONTENT_FADE_IN: Layer = {\n  opacity: [0, 1],\n  timing: { duration: UIMotion.dur.slow, ease: 'linear', delay: UIMotion.dur.base * CONTENT_FADE_IN_DELAY_RATIO },\n};\nconst CONTENT_FADE_OUT: Layer = { opacity: [0], timing: { duration: UIMotion.dur.fast, ease: 'linear' } };\n\ntype GrabHandler = (event: ReactPointerEvent<HTMLElement>) => void;\n\nfunction collapseRatio(needleSpan: number, panelSpan: number): number {\n  return panelSpan > 0 ? needleSpan / panelSpan : NEUTRAL_RATIO;\n}\n\nfunction railTravel(offsetX: number, dismissSign: number): number {\n  const along = offsetX * dismissSign;\n  return along < 0 ? along / RUBBER_BAND_DIVISOR : along;\n}\n\nfunction railDismisses(travel: number, velocityAlong: number): boolean {\n  if (travel >= DISMISS_DISTANCE_PX) return true;\n  return travel >= FLICK_DISTANCE_PX && velocityAlong >= DISMISS_VELOCITY_PX_PER_S;\n}\n\nfunction indexStyle(index: number): CSSProperties {\n  return { [INDEX_PROPERTY]: Math.min(index, STAGGER_STEPS_MAX) } as CSSProperties;\n}\n\nfunction SupportRailBody({\n  actions,\n  title,\n  status,\n  footer,\n  children,\n  panelId,\n  titleId,\n  panelRef,\n  needleRef,\n  onGrab,\n  requestClose,\n  onSelect,\n}: {\n  actions: SupportAction[];\n  title: string;\n  status?: string;\n  footer?: ReactNode;\n  children?: ReactNode;\n  panelId: string;\n  titleId: string;\n  panelRef: RefObject<HTMLElement>;\n  needleRef: RefObject<HTMLElement>;\n  onGrab: GrabHandler;\n  requestClose: () => void;\n  onSelect?: (id: string, action: SupportAction) => void;\n}) {\n  const bodyRef = useRef<HTMLElement>(null);\n  const { isPresent } = usePresence();\n  const entry = useOverlayEntry({ nodeRef: panelRef, dismissible: isPresent, requestClose });\n\n  useOutsidePress({ entry, refs: [panelRef, needleRef], enabled: isPresent, onPress: requestClose });\n  useReturnFocus(panelRef);\n\n  useLayoutEffect(() => {\n    bodyRef.current?.focus({ preventScroll: true });\n  }, []);\n\n  const commit = (action: SupportAction) => {\n    action.onSelect?.();\n    onSelect?.(action.id, action);\n  };\n\n  return (\n    <Motion\n      as=\"div\"\n      ref={bodyRef}\n      animate={CONTENT_FADE_IN}\n      exit={CONTENT_FADE_OUT}\n      className=\"support-rail__body\"\n      id={panelId}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={titleId}\n      tabIndex={-1}\n    >\n      <span className=\"support-rail__grabber\" aria-hidden=\"true\" onPointerDown={onGrab}>\n        <span className=\"support-rail__grabber-pill\" />\n      </span>\n\n      <div className=\"support-rail__stack\">\n        <div className=\"support-rail__header\">\n          <div className=\"support-rail__heading\">\n            <div className=\"support-rail__title\" id={titleId}>\n              {title}\n            </div>\n            {status && <div className=\"support-rail__status\">{status}</div>}\n          </div>\n          <button type=\"button\" className=\"support-rail__close\" aria-label=\"Close\" onClick={requestClose}>\n            <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\">\n              <path d=\"M1 1l7 7M8 1l-7 7\" />\n            </svg>\n          </button>\n        </div>\n\n        <ul className=\"support-rail__list\">\n          {actions.map((action, index) => (\n            <li key={action.id}>\n              <button\n                type=\"button\"\n                className=\"support-rail__row\"\n                style={indexStyle(index)}\n                onClick={() => commit(action)}\n              >\n                <span className=\"support-rail__row-icon\" aria-hidden=\"true\">\n                  {action.icon}\n                </span>\n                <span className=\"support-rail__row-text\">\n                  <span className=\"support-rail__row-label\">{action.label}</span>\n                  {action.description && <span className=\"support-rail__row-note\">{action.description}</span>}\n                </span>\n                {action.meta && <span className=\"support-rail__row-meta\">{action.meta}</span>}\n              </button>\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"support-rail__extra\" style={indexStyle(actions.length)}>\n          {children}\n        </div>\n\n        {footer && (\n          <div className=\"support-rail__footer\" style={indexStyle(actions.length + 1)}>\n            {footer}\n          </div>\n        )}\n      </div>\n    </Motion>\n  );\n}\n\nexport interface SupportRailOwnProps {\n  /** The rows, in order. Each renders a button carrying its label, optional description and optional meta. @default [] */\n  actions: SupportAction[];\n  /** Panel heading, and the panel's accessible name. @default 'Talk to us' */\n  title?: string;\n  /** Small uppercase mono line under the heading - opening hours, queue depth, a shift note. */\n  status?: string;\n  /** Container edge the rail pins to. Flips the needle, the collapse origin, the drag axis and the vertical label. @default 'right' */\n  side?: 'right' | 'left';\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n  /** Fires when a row commits - gets its `id` and the full action. The rail stays open; render what happens next in `children`. */\n  onSelect?: (id: string, action: SupportAction) => void;\n  /** The vertical mono word on the needle. Doubles as the needle's accessible name. @default 'Support' */\n  needleLabel?: string;\n  /** Availability dot on the needle, with an ambient halo. @default false */\n  live?: boolean;\n  /** Arbitrary content below the rows; it takes the leftover height and scrolls. */\n  children?: ReactNode;\n  /** Pinned bottom strip - on-shift avatars, an SLA line, a link out. */\n  footer?: ReactNode;\n  /** Extra class(es) merged onto the rail root. */\n  className?: string;\n  /** Inline styles merged onto the rail root - the place to retune the `--support-rail-*` properties. */\n  style?: SupportRailStyle;\n}\n\nexport interface SupportRailProps extends SupportRailOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, id, ...) forwarded to the rail root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof SupportRailOwnProps> & DataAttributes;\n}\n\nexport function SupportRail({\n  actions = [],\n  title = 'Talk to us',\n  status,\n  side = 'right',\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  onSelect,\n  needleLabel = 'Support',\n  live = false,\n  children,\n  footer,\n  className = '',\n  style,\n  htmlProps,\n}: SupportRailProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const needleRef = useRef<HTMLElement>(null);\n  const panelRef = useRef<HTMLElement>(null);\n  const detach = useRef<(() => void) | null>(null);\n  const autoId = useId();\n  const panelId = 'support-rail-' + autoId;\n  const titleId = panelId + '-title';\n  const dismissSign = side === 'right' ? 1 : -1;\n  const requestClose = () => setOpen(false);\n\n  const onGrab: GrabHandler = (event) => {\n    const root = rootRef.current;\n    if (!root || !open || event.button !== 0 || !event.isPrimary) return;\n    detach.current?.();\n    root.setAttribute(DRAGGING_ATTRIBUTE, '');\n    detach.current = startDrag(event, {\n      onMove: (info: PanInfo) =>\n        root.style.setProperty(DRAG_PROPERTY, railTravel(info.offset.x, dismissSign) * dismissSign + 'px'),\n      onEnd: (info: PanInfo) => {\n        detach.current = null;\n        root.removeAttribute(DRAGGING_ATTRIBUTE);\n        const travel = railTravel(info.offset.x, dismissSign);\n        if (railDismisses(travel, info.velocity.x * dismissSign)) requestClose();\n        else root.style.setProperty(DRAG_PROPERTY, NO_DRAG);\n      },\n    });\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const needle = needleRef.current;\n    const panel = panelRef.current;\n    if (!root || !needle || !panel) return undefined;\n    const remeasure = () => {\n      root.style.setProperty(COLLAPSE_X_PROPERTY, String(collapseRatio(needle.offsetWidth, panel.offsetWidth)));\n      root.style.setProperty(COLLAPSE_Y_PROPERTY, String(collapseRatio(needle.offsetHeight, panel.offsetHeight)));\n    };\n    remeasure();\n    const sizes = new ResizeObserver(remeasure);\n    sizes.observe(panel);\n    sizes.observe(needle);\n    return () => sizes.disconnect();\n  }, [side]);\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root || !open) return;\n    root.style.setProperty(DRAG_PROPERTY, NO_DRAG);\n    root.removeAttribute(DRAGGING_ATTRIBUTE);\n  }, [open]);\n\n  useLayoutEffect(\n    () => () => {\n      detach.current?.();\n      detach.current = null;\n    },\n    [],\n  );\n\n  return (\n    <div\n      ref={rootRef}\n      className={cx('support-rail', className)}\n      style={style}\n      data-side={side}\n      data-open={open}\n      {...htmlProps}\n    >\n      <button\n        type=\"button\"\n        ref={needleRef as RefObject<HTMLButtonElement>}\n        className=\"support-rail__needle\"\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        aria-controls={open ? panelId : undefined}\n        onClick={() => setOpen(!open)}\n      >\n        {live && <span className=\"support-rail__live\" aria-hidden=\"true\" />}\n        <span className=\"support-rail__needle-label\">{needleLabel}</span>\n        <span className=\"support-rail__needle-rule\" aria-hidden=\"true\" />\n      </button>\n\n      <div ref={panelRef as RefObject<HTMLDivElement>} className=\"support-rail__panel\">\n        <Presence>\n          {open && (\n            <SupportRailBody\n              key=\"body\"\n              actions={actions}\n              title={title}\n              status={status}\n              footer={footer}\n              panelId={panelId}\n              titleId={titleId}\n              panelRef={panelRef}\n              needleRef={needleRef}\n              onGrab={onGrab}\n              requestClose={requestClose}\n              onSelect={onSelect}\n            >\n              {children}\n            </SupportRailBody>\n          )}\n        </Presence>\n      </div>\n    </div>\n  );\n}\n"]}