reshaped 3.3.12 → 3.4.0-rc.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -9,22 +9,47 @@ import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, active, onOpen, onClose, ...textFieldProps } = props;
     const onBackspaceRef = useHandlerRef(onBackspace);
     const internalInputRef = React.useRef(null);
     const inputAttributesRef = textFieldProps.inputAttributes?.ref;
     const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
         ? inputAttributesRef
         : internalInputRef;
-    const [active, setActive] = React.useState(false);
+    const [internalActive, setInternalActive] = React.useState(false);
     const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
     const lockedRef = React.useRef(false);
+    const onOpenRef = useHandlerRef(onOpen);
+    const onCloseRef = useHandlerRef(onClose);
+    const isDropdownActive = hasChildren && (active ?? internalActive);
     const handleOpen = React.useCallback(() => {
         if (lockedRef.current)
             return;
-        setActive(true);
-    }, []);
-    const handleClose = () => setActive(false);
+        setInternalActive(true);
+        onOpenRef.current?.();
+    }, [onOpenRef]);
+    const handleClose = (args) => {
+        setInternalActive(false);
+        onCloseRef.current?.(args);
+    };
+    const handleItemClick = (args) => {
+        onChange?.({ value: args.value, name });
+        onItemSelect?.(args);
+        // Prevent dropdown from re-opening when clicked on item with mouse
+        // and focus moves to the item and back to the input
+        lockedRef.current = true;
+        setTimeout(() => {
+            lockedRef.current = false;
+        }, 100);
+    };
+    const handleChange = (args) => {
+        onChange?.(args);
+        handleOpen();
+    };
+    const handleInput = (e) => {
+        onInput?.({ value: e.currentTarget.value, name, event: e });
+        textFieldProps.inputAttributes?.onInput?.(e);
+    };
     useHotkeys({
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
@@ -42,26 +67,9 @@ const Autocomplete = (props) => {
             el?.click();
         },
     }, [handleOpen], { ref: inputRef, preventDefault: true });
-    const handleChange = (args) => {
-        onChange?.(args);
-        handleOpen();
-    };
-    const handleItemClick = (args) => {
-        onChange?.({ value: args.value, name });
-        onItemSelect?.(args);
-        // Prevent dropdown from re-opening when clicked on item with mouse
-        // and focus moves to the item and back to the input
-        lockedRef.current = true;
-        setTimeout(() => (lockedRef.current = false), 100);
-    };
-    const handleInput = (e) => {
-        onInput?.({ value: e.currentTarget.value, name, event: e });
-        textFieldProps.inputAttributes?.onInput?.(e);
-    };
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
-                        // Ignoring the type check since TS can't infer the correct html element type
-                        attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
+                            // Ignoring the type check since TS can't infer the correct html element type
                             ref: ref,
                             onClick: attributes.onFocus,
                         }, inputAttributes: {
@@ -70,6 +78,8 @@ const Autocomplete = (props) => {
                             onFocus: (e) => {
                                 attributes.onFocus?.();
                                 textFieldProps.onFocus?.(e);
+                                if (!lockedRef.current)
+                                    inputRef.current?.select();
                             },
                             onInput: handleInput,
                             onClick: attributes.onFocus,

package/dist/components/Autocomplete/Autocomplete.types.d.ts

@@ -5,7 +5,7 @@ type SelectArgs = {
     value: string;
     data?: unknown;
 };
-export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef"> & {
+export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose"> & {
     onInput?: TextFieldProps["onChange"];
     onItemSelect?: (args: SelectArgs) => void;
     onBackspace?: () => void;

package/dist/components/Autocomplete/tests/Autocomplete.stories.js

@@ -44,6 +44,7 @@ export const multiselect = {
     name: "multiselect",
     render: () => {
         const inputRef = React.useRef(null);
+        const [active, setActive] = React.useState(false);
         const [values, setValues] = React.useState(["foo", "bar"]);
         const [query, setQuery] = React.useState("");
         const [customValueQuery, setCustomValueQuery] = React.useState("");
@@ -70,7 +71,13 @@ export const multiselect = {
 				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} inputAttributes={{ ref: inputRef }} onBackspace={() => {
                 if (!query.length)
                     handleDismiss(values[values.length - 1]);
-            }} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
+            }} onOpen={() => {
+                setActive(true);
+            }} onClose={(args) => {
+                if (args.reason === "item-selection")
+                    return;
+                setActive(false);
+            }} active={active} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
                 setCustomValueQuery(query);
                 setQuery("");
                 if (args.value === "_custom") {

package/dist/components/Carousel/Carousel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames, debounceHandler, } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsiveClassNames, throttleHandler, } from "../../utilities/helpers.js";
 import View from "../View/index.js";
 import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
@@ -9,7 +9,9 @@ import CarouselControl from "./CarouselControl.js";
 import * as T from "./Carousel.types.js";
 import s from "./Carousel.module.css";
 const Carousel = (props) => {
-    const { children, gap = 3, visibleItems, bleed, navigationDisplay, instanceRef, className, attributes, } = props;
+    const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
+    const currentIndexRef = React.useRef(0);
+    const itemRefs = React.useRef([]);
     const [mounted, setMounted] = React.useState(false);
     const [scrollPosition, setScrollPosition] = React.useState(0);
     const [isRTL] = useRTL();
@@ -21,9 +23,21 @@ const Carousel = (props) => {
         });
     }
     const rootClassNames = classNames(s.root, className, ...responsiveClassNames(s, "--bleed", typeof bleed === "number" ? true : bleedClassNames));
