@deque/cauldron-react 6.16.0-canary.9004edb1 → 6.16.0-canary.95899edb

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

@@ -1,4 +1,4 @@
-import { type Placement } from '@floating-ui/dom';
+import { type Placement, type Coords } from '@floating-ui/dom';
 import React from 'react';
 import useFocusTrap from '../../utils/useFocusTrap';
 declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
@@ -12,6 +12,8 @@ declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** A callback function that is called when the placement of the overlay changes. */
     onPlacementChange?: ((placement: Placement) => void) | undefined;
+    /** A callback function that is called when the shift of the overlay changes. */
+    onShiftChange?: ((coords: Coords) => void) | undefined;
     /** An optional offset number to position the anchor element from its anchored target. */
     offset?: number | undefined;
     /** When set, traps focus within the AnchoredOverlay. */

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+}
+declare const FieldGroup: React.ForwardRefExoticComponent<FieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default FieldGroup;

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading: ReactNode;
+    overline?: ReactNode;
+    description?: ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default PageHeader;

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading: ReactNode;
+    description?: ReactNode;
+}
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeader;

package/lib/index.d.ts

@@ -62,6 +62,9 @@ export { default as CopyButton } from './components/CopyButton';
 export { default as Drawer } from './components/Drawer';
 export { default as BottomSheet } from './components/BottomSheet';
 export { default as AnchoredOverlay } from './components/AnchoredOverlay';
+export { default as FieldGroup } from './components/FieldGroup';
+export { default as PageHeader } from './components/PageHeader';
+export { default as SectionHeader } from './components/SectionHeader';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -1782,10 +1782,11 @@ function getAutoAlignment(placement) {
     }
 }
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
-    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange"]);
+    var _b, _c;
+    var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange"]);
     var ref = useSharedRef(refProp);
     var Component = as || 'div';
-    var _d = reactDom$1.useFloating({
+    var _f = reactDom$1.useFloating({
         open: open,
         // default to initial placement on top when placement is auto
         // @ts-expect-error auto placement is not a valid placement for floating-ui
@@ -1796,14 +1797,15 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
                 ? reactDom$1.autoPlacement({
                     alignment: getAutoAlignment(initialPlacement)
                 })
-                : reactDom$1.flip()
+                : reactDom$1.flip(),
+            reactDom$1.shift({ crossAxis: false })
         ].filter(Boolean),
         elements: {
             reference: resolveElement(target),
             floating: ref.current
         },
         whileElementsMounted: dom.autoUpdate
-    }), floatingStyles = _d.floatingStyles, placement = _d.placement;
+    }), floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
     useEscapeKey({
         active: open,
         capture: true,
@@ -1823,7 +1825,16 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
         if (typeof onPlacementChange === 'function') {
             onPlacementChange(placement);
         }
-    }, [placement]);
+    }, [onPlacementChange, placement]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (typeof onShiftChange === 'function') {
+            onShiftChange({
+                x: ((_a = middlewareData.shift) === null || _a === void 0 ? void 0 : _a.x) || 0,
+                y: ((_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.y) || 0
+            });
+        }
+    }, [onShiftChange, (_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.x, (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y]);
     return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
 });
 AnchoredOverlay.displayName = 'AnchoredOverlay';
@@ -1885,6 +1896,7 @@ function Tooltip(_a) {
     var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
     var _j = tslib.__read(React.useState(null), 2), tooltipElement = _j[0], setTooltipElement = _j[1];
     var _k = tslib.__read(React.useState(initialPlacement), 2), placement = _k[0], setPlacement = _k[1];
+    var _l = tslib.__read(React.useState(), 2), arrowShift = _l[0], setArrowShift = _l[1];
     var hasAriaAssociation = association !== 'none';
     // Show the tooltip
     var show = React.useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -1963,13 +1975,23 @@ function Tooltip(_a) {
             }
         };
     }, [target, id, association]);
+    var updateArrowShiftPosition = React.useCallback(function (_a) {
+        var x = _a.x;
+        if (variant === 'big' || x === 0) {
+            setArrowShift(null);
+            return;
+        }
+        // The tooltip shift position is inversely related to the direction
+        // that the arrow needs to shift
+        setArrowShift(x * -1);
+    }, [variant]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
+        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, onShiftChange: updateArrowShiftPosition, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
             }), ref: setTooltipElement, role: "tooltip", offset: 8 }, props),
