@eccenca/gui-elements 23.3.1 → 23.4.0

package/src/components/Table/table.scss

@@ -1,7 +1,11 @@
+@use "sass:color";
+
 // import libs
 @use "~@carbon/styles/scss/components/data-table/data-table";
+
 // currently not needed @import "~@carbon/styles/scss/components/data-table/action";
 @use "~@carbon/styles/scss/components/data-table/expandable/index" as table-expandable;
+
 // currently not needed @import ~@carbon/styles/scss/components/data-table/skeleton;
 @use "~@carbon/styles/scss/components/data-table/sort/index" as table-sort;
 @include data-table.data-table;
@@ -17,11 +21,15 @@ $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 $eccgui-color-table-background: $card-background-color !default;
 $eccgui-color-tableheader-background: $button-background-color !default;
-$eccgui-color-tablerow-background-even: lighten($menu-item-color-hover, 24%) !default;
+$eccgui-color-tablerow-background-even: color.adjust($menu-item-color-hover, $lightness: 24%) !default;
 $eccgui-color-tablerow-background-odd: transparent !default;
 $eccgui-color-tablerow-hover: $menu-item-color-hover !default;
 $eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
-$eccgui-color-tablerow-selected-hover: mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-hover, 50%) !default;
+$eccgui-color-tablerow-selected-hover: color.mix(
+    $eccgui-color-tablerow-selected,
+    $eccgui-color-tablerow-hover,
+    50%
+) !default;
 $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 // changes
@@ -32,8 +40,29 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 .#{$prefix}--data-table {
     min-width: 100%;
+
     --#{$eccgui}-color-border: #{$eccgui-color-tablerow-border};
     --#{$eccgui}-divider-row: none;
+
+    thead th,
+    tbody td,
+    tbody th {
+        padding-right: $eccgui-size-block-whitespace * 0.5;
+        padding-left: $eccgui-size-block-whitespace * 0.5;
+        overflow: hidden;
+
+        &.#{$prefix}--table-expand {
+            width: $button-height;
+            height: $button-height;
+            padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
+            padding-left: 0;
+        }
+    }
+
+    thead th.#{$prefix}--table-expand {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
 }
 
 .#{$eccgui}-simpletable--haslayout {
@@ -45,14 +74,14 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 }
 
 .#{$prefix}--data-table thead {
-    background-color: transparent;
     font-weight: $eccgui-size-tablecell-font-weight;
+    background-color: transparent;
 }
 
 .#{$prefix}--data-table th,
 .#{$prefix}--data-table-header {
-    background-color: $eccgui-color-tableheader-background;
     font-weight: $eccgui-size-tableheader-font-weight;
+    background-color: $eccgui-color-tableheader-background;
 }
 .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
     background: $eccgui-color-tableheader-background;
@@ -65,10 +94,10 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 }
 
 .#{$prefix}--data-table .#{$prefix}--table-header-label {
-    padding: $eccgui-size-tablecell-padding-regular 0;
-    overflow: hidden;
     flex-shrink: 1;
     min-width: 0;
+    padding: $eccgui-size-tablecell-padding-regular 0;
+    overflow: hidden;
     text-overflow: ellipsis;
 }
 
@@ -76,13 +105,19 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 .#{$prefix}--data-table tbody th {
     padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
     padding-bottom: $eccgui-size-tablecell-padding-regular * 0.95;
-
     vertical-align: top;
+    background: var(--#{$eccgui}-color-cell) !important;
+    border-top: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-cell) !important;
+    border-bottom: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-border) !important;
 
     &.#{$eccgui}-simpletable__cell--middle {
         vertical-align: middle;
     }
 
+    &.#{$eccgui}-simpletable__cell--center {
+        text-align: center;
+    }
+
     & + td:first-of-type {
         padding-left: $spacing-05;
     }
@@ -94,49 +129,25 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
     min-width: 0;
 }
 
-.#{$prefix}--data-table {
-    thead th, tbody td, tbody th {
-        padding-left: $eccgui-size-block-whitespace * 0.5;
-        padding-right: $eccgui-size-block-whitespace * 0.5;
-        overflow: hidden;
-
-        &.#{$prefix}--table-expand {
-            height: $button-height;
-            width: $button-height;
-            padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
-            padding-left: 0;
-        }
-    }
-
-    thead th.#{$prefix}--table-expand {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-}
-
 .#{$prefix}--table-expand__button {
