draft-components 0.70.0 → 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/dialog/dialog.js

@@ -33,16 +33,19 @@ function Dialog({ style, className, isOpen = false, showCloseButton = true, focu
     (0, use_esc_key_down_1.useEscKeyDown)(() => (0, guards_1.isFunction)(onClose) && onClose(), isOpen);
     (0, use_focus_trap_1.useFocusTrap)(dialogRef, isOpen);
     (0, react_1.useEffect)(() => {
-        if (shouldRender) {
-            if (focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current) {
-                focusAfterOpen.current.focus();
-            }
+        if (!shouldRender) {
+            return;
         }
-        else {
-            if (focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current) {
-                focusAfterClose.current.focus();
-            }
+        const focusAfterOpenEl = focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current;
+        const focusAfterCloseEl = focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current;
+        if (focusAfterOpenEl) {
+            focusAfterOpenEl.focus();
         }
+        return () => {
+            if (focusAfterCloseEl) {
+                focusAfterCloseEl.focus();
+            }
+        };
     }, [shouldRender, focusAfterOpen, focusAfterClose]);
     if (!shouldRender) {
         return null;

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.70.0",
+  "version": "0.71.2",
   "description": "The set of React.js components for rapid prototyping.",
   "main": "components/index.js",
   "files": [
@@ -62,7 +62,7 @@
     "autoprefixer": "10.4.4",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.4",
-    "bootstrap-icons": "1.7.0",
+    "bootstrap-icons": "1.8.1",
     "css-loader": "5.2.6",
     "cssnano": "5.1.7",
     "eslint": "8.13.0",

package/bootstrap-icons/ticket-perferated-fill.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ticketPerferatedFill = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// https://github.com/twbs/icons/blob/main/icons/ticket-perferated-fill.svg
-exports.ticketPerferatedFill = {
-    name: 'ticket-perferated-fill',
-    width: 16,
-    height: 16,
-    viewBox: '0 0 16 16',
-    children: ((0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5V6a.5.5 0 0 1-.5.5 1.5 1.5 0 0 0 0 3 .5.5 0 0 1 .5.5v1.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5V10a.5.5 0 0 1 .5-.5 1.5 1.5 0 1 0 0-3A.5.5 0 0 1 0 6V4.5Zm4-1v1h1v-1H4Zm1 3H4v-1h1v1Zm7 0h-1v-1h1v1Zm-1-2v-1h1v1h-1Zm-6 3H4v1h1v-1Zm7 1h-1v-1h1v1Zm-7 1H4v1h1v-1Zm7 1h-1v-1h1v1Zm-8 1v1h1v-1H4Zm7 1v-1h1v1h-1Z" })),
-};

package/bootstrap-icons/ticket-perferated.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ticketPerferated = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// https://github.com/twbs/icons/blob/main/icons/ticket-perferated.svg
-exports.ticketPerferated = {
-    name: 'ticket-perferated',
-    width: 16,
-    height: 16,
-    viewBox: '0 0 16 16',
-    children: ((0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M1.5 3A1.5 1.5 0 0 0 0 4.5V6a.5.5 0 0 0 .5.5 1.5 1.5 0 1 1 0 3 .5.5 0 0 0-.5.5v1.5A1.5 1.5 0 0 0 1.5 13h13a1.5 1.5 0 0 0 1.5-1.5V10a.5.5 0 0 0-.5-.5 1.5 1.5 0 0 1 0-3A.5.5 0 0 0 16 6V4.5A1.5 1.5 0 0 0 14.5 3h-13ZM1 4.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v1.05a2.5 2.5 0 0 0 0 4.9v1.05a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-1.05a2.5 2.5 0 0 0 0-4.9V4.5Zm3 .35v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Zm-7 1.8v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Zm-7 1.8v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Zm-7 1.8v.9h1v-.9H4Zm7 0v.9h1v-.9h-1Z" })),
-};