pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.61

package/dist/Components/Modal/Modal.js

@@ -9,6 +9,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -37,12 +38,13 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, }) {
+function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const headerSlot = findSlot(children, exports.ModalHeader);
     const bodySlot = findSlot(children, exports.ModalBody);
     const footerSlot = findSlot(children, exports.ModalFooter);
+    (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Modal", children, [exports.ModalHeader, exports.ModalBody, exports.ModalFooter]);
     const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/Components/Modal/ModalProps.d.ts

@@ -7,7 +7,7 @@ export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFoc
     overlaybackdropInvert?: string;
     overlaybackdropBlur?: string;
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full";
-    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type one fragment deep; any other sibling is dropped. */
+    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type one fragment deep; any other child is dropped (dev console.warn) — use `portalChildren`. */
     children?: React.ReactNode;
     /** Spinner replaces body and footer; header and close button stay. */
     isLoading?: boolean;
@@ -18,6 +18,8 @@ export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFoc
     hideCloseButton?: boolean;
     /** Spread onto ModalContent last, so it overrides `aria-busy` and theme styles. */
     contentProps?: ModalContentProps;
+    /** Rendered inside the modal's dialog after the slots (so live regions stay announced); nested dialogs portal out and keep focus here. Unmounts with the modal. */
+    portalChildren?: React.ReactNode;
 };
 /** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered ModalHeader; omit to keep theme defaults. */
 export type ModalHeaderSlotProps = ModalHeaderProps;

package/dist/Components/Modal/warnDroppedSlotChildren.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const warnDroppedSlotChildren: (owner: "Drawer" | "Modal", children: React.ReactNode, slots: unknown[]) => void;

package/dist/Components/Modal/warnDroppedSlotChildren.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warnDroppedSlotChildren = void 0;
+const react_1 = __importDefault(require("react"));
+const warned = new Set();
+const nameOf = (type) => {
+    if (typeof type === "string")
+        return type;
+    const fn = type;
+    return (fn === null || fn === void 0 ? void 0 : fn.displayName) || (fn === null || fn === void 0 ? void 0 : fn.name) || "Component";
+};
+const collect = (children, slots, dropped) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (typeof child === "string" || typeof child === "number") {
+            if (String(child).trim())
+                dropped.set("#text", "text");
+            continue;
+        }
+        if (!react_1.default.isValidElement(child))
+            continue;
+        if (slots.includes(child.type))
+            continue;
+        if (child.type === react_1.default.Fragment) {
+            collect(child.props.children, slots, dropped);
+            continue;
+        }
+        dropped.set(child.type, nameOf(child.type));
+    }
+};
+const warnDroppedSlotChildren = (owner, children, slots) => {
+    if (process.env.NODE_ENV === "production")
+        return;
+    const dropped = new Map();
+    collect(children, slots, dropped);
+    dropped.forEach((name, type) => {
+        if (warned.has(type))
+            return;
+        warned.add(type);
+        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. Pass nested dialogs and live regions through the portalChildren prop.`);
+    });
+};
+exports.warnDroppedSlotChildren = warnDroppedSlotChildren;

package/dist/Components/NavLauncher/LauncherTabs.d.ts

@@ -0,0 +1,18 @@
+export type LauncherTabId = "menu" | "quick" | "apps";
+export type LauncherTabItem = {
+    id: LauncherTabId;
+    label: string;
+};
+type LauncherTabsProps = {
+    tabs: readonly LauncherTabItem[];
+    selected: LauncherTabId;
+    onSelect: (id: LauncherTabId) => void;
+    idBase: string;
+    label: string;
+    onLeaveUp: () => void;
+    onLeaveDown: () => void;
+};
+export declare const tabId: (base: string, id: LauncherTabId) => string;
+export declare const panelId: (base: string) => string;
+export declare function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }: LauncherTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/LauncherTabs.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelId = exports.tabId = void 0;
+exports.LauncherTabs = LauncherTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tabId = (base, id) => `${base}-tab-${id}`;
+exports.tabId = tabId;
+const panelId = (base) => `${base}-panel`;
+exports.panelId = panelId;
+function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const refs = (0, react_2.useRef)(new Map());
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const choose = (index) => {
+        var _a;
+        const next = tabs[(index + tabs.length) % tabs.length];
+        onSelect(next.id);
+        (_a = refs.current.get(next.id)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const current = tabs.findIndex((tab) => tab.id === selected);
+        const handlers = {
+            ArrowRight: () => choose(current + 1),
+            ArrowLeft: () => choose(current - 1),
+            Home: () => choose(0),
+            End: () => choose(tabs.length - 1),
+            ArrowUp: onLeaveUp,
+            ArrowDown: onLeaveDown,
+        };
+        const handle = handlers[event.key];
+        if (!handle)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handle();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
+            const isSelected = tab.id === selected;
+            return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", role: "tab", id: (0, exports.tabId)(idBase, tab.id), ref: (node) => {
+                    if (node)
+                        refs.current.set(tab.id, node);
+                    else
+                        refs.current.delete(tab.id);
+                }, "aria-selected": isSelected, "aria-controls": isSelected ? (0, exports.panelId)(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "14px", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: (0, motion_1.transitionFor)(["color"]), _hover: {
+                    color: isSelected ? colors.accentText : colors.text[900],
+                }, _after: {
+                    content: '""',
+                    position: "absolute",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "-1px",
+                    h: "2px",
+                    borderRadius: "2px 2px 0 0",
+                    bg: isSelected ? colors.primary[500] : "transparent",
+                }, sx: { ...ring, borderRadius: "8px" }, children: tab.label }, tab.id));
+        }) }));
+}

package/dist/Components/NavLauncher/NavLauncher.d.ts

@@ -1,3 +1,3 @@
 import type { NavLauncherProps } from "./NavLauncherProps";
 /** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
-export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, openShortcutHint, modKeyLabel, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;
+export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, modKeyLabel, headerActions, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;