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

package/dist/Components/Editor/useEditorBridge.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorBridge = useEditorBridge;
+const react_1 = require("react");
+const editorTokens_1 = require("./editorTokens");
+function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }) {
+    const enabled = mergeFields !== undefined;
+    const fieldsKey = JSON.stringify(mergeFields);
+    const ctx = (0, react_1.useMemo)(() => ({ fields: mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], syntax, chipLabel }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fieldsKey, syntax.open, syntax.close, chipLabel]);
+    const joditRef = (0, react_1.useRef)(null);
+    const rangeRef = (0, react_1.useRef)(null);
+    const lastRef = (0, react_1.useRef)(null);
+    const appliedFieldsKey = (0, react_1.useRef)(fieldsKey);
+    const live = (0, react_1.useRef)({ enabled, ctx, onChange, onBlur, onReady, fieldsKey });
+    live.current = { enabled, ctx, onChange, onBlur, onReady, fieldsKey };
+    const [instance, setInstance] = (0, react_1.useState)(null);
+    const [raw, setRaw] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined)
+            setRaw(value);
+    }, [value]);
+    const handleChange = (0, react_1.useCallback)((html) => {
+        const { enabled: on, ctx: c, onChange: emit } = live.current;
+        const next = on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html;
+        lastRef.current = { raw: next, jodit: html };
+        setRaw(next);
+        emit === null || emit === void 0 ? void 0 : emit(next);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)((html, event) => {
+        const { enabled: on, ctx: c, onBlur: emit } = live.current;
+        emit === null || emit === void 0 ? void 0 : emit(on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html, event);
+    }, []);
+    const attachEditor = (0, react_1.useCallback)((jodit) => {
+        joditRef.current = jodit;
+        rangeRef.current = null;
+        appliedFieldsKey.current = live.current.fieldsKey;
+        const remember = () => {
+            if (jodit.s.isInsideArea)
+                rangeRef.current = jodit.s.range.cloneRange();
+        };
+        jodit.events.on("keyup mouseup touchend", remember);
+        jodit.events.on("change", handleChange);
+        jodit.events.on("blur", (event) => handleBlur(jodit.value, event));
+        const deleteChip = (event) => {
+            if (!live.current.enabled)
+                return false;
+            if (event.key !== "Backspace" && event.key !== "Delete")
+                return false;
+            const chip = (0, editorTokens_1.adjacentChip)(jodit.s.range, event.key === "Backspace" ? "backward" : "forward");
+            if (!chip)
+                return false;
+            chip.remove();
+            jodit.synchronizeValues();
+            event.preventDefault();
+            return true;
+        };
+        jodit.events.on("keydown", ((event) => (deleteChip(event) ? false : undefined)));
+        jodit.editor.addEventListener("keydown", (event) => {
+            if (deleteChip(event))
+                event.stopImmediatePropagation();
+        }, true);
+        jodit.waitForReady().then(() => {
+            var _a, _b;
+            if (joditRef.current !== jodit)
+                return;
+            setInstance(jodit);
+            (_b = (_a = live.current).onReady) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }, [handleChange, handleBlur]);
+    (0, react_1.useEffect)(() => {
+        if (!instance || !enabled || appliedFieldsKey.current === fieldsKey)
+            return;
+        appliedFieldsKey.current = fieldsKey;
+        const html = (0, editorTokens_1.chipify)((0, editorTokens_1.serializeChips)(instance.value, ctx.syntax), ctx);
+        instance.value = html;
+        lastRef.current = { raw: (0, editorTokens_1.serializeChips)(html, ctx.syntax), jodit: instance.value };
+    }, [instance, enabled, fieldsKey, ctx]);
+    const api = (0, react_1.useMemo)(() => {
+        const current = () => joditRef.current;
+        const currentRaw = (jodit) => live.current.enabled ? (0, editorTokens_1.serializeChips)(jodit.value, live.current.ctx.syntax) : jodit.value;
+        const insertHTML = (html) => {
+            const jodit = current();
+            if (!jodit)
+                return;
+            if (rangeRef.current)
+                jodit.s.selectRange(rangeRef.current, true);
+            jodit.s.insertHTML(html);
+            rangeRef.current = jodit.s.range.cloneRange();
+        };
+        return {
+            insertHTML,
+            insertField: (path) => {
+                const { enabled: on, ctx: c } = live.current;
+                insertHTML(on ? (0, editorTokens_1.chipHtml)(path, c) : (0, editorTokens_1.fieldToken)(path, c.syntax));
+            },
+            getSelectionText: () => (rangeRef.current ? rangeRef.current.toString().trim() : ""),
+            replaceAll: (text, path) => {
+                const jodit = current();
+                if (!jodit)
+                    return 0;
+                const { enabled: on, ctx: c, onChange: emit } = live.current;
+                const result = (0, editorTokens_1.makeDynamic)(currentRaw(jodit), text, path, c.syntax);
+                if (result.count === 0)
+                    return 0;
+                jodit.value = on ? (0, editorTokens_1.chipify)(result.html, c) : result.html;
+                lastRef.current = { raw: result.html, jodit: jodit.value };
+                rangeRef.current = null;
+                setRaw(result.html);
+                emit === null || emit === void 0 ? void 0 : emit(result.html);
+                return result.count;
+            },
+            countOccurrences: (text) => {
+                const jodit = current();
+                return jodit ? (0, editorTokens_1.countOccurrences)(currentRaw(jodit), text, live.current.ctx.syntax) : 0;
+            },
+            focus: () => {
+                var _a;
+                (_a = current()) === null || _a === void 0 ? void 0 : _a.s.focus();
+            },
+        };
+    }, []);
+    (0, react_1.useImperativeHandle)(apiRef, () => api, [api]);
+    const unknown = (0, react_1.useMemo)(() => (enabled ? (0, editorTokens_1.unknownTokens)(raw, ctx.fields, syntax) : []), [enabled, raw, ctx, syntax]);
+    const unknownKey = unknown.join("\n");
+    const reported = (0, react_1.useRef)("");
+    (0, react_1.useEffect)(() => {
+        if (!enabled || reported.current === unknownKey)
+            return;
+        reported.current = unknownKey;
+        onUnknownTokens === null || onUnknownTokens === void 0 ? void 0 : onUnknownTokens(unknown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, unknownKey]);
+    const last = lastRef.current;
+    let joditValue = value;
+    if (enabled && value !== undefined) {
+        joditValue = last && last.raw === value ? last.jodit : (0, editorTokens_1.chipify)(value, ctx);
+    }
+    return { joditValue, attachEditor, api, instance, raw, unknown, ctx };
+}

package/dist/Components/Kbd/Kbd.d.ts

@@ -0,0 +1,6 @@
+import type { KbdProps, KbdShortcutProps } from "./KbdProps";
+export declare const detectApple: () => boolean;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+declare const Kbd: ({ children, size, "data-testid": testId }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+export declare const KbdShortcut: ({ shortcut, size, isApple, "data-testid": testId }: KbdShortcutProps) => import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/Components/Kbd/Kbd.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KbdShortcut = exports.detectApple = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const HEIGHT = { xs: "1rem", sm: "1.25rem" };
+const SPOKEN = {
+    mod: "Command",
+    cmd: "Command",
+    ctrl: "Control",
+    alt: "Option",
+    shift: "Shift",
+    enter: "Enter",
+    esc: "Escape",
+};
+const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+exports.detectApple = detectApple;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+};
+const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
+    const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);
+    const apple = isApple !== null && isApple !== void 0 ? isApple : (0, exports.detectApple)();
+    const spoken = parts.map((p) => { var _a; return (_a = SPOKEN[p.toLowerCase()]) !== null && _a !== void 0 ? _a : p.toUpperCase(); }).join(" ");
+    const keys = (0, AppSwitcherProps_1.shortcutKeys)(shortcut, apple);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", gap: 1, role: "img", "aria-label": spoken, "data-testid": testId, children: keys.map((key, i) => ((0, jsx_runtime_1.jsx)(Kbd, { size: size, children: key }, `${key}-${i}`))) }));
+};
+exports.KbdShortcut = KbdShortcut;
+exports.default = Kbd;

package/dist/Components/Kbd/KbdProps.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+/** Props for a single keyboard key cap. */
+export interface KbdProps {
+    children: ReactNode;
+    /** `sm` is 20px tall (default); `xs` is 16px. */
+    size?: "xs" | "sm";
+    "data-testid"?: string;
+}
+/** Props for a key chord such as `mod+k`, rendered as one `Kbd` per key. */
+export interface KbdShortcutProps {
+    /** Chord in `AppSwitcher` notation, e.g. `mod+shift+k`. */
+    shortcut: string;
+    size?: KbdProps["size"];
+    /** Forces Apple glyphs (⌘ ⇧) or Ctrl/Shift words; defaults to platform detection. */
+    isApple?: boolean;
+    "data-testid"?: string;
+}

package/dist/Components/Kbd/KbdProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/LauncherTrigger/LauncherTrigger.d.ts

@@ -0,0 +1,4 @@
+import type { LauncherTriggerProps } from "./LauncherTriggerProps";
+export declare const keyShortcutsFor: (shortcut: string) => string;
+declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTrigger.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyShortcutsFor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const Kbd_1 = require("../Kbd/Kbd");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const MD_QUERY = "(min-width: 48em)";
+const KEY_NAMES = {
+    mod: ["Meta", "Control"],
+    cmd: ["Meta"],
+    ctrl: ["Control"],
+    alt: ["Alt"],
+    shift: ["Shift"],
+    esc: ["Escape"],
+};
+const keyShortcutsFor = (shortcut) => {
+    const options = shortcut
+        .split("+")
+        .map((p) => p.trim())
+        .filter(Boolean)
+        .map((p) => { var _a; return (_a = KEY_NAMES[p.toLowerCase()]) !== null && _a !== void 0 ? _a : [p.length === 1 ? p.toUpperCase() : p]; });
+    const variants = Math.max(1, ...options.map((o) => o.length));
+    const chords = Array.from({ length: variants }, (_, v) => options.map((o) => o[Math.min(v, o.length - 1)]).join("+"));
+    return Array.from(new Set(chords)).join(" ");
+};
+exports.keyShortcutsFor = keyShortcutsFor;
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const showHint = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const ring = (0, focusRing_styles_1.focusVisibleRing)(colors);
+    const hint = shortcut ? (0, AppSwitcherProps_1.formatShortcut)(shortcut, (0, Kbd_1.detectApple)()) : "";
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
+};
+exports.default = LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTriggerProps.d.ts

@@ -0,0 +1,16 @@
+import type { ElementType } from "react";
+/** Props for the chip that opens an app-owned launcher; it renders the trigger only and binds no shortcut. */
+export interface LauncherTriggerProps {
+    onClick: () => void;
+    /** Whether the launcher is open; drives `aria-expanded`. */
+    isOpen: boolean;
+    /** Visible text. Default "Menu". */
+    label?: string;
+    /** Chord in `AppSwitcher` notation shown as a hint above `md` and exposed as `aria-keyshortcuts`; `null` hides both. Default "mod+k". */
+    shortcut?: string | null;
+    /** Component rendered at 17px before the label. Default lucide `Compass`. */
+    icon?: ElementType;
+    /** Overrides the accessible name; the visible label and hint then become `aria-hidden`. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/LauncherTrigger/LauncherTriggerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +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;