draft-components 1.12.0 → 1.13.0

package/cjs/components/slide-over/slide-over.cjs

@@ -19,7 +19,7 @@ const backdropFade = [
     { opacity: 0 },
     { opacity: 1 },
 ];
-function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, className, children, onClose, ...props }) {
+const SlideOverWithRef = react.forwardRef(function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, shouldCloseOnEscKeyPress = true, shouldCloseOnBackdropClick = true, className, children, onClose, ...props }, ref) {
     const id = react.useId();
     const titleId = ariaLabelledby || `${id}dialogTitle`;
     const descriptionId = ariaDescribedby || `${id}dialogDescription`;
@@ -73,6 +73,9 @@ function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': aria
             });
         };
     }, [animationDurationMs, onClose, shouldPlayAnimations]);
+    react.useImperativeHandle(ref, () => ({
+        close: closePanel,
+    }));
     react.useEffect(() => {
         isAnimationDisabled.current = animationDisabled;
     }, [animationDisabled]);
@@ -92,15 +95,19 @@ function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': aria
             });
         }
     }, [shouldPlayAnimations, animationDurationMs]);
-    useEscKeyDown.useEscKeyDown(() => closePanel('escape'));
+    useEscKeyDown.useEscKeyDown(() => closePanel('escape'), { isEnabled: shouldCloseOnEscKeyPress });
     useFocusTrap.useFocusTrap(panelRef);
     useDisableBodyScroll.useDisableBodyScroll();
     const onClickBackdrop = () => {
-        closePanel('backdrop');
+        if (shouldCloseOnBackdropClick) {
+            closePanel('backdrop');
+        }
     };
     return (jsxRuntime.jsx(portal.Portal, { children: jsxRuntime.jsxs("div", { className: "dc-slide-over", children: [jsxRuntime.jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, onClick: onClickBackdrop }), jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: jsxRuntime.jsx(slideOverContext.SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
-}
-SlideOver.Header = slideOverHeader.SlideOverHeader;
-SlideOver.Body = slideOverBody.SlideOverBody;
+});
+const SlideOver = Object.assign(SlideOverWithRef, {
+    Header: slideOverHeader.SlideOverHeader,
+    Body: slideOverBody.SlideOverBody,
+});
 
 exports.SlideOver = SlideOver;

package/esm/components/slide-over/slide-over-context.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 
 const Context = createContext(null);
 function useSlideOverContext() {

package/esm/components/slide-over/slide-over.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useRef, useCallback, useMemo, useEffect } from 'react';
+import { forwardRef, useId, useRef, useCallback, useMemo, useImperativeHandle, useEffect } from 'react';
 import { SlideOverContextProvider } from './slide-over-context.js';
 import { getRefElement, classNames } from '../../lib/react-helpers.js';
 import { useDisableBodyScroll } from '../../hooks/use-disable-body-scroll.js';
@@ -17,7 +17,7 @@ const backdropFade = [
     { opacity: 0 },
     { opacity: 1 },
 ];
-function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, className, children, onClose, ...props }) {
+const SlideOverWithRef = forwardRef(function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, shouldCloseOnEscKeyPress = true, shouldCloseOnBackdropClick = true, className, children, onClose, ...props }, ref) {
     const id = useId();
     const titleId = ariaLabelledby || `${id}dialogTitle`;
     const descriptionId = ariaDescribedby || `${id}dialogDescription`;
@@ -71,6 +71,9 @@ function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': aria
             });
         };
     }, [animationDurationMs, onClose, shouldPlayAnimations]);
+    useImperativeHandle(ref, () => ({
+        close: closePanel,
+    }));
     useEffect(() => {
         isAnimationDisabled.current = animationDisabled;
     }, [animationDisabled]);
@@ -90,15 +93,19 @@ function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': aria
             });
         }
     }, [shouldPlayAnimations, animationDurationMs]);
-    useEscKeyDown(() => closePanel('escape'));
+    useEscKeyDown(() => closePanel('escape'), { isEnabled: shouldCloseOnEscKeyPress });
     useFocusTrap(panelRef);
     useDisableBodyScroll();
     const onClickBackdrop = () => {
-        closePanel('backdrop');
+        if (shouldCloseOnBackdropClick) {
+            closePanel('backdrop');
+        }
     };
     return (jsx(Portal, { children: jsxs("div", { className: "dc-slide-over", children: [jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, onClick: onClickBackdrop }), jsx("div", { ...props, className: classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: jsx(SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
-}
-SlideOver.Header = SlideOverHeader;
-SlideOver.Body = SlideOverBody;
+});
+const SlideOver = Object.assign(SlideOverWithRef, {
+    Header: SlideOverHeader,
+    Body: SlideOverBody,
+});
 
 export { SlideOver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/slide-over/index.d.ts

@@ -1,4 +1,4 @@
 export { type SlideOverCloseCallback } from './types';
-export { SlideOver, type SlideOverProps } from './slide-over';
+export { SlideOver, type SlideOverProps, type SlideOverRef, } from './slide-over';
 export { SlideOverHeader, type SlideOverHeaderProps, } from './slide-over-header';
 export { SlideOverBody, type SlideOverBodyProps, } from './slide-over-body';

package/types/components/slide-over/slide-over.d.ts

@@ -6,10 +6,20 @@ export type SlideOverHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type SlideOverProps = SlideOverHTMLProps & {
     animationDurationMs?: number;
     animationDisabled?: boolean;
+    shouldCloseOnEscKeyPress?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
     onClose: SlideOverCloseCallback;
 };
-export declare function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs, animationDisabled, className, children, onClose, ...props }: SlideOverProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SlideOver {
-    var Header: typeof SlideOverHeader;
-    var Body: typeof SlideOverBody;
-}
+export type SlideOverRef = {
+    close: () => void;
+};
+export declare const SlideOver: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    animationDurationMs?: number | undefined;
+    animationDisabled?: boolean | undefined;
+    shouldCloseOnEscKeyPress?: boolean | undefined;
+    shouldCloseOnBackdropClick?: boolean | undefined;
+    onClose: SlideOverCloseCallback;
+} & import("react").RefAttributes<SlideOverRef>> & {
+    Header: typeof SlideOverHeader;
+    Body: typeof SlideOverBody;
+};

package/types/components/slide-over/types.d.ts

@@ -1 +1 @@
-export type SlideOverCloseCallback = (source: 'close-button' | 'backdrop' | 'escape') => void;
+export type SlideOverCloseCallback = (source?: 'close-button' | 'backdrop' | 'escape') => void;