@datarobot/design-system 28.4.0 → 28.6.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.6.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -926,6 +926,8 @@
 /* REACT COMPONENT MIXINS */
 .sr-only {
   position: absolute;
+  top: 0;
+  left: 0;
   height: 0.0625rem;
   width: 0.0625rem;
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3627,13 +3629,15 @@ popout[data-popper-placement^='right']::after,
 .checkbox-tooltip-container {
   display: inline-block;
 }
+.checkbox-wrapper {
+  position: relative;
+  display: inline-block;
+}
 .checkbox {
   /* Hide native checkbox, but keep it focusable */
-  height: 0;
-  width: 0;
-  margin: 0;
-  clip: rect(0 0 0 0);
   position: absolute;
+  top: 0;
+  left: 0;
   height: 0.0625rem;
   width: 0.0625rem;
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3657,6 +3661,7 @@ popout[data-popper-placement^='right']::after,
   align-self: center;
   min-height: 1rem;
   min-width: 1rem;
+  max-width: 100%;
   padding-left: 1.5rem;
   vertical-align: middle;
   font-size: 0.875rem;
@@ -3789,15 +3794,26 @@ popout[data-popper-placement^='right']::after,
 /*!******************************************************************************************************************************************************************************************************************************************************!*\
   !*** 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/radio-button/radio-button.less ***!
   \******************************************************************************************************************************************************************************************************************************************************/
+/* stylelint-disable dr-custom/no-several-root-selectors */
+.radiobutton-wrapper {
+  position: relative;
+}
 .radiobutton {
+  /* Hide native radiobutton, but keep it focusable */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   padding: 0;
+  white-space: nowrap;
   border: 0;
+  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
   overflow: hidden;
-  clip: rect(0 0 0 0);
 }
 .radiobutton + label {
   position: relative;
@@ -3906,6 +3922,7 @@ popout[data-popper-placement^='right']::after,
 .radiobutton + .radiobutton-label.lg + .radiobutton-helper-text {
   padding-left: 1.5rem;
 }
+/* stylelint-enable dr-custom/no-several-root-selectors */
 
 /*!*********************************************************************************************************************************************************************************************************************************************************************!*\
   !*** 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/dropdown-menu/dropdown-item-radio-button.less ***!
@@ -4262,6 +4279,12 @@ popout[data-popper-placement^='right']::after,
 .dropdown-content ul.dropdown-menu-footer div.drop-item .checkbox-item {
   position: relative;
 }
+.dropdown-content ul.dropdown-menu-list li.drop-item .checkbox-item .checkbox-wrapper,
+.dropdown-content ul.dropdown-menu-footer li.drop-item .checkbox-item .checkbox-wrapper,
+.dropdown-content ul.dropdown-menu-list div.drop-item .checkbox-item .checkbox-wrapper,
+.dropdown-content ul.dropdown-menu-footer div.drop-item .checkbox-item .checkbox-wrapper {
+  width: 100%;
+}
 .dropdown-content ul.dropdown-menu-list li.drop-item .checkbox-item .checkbox + label,
 .dropdown-content ul.dropdown-menu-footer li.drop-item .checkbox-item .checkbox + label,
 .dropdown-content ul.dropdown-menu-list div.drop-item .checkbox-item .checkbox + label,
@@ -4426,6 +4449,9 @@ popout[data-popper-placement^='right']::after,
 .dropdown-content ul.dropdown-menu-list.sectioned li.drop-item .checkbox-item {
   position: relative;
 }
+.dropdown-content ul.dropdown-menu-list.sectioned li.drop-item .checkbox-item .checkbox-wrapper {
+  width: 100%;
+}
 .dropdown-content ul.dropdown-menu-list.sectioned li.drop-item .checkbox-item .checkbox + label {
   width: 100%;
   padding: 0.25rem 2rem 0.25rem 3.25rem;
@@ -5766,6 +5792,7 @@ button.highlighted-badge.apple:active:not(:disabled),
   !*** 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/chart-legend/chart-legend-item.less ***!
   \***********************************************************************************************************************************************************************************************************************************************************/
 .chart-legend-item {
+  position: relative;
   display: flex;
   align-content: center;
   justify-content: center;
@@ -5798,13 +5825,19 @@ button.highlighted-badge.apple:active:not(:disabled),
 .chart-legend-item input.chart-legend-item-checkbox {
   /* Hide native checkbox, but keep it focusable */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   padding: 0;
+  white-space: nowrap;
   border: 0;
+  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
   overflow: hidden;
-  clip: rect(0 0 0 0);
 }
 .chart-legend-item input.chart-legend-item-checkbox + label {
   cursor: pointer;
@@ -10775,6 +10808,7 @@ button:hover.active.pill {
   !*** 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/tabs/tabs.less ***!
   \**************************************************************************************************************************************************************************************************************************************/
 .tabgroup {
+  position: relative;
   border: 0;
 }
 .tabgroup.tabgroup-container {
@@ -10797,13 +10831,19 @@ button:hover.active.pill {
 .tabgroup .tabgroup-tab {
   /* 1. hide native input */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   padding: 0;
+  white-space: nowrap;
   border: 0;
+  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
   overflow: hidden;
-  clip: rect(0 0 0 0);
 }
 .tabgroup .tabgroup-tab:focus-visible + label {
   outline: var(--focus-outline-color) solid 0.0625rem;
@@ -12147,6 +12187,8 @@ table.simple-table.sublevel tr td {
   fill: var(--react-table-header-text-color);
   border-left: 0.0625rem solid var(--react-table-header-border);
   position: absolute;
+  top: 0;
+  left: 0;
   height: 0.0625rem;
   width: 0.0625rem;
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -13041,6 +13083,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 ***!
@@ -13160,13 +13212,19 @@ table.simple-table.sublevel tr td {
 .toggle {
   /* Hide native checkbox, but keep it focusable */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   padding: 0;
+  white-space: nowrap;
   border: 0;
+  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
   overflow: hidden;
-  clip: rect(0 0 0 0);
   /* Represents the only visible element of toggle */
   /* Represents knob area */
   /* Represents actual knob that changes position when checked/unchecked */