@moneyforward/mfui-components 2.48.1

package/dist/esm/src/DropdownMenu/DropdownMenu.types.d.ts

@@ -0,0 +1,105 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';
+import { type ButtonProps } from '../Button';
+import { type IconButtonProps } from '../IconButton';
+import { type PopoverProps } from '../Popover';
+type DropdownMenuCommonProps = {
+    /**
+     * The list of the dropdown menu.
+     *
+     * Only one or more composition components of a Menu component other than Menu.Container will be accepted.
+     * (Menu.Container is already defined inside the DropdownMenu component.)
+     *
+     * @example
+     * ```jsx
+     * <DropdownMenu>
+     *   <Menu.Item>Item 1</Menu.Item>
+     *   <Menu.Item>Item 2</Menu.Item>
+     *   <Menu.Divider />
+     *   <Menu.Item href="https://example.com">Item 3</Menu.Item>
+     * </DropdownMenu>
+     * ```
+     */
+    children: ReactNode;
+    /**
+     * The label of the trigger button of the dropdown menu.
+     *
+     * If the icon prop is provided, the label prop will be set as the aria-label of the icon button.
+     * If the icon prop is not provided, the label prop will be set as the label of the button.
+     */
+    label: string;
+    /**
+     * The properties for the popover content panel.
+     *
+     * @property className - The class name of the popover content panel.
+     *
+     * @property minWidth - The minimum width of the popover content panel.
+     *
+     * @property allowedPlacements - Allowed placements for the popover relative to the trigger element.
+     */
+    menuPopoverProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'> & {
+        minWidth?: PopoverProps['minWidth'];
+        allowedPlacements?: PopoverProps['allowedPlacements'];
+    };
+    /**
+     * The disabled state of the trigger element.
+     */
+    disabled?: boolean;
+    /**
+     * The icon of the trigger icon button of the dropdown menu.
+     *
+     * If the icon is provided, the trigger button will be rendered as the IconButton component.
+     * If the icon is not provided, the trigger button will be rendered as the Button.
+     */
+    icon?: ReactElement;
+    /**
+     * Callback fired when the open state of the DropdownMenu changes.
+     *
+     * @param open - The new open state of the DropdownMenu.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The callback function that is called when the DropdownMenu loses focus.
+     * This will only fire when the user truly leaves the component (not when the popover opens).
+     *
+     * @param event - The blur event from the trigger element
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu
+     *   onBlur={(event) => {
+     *     console.log('DropdownMenu lost focus');
+     *     // Perform validation or other actions
+     *   }}
+     * >
+     *   <Menu.Item>Item 1</Menu.Item>
+     * </DropdownMenu>
+     * ```
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+};
+type DropdownMenuPropsWithIcon = {
+    icon: ReactElement;
+    /**
+     * Button component and the IconButton component.
+     * The props of the trigger button.
+     * Use this prop if you need to customize the style of the trigger button.
+     *
+     * If the icon prop is provided, the following props are acceptable as props of the IconButton component:
+     *   'outlined' | 'className'
+     */
+    triggerProps?: Pick<IconButtonProps, 'outlined' | 'className'>;
+};
+type DropdownMenuPropsWithoutIcon = {
+    icon?: undefined;
+    /**
+     * Button component and the IconButton component.
+     * The props of the trigger button.
+     * Use this prop if you need to customize the style of the trigger button.
+     *
+     * If the icon prop is not provided, the following props are acceptable as props of the Button component:
+     *   'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className'
+     */
+    triggerProps?: Pick<ButtonProps, 'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className'>;
+};
+export type DropdownMenuProps<IconType = undefined> = DropdownMenuCommonProps & (IconType extends ReactElement ? DropdownMenuPropsWithIcon : DropdownMenuPropsWithoutIcon) & Pick<PopoverProps, 'targetDOMNode' | 'enableAutoUnmount'>;
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenu.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.d.ts