-    height: $button-height;
     width: $button-height;
-}
-
-.#{$prefix}--data-table td,
-.#{$prefix}--data-table tbody th {
-    border-top: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-cell) !important;
-    border-bottom: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-border) !important;
-    background: var(--#{$eccgui}-color-cell) !important;
+    height: $button-height;
 }
 
 // Row background colors
 
 .#{$eccgui}-simpletable--colorless > tbody {
-    & > tr, & > tr:hover {
+    & > tr,
+    & > tr:hover {
         background: transparent;
+
         --#{$eccgui}-color-cell: transparent;
     }
 }
 
 .#{$prefix}--data-table:not(.#{$eccgui}-simpletable--colorless) > tbody {
     background-color: transparent;
+
     --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-background-odd};
 
     & > tr {
@@ -149,23 +160,34 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
         &.#{$prefix}--expandable-row--hover {
             background-color: transparent;
 
-            & > th, & > td {
+            & > th,
+            & > td {
                 --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-hover};
             }
         }
 
         &.#{$prefix}--data-table--selected {
             & > th {
-                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%)};
+                --#{$eccgui}-color-cell: #{color.mix(
+                        $eccgui-color-tablerow-selected,
+                        $eccgui-color-tableheader-background,
+                        50%
+                    )};
             }
+
             & > td {
                 --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-selected};
             }
 
             &:hover {
                 & > th {
-                    --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%)};
+                    --#{$eccgui}-color-cell: #{color.mix(
+                            $eccgui-color-tablerow-selected-hover,
+                            $eccgui-color-tableheader-background,
+                            50%
+                        )};
                 }
+
                 & > td {
                     --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-selected-hover};
                 }
@@ -176,43 +198,67 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 // zebra style
 
-.#{$prefix}--data-table--zebra > tbody > tr[data-parent-row]:nth-child(4n+3),
-.#{$prefix}--data-table--zebra > tbody > tr[data-child-row]:nth-child(4n+4),
+.#{$prefix}--data-table--zebra > tbody > tr[data-parent-row]:nth-child(4n + 3),
+.#{$prefix}--data-table--zebra > tbody > tr[data-child-row]:nth-child(4n + 4),
 .#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra,
 .#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra + tr[data-child-row],
-.#{$prefix}--data-table--zebra > tbody > tr:not([data-parent-row]):not([data-child-row]):nth-child(2n+0) {
+.#{$prefix}--data-table--zebra > tbody > tr:not([data-parent-row]):not([data-child-row]):nth-child(2n + 0) {
     // even rows
 
     &.#{$prefix}--expandable-row:not([data-child-row]) {
         --#{$eccgui}-color-border: #{$eccgui-color-tablerow-background-even};
     }
 
-    & > th, & > td {
+    & > th,
+    & > td {
         --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-background-even};
     }
 
     &:hover,
     &:hover + tr[data-child-row],
     &.#{$prefix}--expandable-row--hover {
-        & > th, & > td {
-            --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-hover, $eccgui-color-tablerow-background-even, 50%)};
+        & > th,
+        & > td {
+            --#{$eccgui}-color-cell: #{color.mix(
+                    $eccgui-color-tablerow-hover,
+                    $eccgui-color-tablerow-background-even,
+                    50%
+                )};
         }
     }
 
     &.#{$prefix}--data-table--selected {
         & > th {
-            --#{$eccgui}-color-cell: #{mix(mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%), $eccgui-color-tableheader-background, 50%)};
+            --#{$eccgui}-color-cell: #{color.mix(
+                    color.mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%),
+                    $eccgui-color-tableheader-background,
+                    50%
+                )};
         }
+
         & > td {
-            --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%)};
+            --#{$eccgui}-color-cell: #{color.mix(
+                    $eccgui-color-tablerow-selected,
+                    $eccgui-color-tablerow-background-even,
+                    50%
+                )};
         }
 
         &:hover {
             & > th {
-                --#{$eccgui}-color-cell: #{mix(mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%), $eccgui-color-tableheader-background, 50%)};
+                --#{$eccgui}-color-cell: #{color.mix(
+                        color.mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%),
+                        $eccgui-color-tableheader-background,
+                        50%
+                    )};
             }
