@moysklad/uikit 28.1.0

package/dist/components/Select/ShortVariant/ShortVariant.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Text } from "../../Text/Text.js";
+import { Down12Icon, RemoveClose12Icon } from "../../../icon/index.js";
+import { Info } from "../../Info/Info.js";
+import { Label } from "../../Label/Label.js";
+import { OverflowingHint } from "../OverflowingHint/OverflowingHint.js";
+import ShortVariant_module from "./ShortVariant.module.js";
+const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, label, helperText, info, error, required, className, disabled, disableClear, hintZIndex = 100, renderValue, onClear, tabIndex, ...otherProps }, ref)=>{
+    const handleClear = (e)=>{
+        e.stopPropagation();
+        onClear();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: ShortVariant_module.outerContainer,
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                required: required,
+                testId: testId
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                role: "combobox",
+                tabIndex: disabled ? -1 : tabIndex ?? 0,
+                "aria-disabled": disabled,
+                className: cn(ShortVariant_module.container, className),
+                ref: ref,
+                "data-test-id": testId,
+                ...otherProps,
+                children: [
+                    renderValue ? renderValue({
+                        input: null,
+                        placeholder,
+                        searchable: false,
+                        searchText: '',
+                        value
+                    }) : /*#__PURE__*/ jsx(OverflowingHint, {
+                        zIndex: hintZIndex,
+                        hintText: value ? value.label : placeholder,
+                        children: (ref)=>/*#__PURE__*/ jsx(Text.Body, {
+                                className: ShortVariant_module.value,
+                                ref: ref,
+                                children: value ? value.label : placeholder
+                            })
+                    }),
+                    value && !disableClear ? /*#__PURE__*/ jsx("button", {
+                        className: ShortVariant_module.deleteButton,
+                        onClick: handleClear,
+                        "data-test-id": testId ? `${testId}-clear-button` : '',
+                        children: /*#__PURE__*/ jsx(RemoveClose12Icon, {})
+                    }) : /*#__PURE__*/ jsx("div", {
+                        className: ShortVariant_module.downIcon,
+                        "data-test-id": testId ? `${testId}-arrow-icon` : '',
+                        children: /*#__PURE__*/ jsx(Down12Icon, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Info, {
+                info: info || helperText,
+                error: error,
+                testId: testId
+            })
+        ]
+    });
+});
+ShortVariant.displayName = 'ShortVariant';
+export { ShortVariant };

package/dist/components/Select/ShortVariant/ShortVariant.module.js

@@ -0,0 +1,9 @@
+import "./ShortVariant_module.css";
+const ShortVariant_module = {
+    outerContainer: "outerContainer-XRF8Ah",
+    container: "container-sh9fLu",
+    deleteButton: "deleteButton-vXaACU",
+    downIcon: "downIcon-XaLwIU",
+    value: "value-W7MA4Q"
+};
+export default ShortVariant_module;

package/dist/components/Select/ShortVariant/ShortVariant_module.css