@@ -0,0 +1,6 @@
+import { type DropdownMenuContainerProps } from './DropdownMenuContainer.types';
+/**
+ * The root component for the dropdown menu.
+ * Put the `DropdownMenuItem` or `DropdownMenuDivider` components inside this component.
+ */
+export declare const DropdownMenuContainer: import("react").ForwardRefExoticComponent<DropdownMenuContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { cx } from '../../../styled-system/css';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
+import { dropdownMenuContainerSlotRecipe } from '../../../styled-system/recipes';
+/**
+ * The root component for the dropdown menu.
+ * Put the `DropdownMenuItem` or `DropdownMenuDivider` components inside this component.
+ */
+export const DropdownMenuContainer = forwardRef(({ children, className, defaultFocusItem: defaultFocus = 'first', style, onClose }, ref) => {
+    const classes = dropdownMenuContainerSlotRecipe();
+    const menuContainerRef = useRef(null);
+    useEffect(() => {
+        const focusableItems = menuContainerRef.current?.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])');
+        if (!focusableItems) {
+            return;
+        }
+        const defaultFocusIndex = defaultFocus === 'first' ? 0 : focusableItems.length - 1;
+        focusableItems[defaultFocusIndex]?.focus({ preventScroll: true });
+    }, [defaultFocus]);
+    const handleKeyDown = useCallback((event) => {
+        switch (event.key) {
+            case 'Escape':
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                onClose();
+                break;
+        }
+    }, [onClose]);
+    return (_jsx("div", { ref: mergeRefs(ref, menuContainerRef), "data-mfui-menu-container": true, role: "menu", className: cx(classes.root, 'mfui-DropdownMenuContainer__root', className), tabIndex: -1, style: style, onKeyDown: handleKeyDown, children: children }));
+});

package/dist/esm/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The default focus position of the menu.
+ */
+export type DropdownMenuDefaultFocusItem = 'first' | 'last';
+export type DropdownMenuContainerProps = {
+    /**
+     * The content of the component.
+     *
+     * It should be a collection of `DropdownMenuItem`, `DropdownMenuDivider` components.
+     */
+    children: React.ReactNode;
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+    /**
+     * The default focus position of the dropdown menu.
+     *
+     * It should be either 'first' or 'last'.
+     *
+     * If 'first', the first focusable item will be focused.
+     * If 'last', the last focusable item will be focused.
+     *
+     * @default 'first'
+     */
+    defaultFocusItem?: DropdownMenuDefaultFocusItem;
+    /**
+     * The style to apply to the component.
+     * This prop is used to add custom styles to the component.
+     * It is passed as the `style` prop of the div element.
+     *
+     * @default undefined
+     */
+    style?: React.CSSProperties;
+    /**
+     * The function to close the DropdownMenu.
+     */
+    onClose: () => void;
+};

package/dist/esm/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenuContainer } from './DropdownMenuContainer';
+export type { DropdownMenuContainerProps, DropdownMenuDefaultFocusItem } from './DropdownMenuContainer.types';

package/dist/esm/src/DropdownMenu/DropdownMenuContainer/index.js

@@ -0,0 +1 @@
+export { DropdownMenuContainer } from './DropdownMenuContainer';

package/dist/esm/src/DropdownMenu/DropdownMenuContext.d.ts

@@ -0,0 +1,10 @@
+type DropdownMenuContextValue = {
+    /**
+     * The function to close the DropdownMenu.
+     * This function is provided by the DropdownMenu component.
+     */
+    closeMenuPopover?: () => void;
+};
+export declare const useDropdownMenuContext: () => DropdownMenuContextValue;
+export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContextValue>;
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuContext.js

@@ -0,0 +1,7 @@
+'use client';
+import { createContext, useContext } from 'react';
+const DropdownMenuContext = createContext({
+    closeMenuPopover: undefined,
+});
+export const useDropdownMenuContext = () => useContext(DropdownMenuContext);
+export const DropdownMenuProvider = DropdownMenuContext.Provider;

package/dist/esm/src/DropdownMenu/DropdownMenuDivider/DropdownMenuDivider.d.ts

@@ -0,0 +1,6 @@
+import { type DropdownMenuDividerProps } from './DropdownMenuDivider.types';
+/**
+ * The divider component for the menu of the dropdown menu.
+ * This component should be used inside the `DropdownMenu` component.
+ */
+export declare function DropdownMenuDivider({ className }: DropdownMenuDividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DropdownMenu/DropdownMenuDivider/DropdownMenuDivider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../../styled-system/css';
+import { dropdownMenuDividerSlotRecipe } from '../../../styled-system/recipes';
+/**
+ * The divider component for the menu of the dropdown menu.
+ * This component should be used inside the `DropdownMenu` component.
+ */
+export function DropdownMenuDivider({ className }) {
+    const classes = dropdownMenuDividerSlotRecipe();
+    return _jsx("hr", { className: cx(classes.root, 'mfui-DropdownMenuDivider__root', className) });
+}

package/dist/esm/src/DropdownMenu/DropdownMenuDivider/DropdownMenuDivider.types.d.ts

@@ -0,0 +1,6 @@
+export type DropdownMenuDividerProps = {
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+};

package/dist/esm/src/DropdownMenu/DropdownMenuDivider/DropdownMenuDivider.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuDivider/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenuDivider } from './DropdownMenuDivider';
+export { type DropdownMenuDividerProps } from './DropdownMenuDivider.types';