+
             & > td {
-                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%)};
+                --#{$eccgui}-color-cell: #{color.mix(
+                        $eccgui-color-tablerow-selected-hover,
+                        $eccgui-color-tablerow-background-even,
+                        50%
+                    )};
             }
         }
     }
@@ -283,8 +329,8 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
 // Sorting option
 
 .#{$prefix}--table-sort {
-    background-color: transparent;
     padding-left: $eccgui-size-block-whitespace * 0.5;
+    background-color: transparent;
 
     &:hover {
         background-color: $button-background-color-hover;

package/src/components/TextField/stories/TextField.stories.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TextField } from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import {TextFieldProps} from "../TextField";
-import characters from "../../../common/utils/characters"
+import characters from "../../../common/utils/characters";
+import { TextFieldProps } from "../TextField";
+
+import { TextField } from "./../../../../index";
 
 export default {
     title: "Forms/TextField",
@@ -17,13 +19,11 @@ export default {
         },
         intent: {
             ...helpersArgTypes.exampleIntent,
-        }
+        },
     },
 } as ComponentMeta<typeof TextField>;
 
-const Template: ComponentStory<typeof TextField> = (args) => (
-    <TextField {...args}></TextField>
-);
+const Template: ComponentStory<typeof TextField> = (args) => <TextField {...args}></TextField>;
 
 export const Default = Template.bind({});
 
@@ -36,24 +36,27 @@ Default.args = {
 /** Text field with default value that contains a zero width/invisible character.
  * As long as the character exists, an alert is raised for every value change with a delay of 500ms.
  * Instead of an alert, something more sophisticated like a clean up action should be offered in production. */
-export const InvisibleCharacterWarning = Template.bind({})
+export const InvisibleCharacterWarning = Template.bind({});
 
 const invisibleCharacterWarningProps: TextFieldProps = {
     ...Default.args,
     invisibleCharacterWarning: {
         callback: (codePoints) => {
-            if(codePoints.size) {
+            if (codePoints.size) {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
-                        const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n)
-                        return info.fullLabel
+                        const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
+                        return info.fullLabel;
                     })
-                    .join(", ")
-                alert("Invisible character detected in input string. Code points: " + codePointsString)
+                    .join(", ");
+                alert("Invisible character detected in input string. Code points: " + codePointsString);
             }
         },
-        callbackDelay: 500
+        callbackDelay: 500,
+    },
+    onChange: () => {
+        /** needs to be defined, else the invisible character warning callback will not be triggered. */
     },
-    defaultValue: "Invisible character ->​<-"
-}
-InvisibleCharacterWarning.args = invisibleCharacterWarningProps
+    defaultValue: "Invisible character ->​<-",
+};
+InvisibleCharacterWarning.args = invisibleCharacterWarningProps;

package/src/components/TextField/useTextValidation.ts

