draft-components 0.71.1 → 0.71.2

package/components/date-preset-picker-popover/date-preset-picker-popover.js

@@ -52,9 +52,9 @@ function DatePresetPickerPopover({ locale, timeZone, defaultIsOpen = false, hide
         }
         (_a = popover.current) === null || _a === void 0 ? void 0 : _a.close();
     }
-    const formattedTimeZone = timeZone ? formatTimeZone(timeZone) : '';
+    const formattedTimeZone = timeZone ? formatTimeZone(timeZone, locale) : '';
     const formattedDateRange = selectedDateRange
-        ? formatDateRange(selectedDateRange)
+        ? formatDateRange(selectedDateRange, locale)
         : '';
     return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { ref: popover, className: "dc-date-preset-picker-popover", defaultIsOpen: defaultIsOpen, placement: placement, alignment: alignment, anchor: children, onOpen: handleOpenPopover, children: (0, jsx_runtime_1.jsx)(date_preset_picker_1.DatePresetPicker, { locale: locale, formattedTimeZone: formattedTimeZone, formattedDateRange: hideSelectedRange ? '' : formattedDateRange, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, customDatePresetLabel: customDatePresetLabel, disableActionButtons: disableActionButtons, showLoadingIndicator: showLoadingIndicator, options: options, dateRange: selection.dateRange, datePreset: ((_a = selection.option) === null || _a === void 0 ? void 0 : _a.datePreset) || '', onChangeDatePreset: handleChangeDatePreset, onChangeDateRange: handleChangeDateRange, onCancel: handleCancel, onConfirm: handleConfirm }) }));
 }

package/components/menu/menu.d.ts

@@ -1,5 +1,6 @@
 import { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 import { BoxElevation } from '../box';
+import { Alignment, Placement } from '../positioner/types';
 declare type RenderLabel = (props: {
     id: string;
     isOpen: boolean;
@@ -12,9 +13,13 @@ declare type RenderLabel = (props: {
 export declare type MenuProps = {
     className?: string;
     elevation?: BoxElevation;
+    placement?: Placement;
+    alignment?: Alignment;
+    anchorGap?: number;
+    viewportGap?: number;
     defaultIsOpen?: boolean;
     label: ReactNode | RenderLabel;
     children: ReactNode;
 };
-export declare function Menu({ className, elevation, defaultIsOpen, label, children, }: MenuProps): JSX.Element;
+export declare function Menu({ className, elevation, placement, alignment, anchorGap, viewportGap, defaultIsOpen, label, children, }: MenuProps): JSX.Element;
 export {};

package/components/menu/menu.js

@@ -10,7 +10,7 @@ const popover_1 = require("../popover");
 const button_1 = require("../button");
 const menu_button_1 = require("./menu-button");
 const react_helpers_1 = require("../../lib/react-helpers");
-function Menu({ className, elevation, defaultIsOpen = false, label, children, }) {
+function Menu({ className, elevation, placement, alignment, anchorGap, viewportGap, defaultIsOpen = false, label, children, }) {
     const menuId = (0, react_1.useRef)((0, util_1.uniqueId)('dc_menu_'));
     const menuButtonId = (0, react_1.useRef)((0, util_1.uniqueId)('dc_menu_button_'));
     const [isOpen, setIsOpen] = (0, react_1.useState)(defaultIsOpen);
@@ -81,7 +81,7 @@ function Menu({ className, elevation, defaultIsOpen = false, label, children, })
             activeMenuItem.focus();
         }
     }
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: (0, react_helpers_1.classNames)('dc-menu', className), elevation: elevation, isOpen: isOpen, onClose: closeMenu, anchor: (0, guards_1.isFunction)(label) ? (label({
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: (0, react_helpers_1.classNames)('dc-menu', className), elevation: elevation, placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, isOpen: isOpen, onClose: closeMenu, anchor: (0, guards_1.isFunction)(label) ? (label({
             isOpen,
             id: menuButtonId.current,
             'aria-haspopup': true,

package/components/popover/popover.d.ts

@@ -19,6 +19,8 @@ export declare type PopoverProps = {
     shouldFocusAnchorAfterClose?: boolean;
     placement?: Placement;
     alignment?: Alignment;
+    anchorGap?: number;
+    viewportGap?: number;
     anchor: ReactNode | RenderFn;
     children: ReactNode;
     onOpen?(): void;
@@ -31,6 +33,8 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     shouldFocusAnchorAfterClose?: boolean | undefined;
     placement?: Placement | undefined;
     alignment?: Alignment | undefined;
+    anchorGap?: number | undefined;
+    viewportGap?: number | undefined;
     anchor: ReactNode | RenderFn;
     children: ReactNode;
     onOpen?(): void;

package/components/popover/popover.js

@@ -12,7 +12,7 @@ const use_focus_trap_1 = require("../../hooks/use-focus-trap");
 const use_body_click_1 = require("./use-body-click");
 const box_1 = require("../box");
 const positioner_1 = require("../positioner");
-exports.Popover = (0, react_1.forwardRef)(function Popover({ className, shouldTrapFocus = true, shouldFocusAnchorAfterClose = true, placement = 'bottom', alignment = 'start', borderRadius = 'lg', elevation = 'md', anchor, children, onOpen, onClose, ...props }, ref) {
+exports.Popover = (0, react_1.forwardRef)(function Popover({ className, shouldTrapFocus = true, shouldFocusAnchorAfterClose = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, borderRadius = 'lg', elevation = 'md', anchor, children, onOpen, onClose, ...props }, ref) {
     var _a, _b;
     const anchorRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
@@ -66,7 +66,7 @@ exports.Popover = (0, react_1.forwardRef)(function Popover({ className, shouldTr
         }
     }, isOpen);
     (0, use_focus_trap_1.useFocusTrap)(contentRef, shouldTrapFocus ? isOpen : false);
-    return ((0, jsx_runtime_1.jsx)(positioner_1.Positioner, { placement: placement, alignment: alignment, renderAnchor: ({ setRef }) => {
+    return ((0, jsx_runtime_1.jsx)(positioner_1.Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: ({ setRef }) => {
             if ((0, guards_1.isFunction)(anchor)) {
                 return anchor({
                     openPopover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "0.71.1",
+  "version": "0.71.2",
   "description": "The set of React.js components for rapid prototyping.",
   "main": "components/index.js",
   "files": [