-    const handleScroll = debounceHandler((event) => {
+    const handleItemRef = (el, index) => {
+        itemRefs.current[index] = el;
+        // TODO: Enable in React v19 since it introduced refs cleanup
+        // return () => {
+        // 	itemRefs.current[index] = null;
+        // };
+    };
+    const handleScroll = throttleHandler((event) => {
         const el = event.target;
+        const firstVisibleIndex = getFirstVisibleIndex();
         setScrollPosition(el.scrollLeft);
+        onScroll?.(event);
+        if (currentIndexRef.current !== firstVisibleIndex)
+            onChange?.({ index: firstVisibleIndex });
+        currentIndexRef.current = firstVisibleIndex;
     }, 16);
     const getItemsGap = () => {
         const style = getComputedStyle(scrollElRef.current);
@@ -31,6 +45,40 @@ const Carousel = (props) => {
         const xGap = style.gap.split(" ")[0];
         return Number(xGap.replace("px", ""));
     };
+    const getFirstVisibleIndex = () => {
+        let resultIndex = 0;
+        let sizeCalc = 0;
+        const scrollEl = scrollElRef.current;
+        if (!scrollEl)
+            return resultIndex;
+        const scrollValue = isRTL ? -scrollEl.scrollLeft : scrollEl.scrollLeft;
+        const gap = getItemsGap();
+        itemRefs.current.some((el, index) => {
+            if (!el)
+                return false;
+            const visible = sizeCalc + el.clientWidth / 2 >= scrollValue;
+            if (visible) {
+                resultIndex = index;
+                return true;
+            }
+            sizeCalc += el?.clientWidth + gap;
+            return false;
+        });
+        return resultIndex;
+    };
+    const navigateTo = (index) => {
+        const scrollEl = scrollElRef.current;
+        const el = itemRefs.current[index];
+        if (!el)
+            return;
+        scrollEl.scrollTo({
+            // Browsers mirror offsetLeft value but we need to also keep the target element on the other side of the container
+            // so adding addition calculations for the width of the content outside the target el
+            left: isRTL ? el.offsetLeft - (scrollEl.clientWidth - el.clientWidth) : el.offsetLeft,
+            top: 0,
+            behavior: "smooth",
+        });
+    };
     const navigateRight = () => {
         const scrollEl = scrollElRef.current;
         scrollEl.scrollBy({
@@ -52,6 +100,7 @@ const Carousel = (props) => {
     React.useImperativeHandle(instanceRef, () => ({
         navigateBack,
         navigateForward,
+        navigateTo,
     }));
     /**
      * Changing flag here since scroll ref changing won't rerender the controls and show them after SSR
@@ -63,6 +112,6 @@ const Carousel = (props) => {
             ...responsiveVariables("--rs-carousel-items", visibleItems),
             ...responsiveVariables("--rs-carousel-bleed", bleed),
             ...attributes?.style,
-        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child) => (_jsx(View.Item, { className: s.item, as: "li", children: child }))) })] }));
+        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
 };
 export default Carousel;

package/dist/components/Carousel/Carousel.types.d.ts

@@ -3,6 +3,7 @@ import type * as G from "../../types/global";
 export type Instance = {
     navigateBack: () => void;
     navigateForward: () => void;
+    navigateTo: (index: number) => void;
 } | undefined;
 export declare enum ControlType {
     back = "back",
@@ -23,6 +24,10 @@ export type Props = {
     bleed?: G.Responsive<number>;
     navigationDisplay?: "hidden";
     instanceRef?: React.Ref<Instance>;
+    onChange?: (args: {
+        index: number;
+    }) => void;
+    onScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Carousel/tests/Carousel.stories.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
     component: (props: import("./..").CarouselProps) => React.JSX.Element;
@@ -12,7 +14,21 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const visibleItems: () => React.JSX.Element;
-export declare const gap: () => React.JSX.Element;
-export declare const bleed: () => React.JSX.Element;
-export declare const navigation: () => React.JSX.Element;
+export declare const base: StoryObj;
+export declare const visibleItems: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const gap: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const bleed: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const navigationDisplay: StoryObj;
+export declare const instanceRef: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

package/dist/components/Carousel/tests/Carousel.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { expect, fn, userEvent, waitFor } from "@storybook/test";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Carousel from "../index.js";
 import Button from "../../Button/index.js";
@@ -16,116 +17,208 @@ export default {
         },
     },
 };
-export const visibleItems = () => (<Example>
-		<Example.Item title="visibleItems: 3">
-			<Carousel visibleItems={3}>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
+export const base = {
+    name: "base",
+    render: () => (<Carousel attributes={{ "data-testid": "test-id" }} visibleItems={3}>
+			<Placeholder h={100}>Content</Placeholder>
+			<Placeholder h={100}>Content</Placeholder>
+			<Placeholder h={100}>Content</Placeholder>
+			<Placeholder h={100}>Content</Placeholder>
+			<Placeholder h={100}>Content</Placeholder>
+			<Placeholder h={100}>Content</Placeholder>
+		</Carousel>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("test-id");
+        const items = canvas.getAllByText("Content");
+        const buttons = root.querySelectorAll("button");
+        expect(root).toBeInTheDocument();
+        expect(root.tagName).toBe("SECTION");
+        expect(items).toHaveLength(6);
+        expect(buttons).toHaveLength(2);
+    },
+};
+export const visibleItems = {
+    name: "visibleItems",
+    render: () => (<Example>
+			<Example.Item title="visibleItems: 3">
+				<Carousel visibleItems={3}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
 
-		<Example.Item title={["responsive visibleItems", "[s] 2", "[m+] 3"]}>
-			<Carousel visibleItems={{ s: 2, m: 3 }}>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
+			<Example.Item title={["responsive visibleItems", "s: 2, m+ 3"]}>
+				<Carousel visibleItems={{ s: 2, m: 3 }}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
 
-		<Example.Item title="visibleItems: auto">
-			<Carousel>
-				<Placeholder h={100}/>
-				<Placeholder h={100} w={200}/>
-				<Placeholder h={100} w={300}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
-	</Example>);
-export const gap = () => (<Example>
-		<Example.Item title="gap: 2, visibleItems 3">
-			<Carousel visibleItems={3} gap={2}>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
+			<Example.Item title="visibleItems: auto">
+				<Carousel>
+					<Placeholder h={100}/>
+					<Placeholder h={100} w={200}/>
+					<Placeholder h={100} w={300}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
+		</Example>),
+};
+export const gap = {
+    name: "gap",
+    render: () => (<Example>
+			<Example.Item title="gap: 2, visibleItems 3">
+				<Carousel visibleItems={3} gap={2}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
 
-		<Example.Item title={["responsive gap, visibleItems: 3", "[s] 2", "[l] 8"]}>
-			<Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
-	</Example>);
-export const bleed = () => (<Example>
-		<Example.Item title="bleed: 4, visibleItems: 3">
-			<Carousel visibleItems={3} bleed={4}>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
+			<Example.Item title={["gap: responsive, visibleItems: 3", "s: 2, l: 8"]}>
+				<Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
+		</Example>),
+};
+export const bleed = {
+    name: "bleed",
+    render: () => (<Example>
+			<Example.Item title="bleed: 4, visibleItems: 3">
+				<Carousel visibleItems={3} bleed={4}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
 
-		<Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
-			<Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
-	</Example>);
-const RefDemo = () => {
-    const carouselRef = React.useRef(null);
-    return (<View gap={3}>
-			<View gap={3} direction="row">
-				<Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
-				<Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
-			</View>
-			<Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden">
+			<Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
+				<Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
+		</Example>),
+};
+export const navigationDisplay = {
+    name: "navigationDisplay",
+    render: () => (<Example>
+			<Example.Item title="navigationDisplay: hidden">
+				<Carousel visibleItems={3} navigationDisplay="hidden" attributes={{ "data-testid": "test-id" }}>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+					<Placeholder h={100}/>
+				</Carousel>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("test-id");
+        const buttons = root.querySelectorAll("button");
+        expect(buttons).toHaveLength(0);
+    },
+};
+export const instanceRef = {
+    name: "instanceRef, onChange",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => {
+        const carouselRef = React.useRef(null);
+        const [index, setIndex] = React.useState(0);
+        return (<Example>
+				<Example.Item title="instanceRef, onChange">
+					<View gap={3}>
+						<View gap={3} direction="row" align="center">
+							<Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
+							<Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
+							<Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>
+							<View.Item>Index: {index}</View.Item>
+						</View>
+						<Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden" onChange={(changeArgs) => {
+                args.handleChange(changeArgs);
+                setIndex(changeArgs.index);
+            }}>
+							<Placeholder h={100}>Item 0</Placeholder>
+							<Placeholder h={100}>Item 1</Placeholder>
+							<Placeholder h={100}>Item 2</Placeholder>
+							<Placeholder h={100}>Item 3</Placeholder>
+							<Placeholder h={100}>Item 4</Placeholder>
+							<Placeholder h={100}>Item 5</Placeholder>
+						</Carousel>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas, args }) => {
+        const buttons = canvas.getAllByRole("button");
+        const backButton = buttons[0];
+        const forwardButton = buttons[1];
+        const toButton = buttons[2];
+        await userEvent.click(forwardButton);
+        await waitFor(() => {
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 2 });
+            expect(args.handleChange).not.toHaveBeenCalledWith({ index: 3 });
+        });
+        args.handleChange.mockClear();
+        await userEvent.click(backButton);
+        await waitFor(() => {
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 0 });
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
+        });
+        args.handleChange.mockClear();
+        await userEvent.click(toButton);
+        await waitFor(() => {
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 2 });
+            expect(args.handleChange).toHaveBeenCalledWith({ index: 3 });
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Carousel visibleItems={2} className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder h={100}>Item 0</Placeholder>
 				<Placeholder h={100}>Item 1</Placeholder>
 				<Placeholder h={100}>Item 2</Placeholder>
 				<Placeholder h={100}>Item 3</Placeholder>
 				<Placeholder h={100}>Item 4</Placeholder>
 				<Placeholder h={100}>Item 5</Placeholder>
-				<Placeholder h={100}>Item 6</Placeholder>
 			</Carousel>
-		</View>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };
-export const navigation = () => (<Example>
-		<Example.Item title="navigation: hidden">
-			<Carousel visibleItems={3} navigationDisplay="hidden">
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-				<Placeholder h={100}/>
-			</Carousel>
-		</Example.Item>
-
-		<Example.Item title="navigation: external">
-			<RefDemo />
-		</Example.Item>
-	</Example>);

package/dist/components/Container/Container.module.css

@@ -1 +1 @@
-.root{box-sizing:content-box;margin:0 auto}
+.root{margin:0 auto}

package/dist/components/ContextMenu/ContextMenu.js

@@ -27,10 +27,10 @@ const ContextMenu = (props) => {
     React.useEffect(() => {
         return () => unlockScroll();
     }, [unlockScroll]);
-    return (_jsx("div", { className: s.root, ref: originRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: () => {
+    return (_jsx("div", { className: s.root, ref: originRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: (args) => {
                 setCoordinates(undefined);
                 unlockScroll();
-                onClose?.();
+                onClose?.(args);
             } }) }));
 };
 ContextMenu.Content = DropdownMenu.Content;

package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js

@@ -42,7 +42,7 @@ export const handlers = {
         await sleep(500);
         await userEvent.click(root);
         expect(args.handleClose).toHaveBeenCalledTimes(1);
-        expect(args.handleClose).toHaveBeenCalledWith();
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         await waitFor(() => {
             expect(item).not.toBeInTheDocument();
             expect(scroll).not.toHaveStyle("overflow: hidden");

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -40,8 +40,13 @@ const DropdownMenuItem = (props) => {
     const { onClick } = props;
     const { handleClose } = useFlyoutContext();
     const handleClick = (e) => {
+        /**
+         * Stop event propagation to make sure outside click doesn't get triggered
+         * after the content is closed
+         */
+        e.stopPropagation();
         if (handleClose)
-            handleClose({ closeParents: true });
+            handleClose({ closeParents: true, reason: "item-selection" });
         if (onClick)
             onClick(e);
     };

package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js

@@ -34,7 +34,7 @@ export const defaultActive = {
         await userEvent.click(document.body);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
             expect(item).not.toBeInTheDocument();
         });
         await userEvent.click(trigger);
@@ -66,7 +66,7 @@ export const active = {
         await userEvent.click(document.body);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         });
         expect(item).toBeInTheDocument();
     },