draft-components 1.11.0 → 1.12.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/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-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/package.json

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

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;