@salt-ds/lab 1.0.0-alpha.70 → 1.0.0-alpha.72

package/dist-es/carousel/CarouselSlider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselSlider.js","sources":["../src/carousel/CarouselSlider.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type SyntheticEvent,\n  type UIEvent,\n  forwardRef,\n  useContext,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport {\n  CarouselDispatchContext,\n  CarouselStateContext,\n} from \"./CarouselContext\";\nimport type { CarouselSlideProps } from \"./CarouselSlide\";\nimport carouselSliderCss from \"./CarouselSlider.css\";\n\nexport interface CarouselSliderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Collection of slides to render\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * Callback fired when the selected slide change.\n   **/\n  onSelectionChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    index: number,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlider\");\n\nexport const CarouselSlider = forwardRef<HTMLDivElement, CarouselSliderProps>(\n  function CarouselSlider(\n    { children, onKeyDown, onScroll, onSelectionChange, ...rest },\n    propRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slider\",\n      css: carouselSliderCss,\n      window: targetWindow,\n    });\n    const containerRef = useRef<HTMLDivElement>(null);\n    const hasRun = useRef(false);\n    const { slides, activeSlideIndex, focusedSlideIndex, visibleSlides } =\n      useContext(CarouselStateContext);\n    const dispatch = useContext(CarouselDispatchContext);\n    const slideIds = [...slides.keys()];\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) return;\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          const prevIndex =\n            focusedSlideIndex && focusedSlideIndex > activeSlideIndex\n              ? focusedSlideIndex - 1\n              : activeSlideIndex - 1;\n          const prevId = slideIds[prevIndex] || null;\n\n          if (!prevId) break;\n          dispatch({ type: \"scroll\", payload: prevId });\n          onSelectionChange?.(event, prevIndex);\n          slides.get(prevId)?.element.focus();\n\n          break;\n        }\n        case \"ArrowRight\": {\n          const nextIndex = activeSlideIndex + 1;\n          const nextId = slideIds[nextIndex] || null;\n\n          if (!nextId) break;\n\n          dispatch({ type: \"scroll\", payload: nextId });\n          onSelectionChange?.(event, nextIndex);\n\n          slides.get(nextId)?.element.focus();\n\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    const handleScroll = (event: UIEvent<HTMLDivElement>) => {\n      const container = containerRef?.current;\n      if (!container) return;\n      const scrollLeft = container.scrollLeft;\n      const slideWidth = container.offsetWidth / visibleSlides;\n      const newIndex = Math.round(scrollLeft / slideWidth) || 0;\n\n      if (newIndex !== activeSlideIndex) {\n        dispatch({ type: \"move\", payload: slideIds[newIndex] });\n        onSelectionChange?.(event, newIndex);\n      }\n      onScroll?.(event);\n    };\n\n    useLayoutEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const scrollBehavior = hasRun.current ? \"smooth\" : \"instant\";\n      const slideWidth = container.offsetWidth / visibleSlides;\n\n      requestAnimationFrame(() => {\n        container.scrollTo({\n          left: focusedSlideIndex * slideWidth,\n          // @ts-ignore ScrollBehavior typescript definition missing instant\n          behavior: scrollBehavior,\n        });\n      });\n\n      hasRun.current = true;\n    }, [focusedSlideIndex, visibleSlides]);\n\n    const ref = useForkRef(propRef, containerRef);\n    return (\n      <div\n        ref={ref}\n        className={withBaseName()}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        onScroll={handleScroll}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlider","carouselSliderCss"],"mappings":"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"}

package/dist-types/carousel/Carousel.d.ts

@@ -1,23 +0,0 @@
-import { type ResponsiveProp } from "@salt-ds/core";
-import { type HTMLAttributes } from "react";
-export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The initial Index enables you to select the active slide in the carousel.
-     * Optional, default 0.
-     **/
-    defaultActiveSlideIndex?: number;
-    /**
-     * Controlled index of active slide in the carousel.
-     **/
-    activeSlideIndex?: number;
-    /**
-     * Set the placement of the CarouselControls relative to the CarouselSlider element. Defaults to `top`.
-     */
-    controlsPlacement?: "top" | "bottom";
-    /**
-     * Number of slides visible at a time.
-     * Optional, default 1.
-     **/
-    visibleSlides?: ResponsiveProp<number>;
-}
-export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/CarouselContext.d.ts