@@ -1,18 +1,20 @@
-import React, {ChangeEventHandler} from "react";
-import chars from "../../common/utils/characters"
+import React, { ChangeEventHandler } from "react";
+
+import chars from "../../common/utils/characters";
 
 export interface InvisibleCharacterWarningProps {
     /**
      * If set, the function is called after every value change what invisible characters have been detected.
+     * The input component must be controlled for this callback to be triggered.
      */
-    callback: (detectedCodePoints: Set<number>) => any
+    callback: (detectedCodePoints: Set<number>) => any;
     /**
      * The delay in milliseconds after which an input string should be checked. Only the most recent value will be checked.
      * A higher value will reduce the probability that the typing stalls.
      *
      * Default: 500
      */
-    callbackDelay?: number
+    callbackDelay?: number;
 }
 
 interface Props<T = Element> {
@@ -20,84 +22,96 @@ interface Props<T = Element> {
     value?: string | ReadonlyArray<string> | number | undefined;
     readOnly?: boolean | undefined;
     disabled?: boolean | undefined;
-    onChange?: ChangeEventHandler<T>
+    onChange?: ChangeEventHandler<T>;
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
-    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
 
 /** Validates the string value for invisible characters. */
-export const useTextValidation = <T>({value, onChange, invisibleCharacterWarning}: Props<T>) => {
-    const callback = invisibleCharacterWarning?.callback
-    const callbackDelay = invisibleCharacterWarning?.callbackDelay
+export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarning }: Props<T>) => {
+    const callback = invisibleCharacterWarning?.callback;
+    const callbackDelay = invisibleCharacterWarning?.callbackDelay;
     const state = React.useRef<{
-        checkedValue?: string | ReadonlyArray<string> | number,
-        timeout?: number,
-        detectedCodePoints: Set<number>
-    }>({detectedCodePoints: new Set()})
+        checkedValue?: string | ReadonlyArray<string> | number;
+        timeout?: number;
+        detectedCodePoints: Set<number>;
+    }>({ detectedCodePoints: new Set() });
     const clearState = React.useCallback(() => {
-        state.current.timeout && clearTimeout(state.current.timeout)
-        state.current.checkedValue = undefined
-        state.current.detectedCodePoints = new Set()
-    }, [])
-    const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), [])
-    const detectIssues = React.useCallback((value: string): void => {
-        detectionRegex.lastIndex = 0
-        let matchArray = detectionRegex.exec(value)
-        while(matchArray) {
-            const codePoint = matchArray[0].codePointAt(0)
-            if(codePoint) {
-                state.current.detectedCodePoints.add(codePoint)
+        state.current.timeout && clearTimeout(state.current.timeout);
+        state.current.checkedValue = undefined;
+        state.current.detectedCodePoints = new Set();
+    }, []);
+    const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), []);
+    const detectIssues = React.useCallback(
+        (value: string): void => {
+            detectionRegex.lastIndex = 0;
+            let matchArray = detectionRegex.exec(value);
+            while (matchArray) {
+                const codePoint = matchArray[0].codePointAt(0);
+                if (codePoint) {
+                    state.current.detectedCodePoints.add(codePoint);
+                }
+                matchArray = detectionRegex.exec(value);
             }
-            matchArray = detectionRegex.exec(value)
-        }
-    }, [detectionRegex])
+        },
+        [detectionRegex]
+    );
     // Checks if the value contains any problematic characters with a small delay.