package/dist/esm/src/DropdownMenu/DropdownMenuDivider/index.js

@@ -0,0 +1 @@
+export { DropdownMenuDivider } from './DropdownMenuDivider';

package/dist/esm/src/DropdownMenu/DropdownMenuHeading/DropdownMenuHeading.d.ts

@@ -0,0 +1,7 @@
+import { type DropdownMenuHeadingProps } from './DropdownMenuHeading.types';
+/**
+ * The DropdownMenuHeading component.
+ * It is used inside the DropdownMenu component to provide section headings.
+ * This component is not focusable and serves as a visual separator and label.
+ */
+export declare function DropdownMenuHeading({ children, className, id }: DropdownMenuHeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DropdownMenu/DropdownMenuHeading/DropdownMenuHeading.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../../styled-system/css';
+import { dropdownMenuHeadingSlotRecipe } from '../../../styled-system/recipes';
+import { Typography } from '../../Typography';
+/**
+ * The DropdownMenuHeading component.
+ * It is used inside the DropdownMenu component to provide section headings.
+ * This component is not focusable and serves as a visual separator and label.
+ */
+export function DropdownMenuHeading({ children, className, id }) {
+    const classes = dropdownMenuHeadingSlotRecipe();
+    return (_jsx("div", { id: id, className: cx(classes.root, 'mfui-DropdownMenuHeading__root', className), children: _jsx(Typography, { variant: "strongBody", children: children }) }));
+}

package/dist/esm/src/DropdownMenu/DropdownMenuHeading/DropdownMenuHeading.types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The props for the DropdownMenuHeading component.
+ */
+export type DropdownMenuHeadingProps = {
+    /**
+     * The content of the heading.
+     */
+    children: string;
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+    /**
+     * The id of the heading.
+     *
+     * This can be used to associate menu items with this heading via aria-labelledby for accessibility.
+     * You should use React's useId hook to generate a unique ID.
+     *
+     * @example
+     * ```tsx
+     * function MyMenu() {
+     *   const groupId = useId();
+     *   return (
+     *     <>
+     *       <DropdownMenu.Heading id={groupId}>Group 1</DropdownMenu.Heading>
+     *       <DropdownMenu.Item aria-labelledby={groupId}>
+     *         Action Item 1
+     *       </DropdownMenu.Item>
+     *     </>
+     *   );
+     * }
+     * ```
+     */
+    id?: string;
+};

package/dist/esm/src/DropdownMenu/DropdownMenuHeading/DropdownMenuHeading.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuHeading/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenuHeading } from './DropdownMenuHeading';
+export { type DropdownMenuHeadingProps } from './DropdownMenuHeading.types';

package/dist/esm/src/DropdownMenu/DropdownMenuHeading/index.js

@@ -0,0 +1 @@
+export { DropdownMenuHeading } from './DropdownMenuHeading';