@@ -0,0 +1,36 @@
+.outerContainer-XRF8Ah {
+  width: fit-content;
+}
+
+.container-sh9fLu {
+  cursor: pointer;
+  align-items: center;
+  column-gap: 12px;
+  width: fit-content;
+  display: flex;
+}
+
+.container-sh9fLu .deleteButton-vXaACU {
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.container-sh9fLu .downIcon-XaLwIU {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.value-W7MA4Q {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+

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

@@ -0,0 +1,85 @@
+import type { AriaAttributes, KeyboardEvent, MutableRefObject, ReactNode, RefObject } from 'react';
+import type { IHasTestId } from '../../common';
+import type { ValueOf } from '../../common/types';
+export interface ISelectOption<T = unknown> {
+    label: string;
+    value: string | number;
+    color?: string;
+    isArchived?: boolean;
+    dto?: T;
+}
+export interface IRenderValueOptions<T = unknown> {
+    value: ISelectOption<T>;
+    input: ReactNode;
+    placeholder: ReactNode;
+    searchText: string;
+    searchable: boolean;
+    disabled?: boolean;
+}
+export interface IBaseSelectProps<T = unknown> extends IHasTestId {
+    label?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    error?: boolean;
+    /** @deprecated Используйте prop `info`*/
+    helperText?: string;
+    info?: string;
+    helpComponent?: ReactNode;
+    fullWidth?: boolean;
+    value?: ISelectOption<T>;
+    hintZIndex?: number;
+    renderValue?: (options: IRenderValueOptions<T>) => ReactNode;
+}
+export interface IRenderDropdownContentOptions<T = unknown> {
+    dropdown: ReactNode;
+    notFound: ReactNode;
+    dropdownTriggerRef: RefObject<HTMLDivElement>;
+    listboxId: string;
+    isOptionEllipsis: boolean;
+    searchText: string;
+    isLoading?: boolean;
+    loadingComponent?: ReactNode;
+    closeDropdown: () => void;
+    options?: ISelectOption[];
+    onSelect: (option: ISelectOption) => void;
+    onSetCursor?: (cursor: number) => void;
+    cursor: number | null;
+    value?: ISelectOption<T>;
+    searchHandler: (text: string) => void;
+    inputKeyUpHandler: (e: KeyboardEvent<HTMLInputElement>) => void;
+    clearHandler: () => void;
+}
+export interface IRenderInputOptions {
+    triggerRef: MutableRefObject<HTMLDivElement | null>;
+    triggerAriaProps: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-activedescendant'>;
+    dropdownAriaProps: {
+        id: string;
+    };
+    isDropdownOpen: boolean;
+    openHandler: () => void;
+    toggleHandler: () => void;
+    searchText: string;
+    searchHandler: (text: string) => void;
+    clearHandler: () => void;
+    inputKeyUpHandler: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface IRenderActionsOptions {
+    closeDropdown: () => void;
+}
+export declare const KEYBOARD_KEYS: {
+    readonly ENTER: "Enter";
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly TAB: "Tab";
+    readonly ESCAPE: "Escape";
+};
+export type KeyboardKeysValue = ValueOf<typeof KEYBOARD_KEYS>;
+export interface IUseArrowListenerOptions {
+    cursor: number | null;
+    itemsLength: number;
+    listRef: RefObject<HTMLUListElement>;
+    onSetCursor?: (cursor: number) => void;
+}
+export type SelectVariantsEnum = 'default' | 'short';

package/dist/components/Select/types.js

@@ -0,0 +1,8 @@
+const KEYBOARD_KEYS = {
+    ENTER: 'Enter',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_UP: 'ArrowUp',
+    TAB: 'Tab',
+    ESCAPE: 'Escape'
+};
+export { KEYBOARD_KEYS };

package/dist/components/Select/useSelectDropdown.d.ts

@@ -0,0 +1,25 @@
+import type { ValueOf } from '../../common/types';
+export declare const SELECT_DROPDOWN_CLOSE_REASON: {
+    readonly SELECT: "select";
+    readonly OUTSIDE_CLICK: "outside_click";
+    readonly FOCUS_OUTSIDE: "focus_outside";
+    readonly ESCAPE: "escape";
+    readonly MANUAL: "manual";
+};
+export type SelectDropdownCloseReason = ValueOf<typeof SELECT_DROPDOWN_CLOSE_REASON>;
+interface UseSelectDropdownOptions {
+    onClose: (reason: SelectDropdownCloseReason) => void;
+    onToggle?: (open: boolean) => void;
+}
+export declare const useSelectDropdown: ({ onToggle, onClose, }: UseSelectDropdownOptions) => {
+    open: boolean;
+    triggerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    triggerAriaProps: Pick<import("react").AriaAttributes, "aria-controls" | "aria-expanded" | "aria-haspopup">;
+    dropdownAriaProps: {
+        id: string;
+    };
+    openDropdown: () => void;
+    closeDropdown: (reason?: SelectDropdownCloseReason) => void;
+    toggleDropdown: () => void;
+};
+export {};

package/dist/components/Select/useSelectDropdown.js

@@ -0,0 +1,49 @@
+import { useCallback } from "react";
+import { DROPDOWN_CLOSE_REASON, useDropdown } from "../Dropdown/Dropdown.js";
+const SELECT_DROPDOWN_CLOSE_REASON = {
+    ...DROPDOWN_CLOSE_REASON,
+    SELECT: 'select'
+};
+const useSelectDropdown = ({ onToggle, onClose })=>{
+    const { open, triggerRef, handleClose: handleCloseDropdown, handleOpen: handleOpenDropdown, triggerAriaProps, dropdownAriaProps } = useDropdown({
+        hasPopup: 'listbox',
+        onToggle: (nextOpen)=>{
+            if (nextOpen === open) return;
+            onToggle?.(nextOpen);
+        }
+    });
+    const openDropdown = useCallback(()=>{
+        if (open) return;
+        handleOpenDropdown();
+    }, [
+        open,
+        handleOpenDropdown
+    ]);
+    const closeDropdown = useCallback((reason = SELECT_DROPDOWN_CLOSE_REASON.MANUAL)=>{
+        if (!open) return;
+        onClose(reason);
+        handleCloseDropdown();
+    }, [
+        open,
+        onClose,
+        handleCloseDropdown
+    ]);
+    const toggleDropdown = useCallback(()=>{
+        if (open) return void closeDropdown();
+        handleOpenDropdown();
+    }, [
+        open,
+        closeDropdown,
+        handleOpenDropdown
+    ]);
+    return {
+        open,
+        triggerRef,
+        triggerAriaProps,
+        dropdownAriaProps,
+        openDropdown,
+        closeDropdown,
+        toggleDropdown
+    };
+};
+export { SELECT_DROPDOWN_CLOSE_REASON, useSelectDropdown };

package/dist/components/Select/utils.d.ts

@@ -0,0 +1,9 @@
+import type { ISelectOption } from './types';
+interface IGetFilteredOptionsParams {
+    searchText: string;
+    options: ISelectOption[];
+    newOptions: ISelectOption[];
+    valueLabel: string;
+}
+export declare const getFilteredOptions: ({ searchText, options, newOptions, valueLabel, }: IGetFilteredOptionsParams) => ISelectOption<unknown>[];
+export {};

package/dist/components/Select/utils.js

@@ -0,0 +1,8 @@
+const shouldNotBeFiltered = (searchText, valueLabel)=>!searchText.length || searchText === valueLabel;
+const filterOptionsByLabel = (options, searchText)=>options.filter((o)=>o.label.toLowerCase().includes(searchText.toLowerCase()));
+const getFilteredOptions = ({ searchText, options, newOptions, valueLabel })=>{
+    const mergedOptions = newOptions.concat(options);
+    if (shouldNotBeFiltered(searchText, valueLabel)) return mergedOptions;
+    return filterOptionsByLabel(mergedOptions, searchText);
+};
+export { getFilteredOptions };

package/dist/components/SideMenu/SideMenu.d.ts

@@ -0,0 +1,18 @@
+import type { IHasTestId } from '../../common/types';
+type Item = {
+    id: string;
+    label: string;
+};
+export interface SideMenuProps extends IHasTestId {
+    items: Item[];
+    selectedId: string;
+    testId?: string;
+    className?: string;
+    classNameItem?: string;
+    onSelect: (selectId: string) => void;
+}
+export declare const SideMenu: {
+    ({ items, selectedId, className, classNameItem, testId, onSelect, }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/SideMenu/SideMenu.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../common/css/cn.js";
+import { SideMenuItem } from "../SideMenuItem/SideMenuItem.js";
+import SideMenu_module from "./SideMenu.module.js";
+const SideMenu = ({ items, selectedId, className, classNameItem, testId, onSelect })=>/*#__PURE__*/ jsx("menu", {
+        className: cn(SideMenu_module.menu, className),
+        role: "menu",
+        "data-test-id": testId,
+        children: items.map((item)=>/*#__PURE__*/ jsx(SideMenuItem, {
+                title: item.label,
+                isSelected: selectedId === item.id,
+                className: classNameItem,
+                testId: `${testId}-id-${item.id}`,
+                onClick: ()=>onSelect(item.id)
+            }, item.id))
+    });
+SideMenu.displayName = 'SideMenu';
+export { SideMenu };

package/dist/components/SideMenu/SideMenu.module.js

@@ -0,0 +1,5 @@
+import "./SideMenu_module.css";
+const SideMenu_module = {
+    menu: "menu-tbFa3j"
+};
+export default SideMenu_module;

package/dist/components/SideMenu/SideMenu_module.css

@@ -0,0 +1,5 @@
+.menu-tbFa3j {
+  margin: 0;
+  padding: 0;
+}
+

package/dist/components/SideMenuItem/SideMenuItem.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEventHandler } from 'react';
+import type { IHasTestId } from '../../common/types';
+export interface SideMenuItemProps extends IHasTestId {
+    title: string;
+    isSelected: boolean;
+    className?: string;
+    onClick: MouseEventHandler;
+}
+export declare const SideMenuItem: {
+    ({ title, isSelected, className, testId, onClick, }: SideMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/SideMenuItem/SideMenuItem.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../common/css/cn.js";
+import { Text } from "../Text/Text.js";
+import SideMenuItem_module from "./SideMenuItem.module.js";
+const SideMenuItem = ({ title, isSelected, className, testId, onClick })=>/*#__PURE__*/ jsx("li", {
+        className: cn(SideMenuItem_module.main, className, isSelected && SideMenuItem_module.selected),
+        tabIndex: 0,
+        onClick: onClick,
+        "data-test-id": testId,
+        "data-test-selected": isSelected,
+        children: /*#__PURE__*/ jsx(Text.Body, {
+            role: "menuitem",
+            children: title
+        })
+    });
+SideMenuItem.displayName = 'SideMenuItem';
+export { SideMenuItem };

package/dist/components/SideMenuItem/SideMenuItem.module.js

@@ -0,0 +1,6 @@
+import "./SideMenuItem_module.css";
+const SideMenuItem_module = {
+    main: "main-HD2_d1",
+    selected: "selected-NfNfdd"
+};
+export default SideMenuItem_module;

package/dist/components/SideMenuItem/SideMenuItem_module.css

@@ -0,0 +1,22 @@
+.main-HD2_d1 {
+  cursor: pointer;
+  text-indent: 0;
+  border-radius: 4px;
+  margin: 0;
+  padding: 6px 8px;
+  list-style-type: none;
+}
+
+.main-HD2_d1:hover {
+  background-color: var(--light-grey-alpha-8);
+}
+
+.main-HD2_d1:active {
+  background-color: #6781aa1a;
+}
+
+.main-HD2_d1.selected-NfNfdd {
+  cursor: default;
+  background-color: #4b648b1f;
+}
+

package/dist/components/SideMenuTitle/SideMenuTitle.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { IHasTestId } from '../../common/types';
+export interface SideMenuTitleProps extends IHasTestId {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const SideMenuTitle: {
+    ({ className, children, testId, }: SideMenuTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/SideMenuTitle/SideMenuTitle.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../common/css/cn.js";
+import { Text } from "../Text/Text.js";
+import SideMenuTitle_module from "./SideMenuTitle.module.js";
+const SideMenuTitle = ({ className, children, testId })=>/*#__PURE__*/ jsx(Text.H4, {
+        className: cn(SideMenuTitle_module.main, className),
+        testId: testId,
+        children: children
+    });
+SideMenuTitle.displayName = 'SideMenuTitle';
+export { SideMenuTitle };

package/dist/components/SideMenuTitle/SideMenuTitle.module.js

@@ -0,0 +1,5 @@
+import "./SideMenuTitle_module.css";
+const SideMenuTitle_module = {
+    main: "main-azLZuA"
+};
+export default SideMenuTitle_module;

package/dist/components/SideMenuTitle/SideMenuTitle_module.css

@@ -0,0 +1,4 @@
+.main-azLZuA {
+  padding: 8px;
+}
+

package/dist/components/Sidepage/AnimationWrapper/AnimationWrapper.d.ts

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from 'react';
+type IAnimationWrapperProps = {
+    isOpen: boolean;
+    withBackdrop: boolean;
+    showShadow: boolean;
+    zIndex?: number;
+    disableOverflowControl?: boolean;
+    onAnimationOpenFinish?: () => void;
+    onAnimationCloseFinish?: () => void;
+};
+export declare const AnimationWrapper: ({ isOpen, withBackdrop, showShadow, children, zIndex, disableOverflowControl, onAnimationOpenFinish, onAnimationCloseFinish, }: PropsWithChildren<IAnimationWrapperProps>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Sidepage/AnimationWrapper/AnimationWrapper.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../../common/css/cn.js";
+import AnimationWrapper_module from "./AnimationWrapper.module.js";
+const keyframes = {
+    to: {
+        transform: 'translateX(0)'
+    },
+    from: {
+        transform: 'translateX(100%)'
+    }
+};
+const animationDuration = 300;
+const AnimationWrapper = ({ isOpen, withBackdrop, showShadow, children, zIndex = 100, disableOverflowControl = false, onAnimationOpenFinish, onAnimationCloseFinish })=>{
+    const bodyRef = useRef(document.querySelector('body'));
+    const elementRef = useRef(null);
+    const [shouldOpen, setShouldOpen] = useState(isOpen);
+    const disableOverflowControlRef = useRef(disableOverflowControl);
+    disableOverflowControlRef.current = disableOverflowControl;
+    useLayoutEffect(()=>{
+        const childElement = elementRef.current;
+        if (isOpen) {
+            setShouldOpen(true);
+            if (!childElement) return;
+            if (!disableOverflowControlRef.current && withBackdrop && bodyRef.current) bodyRef.current.style.overflow = 'hidden';
+            const animationOpen = childElement.animate([
+                keyframes.from,
+                keyframes.to
+            ], animationDuration);
+            animationOpen.onfinish = ()=>{
+                onAnimationOpenFinish?.();
+            };
+        } else {
+            if (!childElement) return;
+            const animationClose = childElement.animate([
+                keyframes.to,
+                keyframes.from
+            ], animationDuration);
+            animationClose.onfinish = ()=>{
+                if (!disableOverflowControlRef.current && withBackdrop && bodyRef.current) bodyRef.current.style.overflow = '';
+                setShouldOpen(false);
+                childElement.style.display = 'none';
+                onAnimationCloseFinish?.();
+            };
+        }
+    }, [
+        isOpen,
+        shouldOpen
+    ]);
+    useEffect(()=>{
+        if (isOpen && !withBackdrop && !disableOverflowControlRef.current && bodyRef.current) bodyRef.current.style.overflow = '';
+    }, [
+        withBackdrop
+    ]);
+    return shouldOpen ? /*#__PURE__*/ jsx("div", {
+        ref: elementRef,
+        className: cn(AnimationWrapper_module.wrapper, showShadow && AnimationWrapper_module.showShadow),
+        style: {
+            zIndex
+        },
+        children: children
+    }) : null;
+};
+export { AnimationWrapper };

package/dist/components/Sidepage/AnimationWrapper/AnimationWrapper.module.js

@@ -0,0 +1,6 @@
+import "./AnimationWrapper_module.css";
+const AnimationWrapper_module = {
+    wrapper: "wrapper-onGxgu",
+    showShadow: "showShadow-AE8BZL"
+};
+export default AnimationWrapper_module;

package/dist/components/Sidepage/AnimationWrapper/AnimationWrapper_module.css

@@ -0,0 +1,14 @@
+.wrapper-onGxgu {
+  box-shadow: none;
+  transition: transform .5s ease-in-out;
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.wrapper-onGxgu.showShadow-AE8BZL {
+  box-shadow: 0 2px 7px #09173933;
+}
+

package/dist/components/Sidepage/Sidepage.d.ts

@@ -0,0 +1,26 @@
+import type { IHasTestId } from '../../common';
+import { type SidepageModeValue } from './consts';
+export interface ISidepageProps extends IHasTestId {
+    isOpen: boolean;
+    isBackLayer?: boolean;
+    withBackdrop?: boolean;
+    showShadow?: boolean;
+    mode?: SidepageModeValue;
+    width?: number;
+    className?: string;
+    closeButtonClassName?: string;
+    zIndex?: number;
+    disableOverflowControl?: boolean;
+    onClose: () => void;
+    closeOnBackdropClick?: boolean;
+    onBackdropClick?: () => void;
+    onAnimationOpenFinish?: () => void;
+    onAnimationCloseFinish?: () => void;
+}
+export declare const Sidepage: import("react").ForwardRefExoticComponent<ISidepageProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { SidepageMode, type SidepageModeValue } from './consts';
+export { SidepageContent } from './SidepageContent';
+export { SidepageFooter } from './SidepageFooter';
+export { SidepageHeader } from './SidepageHeader';

package/dist/components/Sidepage/Sidepage.js

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { cn } from "../../common/css/cn.js";
+import { SidepageMode } from "./consts.js";
+import { RemoveCloseIcon16Icon } from "../../icon/index.js";
+import { AnimationWrapper } from "./AnimationWrapper/AnimationWrapper.js";
+import Sidepage_module from "./Sidepage.module.js";
+const Sidepage = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, isOpen, onClose, withBackdrop = false, isBackLayer = false, showShadow = true, mode = SidepageMode.Fixed, width = 782, zIndex = 100, className, testId, closeOnBackdropClick = false, disableOverflowControl = false, closeButtonClassName, onBackdropClick, onAnimationOpenFinish, onAnimationCloseFinish } = props;
+    const sidepageWidth = useMemo(()=>{
+        if (mode === SidepageMode.Adaptive) return 'calc(100vw - 40px)';
+        if (isBackLayer) return width + 20;
+        return width;
+    }, [
+        mode,
+        isBackLayer,
+        width
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(AnimationWrapper, {
+                isOpen: isOpen,
+                withBackdrop: withBackdrop,
+                showShadow: showShadow,
+                zIndex: zIndex,
+                disableOverflowControl: disableOverflowControl,
+                onAnimationOpenFinish: onAnimationOpenFinish,
+                onAnimationCloseFinish: onAnimationCloseFinish,
+                children: /*#__PURE__*/ jsxs("div", {
+                    "data-test-id": testId,
+                    className: cn(Sidepage_module.wrapper, className, showShadow && Sidepage_module.showShadow),
+                    style: {
+                        width: sidepageWidth
+                    },
+                    children: [
+                        isBackLayer ? null : /*#__PURE__*/ jsxs("div", {
+                            "data-test-id": testId ? `${testId}-close-btn` : null,
+                            className: cn(Sidepage_module.iconWrapper, closeButtonClassName),
+                            onClick: ()=>onClose(),
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: Sidepage_module.iconWrapperBg
+                                }),
+                                /*#__PURE__*/ jsx(RemoveCloseIcon16Icon, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            ref: ref,
+                            "data-test-id": testId ? `${testId}-content` : null,
+                            className: Sidepage_module.overflow,
+                            children: children
+                        })
+                    ]
+                })
+            }),
+            withBackdrop && /*#__PURE__*/ jsx("div", {
+                className: cn(Sidepage_module.backdrop, isOpen && Sidepage_module.open),
+                style: {
+                    zIndex: zIndex - 1
+                },
+                onClick: ()=>{
+                    if (onBackdropClick) onBackdropClick();
+                    if (closeOnBackdropClick) onClose();
+                }
+            })
+        ]
+    });
+});
+Sidepage.displayName = 'Sidepage';
+export { SidepageContent } from "./SidepageContent.js";
+export { SidepageFooter } from "./SidepageFooter.js";
+export { SidepageHeader } from "./SidepageHeader.js";
+export { Sidepage, SidepageMode };