@gooddata/sdk-ui-kit 10.27.0-alpha.8 → 10.27.0

package/esm/sdk-ui-kit.d.ts

@@ -16,6 +16,7 @@ import { ColorFormats } from 'tinycolor2';
 import { Component } from 'react';
 import { CSSProperties } from 'react';
 import { DebouncedFunc } from 'lodash';
+import { Extension } from '@codemirror/state';
 import { GoodDataSdkError } from '@gooddata/sdk-ui';
 import { IAccessControlAware } from '@gooddata/sdk-model';
 import { IAccessGrantee } from '@gooddata/sdk-model';
@@ -557,6 +558,17 @@ export declare function DefaultUiListboxInteractiveItemComponent<T>({ item, isFo
  */
 export declare function DefaultUiListboxStaticItemComponent<T>({ item, }: UiListboxStaticItemProps<T>): React_2.ReactNode;
 
+/**
+ * @internal
+ */
+export declare function DefaultUiMenuInteractiveItemComponent<T extends IUiMenuItemData = object>({ item, isFocused, onSelect, }: UiMenuInteractiveItemProps<T>): React_2.ReactNode;
+
+/**
+ * By default just renders the data.
+ * @internal
+ */
+export declare const DefaultUiMenuStaticItemComponent: React_2.MemoExoticComponent<(<T extends IUiMenuItemData = object>({ item }: UiMenuStaticItemProps<T>) => React_2.ReactElement)>;
+
 /**
  * @internal
  */
@@ -802,10 +814,12 @@ export declare const GD_COLOR_WHITE = "#fff";
 /**
  * @internal
  */
-export declare function generateHeaderAccountMenuItems(workspacePermissions: IWorkspacePermissions, // bootstrapResource.current.projectPermissions
-uiSettings: IUiSettings, // bootstrapResource.settings
-workspaceId?: string, // parsed from bootstrapResource.current.project.links.self
-showOnlyLogoutItem?: boolean, featureFlags?: ISettings): IHeaderMenuItem[];
+export declare function generateHeaderAccountMenuItems(workspacePermissions: IWorkspacePermissions, uiSettings: IUiSettings, workspaceId?: string, showOnlyLogoutItem?: boolean, featureFlags?: ISettings): IHeaderMenuItem[];
+
+/**
+ * @internal
+ */
+export declare function generateHeaderAccountMenuItems(workspacePermissions: IWorkspacePermissions, workspaceId?: string, featureFlags?: ISettings): IHeaderMenuItem[];
 
 /**
  * @internal
@@ -1081,6 +1095,7 @@ export declare interface IAccessibilityConfigBase {
     ariaLabelledBy?: React.AriaAttributes["aria-labelledby"];
     ariaDescribedBy?: React.AriaAttributes["aria-describedby"];
     role?: React.HTMLAttributes<HTMLElement>["role"];
+    ariaExpanded?: "true" | "false";
 }
 
 /**
@@ -1533,12 +1548,103 @@ export declare interface IConfirmDialogBaseProps extends Omit<IDialogBaseProps,
 /**
  * @internal
  */
-export declare const iconPaths: Record<IconType, React_2.ReactNode>;
+export declare const iconPaths: {
+    check: React_2.JSX.Element;
+    checkCircle: React_2.JSX.Element;
+    plus: React_2.JSX.Element;
+    plusCircle: React_2.JSX.Element;
+    sync: React_2.JSX.Element;
+    alert: React_2.JSX.Element;
+    alertPaused: React_2.JSX.Element;
+    close: React_2.JSX.Element;
+    cross: React_2.JSX.Element;
+    crossCircle: React_2.JSX.Element;
+    question: React_2.JSX.Element;
+    chevronUp: React_2.JSX.Element;
+    chevronRight: React_2.JSX.Element;
+    chevronDown: React_2.JSX.Element;
+    chevronLeft: React_2.JSX.Element;
+    date: React_2.JSX.Element;
+    navigateUp: React_2.JSX.Element;
+    navigateDown: React_2.JSX.Element;
+    navigateRight: React_2.JSX.Element;
+    download: React_2.JSX.Element;
+    slack: React_2.JSX.Element;
+    expand: React_2.JSX.Element;
+    exclamationCircle: React_2.JSX.Element;
+    book: React_2.JSX.Element;
+    visible: React_2.JSX.Element;
+    invisible: React_2.JSX.Element;
+    lock: React_2.JSX.Element;
+    unlock: React_2.JSX.Element;
+    ai: React_2.JSX.Element;
+    aiFill: React_2.JSX.Element;
+    drawer: React_2.JSX.Element;
+    prohibited: React_2.JSX.Element;
+    dropDown: React_2.JSX.Element;
+    dropRight: React_2.JSX.Element;
+    clock: React_2.JSX.Element;
+    questionMark: React_2.JSX.Element;
+    upload: React_2.JSX.Element;
+    expandRectangle: React_2.JSX.Element;
+    file: React_2.JSX.Element;
+    number: React_2.JSX.Element;
+    code: React_2.JSX.Element;
+    user: React_2.JSX.Element;
+    userPlus: React_2.JSX.Element;
+    users: React_2.JSX.Element;
+    magic: React_2.JSX.Element;
+    tab: React_2.JSX.Element;
+    pauseCircle: React_2.JSX.Element;
+    filter: React_2.JSX.Element;
+    timer: React_2.JSX.Element;
+    mail: React_2.JSX.Element;
+    envelope: React_2.JSX.Element;
+    copy: React_2.JSX.Element;
+    rain: React_2.JSX.Element;
+    earth: React_2.JSX.Element;
+    minimize: React_2.JSX.Element;
+    copyright: React_2.JSX.Element;
+    ellipsis: React_2.JSX.Element;
+    pencil: React_2.JSX.Element;
+    folder: React_2.JSX.Element;
+    folderPlus: React_2.JSX.Element;
+    trash: React_2.JSX.Element;
+    arrowUp: React_2.JSX.Element;
+    arrowRight: React_2.JSX.Element;
+    arrowDown: React_2.JSX.Element;
+    arrowLeft: React_2.JSX.Element;
+    undo: React_2.JSX.Element;
+    redo: React_2.JSX.Element;
+    trendDown: React_2.JSX.Element;
+    trendUp: React_2.JSX.Element;
+    save: React_2.JSX.Element;
+    minusCircle: React_2.JSX.Element;
+    percent: React_2.JSX.Element;
+    enter: React_2.JSX.Element;
+    enterRight: React_2.JSX.Element;
+    money: React_2.JSX.Element;
+    ghost: React_2.JSX.Element;
+    warning: React_2.JSX.Element;
+    home: React_2.JSX.Element;
+    settings: React_2.JSX.Element;
+    search: React_2.JSX.Element;
+    university: React_2.JSX.Element;
+    printer: React_2.JSX.Element;
+    picture: React_2.JSX.Element;
+    visualization: React_2.JSX.Element;
+    dashboard: React_2.JSX.Element;
+    sharp: React_2.JSX.Element;
+    attribute: React_2.JSX.Element;
+    horn: React_2.JSX.Element;
+    cw: React_2.JSX.Element;
+    ccw: React_2.JSX.Element;
+};
 
 /**
  * @internal
  */
-export declare type IconType = "check" | "plus" | "sync" | "alert" | "close" | "question" | "crossCircle" | "chevronUp" | "chevronDown" | "date" | "lock" | "cross";
+export declare type IconType = "check" | "checkCircle" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "download" | "slack" | "expand" | "exclamationCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "prohibited" | "dropDown" | "dropRight" | "clock" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "minimize" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "printer" | "picture" | "visualization" | "dashboard" | "sharp" | "attribute" | "horn" | "cw" | "ccw";
 
 /**
  * @internal
@@ -1787,7 +1893,7 @@ export declare interface IDomNativeProps {
 export declare interface IDropdownBodyRenderProps {
     isMobile: boolean;
     closeDropdown: () => void;
-    ariaAttributes: Pick<React_2.AriaAttributes, "aria-labelledby"> & {
+    ariaAttributes: Pick<React_2.AriaAttributes, "aria-labelledby" | "aria-label"> & {
         role: React_2.AriaAttributes["aria-haspopup"] & React_2.AriaRole;
         id: string;
     };
@@ -2863,20 +2969,6 @@ export declare interface ILegacySingleSelectListProps<T> {
     width: number;
 }
 
-/**
- * @internal
- */
-export declare interface IListboxContext<InteractiveItemData, StaticItemData = React_2.ReactNode> {
-    items: IUiListboxItem<InteractiveItemData, StaticItemData>[];
-    itemRefs: React_2.MutableRefObject<(HTMLLIElement | null)[]>;
-    onSelect: (item: IUiListboxInteractiveItem<InteractiveItemData>) => void;
-    onClose?: () => void;
-    selectedItemId: string | undefined;
-    focusedIndex: number | undefined;
-    setFocusedIndex: React_2.Dispatch<React_2.SetStateAction<number>>;
-    isItemFocusable: (item: IUiListboxItem<InteractiveItemData, StaticItemData>) => boolean;
-}
-
 /**
  * @internal
  */
@@ -3030,8 +3122,7 @@ export declare interface IMenuAccessibilityConfig extends IAccessibilityConfigBa
     id?: string;
     role?: "menu" | "menuitem" | "separator" | "presentation";
     ariaDisabled?: "true" | "false";
-    ariaHaspopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
-    ariaExpanded?: "true" | "false";
+    ariaHasPopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
     ariaControls?: string;
 }
 
@@ -4206,8 +4297,8 @@ export declare interface ISyntaxHighlightingInputProps {
     value: string;
     onChange: (value: string) => void;
     onCursor?: (from: number, to: number) => void;
-    formatting?: any;
-    customOptions?: any;
+    placeholder?: string;
+    extensions?: Extension[];
     className?: string;
 }
 
@@ -4321,6 +4412,20 @@ export declare interface IUiChipAccessibilityConfig extends IAccessibilityConfig
     deleteAriaLabel?: string;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiListboxContext<InteractiveItemData, StaticItemData = React_2.ReactNode> {
+    items: IUiListboxItem<InteractiveItemData, StaticItemData>[];
+    itemRefs: React_2.MutableRefObject<(HTMLLIElement | null)[]>;
+    onSelect: (item: IUiListboxInteractiveItem<InteractiveItemData>) => void;
+    onClose?: () => void;
+    selectedItemId: string | undefined;
+    focusedIndex: number | undefined;
+    setFocusedIndex: React_2.Dispatch<React_2.SetStateAction<number | undefined>>;
+    isItemFocusable: (item: IUiListboxItem<InteractiveItemData, StaticItemData>) => boolean;
+}
+
 /**
  * @internal
  */
@@ -4346,6 +4451,86 @@ export declare interface IUiListboxStaticItem<T> {
     data: T;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiMenuContext<T extends IUiMenuItemData = object> extends IUiMenuPluggableComponents<T> {
+    items: IUiMenuItem<T>[];
+    focusedItem: IUiMenuInteractiveItem<T> | undefined;
+    onSelect: (item: IUiMenuInteractiveItem<T> | undefined) => void;
+    onClose?: () => void;
+    setFocusedId: React_2.Dispatch<React_2.SetStateAction<string | undefined>>;
+    isItemFocusable: (item: IUiMenuItem<T>) => boolean;
+    controlType: IUiMenuControlType;
+    setControlType: React_2.Dispatch<React_2.SetStateAction<IUiMenuControlType>>;
+    scrollToView: (element: HTMLElement | null) => void;
+    makeItemId: (item: IUiMenuItem<T>) => string;
+    itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
+    ItemComponent: React_2.ComponentType<UiMenuItemProps<T>>;
+    menuComponentRef: React_2.RefObject<HTMLElement>;
+    itemsContainerRef: React_2.RefObject<HTMLElement>;
+}
+
+/**
+ * @internal
+ */
+export declare type IUiMenuControlType = "keyboard" | "mouse" | "unknown";
+
+/**
+ * @internal
+ */
+export declare type IUiMenuGroupItem<T extends IUiMenuItemData = object> = {
+    type: "group";
+    id: string;
+    stringTitle: string;
+    data: T["group"];
+    subItems: IUiMenuItem<T>[];
+};
+
+/**
+ * @internal
+ */
+export declare type IUiMenuInteractiveItem<T extends IUiMenuItemData = object> = {
+    type: "interactive";
+    id: string;
+    stringTitle: string;
+    isDisabled?: boolean;
+    data: T["interactive"];
+    subItems?: IUiMenuItem<T>[];
+};
+
+/**
+ * @internal
+ */
+export declare type IUiMenuItem<T extends IUiMenuItemData = object> = IUiMenuStaticItem<T> | IUiMenuInteractiveItem<T> | IUiMenuGroupItem<T>;
+
+/**
+ * @internal
+ */
+export declare type IUiMenuItemData = {
+    [type in IUiMenuItem<any>["type"]]?: unknown;
+};
+
+/**
+ * @internal
+ */
+export declare interface IUiMenuPluggableComponents<T extends IUiMenuItemData = object> {
+    InteractiveItemComponent: React_2.ComponentType<UiMenuInteractiveItemProps<T>>;
+    InteractiveItemWrapperComponent: React_2.ComponentType<UiMenuInteractiveItemWrapperProps<T>>;
+    GroupItemComponent: React_2.ComponentType<UiMenuGroupItemProps<T>>;
+    StaticItemComponent: React_2.ComponentType<UiMenuStaticItemProps<T>>;
+    MenuHeaderComponent: React_2.ComponentType;
+}
+
+/**
+ * @internal
+ */
+export declare type IUiMenuStaticItem<T extends IUiMenuItemData = object> = {
+    type: "static";
+    id?: string;
+    data: T["static"];
+};
+
 /**
  * @internal
  */
@@ -4964,7 +5149,10 @@ export declare type Separators = {
 /**
  * @internal
  */
-export declare const separatorStaticItem: IUiListboxStaticItem<React_2.ReactNode>;
+export declare const separatorStaticItem: {
+    data: React_2.JSX.Element;
+    type: "static";
+};
 
 /**
  * @internal
@@ -5332,6 +5520,7 @@ export declare interface UiButtonProps {
     tooltip?: React_2.ReactNode;
     onClick?: (e: React_2.MouseEvent<HTMLButtonElement>) => void;
     dataId?: string;
+    accessibilityConfig?: IAccessibilityConfigBase;
 }
 
 /**
@@ -5451,7 +5640,7 @@ export declare interface UiListboxProps<InteractiveItemData, StaticItemData = Re
     maxWidth?: number;
     onSelect?: (item: IUiListboxInteractiveItem<InteractiveItemData>) => void;
     onClose?: () => void;
-    onUnhandledKeyDown?: (event: React_2.KeyboardEvent, context: IListboxContext<InteractiveItemData, StaticItemData>) => void;
+    onUnhandledKeyDown?: (event: React_2.KeyboardEvent, context: IUiListboxContext<InteractiveItemData, StaticItemData>) => void;
     selectedItemId?: string;
     InteractiveItemComponent?: React_2.ComponentType<UiListboxInteractiveItemProps<InteractiveItemData>>;
     StaticItemComponent?: React_2.ComponentType<UiListboxStaticItemProps<StaticItemData>>;
@@ -5459,7 +5648,7 @@ export declare interface UiListboxProps<InteractiveItemData, StaticItemData = Re
     shouldKeyboardActionStopPropagation?: boolean;
     shouldCloseOnSelect?: boolean;
     isDisabledFocusable?: boolean;
-    ariaAttributes: IDropdownBodyRenderProps["ariaAttributes"];
+    ariaAttributes: Omit<IDropdownBodyRenderProps["ariaAttributes"], "role">;
 }
 
 /**
@@ -5469,6 +5658,70 @@ export declare interface UiListboxStaticItemProps<T> {
     item: IUiListboxStaticItem<T>;
 }
 
+/**
+ * An accessible menu component that can be navigated by keyboard.
+ * Usable in a <Dropdown /> component.
+ * Should implement https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ *
+ * @internal
+ */
+export declare function UiMenu<T extends IUiMenuItemData = object>(props: UiMenuProps<T>): React_2.ReactNode;
+
+/**
+ * @internal
+ */
+export declare interface UiMenuGroupItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuGroupItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuInteractiveItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuInteractiveItem<T>;
+    isFocused: boolean;
+    onSelect: () => void;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuInteractiveItemWrapperProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuInteractiveItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuProps<T extends IUiMenuItemData = object> extends Partial<IUiMenuPluggableComponents<T>> {
+    items: IUiMenuItem<T>[];
+    className?: string;
+    itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
+    maxWidth?: number;
+    onSelect?: (item: IUiMenuInteractiveItem<T>) => void;
+    onClose?: () => void;
+    onUnhandledKeyDown?: (event: React_2.KeyboardEvent, context: IUiMenuContext<T>) => void;
+    shouldKeyboardActionPreventDefault?: boolean;
+    shouldKeyboardActionStopPropagation?: boolean;
+    shouldCloseOnSelect?: boolean;
+    isDisabledFocusable?: boolean;
+    ariaAttributes: Omit<IDropdownBodyRenderProps["ariaAttributes"], "role">;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuStaticItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuStaticItem<T>;
+}
+
 /**
  * @internal
  */

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-import "codemirror/addon/mode/simple.js";
-import "codemirror/addon/edit/matchbrackets.js";
-import "codemirror/addon/display/placeholder.js";
+import { Extension } from "@codemirror/state";
 /**
  * @internal
  */
@@ -9,8 +7,8 @@ export interface ISyntaxHighlightingInputProps {
     value: string;
     onChange: (value: string) => void;
     onCursor?: (from: number, to: number) => void;
-    formatting?: any;
-    customOptions?: any;
+    placeholder?: string;
+    extensions?: Extension[];
     className?: string;
 }
 /**

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,iCAAiC,CAAC;AAEzC,OAAO,wCAAwC,CAAC;AAEhD,OAAO,yCAAyC,CAAC;AAUjD;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAkD3E,CAAC"}
+{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAe,SAAS,EAAgC,MAAM,mBAAmB,CAAC;AAmBzF;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAkF3E,CAAC"}

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js

@@ -1,70 +1,93 @@
-// (C) 2020-2023 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 import React, { useRef, useEffect } from "react";
 import cx from "classnames";
-import CodeMirror from "codemirror";
-// eslint-disable-next-line import/no-unassigned-import
-import "codemirror/addon/mode/simple.js";
-// eslint-disable-next-line import/no-unassigned-import
-import "codemirror/addon/edit/matchbrackets.js";
-// eslint-disable-next-line import/no-unassigned-import
-import "codemirror/addon/display/placeholder.js";
-const CODE_MIRROR_EOL = "\n";
-const defaultOptions = {
-    autofocus: false,
-    lineWrapping: true,
-    matchBrackets: true,
-};
-const findCursorIndexAcrossMultipleLines = (text, cursorLineIndex, cursorLineCharacterIndex) => {
-    const getLineLengthToCursor = (line, lineIndex) => {
-        if (lineIndex > cursorLineIndex) {
-            return 0;
-        }
-        return lineIndex < cursorLineIndex ? line.length + CODE_MIRROR_EOL.length : cursorLineCharacterIndex;
-    };
-    return text
-        .split(CODE_MIRROR_EOL)
-        .map(getLineLengthToCursor)
-        .reduce((sum, lineLength) => sum + lineLength, 0);
-};
+import { EditorView, keymap, placeholder } from "@codemirror/view";
+import { EditorState, Transaction, EditorSelection } from "@codemirror/state";
+import { bracketMatching, syntaxHighlighting, HighlightStyle } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+import { defaultKeymap, historyKeymap } from "@codemirror/commands";
+// Disable autofocus
+const disableAutofocus = EditorView.contentAttributes.of({ autofocus: "false" });
+// Custom syntax highlighting
+const customHighlightStyle = HighlightStyle.define([
+    { tag: t.punctuation, color: "#94a1ad" },
+    { tag: t.bracket, color: "#94a1ad" },
+    { tag: t.variableName, color: "#464e56" },
+    { tag: t.string, color: "#a11" },
+    { tag: t.special(t.variableName), color: "#13b1e2", fontWeight: "bold" },
+    { tag: t.standard(t.variableName), color: "#00c18e", fontWeight: "bold" },
+    { tag: t.keyword, color: "#ab55a3", fontWeight: "bold" },
+]);
 /**
  * @internal
  */
 export const SyntaxHighlightingInput = (props) => {
-    const { value, onChange, onCursor, customOptions, className, formatting } = props;
-    const ref = useRef();
-    const view = useRef();
-    const reportCursorPosition = (editor) => {
-        if (onCursor) {
-            const from = editor.getCursor("from");
-            const to = editor.getCursor("to");
-            const currentValue = editor.getValue();
-            onCursor(findCursorIndexAcrossMultipleLines(currentValue, from.line, from.ch), findCursorIndexAcrossMultipleLines(currentValue, to.line, to.ch));
-        }
-    };
-    const handleOnChange = () => {
-        onChange(view.current.getValue());
-    };
+    const { value, onChange, onCursor, placeholder: placeholderText, className, extensions = [] } = props;
+    const editorRef = useRef(null);
+    const viewRef = useRef();
+    // Create the editor only once
     useEffect(() => {
-        CodeMirror.defineSimpleMode("syntaxHighlight", formatting);
-        view.current = CodeMirror(ref.current, {
-            ...customOptions,
-            ...defaultOptions,
-            mode: "syntaxHighlight",
-            value,
+        if (!editorRef.current) {
+            return undefined;
+        }
+        // Create an extension for handling changes
+        const changeHandler = EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+                onChange(update.state.doc.toString());
+            }
+            if (onCursor && update.selectionSet) {
+                const range = update.state.selection.main;
+                onCursor(range.from, range.to);
+            }
+        });
+        const view = new EditorView({
+            state: EditorState.create({
+                doc: value,
+                extensions: [
+                    bracketMatching(),
+                    keymap.of([...defaultKeymap, ...historyKeymap]),
+                    syntaxHighlighting(customHighlightStyle),
+                    EditorView.lineWrapping,
+                    disableAutofocus,
+                    changeHandler,
+                    placeholderText ? placeholder(placeholderText) : [],
+                    ...extensions,
+                ],
+            }),
+            parent: editorRef.current,
         });
-        view.current.on("change", handleOnChange);
-        view.current.on("cursorActivity", reportCursorPosition);
-        return () => {
-            view.current.off("change", handleOnChange);
-            view.current.off("cursorActivity", reportCursorPosition);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        viewRef.current = view;
+        return () => view.destroy();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Handle external value changes
     useEffect(() => {
-        const cursor = view.current.getCursor();
-        view.current.setValue(value);
-        view.current.setCursor(cursor);
+        const view = viewRef.current;
+        if (!view)
+            return;
+        const currentValue = view.state.doc.toString();
+        if (currentValue !== value) {
+            const selection = view.state.selection;
+            const hasFocus = view.hasFocus;
+            const newLength = value.length;
+            // Adjust selection to stay within bounds of new content
+            const adjustedSelection = EditorSelection.create(selection.ranges.map((range) => {
+                const from = Math.min(range.from, newLength);
+                const to = Math.min(range.to, newLength);
+                return EditorSelection.range(from, to);
+            }), selection.mainIndex);
+            view.dispatch({
+                changes: { from: 0, to: currentValue.length, insert: value },
+                selection: adjustedSelection,
+                annotations: [
+                    // Mark this as a remote change to avoid triggering the change handler
+                    Transaction.remote.of(true),
+                ],
+            });
+            if (hasFocus) {
+                view.focus();
+            }
+        }
     }, [value]);
-    return React.createElement("div", { className: cx(className, "gd-input-syntax-highlighting-input"), ref: ref });
+    return React.createElement("div", { className: cx(className, "gd-input-syntax-highlighting-input"), ref: editorRef });
 };
 //# sourceMappingURL=SyntaxHighlightingInput.js.map

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"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"}

package/esm/typings/accessibility.d.ts

@@ -7,6 +7,7 @@ export interface IAccessibilityConfigBase {
     ariaLabelledBy?: React.AriaAttributes["aria-labelledby"];
     ariaDescribedBy?: React.AriaAttributes["aria-describedby"];
     role?: React.HTMLAttributes<HTMLElement>["role"];
+    ariaExpanded?: "true" | "false";
 }
 /**
  * @internal
@@ -15,8 +16,7 @@ export interface IMenuAccessibilityConfig extends IAccessibilityConfigBase {
     id?: string;
     role?: "menu" | "menuitem" | "separator" | "presentation";
     ariaDisabled?: "true" | "false";
-    ariaHaspopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
-    ariaExpanded?: "true" | "false";
+    ariaHasPopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
     ariaControls?: string;
 }
 /**

package/esm/typings/accessibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/typings/accessibility.ts"],"names":[],"mappings":";AAEA;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACzD,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,wBAAwB;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClF,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAkC,SAAQ,wBAAwB;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/typings/accessibility.ts"],"names":[],"mappings":";AAEA;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACzD,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,wBAAwB;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAkC,SAAQ,wBAAwB;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}