package/dist/esm/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -0,0 +1,15 @@
+import { type DropdownMenuItemProps } from './DropdownMenuItem.types';
+/**
+ * The DropdownMenuItem component.
+ * It is used inside the DropdownMenu component.
+ * If the href or onClick prop is provided, the menu item will be focusable.
+ * Otherwise, it will be a div element and not focusable.
+ *
+ * If the href prop is provided, the menu item will be rendered as an anchor element.
+ * Also the target and customLinkComponent props can be used.
+ *
+ * If the href prop is undefined and onClick prop is provided, the menu item will be rendered as a button element.
+ *
+ * Otherwise, it will be rendered as a div element.
+ */
+export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef } from 'react';
+import { cx } from '../../../styled-system/css';
+import { findSiblingElements } from '../../utilities/dom/findSiblingElements';
+import { FocusIndicator } from '../../FocusIndicator';
+import { dropdownMenuItemSlotRecipe } from '../../../styled-system/recipes';
+import { Typography } from '../../Typography';
+import { useDropdownMenuContext } from '../DropdownMenuContext';
+/**
+ * The DropdownMenuItem component.
+ * It is used inside the DropdownMenu component.
+ * If the href or onClick prop is provided, the menu item will be focusable.
+ * Otherwise, it will be a div element and not focusable.
+ *
+ * If the href prop is provided, the menu item will be rendered as an anchor element.
+ * Also the target and customLinkComponent props can be used.
+ *
+ * If the href prop is undefined and onClick prop is provided, the menu item will be rendered as a button element.
+ *
+ * Otherwise, it will be rendered as a div element.
+ */
+export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, 'aria-labelledby': ariaLabelledby, ...rest }) {
+    const classes = dropdownMenuItemSlotRecipe();
+    const { closeMenuPopover } = useDropdownMenuContext();
+    const id = useId();
+    const itemRef = useRef(null);
+    const handleKeyDown = useCallback((event) => {
+        const siblingElements = findSiblingElements(event.currentTarget, '[data-mfui-menu-item]:is([data-mfui-focusable=true])');
+        const currentIndex = siblingElements.indexOf(event.currentTarget);
+        // If the current element is the last element, move to the first element.
+        const nextIndex = siblingElements.length - 1 === currentIndex ? 0 : currentIndex + 1;
+        // If the current element is the first element, move to the last element.
+        const previousIndex = currentIndex === 0 ? siblingElements.length - 1 : currentIndex - 1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.stopPropagation();
+                event.preventDefault();
+                siblingElements[nextIndex]?.focus();
+                break;
+            case 'ArrowUp':
+                event.stopPropagation();
+                event.preventDefault();
+                siblingElements[previousIndex]?.focus();
+                break;
+            default:
+                break;
+        }
+    }, []);
+    const handleClick = useCallback((event) => {
+        if (onClick) {
+            onClick(event);
+            closeMenuPopover?.();
+        }
+    }, [onClick, closeMenuPopover]);
+    const isButton = useMemo(() => onClick && !href, [onClick, href]);
+    const Tag = useMemo(() => {
+        if (href) {
+            return customLinkComponent ?? 'a';
+        }
+        if (isButton) {
+            return 'button';
+        }
+        return 'div';
+    }, [href, isButton, customLinkComponent]);
+    // If the href is provided, it should be an anchor element and focusable.
+    // If the href is undefined and onClick is provided, it should be a button element and focusable.
+    // If both are undefined, it should be a div element and not focusable.
+    const isFocusable = !!href || !!onClick;
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: href, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
+}

package/dist/esm/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.types.d.ts

@@ -0,0 +1,93 @@
+import { type ComponentPropsWithoutRef, type ElementType, type HTMLAttributes } from 'react';
+type AnchorProps = {
+    /**
+     * The URL to link when the menu item is clicked.
+     */
+    href: string;
+    /**
+     * The target attribute for the anchor element.
+     */
+    target?: string;
+    /**
+     * The custom link component to use instead of the default `<a>` element.
+     */
+    customLinkComponent?: ElementType;
+    /**
+     * This property is ignored if the href property is provided.
+     */
+    onClick?: undefined;
+};
+type DivProps = {
+    /**
+     * If href and onClick prop are not provided, the menu item will be rendered as a div element.
+     */
+    href?: undefined;
+    /**
+     * This property is ignored if the href property is not provided.
+     */
+    target?: undefined;
+    /**
+     * This property is ignored if the href property is not provided.
+     */
+    customLinkComponent?: undefined;
+    /**
+     * If not provided and the href prop is not provided, the menu item will be rendered as a div element.
+     */
+    onClick?: undefined;
+};
+type ButtonProps = {
+    /**
+     * If not provided and the onClick prop is provided, the menu item will be rendered as a button element.
+     */
+    href?: undefined;
+    /**
+     * This property is ignored if the href property is not provided.
+     */
+    target?: undefined;
+    /**
+     * This property is ignored if the href property is not provided.
+     */
+    customLinkComponent?: undefined;
+    /**
+     * The handler to call when the menu item is clicked or the Enter key is pressed.
+     */
+    onClick?: ComponentPropsWithoutRef<'button'>['onClick'];
+};
+/**
+ * The props for the MenuItem component.
+ */
+export type DropdownMenuItemProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+    /**
+     * The aria-labelledby attribute for accessibility.
+     *
+     * When provided, the component automatically generates a unique ID and appends it to the specified value.
+     * This prevents ID collision issues and ensures proper accessibility.
+     *
+     * Typically used to reference a group heading ID so that screen readers announce both the group name and item label.
+     *
+     * @example
+     * ```tsx
+     * function MyMenu() {
+     *   const groupId = useId();
+     *   return (
+     *     <>
+     *       <DropdownMenu.Heading id={groupId}>Group 1</DropdownMenu.Heading>
+     *       <DropdownMenu.Item aria-labelledby={groupId}>
+     *         Action Item 1
+     *       </DropdownMenu.Item>
+     *     </>
+     *   );
+     * }
+     * ```
+     */
+    'aria-labelledby'?: string;
+} & (AnchorProps | DivProps | ButtonProps) & HTMLAttributes<HTMLElement>;
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/DropdownMenu/DropdownMenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenuItem } from './DropdownMenuItem';
+export { type DropdownMenuItemProps } from './DropdownMenuItem.types';