-    const checkValue = React.useCallback((value: string | ReadonlyArray<string> | number) => {
-        state.current.detectedCodePoints = new Set()
-        if(typeof value === "number") {
-            clearState()
-        } else if(typeof value === "string") {
-            detectIssues(value)
-        } else {
-            value.forEach((arrayValue) => detectIssues(arrayValue))
-        }
-        callback?.(state.current.detectedCodePoints)
-    }, [callback, clearState, detectIssues])
-    const scheduleCheck = React.useCallback((value: string | ReadonlyArray<string> | number) => {
-        if(state.current.checkedValue === value) {
-            return
-        }
-        state.current.checkedValue = value
-        state.current.timeout = window.setTimeout(() => {
-            if(state.current.checkedValue === value) {
-                checkValue(value)
-                clearState()
+    const checkValue = React.useCallback(
+        (value: string | ReadonlyArray<string> | number) => {
+            state.current.detectedCodePoints = new Set();
+            if (typeof value === "number") {
+                clearState();
+            } else if (typeof value === "string") {
+                detectIssues(value);
+            } else {
+                value.forEach((arrayValue) => detectIssues(arrayValue));
+            }
+            callback?.(state.current.detectedCodePoints);
+        },
+        [callback, clearState, detectIssues]
+    );
+    const scheduleCheck = React.useCallback(
+        (value: string | ReadonlyArray<string> | number) => {
+            if (state.current.checkedValue === value) {
+                return;
             }
-        }, callbackDelay ?? 500)
-    }, [checkValue, clearState, callbackDelay])
+            state.current.checkedValue = value;
+            state.current.timeout = window.setTimeout(() => {
+                if (state.current.checkedValue === value) {
+                    checkValue(value);
+                    clearState();
+                }
+            }, callbackDelay ?? 500);
+        },
+        [checkValue, clearState, callbackDelay]
+    );
     // Do check via onChange handler
-    const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback((event) => {
-        const {value} = event.target as any
-        if(value != null && typeof value === "string") {
-            scheduleCheck(value)
-        } else {
-            clearState()
-        }
-        onChange?.(event)
-    }, [clearState, onChange, scheduleCheck])
+    const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback(
+        (event) => {
+            const { value } = event.target as any;
+            if (value != null && typeof value === "string") {
+                scheduleCheck(value);
+            } else {
+                clearState();
+            }
+            onChange?.(event);
+        },
+        [clearState, onChange, scheduleCheck]
+    );
     // No callback, return
-    if(!callback) {
-        return onChange
+    if (!callback) {
+        return onChange;
     }
-    if(value == null && onChange == null) {
-        return onChange
+    if (value == null && onChange == null) {
+        return onChange;
     }
-    if(value != null) {
-        scheduleCheck(value)
-        return onChange
+    if (value != null) {
+        scheduleCheck(value);
+        return onChange;
     } else {
-        return wrappedOnChangeHandler
+        return wrappedOnChangeHandler;
     }
-}
+};

package/src/components/index.scss

@@ -22,6 +22,7 @@
 @import "./RadioButton/radiobutton";
 @import "./Select/select";
 @import "./Separation/separation";
+@import "./Skeleton/skeleton";
 @import "./Spinner/spinner";
 @import "./Structure/titles";
 @import "./Table/table";

package/src/components/index.ts

@@ -34,6 +34,7 @@ export * from "./RadioButton/RadioButton";
 export * from "./Select/Select";
 export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
+export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
 export * from "./Structure";
 export * from "./Switch/Switch";

package/src/extensions/codemirror/_codemirror.scss

@@ -9,6 +9,7 @@
     .CodeMirror {
         clip-path: unset !important; // we may check later why they set inset(0) now
         border-radius: $pt-border-radius;
+        height: 290px;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;

package/src/index.ts

@@ -1,8 +1,10 @@
 import { ClassNames as IntentClassNames } from "./common/Intent";
+import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
 import * as LegacyReplacements from "./legacy-replacements";
 
 const ClassNames = {
+    Skeleton,
     Typography: TypographyClassNames,
     Intent: IntentClassNames,
 };

package/dist/cjs/components/AutoSuggestion/SingleLineCodeEditor.js

@@ -1,53 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SingleLineCodeEditor = void 0;
-require("codemirror/addon/display/placeholder.js");
-require("codemirror/mode/sparql/sparql.js");
-const react_1 = __importDefault(require("react"));
-const react_codemirror2_1 = require("react-codemirror2");
-const core_1 = require("@blueprintjs/core");
-const constants_1 = require("../../configuration/constants");
-/** A single-line code editor. */
-const SingleLineCodeEditor = ({ setEditorInstance, onChange, onCursorChange, mode, initialValue, onFocusChange, onKeyDown, onSelection, enableTab = false, placeholder, showScrollBar = true }) => {
-    const singleLineInitialContent = react_1.default.useRef(initialValue.replace(/[\r\n]/g, " "));
-    return (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-singlelinecodeeditor ${core_1.Classes.INPUT}` },
-        react_1.default.createElement(react_codemirror2_1.UnControlled, { editorDidMount: (editor) => {
-                editor.on("beforeChange", (_, change) => {
-                    // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-                    if (change.update && typeof change.update === "function" && change.text.length > 1) {
-                        change.update(change.from, change.to, [change.text.join("")]);
-                    }
-                    return true;
-                });
-                setEditorInstance(editor);
-            }, value: singleLineInitialContent.current, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), options: {
-                mode: mode,
-                lineNumbers: false,
-                theme: "xq-light",
-                extraKeys: enableTab ? undefined : { Tab: false },
-                placeholder,
-                scrollbarStyle: showScrollBar ? "native" : "null"
-            }, onSelection: (_editor, data) => {
-                if (Array.isArray(data === null || data === void 0 ? void 0 : data.ranges)) {
-                    onSelection(data.ranges
-                        .map((r) => ({ from: r.from().ch, to: r.to().ch }))
-                        .filter((r) => r.from !== r.to));
-                }
-            }, onCursor: (editor, data) => {
-                onCursorChange(data, editor.cursorCoords(true, "local"), editor.getScrollInfo());
-            }, onBeforeChange: (_editor, data, _, next) => {
-                // Reduce multiple lines to a single line
-                if (data.text.length > 1) {
-                    _editor.setValue(data.text.join(""));
-                }
-                next();
-            }, onChange: (_editor, _data, value) => {
-                onChange(value);
-            }, onKeyDown: (_, event) => onKeyDown(event) })));
-};
-exports.SingleLineCodeEditor = SingleLineCodeEditor;
-exports.default = exports.SingleLineCodeEditor;
-//# sourceMappingURL=SingleLineCodeEditor.js.map

package/dist/cjs/components/AutoSuggestion/SingleLineCodeEditor.js.map

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