@@ -1,11 +0,0 @@
-import { type ReactNode } from "react";
-import { type CarouselReducerDispatch, type CarouselReducerState } from "./CarouselReducer";
-export declare const CarouselStateContext: import("react").Context<CarouselReducerState>;
-export declare const CarouselDispatchContext: import("react").Context<CarouselReducerDispatch>;
-export declare function CarouselProvider({ children, activeSlideIndex: activeSlideIndexProp, defaultActiveSlideIndex, visibleSlides, id, }: {
-    children: ReactNode;
-    activeSlideIndex?: number;
-    defaultActiveSlideIndex?: number;
-    visibleSlides?: number;
-    id?: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist-types/carousel/CarouselControls.d.ts

@@ -1,26 +0,0 @@
-import { type HTMLAttributes, type ReactNode, type SyntheticEvent } from "react";
-export interface CarouselControlsProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /**
-     * Callback when Back button is clicked.
-     */
-    onPrevious?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
-    /**
-     * Callback when Next button is clicked.
-     */
-    onNext?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
-    /**
-     * Location of the label relative to the controls.
-     *
-     * Either 'left', or 'right'`.
-     */
-    labelPlacement?: "left" | "right";
-    /**
-     * If `true`, the carousel controls will be disabled.
-     * **/
-    disabled?: boolean;
-    /**
-     * The title of the carousel that accompanies the controls.
-     */
-    title?: ReactNode;
-}
-export declare const CarouselControls: import("react").ForwardRefExoticComponent<CarouselControlsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/CarouselReducer.d.ts

@@ -1,30 +0,0 @@
-import type { Dispatch } from "react";
-import type { CarouselSlideId, CarouselSlideMeta } from "./CarouselSlide";
-export interface CarouselReducerState {
-    slides: Map<CarouselSlideId, CarouselSlideMeta>;
-    activeSlideIndex: number;
-    visibleSlides: number;
-    focusedSlideIndex: number;
-    carouselId?: string;
-}
-export declare type CarouselReducerAction = {
-    type: "register";
-    payload: [CarouselSlideId, CarouselSlideMeta];
-} | {
-    type: "unregister";
-    payload: CarouselSlideId;
-} | {
-    type: "updateSlideCount";
-    payload: number;
-} | {
-    type: "move";
-    payload: CarouselSlideId;
-} | {
-    type: "moveToIndex";
-    payload: number;
-} | {
-    type: "scroll";
-    payload: CarouselSlideId;
-};
-export declare type CarouselReducerDispatch = Dispatch<CarouselReducerAction>;
-export declare function carouselReducer(state: CarouselReducerState, action: CarouselReducerAction): CarouselReducerState;

package/dist-types/carousel/CarouselSlide.d.ts

@@ -1,32 +0,0 @@
-import { type ComponentProps, type ReactNode } from "react";
-export declare type CarouselSlideId = string;
-export declare type CarouselSlideElement = HTMLDivElement;
-export declare type CarouselSlideMeta = {
-    element: CarouselSlideElement;
-    slideDescription?: string;
-};
-export interface CarouselSlideProps extends ComponentProps<"div"> {
-    /**
-     * Actions to be displayed in the content footer.
-     **/
-    actions?: ReactNode;
-    /**
-     * Media content to be displayed inside the slide. This could include images, videos, etc., that are visually prominent.
-     * It differs from children in that media is intended to be the main visual element of the slide.
-     **/
-    media?: ReactNode;
-    /**
-     * The appearance of the slide. Options are 'bordered', and 'transparent'.
-     * 'transparent' is the default value.
-     **/
-    appearance?: "bordered" | "transparent";
-    /**
-     * Header content to be displayed at the top of the slide. This can be text or any other React node.
-     **/
-    header?: ReactNode;
-    /**
-     * Carousel slide id.
-     */
-    id?: string;
-}
-export declare const CarouselSlide: import("react").ForwardRefExoticComponent<Omit<CarouselSlideProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/CarouselSlider.d.ts

@@ -1,13 +0,0 @@
-import { type HTMLAttributes, type ReactElement, type SyntheticEvent } from "react";
-import type { CarouselSlideProps } from "./CarouselSlide";
-export interface CarouselSliderProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Collection of slides to render
-     */
-    children: Array<ReactElement<CarouselSlideProps>>;
-    /**
-     * Callback fired when the selected slide change.
-     **/
-    onSelectionChange?: (event: SyntheticEvent<HTMLDivElement>, index: number) => void;
-}
-export declare const CarouselSlider: import("react").ForwardRefExoticComponent<CarouselSliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./Carousel";
-export * from "./CarouselSlide";
-export * from "./CarouselSlider";
-export * from "./CarouselControls";