draft-components 1.11.0 → 1.13.0

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

@@ -6,13 +6,13 @@ require('../button/button.cjs');
 const iconButton = require('../button/icon-button.cjs');
 const slideOverContext = require('./slide-over-context.cjs');
 
-function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
     const { titleId, descriptionId, closePanel } = slideOverContext.useSlideOverContext();
     const onCloseButtonClicked = (ev) => {
         closePanel('close-button');
         onClickCloseButton?.(ev);
     };
-    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxRuntime.jsxs("div", { className: "dc-slide-over-header__title", children: [jsxRuntime.jsx("h2", { id: titleId, children: title }), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxRuntime.jsxs("div", { className: "dc-slide-over-header__title", children: [jsxRuntime.jsx("h2", { id: titleId, children: title }), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null, children ? (jsxRuntime.jsx("div", { className: "dc-slide-over-header__content", children: children })) : null] }));
 }
 function XMarkIcon(props) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));

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/css/draft-components.css

@@ -1275,6 +1275,12 @@
   margin-top: 4px;
 }
 
+.dc-slide-over-header__content {
+  font: var(--dc-text-md);
+  color: var(--dc-slide-over-text-color);
+  margin-top: 8px;
+}
+
 .dc-slide-over-body {
   color: var(--dc-slide-over-text-color);
   overflow: auto;

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-header.js

@@ -4,13 +4,13 @@ import '../button/button.js';
 import { IconButton } from '../button/icon-button.js';
 import { useSlideOverContext } from './slide-over-context.js';
 
-function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
     const { titleId, descriptionId, closePanel } = useSlideOverContext();
     const onCloseButtonClicked = (ev) => {
         closePanel('close-button');
         onClickCloseButton?.(ev);
     };
-    return (jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxs("div", { className: "dc-slide-over-header__title", children: [jsx("h2", { id: titleId, children: title }), jsx(IconButton, { icon: jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null] }));
+    return (jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxs("div", { className: "dc-slide-over-header__title", children: [jsx("h2", { id: titleId, children: title }), jsx(IconButton, { icon: jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null, children ? (jsx("div", { className: "dc-slide-over-header__content", children: children })) : null] }));
 }
 function XMarkIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));

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.11.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-header.d.ts

@@ -8,4 +8,4 @@ export type SlideOverHeaderProps = {
     closeButtonAccessibleName?: string;
     onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
 } & SlideOverHeaderBaseProps;
-export declare function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }: SlideOverHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }: SlideOverHeaderProps): import("react/jsx-runtime").JSX.Element;

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;