@spark-ui/components
Version:
Spark (Leboncoin design system) components.
1 lines • 25.8 kB
Source Map (JSON)
{"version":3,"sources":["../../src/scrolling-list/ScrollingList.tsx","../../src/scrolling-list/useScrollOverflow.ts","../../src/scrolling-list/ScrollingListControls.tsx","../../src/scrolling-list/ScrollingListItem.tsx","../../src/scrolling-list/useFocusWithinScroll.tsx","../../src/scrolling-list/ScrollingListItems.tsx","../../src/scrolling-list/ScrollingListNextButton.tsx","../../src/scrolling-list/ScrollingListPrevButton.tsx","../../src/scrolling-list/ScrollingListSkipButton.tsx","../../src/scrolling-list/index.ts"],"sourcesContent":["import { createContext, ReactNode, RefObject, useRef } from 'react'\nimport { SnapCarouselResult, useSnapCarousel } from 'react-snap-carousel'\n\nimport { ScrollOverflow, useScrollOverflow } from './useScrollOverflow'\n\ntype SnapType = 'mandatory' | 'proximity' | 'none'\ntype ScrollBehavior = 'smooth' | 'instant'\ntype SnapStop = 'normal' | 'always'\n\ninterface Props {\n /**\n * CSS scroll snap behavior.\n * - `mandatory` to force snapping on each \"page\".\n * - `proximity` to force snapping only when scroll position is near the edge of a \"page\". Behavior can change depending on each browser.\n * - `none` to disabled scroll snapping.\n */\n snapType?: SnapType\n /**\n * Defines whether or not the scroll container is allowed to \"pass over\" possible snap positions.\n */\n snapStop?: SnapStop\n scrollBehavior?: ScrollBehavior\n /**\n * Add a fade effect to indicate content overflow.\n */\n widthFade?: boolean\n children?: ReactNode\n /**\n * When `true`, allow previous and next buttons to be used when reaching the edges of the list.\n */\n loop?: boolean\n /**\n * Space (in pixels) between items.\n */\n gap?: number\n /**\n * Offset (in pixels) of the left of the optimal viewing region of the list.\n */\n scrollPadding?: number\n}\n\ninterface ScrollingListContextState extends SnapCarouselResult {\n snapType: SnapType\n snapStop: SnapStop\n scrollBehavior: ScrollBehavior\n visibleItemsRange: readonly [number, number]\n loop: boolean\n gap: number\n widthFade: boolean\n scrollPadding: number\n scrollAreaRef: RefObject<HTMLDivElement | null>\n overflow: ScrollOverflow\n skipKeyboardNavigation: () => void\n}\n\nexport const ScrollingListContext = createContext<ScrollingListContextState>(\n null as unknown as ScrollingListContextState\n)\n\nexport const ScrollingList = ({\n snapType = 'none',\n snapStop = 'normal',\n scrollBehavior = 'smooth',\n loop = false,\n gap = 16,\n widthFade = false, // TODO: ask for default value + why it has been removed from specs\n scrollPadding = 0,\n children,\n}: Props) => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const skipAnchorRef = useRef<HTMLButtonElement>(null)\n\n const snapCarouselAPI = useSnapCarousel()\n\n const overflow = useScrollOverflow(scrollAreaRef)\n\n const { activePageIndex, pages } = snapCarouselAPI\n\n const visibleItems = pages[activePageIndex] as number[]\n\n const visibleItemsRange = visibleItems\n ? ([visibleItems[0]! + 1, visibleItems[visibleItems.length - 1]! + 1] as const)\n : ([0, 0] as const)\n\n const skipKeyboardNavigation = () => {\n skipAnchorRef.current?.focus()\n }\n\n const ctxValue: ScrollingListContextState = {\n ...snapCarouselAPI,\n snapType,\n snapStop,\n skipKeyboardNavigation,\n scrollBehavior,\n visibleItemsRange,\n loop,\n gap,\n widthFade,\n scrollPadding,\n scrollAreaRef,\n overflow,\n }\n\n return (\n <ScrollingListContext.Provider value={ctxValue}>\n <div\n data-spark-component=\"scrolling-list\"\n className=\"gap-lg group/scrolling-list relative flex w-full flex-col\"\n >\n {children}\n </div>\n <span ref={skipAnchorRef} className=\"size-0 overflow-hidden\" tabIndex={-1} />\n </ScrollingListContext.Provider>\n )\n}\n\nScrollingList.displayName = 'ScrollingList'\n","import { useEffect, useState, RefObject } from 'react'\n\nexport interface ScrollOverflow {\n left: number\n right: number\n}\n\nexport function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>): ScrollOverflow {\n const [overflow, setOverflow] = useState<ScrollOverflow>({\n left: 0,\n right: 0,\n })\n\n useEffect(() => {\n const checkScrollContent = () => {\n const scrollElement = scrollRef.current\n\n if (scrollElement) {\n const { scrollLeft, scrollWidth, clientWidth } = scrollElement\n\n setOverflow({\n left: scrollLeft,\n right: scrollWidth - (scrollLeft + clientWidth),\n })\n }\n }\n\n checkScrollContent()\n\n const scrollElement = scrollRef.current\n if (scrollElement) {\n scrollElement.addEventListener('scroll', checkScrollContent)\n window.addEventListener('resize', checkScrollContent)\n }\n\n return () => {\n if (scrollElement) {\n scrollElement.removeEventListener('scroll', checkScrollContent)\n window.addEventListener('resize', checkScrollContent)\n }\n }\n }, [scrollRef])\n\n return overflow\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'\n\ninterface ScrollingListControls extends ComponentPropsWithoutRef<'div'> {\n /**\n * Visibility behavior of the control buttons:\n * - `always`: buttons are always visible.\n * - `hover`: buttons only appear on hover.\n *\n * a11y: `hover` is dangerous for accessibility as it disabled controls for touch screen users.\n * When using it, you must provide an alternative control outside of the list to replace them.\n */\n visibility?: 'hover' | 'always'\n children: ReactNode\n}\n\nexport const ScrollingListControls = ({\n children,\n visibility = 'always',\n className,\n ...rest\n}: ScrollingListControls) => {\n return (\n <div\n data-spark-component=\"scrolling-list-controls\"\n className={cx(\n 'default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden',\n className\n )}\n style={\n {\n '--scrolling-list-controls-opacity': visibility === 'hover' ? '0' : '1',\n } as CSSProperties\n }\n data-orientation=\"horizontal\"\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nScrollingListControls.displayName = 'ScrollingList.Controls'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactNode, useContext, useRef } from 'react'\n\nimport { Slot } from '../slot'\nimport { ScrollingListContext } from './ScrollingList'\nimport { useFocusWithinScroll } from './useFocusWithinScroll'\n\nexport interface ScrollingListItemProps extends ComponentPropsWithoutRef<'div'> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n children?: ReactNode\n /**\n * DO NOT USE. This prop is automatically managed by the parent ScrollingList.ListItems\n */\n index?: number\n className?: string\n}\n\nexport const ScrollingListItem = ({\n asChild = false,\n children,\n index = 0,\n className = '',\n ...rest\n}: ScrollingListItemProps) => {\n const ctx = useContext(ScrollingListContext)\n const itemRef = useRef<HTMLDivElement>(null)\n\n const isSnapPoint = ctx.snapPointIndexes.has(index)\n\n useFocusWithinScroll(itemRef, ctx.scrollAreaRef)\n\n const Component = asChild ? Slot : 'div'\n\n return (\n <Component\n data-spark-component=\"scrolling-list-item\"\n role=\"listitem\"\n ref={itemRef}\n className={cx(\n 'default:w-auto default:shrink-0',\n {\n 'snap-start': isSnapPoint,\n 'snap-normal': isSnapPoint && ctx.snapStop === 'normal',\n 'snap-always': isSnapPoint && ctx.snapStop === 'always',\n },\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\nScrollingListItem.displayName = 'ScrollingList.Item'\n","import { RefObject, useEffect, useState } from 'react'\n\nexport function useFocusWithinScroll<T extends HTMLElement | null>(\n ref: RefObject<T>, // The container to detect focus within\n scrollRef: RefObject<HTMLDivElement | null> // The scrollable container\n) {\n const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n useEffect(() => {\n const handleFocusIn = (event: FocusEvent) => {\n setIsFocusWithin(true)\n\n const focusedElement = event.target as HTMLElement\n const scrollContainer = scrollRef.current\n\n if (focusedElement && scrollContainer) {\n const focusRect = focusedElement.getBoundingClientRect()\n const scrollRect = scrollContainer.getBoundingClientRect()\n\n // Check if the focused element is fully visible inside the scroll container\n const isFullyVisible =\n focusRect.left >= scrollRect.left &&\n focusRect.right <= scrollRect.right &&\n focusRect.top >= scrollRect.top &&\n focusRect.bottom <= scrollRect.bottom\n\n if (!isFullyVisible) {\n focusedElement.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })\n }\n }\n }\n\n const handleFocusOut = (event: FocusEvent) => {\n if (ref.current && !ref.current.contains(event.relatedTarget as Node)) {\n setIsFocusWithin(false)\n }\n }\n\n const node = ref.current\n if (node) {\n node.addEventListener('focusin', handleFocusIn)\n node.addEventListener('focusout', handleFocusOut)\n }\n\n return () => {\n if (node) {\n node.removeEventListener('focusin', handleFocusIn)\n node.removeEventListener('focusout', handleFocusOut)\n }\n }\n }, [ref, scrollRef])\n\n return isFocusWithin\n}\n","import { cx } from 'class-variance-authority'\nimport {\n Children,\n cloneElement,\n ComponentPropsWithoutRef,\n CSSProperties,\n isValidElement,\n KeyboardEvent,\n ReactNode,\n Ref,\n RefObject,\n useContext,\n} from 'react'\n\nimport { ScrollingListContext } from './ScrollingList'\nimport { ScrollingListItemProps } from './ScrollingListItem'\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n children?: ReactNode\n className?: string\n}\n\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined | null)[]): Ref<T> {\n return (value: T | null) => {\n refs.forEach(ref => {\n if (typeof ref === 'function') {\n ref(value)\n } else if (ref && typeof ref === 'object' && 'current' in ref) {\n ;(ref as RefObject<T | null>).current = value\n }\n })\n }\n}\n\nexport const ScrollingListItems = ({ children, className = '', ...rest }: Props) => {\n const ctx = useContext(ScrollingListContext)\n\n const snapConfig = {\n mandatory: 'x mandatory',\n proximity: 'x proximity',\n none: 'none',\n }\n\n const handleLeftArrow = (event: KeyboardEvent<HTMLDivElement>) => {\n if (!ctx.loop && !ctx.hasPrevPage) return\n\n event.preventDefault()\n ctx.goTo(ctx.hasPrevPage ? ctx.activePageIndex - 1 : ctx.pages.length - 1, {\n behavior: ctx.scrollBehavior,\n })\n }\n\n const handleRightArrow = (event: KeyboardEvent<HTMLDivElement>) => {\n if (!ctx.loop && !ctx.hasNextPage) return\n\n event.preventDefault()\n ctx.goTo(ctx.hasNextPage ? ctx.activePageIndex + 1 : 0, { behavior: ctx.scrollBehavior })\n }\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowLeft') {\n handleLeftArrow(event)\n }\n\n if (event.key === 'ArrowRight') {\n handleRightArrow(event)\n }\n }\n\n interface CustomCSSProperties extends CSSProperties {\n '--scrolling-list-gap'?: string\n '--scrolling-list-px'?: string\n }\n\n const inlineStyles: CustomCSSProperties = {\n scrollSnapType: snapConfig[ctx.snapType],\n scrollPaddingInline: 'var(--scrolling-list-px)',\n '--scrolling-list-px': `${ctx.scrollPadding}px`,\n '--scrolling-list-gap': `${ctx.gap}px`,\n ...(ctx.widthFade && {\n maskImage:\n 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `calc(100% + ${ctx.overflow.left ? '0px' : '44px'} + ${ctx.overflow.right ? '0px' : '44px'}) 100%`,\n maskPosition: `${ctx.overflow.left ? '0px' : '-44px'} 0`,\n }),\n }\n\n return (\n <div\n data-spark-component=\"scrolling-list-items\"\n id=\"scrolling-list-items\"\n role=\"list\"\n className={cx(\n 'relative transition-all duration-300',\n 'u-no-scrollbar overflow-x-auto scroll-smooth default:overscroll-contain',\n 'w-full gap-(--scrolling-list-gap) default:flex default:flex-row',\n 'focus-visible:u-outline',\n className\n )}\n ref={mergeRefs<HTMLDivElement>(ctx.scrollAreaRef, ctx.scrollRef)}\n style={inlineStyles}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {Children.map(children, (child, index) =>\n isValidElement<ScrollingListItemProps>(child) ? cloneElement(child, { index }) : child\n )}\n </div>\n )\n}\n\nScrollingListItems.displayName = 'ScrollingList.Items'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { useContext } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton, IconButtonProps } from '../icon-button'\nimport { ScrollingListContext } from './ScrollingList'\n\nexport const ScrollingListNextButton = ({ 'aria-label': ariaLabel, ...rest }: IconButtonProps) => {\n const ctx = useContext(ScrollingListContext)\n\n const handleNextPage = () => {\n if (ctx.hasNextPage) {\n ctx.next({ behavior: ctx.scrollBehavior })\n } else {\n ctx.goTo(0, { behavior: ctx.scrollBehavior })\n }\n }\n\n const listHasOverflow = ctx.overflow.left || ctx.overflow.right\n const isDisabled = !listHasOverflow || (!ctx.loop && !ctx.overflow.right)\n\n return (\n <IconButton\n data-spark-component=\"scrolling-list-next-button\"\n size=\"sm\"\n intent=\"surface\"\n design=\"filled\"\n className={cx(\n 'pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible',\n 'group-hover/scrolling-list:opacity-none focus-visible:opacity-none'\n )}\n onClick={handleNextPage}\n disabled={isDisabled}\n aria-label={ariaLabel}\n aria-controls=\"scrolling-list-items\"\n {...rest}\n >\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n </IconButton>\n )\n}\n\nScrollingListNextButton.displayName = 'ScrollingList.NextButton'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { cx } from 'class-variance-authority'\nimport { useContext } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton, IconButtonProps } from '../icon-button'\nimport { ScrollingListContext } from './ScrollingList'\n\nexport const ScrollingListPrevButton = ({\n 'aria-label': ariaLabel,\n\n ...rest\n}: IconButtonProps) => {\n const ctx = useContext(ScrollingListContext)\n\n const handlePrevPage = () => {\n const shouldSnapFirstPage =\n ctx.activePageIndex === 0 && (ctx.scrollAreaRef.current?.scrollLeft || 0) > 0\n\n if (shouldSnapFirstPage) {\n ctx.goTo(0, { behavior: ctx.scrollBehavior })\n } else if (ctx.hasPrevPage) {\n ctx.prev({ behavior: ctx.scrollBehavior })\n } else {\n ctx.goTo(ctx.pages.length - 1, { behavior: ctx.scrollBehavior })\n }\n }\n\n const listHasOverflow = ctx.overflow.left || ctx.overflow.right\n const isDisabled = !listHasOverflow || (!ctx.loop && !ctx.overflow.left)\n\n return (\n <IconButton\n data-spark-component=\"scrolling-list-prev-button\"\n size=\"sm\"\n intent=\"surface\"\n design=\"filled\"\n className={cx(\n 'pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible',\n 'group-hover/scrolling-list:opacity-none focus-visible:opacity-none'\n )}\n onClick={handlePrevPage}\n disabled={isDisabled}\n aria-label={ariaLabel}\n aria-controls=\"scrolling-list-items\"\n {...rest}\n >\n <Icon>\n <ArrowVerticalLeft />\n </Icon>\n </IconButton>\n )\n}\n\nScrollingListPrevButton.displayName = 'ScrollingList.PrevButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, useContext } from 'react'\n\nimport { Button } from '../button'\nimport { ScrollingListContext } from './ScrollingList'\n\ninterface Props extends ComponentPropsWithoutRef<'button'> {\n children: string\n}\n\nexport const ScrollingListSkipButton = ({ children, ...rest }: Props) => {\n const ctx = useContext(ScrollingListContext)\n\n return (\n <Button\n type=\"button\"\n design=\"tinted\"\n intent=\"surface\"\n tabIndex={0}\n className={cx(\n 'z-raised absolute top-1/2 left-0 -translate-y-1/2',\n 'not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0'\n )}\n onClick={ctx.skipKeyboardNavigation}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nScrollingListSkipButton.displayName = 'ScrollingList.SkipButton'\n","import { ScrollingList as Root } from './ScrollingList'\nimport { ScrollingListControls as Controls } from './ScrollingListControls'\nimport { ScrollingListItem as Item } from './ScrollingListItem'\nimport { ScrollingListItems as Items } from './ScrollingListItems'\nimport { ScrollingListNextButton as NextButton } from './ScrollingListNextButton'\nimport { ScrollingListPrevButton as PrevButton } from './ScrollingListPrevButton'\nimport { ScrollingListSkipButton as SkipButton } from './ScrollingListSkipButton'\n\nexport const ScrollingList: typeof Root & {\n Controls: typeof Controls\n NextButton: typeof NextButton\n PrevButton: typeof PrevButton\n Item: typeof Item\n Items: typeof Items\n SkipButton: typeof SkipButton\n} = Object.assign(Root, {\n Controls,\n NextButton,\n PrevButton,\n Item,\n Items,\n SkipButton,\n})\n\nScrollingList.displayName = 'ScrollingList'\n"],"mappings":"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","names":["scrollElement","jsx","cx","useRef","useEffect","useState","jsx","useRef","cx","cx","useContext","jsx","useContext","cx","cx","useContext","jsx","useContext","cx","cx","useContext","jsx","useContext","cx","cx","useContext","jsx","useContext","cx","ScrollingList"]}