-            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow" }),
+            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow", style: arrowShift ? { transform: "translateX(".concat(arrowShift, "px)") } : undefined }),
             children), (portal && 'current' in portal ? portal.current : portal) ||
             (
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
@@ -4768,6 +4790,52 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
 });
 BottomSheet.displayName = 'BottomSheet';
 
+var FieldGroup = React.forwardRef(function (_a, ref) {
+    var label = _a.label, description = _a.description, error = _a.error, children = _a.children, className = _a.className, propId = _a.id, props = tslib.__rest(_a, ["label", "description", "error", "children", "className", "id"]);
+    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'fieldgroup'), 1), id = _b[0];
+    var descriptionId = "".concat(id, "-description");
+    var errorId = "".concat(id, "-error");
+    var ariaDescribedbyId = '';
+    if (description) {
+        ariaDescribedbyId = addIdRef(ariaDescribedbyId, descriptionId);
+    }
+    if (error) {
+        ariaDescribedbyId = addIdRef(ariaDescribedbyId, errorId);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ role: "group", className: classNames__default["default"]('FieldGroup', className), ref: ref }, props, { "aria-labelledby": "".concat(id, "-label"), "aria-describedby": ariaDescribedbyId || undefined }),
+        React__default["default"].createElement("label", { id: "".concat(id, "-label"), className: "Field__label" }, label),
+        description && (React__default["default"].createElement("div", { id: descriptionId, className: "Field__description" }, description)),
+        error && (React__default["default"].createElement("div", { className: "Field__error", id: errorId },
+            React__default["default"].createElement(Icon, { type: "caution" }),
+            error)),
+        children));
+});
+FieldGroup.displayName = 'FieldGroup';
+
+var SectionHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, heading = _a.heading, description = _a.description, children = _a.children, otherProps = tslib.__rest(_a, ["className", "heading", "description", "children"]);
+    if (typeof heading === 'string') {
+        heading = React__default["default"].createElement("h2", null, heading);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('SectionHeader', className), ref: ref }, otherProps),
+        React__default["default"].createElement("div", { className: "SectionHeader__content" },
+            heading,
+            description && (React__default["default"].createElement("p", { className: "SectionHeader__description" }, description)),
+            children && React__default["default"].createElement("div", { className: "SectionHeader__actions" }, children))));
+});
+SectionHeader.displayName = 'SectionHeader';
+
+var PageHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, heading = _a.heading, overline = _a.overline, description = _a.description, children = _a.children, otherProps = tslib.__rest(_a, ["className", "heading", "overline", "description", "children"]);
+    if (typeof heading === 'string') {
+        heading = React__default["default"].createElement("h1", null, heading);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('PageHeader', className), ref: ref }, otherProps),
+        overline && React__default["default"].createElement("div", { className: "PageHeader__overline" }, overline),
+        React__default["default"].createElement(SectionHeader, { heading: heading, description: description }, children)));
+});
+PageHeader.displayName = 'PageHeader';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4874,6 +4942,7 @@ exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.Drawer = Drawer;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
+exports.FieldGroup = FieldGroup;
 exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
@@ -4901,6 +4970,7 @@ exports.OptionsMenuItem = OptionsMenuItem;
 exports.OptionsMenuList = OptionsMenuList;
 exports.OptionsMenuTrigger = OptionsMenuTrigger;
 exports.OptionsMenuWrapper = OptionsMenuWrapper;
+exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Panel = Panel;
 exports.PanelContent = PanelContent;
@@ -4912,6 +4982,7 @@ exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
 exports.SearchField = SearchField;
+exports.SectionHeader = SectionHeader;
 exports.Select = Select;
 exports.SideBar = SideBar;
 exports.SideBarItem = SideBarItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.16.0-canary.9004edb1",
+  "version": "6.16.0-canary.95899edb",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -79,22 +79,5 @@
   "peerDependencies": {
     "react": ">=16.6 <= 18",
     "react-dom": ">=16.6 <= 18"
-  },
-  "nyc": {
-    "checkCoverage": true,
-    "reporter": [
-      "text-summary",
-      "html"
-    ],
-    "statements": 85,
-    "branches": 78,
-    "functions": 85,
-    "lines": 85,
-    "exclude": [
-      "lib",
-      "coverage",
-      "test/**/*.js",
-      "test/**/*.e2e.tsx"
-    ]
   }
 }