package/dist/esm/src/DropdownMenu/DropdownMenuItem/index.js

@@ -0,0 +1 @@
+export { DropdownMenuItem } from './DropdownMenuItem';

package/dist/esm/src/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu.types';

package/dist/esm/src/DropdownMenu/index.js

@@ -0,0 +1 @@
+export { DropdownMenu } from './DropdownMenu';

package/dist/esm/src/EmbeddedSidePane/EmbeddedSidePane.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `EmbeddedSidePane` is a variant of `SidePane` that is positioned absolutely within its container.
+ * The container must have `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
+ * This component extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const EmbeddedSidePane: import("react").ForwardRefExoticComponent<{
+    container?: HTMLElement | null;
+} & Omit<import("..").SidePaneProps, "targetDOMNode" | "enableNonModal"> & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * The `EmbeddedSidePane.Container` component is used to define the container for the `EmbeddedSidePane`.
+     * It should be a parent element that has `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
+     *
+     * This component extends the props of `<div>` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+     */
+    Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/esm/src/EmbeddedSidePane/EmbeddedSidePane.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { SidePane } from '../SidePane/SidePane';
+import { embeddedSidePaneSlotRecipe } from '../../styled-system/recipes';
+import { cx } from '../../styled-system/css';
+import { mergeRefs } from '../utilities/dom/mergeRefs';
+const EmbeddedSidePaneContext = createContext({
+    container: null,
+});
+const Container = forwardRef(({ className, ...props }, ref) => {
+    const classes = embeddedSidePaneSlotRecipe();
+    const localRef = useRef(null);
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        setContainer(localRef.current);
+    }, []);
+    const values = useMemo(() => ({
+        container,
+    }), [container]);
+    return (_jsx(EmbeddedSidePaneContext.Provider, { value: values, children: _jsx("div", { ref: mergeRefs(ref, localRef), className: cx('mfui-EmbeddedSidePane__container', classes.container, className), ...props }) }));
+});
+const Base = forwardRef(({ container, className, ...props }, ref) => {
+    const classes = embeddedSidePaneSlotRecipe();
+    const embeddedSidePaneContext = useContext(EmbeddedSidePaneContext);
+    return (_jsx(SidePane, { ref: ref, enableModal: false, targetDOMNode: container ?? embeddedSidePaneContext.container, className: cx('mfui-EmbeddedSidePane__root', classes.root, className), ...props }));
+});
+/**
+ * `EmbeddedSidePane` is a variant of `SidePane` that is positioned absolutely within its container.
+ * The container must have `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
+ * This component extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const EmbeddedSidePane = Object.assign(Base, {
+    /**
+     * The `EmbeddedSidePane.Container` component is used to define the container for the `EmbeddedSidePane`.
+     * It should be a parent element that has `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
+     *
+     * This component extends the props of `<div>` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+     */
+    Container,
+});

package/dist/esm/src/EmbeddedSidePane/EmbeddedSidePane.types.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type SidePaneProps } from '../SidePane/SidePane.types';
+export type EmbeddedSidePaneProps = {
+    /**
+     * The container element where the EmbeddedSidePane will be rendered inside and positioned.
+     * This element must have "position: relative" for proper positioning and "overflow: hidden/clip" for clipping.
+     *
+     * @default undefined
+     */
+    container?: HTMLElement | null;
+} & Omit<SidePaneProps, 'targetDOMNode' | 'enableNonModal'>;
+export type EmbeddedSidePaneContainerProps = ComponentPropsWithoutRef<'div'>;

package/dist/esm/src/EmbeddedSidePane/EmbeddedSidePane.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/EmbeddedSidePane/index.d.ts

@@ -0,0 +1,2 @@
+export { EmbeddedSidePane } from './EmbeddedSidePane';
+export type { EmbeddedSidePaneProps, EmbeddedSidePaneContainerProps } from './EmbeddedSidePane.types';

package/dist/esm/src/EmbeddedSidePane/index.js

@@ -0,0 +1 @@
+export { EmbeddedSidePane } from './EmbeddedSidePane';

package/dist/esm/src/FileBox/FileBox.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The component for selecting a single file or multiple files for upload.
+ *
+ * Also extends the props of `<input type="file">` element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+ */
+export declare const FileBox: import("react").ForwardRefExoticComponent<{
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
+    disabled?: boolean;
+    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
+    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
+    buttonLabel?: string;
+    placeholder?: string;
+    multipleFilesSuffixLabel?: string;
+    clearButtonProps?: Pick<import("../IconButton").IconButtonProps, "aria-label">;
+} & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;