@deque/cauldron-react 6.7.0-canary.38e18ca8 → 6.7.0-canary.5a2f12d4

package/lib/components/BottomSheet/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContentNode } from '../../types';
+declare const BottomSheet: React.ForwardRefExoticComponent<{
+    label: ContentNode;
+    closeButtonText?: ContentNode | undefined;
+    open?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & Pick<import("../Drawer").DrawerProps<HTMLElement> & React.RefAttributes<HTMLDivElement>, "open" | "onClose" | "portal" | "focusOptions"> & React.RefAttributes<HTMLDivElement>>;
+export default BottomSheet;

package/lib/components/Drawer/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.HTMLAttributes<HTMLDivElement> {
+export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     position: 'top' | 'bottom' | 'left' | 'right';
     open?: boolean;

package/lib/index.d.ts

@@ -60,6 +60,7 @@ export { default as Timeline, TimelineItem } from './components/Timeline';
 export { default as TextEllipsis } from './components/TextEllipsis';
 export { default as CopyButton } from './components/CopyButton';
 export { default as Drawer } from './components/Drawer';
+export { default as BottomSheet } from './components/BottomSheet';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -3367,8 +3367,8 @@ var iconTypeMap = {
 };
 var Notice = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.type, type = _c === void 0 ? 'info' : _c, title = _a.title, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, children = _a.children, otherProps = tslib.__rest(_a, ["type", "title", "icon", "variant", "children"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Notice', (_b = {},
+    var className = _a.className, _c = _a.type, type = _c === void 0 ? 'info' : _c, title = _a.title, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, children = _a.children, otherProps = tslib.__rest(_a, ["className", "type", "title", "icon", "variant", "children"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Notice', className, (_b = {},
             _b["Notice--".concat(type)] = type,
             _b["Notice--condensed"] = variant === 'condensed',
             _b)), ref: ref }, otherProps),
@@ -4314,6 +4314,28 @@ var Drawer = React.forwardRef(function (_a, ref) {
 });
 Drawer.displayName = 'Drawer';
 
+var BottomSheet = React.forwardRef(function (_a, ref) {
+    var label = _a.label, children = _a.children, className = _a.className, _b = _a.closeButtonText, closeButtonText = _b === void 0 ? 'Close' : _b, _c = _a.open, open = _c === void 0 ? false : _c, onClose = _a.onClose, focusOptions = _a.focusOptions, props = tslib.__rest(_a, ["label", "children", "className", "closeButtonText", "open", "onClose", "focusOptions"]);
+    var bottomSheetRef = useSharedRef(ref);
+    var _d = tslib.__read(nextId.useId(1, 'bottom-sheet-label'), 1), labelId = _d[0];
+    var handleClose = React.useCallback(function () {
+        // istanbul ignore else
+        if (typeof onClose === 'function') {
+            onClose();
+        }
+    }, [onClose]);
+    return (React__default["default"].createElement(Drawer, tslib.__assign({ open: open, onClose: handleClose, focusOptions: tslib.__assign({ initialFocus: bottomSheetRef }, focusOptions) }, props, { behavior: "modal", position: "bottom" }),
+        React__default["default"].createElement("div", { ref: bottomSheetRef, className: classNames__default["default"]('BottomSheet', className), tabIndex: -1, role: "dialog", "aria-labelledby": labelId },
+            React__default["default"].createElement("div", { className: "BottomSheet__header" },
+                React__default["default"].createElement("div", { id: labelId, className: "BottomSheet__title" }, label),
+                React__default["default"].createElement(IconButton, { icon: "close", label: closeButtonText, "aria-label": "".concat(closeButtonText), onClick: handleClose, tooltipProps: {
+                        show: false,
+                        association: 'none'
+                    } })),
+            React__default["default"].createElement("div", { className: "BottomSheet__contents" }, children))));
+});
+BottomSheet.displayName = 'BottomSheet';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4393,6 +4415,7 @@ exports.AlertContent = AlertContent;
 exports.AriaIsolate = AriaIsolate;
 exports.Badge = Badge;
 exports.BadgeLabel = BadgeLabel;
+exports.BottomSheet = BottomSheet;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.7.0-canary.38e18ca8",
+  "version": "6.7.0-canary.5a2f12d4",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",