grep-components 2.22.2 → 2.23.0-GREPF-2943.1

package/dist/components/GrepEditor/components/buttons/button.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-export type InlineStyle = 'bold' | 'italic' | 'strikethrough' | string;
 export interface Button {
     type: ButtonType;
     children: React.ReactNode;
 }
 export declare enum ButtonType {
     bold = "bold",
-    italic = "italic"
+    italic = "italic",
+    superscript = "superscript",
+    subscript = "subscript"
 }
-export type Style = keyof typeof ButtonType;
-export declare const createButton: (style: Style) => Button;
+export type AllowedStyles = keyof typeof ButtonType;
+export declare const createButton: (style?: AllowedStyles) => Button;

package/dist/components/GrepEditor/components/editor.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { Properties } from '../entities';
-export default function Editor({ html, label, classes, autoFocus, helperText, showCharCount, allowedStyles, blockPasting, disableNewlines, onContentChange, editorRef, stripPastedStyles, readOnly, Toolbar, }: Properties): React.JSX.Element;
+export default function Editor({ html, label, classes, autoFocus, helperText, showCharCount, allowedStyles, blockPasting, disableNewlines, onContentChange, editorRef, stripPastedStyles, readOnly, Toolbar, maxChars, placeholder, }: Properties): React.JSX.Element;

package/dist/components/GrepEditor/components/plugins/Placeholder.d.ts

@@ -0,0 +1,15 @@
+import { LexicalEditor, RangeSelection } from 'lexical';
+export declare const getAllLexicalChildren: (editor: LexicalEditor) => {
+    key: string;
+    node: import("lexical").LexicalNode | null;
+    htmlElement: HTMLElement | null;
+}[];
+export declare const setPlaceholderOnSelection: ({ selection, editor, placeholder, }: {
+    selection: RangeSelection;
+    editor: LexicalEditor;
+    placeholder: string;
+}) => void;
+export declare const setNodePlaceholderFromSelection: (editor: LexicalEditor, placeholder: string) => void;
+export declare const AddPlaceholderPlugin: ({ placeholder, }: {
+    placeholder?: string;
+}) => null;

package/dist/components/GrepEditor/components/plugins/ReadMode.d.ts

@@ -0,0 +1,4 @@
+export declare function ReadModePlugin({ readOnly }: {
+    readOnly?: boolean;
+}): null;
+export default ReadModePlugin;

package/dist/components/GrepEditor/components/plugins/RemoveOverflow.d.ts

@@ -0,0 +1,4 @@
+export declare function RemoveOverflowPlugin({ maxChars }: {
+    maxChars?: number;
+}): null;
+export default RemoveOverflowPlugin;

package/dist/components/GrepEditor/components/plugins/StyleWrapperPlugin.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface CharcounteHelpertextPPayload {
     showCharcount?: boolean;
+    maxChars?: number;
     helperText?: string;
     readOnly?: boolean;
     classes?: Partial<Record<'root' | 'editor' | 'legend' | 'label', string>>;
@@ -10,5 +11,5 @@ export interface CharcounteHelpertextPPayload {
     toolbarAnchor: (_floatingAnchorElem: HTMLDivElement) => void;
     hasCustomToolbar?: boolean;
 }
-export declare function StyleWrapperPlugin({ showCharcount, helperText, readOnly, classes, label, children, autoFocus, toolbarAnchor, hasCustomToolbar, }: CharcounteHelpertextPPayload): React.JSX.Element | '' | undefined;
+export declare function StyleWrapperPlugin({ showCharcount, maxChars, helperText, readOnly, classes, label, children, autoFocus, toolbarAnchor, hasCustomToolbar, }: CharcounteHelpertextPPayload): React.JSX.Element | '' | undefined;
 export default StyleWrapperPlugin;

package/dist/components/GrepEditor/components/plugins/TextNodeStylingPlugin.d.ts

@@ -1,4 +1,4 @@
-import { Style } from '../buttons';
+import { AllowedStyles } from '../buttons';
 export default function TextNodeStylingPlugin({ allowedStyles, }: {
-    allowedStyles?: Style[];
+    allowedStyles?: AllowedStyles[];
 }): null;

package/dist/components/GrepEditor/components/plugins/{ToolbarPlugin.d.ts → Toolbar/ToolbarPlugin.d.ts}

@@ -6,8 +6,8 @@
  *
  */
 import { FC, JSX } from 'react';
-import { Button } from '../buttons';
-import { ToolbarProperties } from '../../entities';
+import { Button } from '../../buttons';
+import { ToolbarProperties } from '../../../entities';
 export default function FloatingTextFormatToolbarPlugin({ anchorElem, buttons, CustomToolbar, }: {
     anchorElem: HTMLElement;
     buttons?: Button[];

package/dist/components/GrepEditor/components/plugins/Toolbar/toolbarReducer.d.ts

@@ -0,0 +1,24 @@
+import { AllowedStyles } from '../../buttons';
+export declare enum ToolbarActionKind {
+    updateFormat = "UPDATE_FORMAT",
+    updateBoolean = "UPDATE_BOOLEAN",
+    reset = "RESET"
+}
+export type ToolbarAction = {
+    type: ToolbarActionKind.reset;
+    payload?: ToolbarState;
+} | {
+    type: ToolbarActionKind.updateBoolean;
+    field: keyof Omit<ToolbarState, 'format'>;
+    payload: boolean;
+} | {
+    type: ToolbarActionKind.updateFormat;
+    field: AllowedStyles;
+    payload: boolean;
+};
+export interface ToolbarState {
+    isText: boolean;
+    format: Set<AllowedStyles>;
+}
+export declare const ToolbarInitialState: ToolbarState;
+export declare function ToolbarReducer(state: ToolbarState, action: ToolbarAction): ToolbarState;

package/dist/components/GrepEditor/entities/index.d.ts

@@ -1,15 +1,16 @@
 import { RefObject } from 'react';
-import { Button, Style } from '../components/buttons';
+import { Button, AllowedStyles } from '../components/buttons';
 import { EditorState, LexicalEditor } from 'lexical';
 export interface ToolbarProperties {
     editor: LexicalEditor;
     buttons: Button[];
-    isSelected: boolean[];
+    formats: Set<AllowedStyles>;
 }
 export type LexicalOnChange = (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void;
 export interface Properties {
     html?: string;
     label?: string;
+    placeholder?: string;
     readOnly?: boolean;
     autoFocus?: boolean;
     showCharCount?: boolean;
@@ -24,7 +25,8 @@ export interface Properties {
      * Empty array: disable all styles.
      * Not empty array: allow only specified styles.
      */
-    allowedStyles?: Array<Style>;
+    allowedStyles?: Array<AllowedStyles>;
+    maxChars?: number;
     Toolbar?: React.FunctionComponent<ToolbarProperties>;
     classes?: Partial<Record<'root' | 'editor' | 'legend' | 'label', string>>;
     onContentChange?: LexicalOnChange;

package/dist/components/GrepEditor/stories/GrepEditor.stories.d.ts

@@ -17,6 +17,7 @@ export declare const CustomButtons: Story;
 export declare const PasteStrippingAndBlockedInlineStyles: Story;
 export declare const WithCharacterCount: Story;
 export declare const DisableAndStripNewlines: Story;
+export declare const WithPlaceholder: Story;
 export declare const DisablePasting: Story;
 export declare const WithLabel: Story;
 export declare const OnlyHeading: Story;