@datarobot/design-system 28.4.0 → 28.5.0

package/js/bundle/index.d.ts

@@ -25,6 +25,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import React, { MouseEvent } from 'react';
 import React, { ReactNode } from 'react';
 import { Editor, Descendant } from 'slate';
+import { ReactEditor } from 'slate-react';
 import { Descendant } from 'slate';
 import { RenderElementProps } from 'slate-react';
 import React, { ChangeEvent, KeyboardEventHandler } from 'react';
@@ -781,6 +782,13 @@ export type ChatProps = {
 };
 export const Chat: React.MemoExoticComponent<React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLUListElement>>>;
 
+function CharactersCounterBase({ currLength, maxLength, getCharactersCounterString, }: CharactersCounterProps): import("react/jsx-runtime").JSX.Element;
+namespace CharactersCounterBase {
+    var displayName: string;
+}
+export const CharactersCounter: React.MemoExoticComponent<typeof CharactersCounterBase>;
+export {};
+
 export function isMentionElement(type: string): boolean;
 export function getMentionsCount(nodes: CustomElement[]): number;
 /** This function synchronises slate editor chidren with value prop.
@@ -789,6 +797,9 @@ export function getMentionsCount(nodes: CustomElement[]): number;
   */
 export function resetNodes(editor: Editor, nodes: Descendant[]): void;
 
+export const withMaxLength: (maxLength: number | undefined) => (editor: ReactEditor) => ReactEditor;
+export const withMentions: (editor: any) => any;
+
 export const DEFAULT_VALUE: Descendant[];
 export const CUSTOM_ELEMENT_TYPES: {
     mention: string;
@@ -6247,6 +6258,8 @@ export type TextEditorComponentProps = {
         onBlur?: () => void;
         deleteEditorContentButtonAriaLabel: string;
         id: string;
+        maxLength?: number;
+        getCharactersCounterString?: (count: number) => string;
 };
 export type TextEditorProps = {
         name: string;
@@ -6303,12 +6316,14 @@ export type TextEditorProps = {
         linkInputLabelText?: string;
         deleteEditorContentButtonAriaLabel: string;
         id?: string;
+        maxLength?: number;
+        getCharactersCounterString?: (count: number) => string;
 };
 /**
     * @midnight-gray-supported
     * @alpine-light-supported
     * */
-export default function TextEditor({ name, header, type, value, initialValue, validity, label, placeholder, autoFocus, readOnly, testId, contentTestId, contentAriaLabel, className, height, enabledTools, toolbarPosition, elementRender, leafRender, onChange, onCancel, onSave, tooltipTextBold, tooltipTextItalic, tooltipTextUnderline, tooltipTextSuperscript, tooltipTextLink, tooltipTextRemoveLink, tooltipTextBulletedList, tooltipTextNumberedList, tooltipTextClearFormatting, tooltipTextCode, urlIsRequiredMessage, enterValidUrlMessage, saveButtonText, headingLargeText, headingMediumText, headingSmallText, regularText, validationErrorWarningMessage, linkInputLabelText, deleteEditorContentButtonAriaLabel, id, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function TextEditor({ name, header, type, value, initialValue, validity, label, placeholder, autoFocus, readOnly, testId, contentTestId, contentAriaLabel, className, height, enabledTools, toolbarPosition, elementRender, leafRender, onChange, onCancel, onSave, tooltipTextBold, tooltipTextItalic, tooltipTextUnderline, tooltipTextSuperscript, tooltipTextLink, tooltipTextRemoveLink, tooltipTextBulletedList, tooltipTextNumberedList, tooltipTextClearFormatting, tooltipTextCode, urlIsRequiredMessage, enterValidUrlMessage, saveButtonText, headingLargeText, headingMediumText, headingSmallText, regularText, validationErrorWarningMessage, linkInputLabelText, deleteEditorContentButtonAriaLabel, id, maxLength, getCharactersCounterString, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
 
 import './edited-text.less';
 export type EditedTextComponentProps = {
@@ -6357,8 +6372,10 @@ export type InlineTextEditorProps = {
     readOnly?: boolean;
     deleteEditorContentButtonAriaLabel?: string;
     autoFocus?: boolean;
+    maxLength?: number;
+    getCharactersCounterString?: (count: number) => string;
 };
-export default function InlineTextEditor({ name, type, readOnly, initialValue, placeholder, ariaLabel, className, enabledTools, header, toolbarPosition, height, onCancel, onSave, autoFocus, deleteEditorContentButtonAriaLabel, }: InlineTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function InlineTextEditor({ name, type, readOnly, initialValue, placeholder, ariaLabel, className, enabledTools, header, toolbarPosition, height, onCancel, onSave, autoFocus, deleteEditorContentButtonAriaLabel, maxLength, getCharactersCounterString, }: InlineTextEditorProps): import("react/jsx-runtime").JSX.Element;
 
 export type TextEditorEngine = BaseEditor & ReactEditor & HistoryEditor & EditorInterface;
 export const MARK_TYPES: {
@@ -6431,8 +6448,6 @@ export interface SlateReact {
     Slate: FC<SlateComponent>;
     withReact: typeof withReact;
 }
-export function instanceOfContentChild(obj: TextEditorValue | TextEditorValueChild): obj is TextEditorValueChild;
-export function instanceOfContent(obj: TextEditorValue | TextEditorValueChild): obj is TextEditorValue;
 export const TEXT_EDITOR_DEFAULT_VALUE: TextEditorValue[];
 export const TEXT_EDITOR_DEFAULT_TOOLS: TextEditorTool[];
 export interface TextEditorToolbarLabels {
@@ -6481,6 +6496,7 @@ export function isEmptyTextEditorValue(value: TextEditorValue[]): boolean;
     * @returns {boolean}
     */
 export function isLongerTextEditorValueThan(value: TextEditorValue[] | TextEditorValueChild[], maxLength?: number): boolean;
+export function getTextEditorValueLength(value: TextEditorValue[] | TextEditorValueChild[]): number;
 /**
     * @param {Array} value - the type of value is defined with TextEditorValue
     * @param {number} maxTextLines
@@ -8426,8 +8442,9 @@ export type TextEditorContentProps = {
     leafRender?: FC<LeafProps>;
     onBlur?: () => void;
     onFocus?: () => void;
+    maxLength?: number;
 };
-export default function TextEditorContent({ ariaAttrs, testId, placeholder, readOnly, autoFocus, isScrollable, elementRender, leafRender, onBlur, onFocus, }: TextEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export default function TextEditorContent({ ariaAttrs, testId, placeholder, readOnly, autoFocus, isScrollable, elementRender, leafRender, onBlur, onFocus, maxLength, }: TextEditorContentProps): import("react/jsx-runtime").JSX.Element;
 
 export type TourHandlerFunction = () => void;
 export type SkipTourHandlerFunction = (stepNumber: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "28.4.0",
+  "version": "28.5.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -13041,6 +13041,16 @@ table.simple-table.sublevel tr td {
   color: var(--text-primary);
   fill: var(--text-primary);
 }
+.text-editor .characters-counter {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: normal;
+  color: var(--text-secondary);
+  fill: var(--text-secondary);
+  margin: 0.25rem;
+}
 
 /*!****************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/text-editor/edited-text.less ***!