@kaizen/components 1.33.0 → 1.34.0

package/dist/esm/dts/RichTextEditor/RichTextEditor/utils/controlmap.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ToolbarItems } from "../../types";
+import { ProseMirrorModel, ProseMirrorState } from "../../utils/prosemirror";
+/** Configuration for individual controls */
+type ToolbarControl = {
+    icon: JSX.Element;
+    label: string;
+    isActive: boolean;
+    disabled?: boolean;
+    action: ProseMirrorState.Command;
+};
+/** Builds an array of object used to map control configuration to rte toolbar buttons */
+export declare const buildControlMap: (schema: ProseMirrorModel.Schema, editorState: ProseMirrorState.EditorState, controls?: ToolbarItems[]) => ToolbarControl[][];
+export {};

package/dist/esm/dts/RichTextEditor/RichTextEditor/utils/inputrules.d.ts

@@ -0,0 +1,2 @@
+import { ProseMirrorInputrules, ProseMirrorModel } from "../../utils/prosemirror";
+export declare const buildInputRules: (schema: ProseMirrorModel.Schema) => ReturnType<(typeof ProseMirrorInputrules)["inputRules"]>;

package/dist/esm/dts/RichTextEditor/RichTextEditor/utils/keymap.d.ts

@@ -0,0 +1,6 @@
+import { ProseMirrorModel, ProseMirrorState } from "../../utils/prosemirror";
+type KeyBinding = {
+    [key: string]: ProseMirrorState.Command;
+};
+export declare const buildKeymap: (schema: ProseMirrorModel.Schema) => KeyBinding;
+export {};

package/dist/esm/dts/RichTextEditor/constants.d.ts

@@ -0,0 +1,2 @@
+import { ToolbarControlTypes } from "./types";
+export declare const TOOLBAR_CONTROLS: ToolbarControlTypes[];

package/dist/esm/dts/RichTextEditor/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./EditableRichTextContent";
+export * from "./RichTextContent";
+export * from "./RichTextEditor";
+export * from "./types";
+export * from "./utils/commands";
+export * from "./utils/core";
+export * from "./utils/plugins";
+export * from "./utils/prosemirror";
+export * from "./utils/schema";

package/dist/esm/dts/RichTextEditor/types.d.ts

@@ -0,0 +1,12 @@
+export type ToolbarControlTypes = "bold" | "italic" | "underline" | "orderedList" | "bulletList" | "link";
+export type ToolbarItems = {
+    name: ToolbarControlTypes;
+    /**
+     * A group is used to wrap items in the same section wrapper
+     * ungrouped items will be appended to the end of the toolbar */
+    group?: string;
+};
+export type EditorContentArray = Array<{
+    [key: string]: any;
+}>;
+export type EditorRows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;

package/dist/esm/dts/RichTextEditor/utils/commands/addMark.d.ts

@@ -0,0 +1,3 @@
+import { CommandFactory } from "../core/types";
+/** Wrap the users current selection in the given Mark type   */
+export declare const addMark: CommandFactory;

package/dist/esm/dts/RichTextEditor/utils/commands/fixtures/helpers.d.ts

@@ -0,0 +1,8 @@
+import { EditorState, Transaction } from "prosemirror-state";
+import { ProseMirrorModel } from "../../prosemirror";
+export declare const mockRangeForBoundingRect: () => void;
+export declare const simulateRangeSelection: (anchorPositionStart?: number, anchorPositionEnd?: number) => (state: EditorState, dispatch?: ((tx: Transaction) => void) | undefined) => boolean;
+export declare const getStartNode: (state: EditorState) => ReturnType<ProseMirrorModel.Node["childAfter"]>;
+export declare const simulateSelectionOfCurrentElement: (selectEntireElement?: boolean) => (state: EditorState, dispatch: (tx: Transaction) => void) => boolean;
+export declare const simulateSelectionByText: (selectedText: string) => (state: EditorState, dispatch?: ((tx: Transaction) => void) | undefined) => boolean;
+export declare const simulateTextInsert: (text: string) => (state: EditorState, dispatch?: ((tx: Transaction) => void) | undefined) => boolean;

package/dist/esm/dts/RichTextEditor/utils/commands/fixtures/test-state.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "prosemirror-model";
+export declare const testSchema: Schema<string, string>;
+export declare const testDocNodeBasic: {
+    type: string;
+    content: any;
+};
+export declare const testDocNodeMarks: {
+    type: string;
+    content: any;
+};
+export declare const testDocNodeLists: {
+    type: string;
+    content: any;
+};
+export declare const testEditorState: import("prosemirror-state").EditorState;
+export declare const testEditorStateWithMarks: import("prosemirror-state").EditorState;
+export declare const testEditorStateWitList: import("prosemirror-state").EditorState;

package/dist/esm/dts/RichTextEditor/utils/commands/getMarkAttrs.d.ts

@@ -0,0 +1,3 @@
+import { Attrs, MarkType } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+export declare const getMarkAttrs: (state: EditorState, type: MarkType) => Attrs;

package/dist/esm/dts/RichTextEditor/utils/commands/getMarkRange.d.ts

@@ -0,0 +1,3 @@
+import { MarkType, ResolvedPos } from "prosemirror-model";
+import { MarkRange } from "../core/types";
+export declare const getMarkRange: ($pos?: ResolvedPos | null, type?: MarkType | null) => MarkRange | null;

package/dist/esm/dts/RichTextEditor/utils/commands/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./addMark";
+export * from "./getMarkAttrs";
+export * from "./getMarkRange";
+export * from "./listIsActive";
+export * from "./markContainsSelection";
+export * from "./markIsActive";
+export * from "./removeMark";
+export * from "./updateMark";
+export * from "./validateAndRemoveMarks";

package/dist/esm/dts/RichTextEditor/utils/commands/listIsActive.d.ts

@@ -0,0 +1,3 @@
+import { NodeType } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+export declare const listIsActive: (state: EditorState, type: NodeType, listNodes: NodeType[]) => boolean;

package/dist/esm/dts/RichTextEditor/utils/commands/markContainsSelection.d.ts

@@ -0,0 +1,4 @@
+import { MarkType } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+/** Check the current PM Selection against the Mark Type provided */
+export declare const markContainsSelection: (state: EditorState, markType: MarkType) => boolean;

package/dist/esm/dts/RichTextEditor/utils/commands/markIsActive.d.ts

@@ -0,0 +1,3 @@
+import { MarkType } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+export declare const markIsActive: (state: EditorState, type: MarkType) => boolean;

package/dist/esm/dts/RichTextEditor/utils/commands/removeMark.d.ts

@@ -0,0 +1,3 @@
+import { CommandFactory } from "../core/types";
+/** Remove part or all of the Mark from the current selection */
+export declare const removeMark: CommandFactory;

package/dist/esm/dts/RichTextEditor/utils/commands/updateMark.d.ts

@@ -0,0 +1,3 @@
+import { CommandFactory } from "../core/types";
+/** Update Mark attributes, create nested Marks or split Marks of the same type   */
+export declare const updateMark: CommandFactory;

package/dist/esm/dts/RichTextEditor/utils/commands/validateAndRemoveMarks.d.ts

@@ -0,0 +1,12 @@
+import { MarkType } from "prosemirror-model";
+import { EditorState, Transaction } from "prosemirror-state";
+type KnownAttrs = {
+    varibleHref?: string;
+    href?: string;
+};
+export type AttrsValidator = (attrs: KnownAttrs & {
+    [key: string]: unknown;
+}) => boolean | unknown;
+/** This will walk the full doc and remove the Marks that fail the validator method */
+export declare const validateAndRemoveMarks: (markType: MarkType, validator: AttrsValidator) => (state: EditorState, dispatch?: ((tx: Transaction) => void) | undefined) => boolean;
+export {};

package/dist/esm/dts/RichTextEditor/utils/core/createRichTextEditor.d.ts

@@ -0,0 +1,21 @@
+import { EditorState } from "prosemirror-state";
+import { CommandOrTransaction } from "./types";
+type EditorAPI = {
+    destroy: () => void;
+    dispatchTransaction: (maybeCommand: CommandOrTransaction) => void;
+};
+type EditorArgs = {
+    initialEditorState: EditorState;
+    node: HTMLElement;
+    onChange: (editorState: EditorState) => void;
+    attributes?: {
+        [name: string]: string;
+    };
+    isEditable?: () => boolean;
+};
+/**
+ * createRichTextEditor
+ * Initialize a ProseMirror EditorView
+ */
+export declare const createRichTextEditor: ({ initialEditorState, node, onChange, attributes, isEditable, }: EditorArgs) => EditorAPI;
+export {};

package/dist/esm/dts/RichTextEditor/utils/core/fixtures/testState.d.ts

@@ -0,0 +1,21 @@
+import { Schema } from "prosemirror-model";
+export declare const testSchema: Schema<"text" | "doc" | "paragraph", any>;
+export declare const testDocNodeContentJSON: {
+    type: string;
+    content: {
+        type: string;
+        text: string;
+    }[];
+}[];
+export declare const testDocNodeJSON: {
+    type: string;
+    content: {
+        type: string;
+        content: {
+            type: string;
+            text: string;
+        }[];
+    }[];
+};
+export declare const testDocNode: import("prosemirror-model").Node;
+export declare const testEditorState: import("prosemirror-state").EditorState;

package/dist/esm/dts/RichTextEditor/utils/core/hooks/useRichTextEditor.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { EditorState } from "prosemirror-state";
+import { CommandOrTransaction } from "../types";
+type RTEOptions = {
+    editable: boolean;
+};
+type SetEditableStatus = (status: boolean) => void;
+type UseRichTextEditorReturnValue = [
+    React.RefCallback<HTMLElement>,
+    EditorState,
+    (commandOrTransaction: CommandOrTransaction) => void,
+    SetEditableStatus
+];
+/**
+ * useRichTextEditor
+ * React hook to initialize a ProseMirror editor, handle binding it to the DOM,
+ * and updating the state within React’s lifecycle.
+ *
+ * @param {initialEditorState} ProseMirror state
+ * @returns {Array}
+ */
+export declare const useRichTextEditor: (initialEditorState: EditorState, attributes?: Record<string, string>, options?: RTEOptions) => UseRichTextEditorReturnValue;
+export {};

package/dist/esm/dts/RichTextEditor/utils/core/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./createRichTextEditor";
+export * from "./hooks/useRichTextEditor";
+export * from "./state";
+export * from "./types";
+export * from "./inputrules";

package/dist/esm/dts/RichTextEditor/utils/core/inputrules.d.ts

@@ -0,0 +1,4 @@
+import { InputRule } from "prosemirror-inputrules";
+import { NodeType } from "prosemirror-model";
+export declare const orderedListRule: (nodeType: NodeType) => InputRule;
+export declare const bulletListRule: (nodeType: NodeType) => InputRule;

package/dist/esm/dts/RichTextEditor/utils/core/state.d.ts

@@ -0,0 +1,19 @@
+import { Node, Schema } from "prosemirror-model";
+import { EditorState, Plugin } from "prosemirror-state";
+import { Doc, DocContent } from "./types";
+/**
+ * createEditorState
+ * Create a ProseMirror EditorState. Wrapper for EditorState.create to make the
+ * API obvious to consumers
+ */
+export declare const createEditorState: (schema: Schema, doc: Node | undefined, plugins?: Plugin[]) => EditorState;
+/**
+ * Create a ProseMirror doc node from the combination of a schema and the object
+ * representation of a document
+ */
+export declare const createDocNode: (schema: Schema, docObject: Doc) => Node;
+/**
+ * Create a ProseMirror doc node from the combination of a schema and the doc’s
+ * content array (rather than the top-level doc node).
+ */
+export declare const createDocNodeFromContent: (schema: Schema, docContent: DocContent) => Node;

package/dist/esm/dts/RichTextEditor/utils/core/types.d.ts

@@ -0,0 +1,28 @@
+import { Command, Transaction } from "prosemirror-state";
+import { EditorView as ProseMirrorEditorView } from "prosemirror-view";
+/**
+ * Dispatch receives a transaction from ProseMirror to effect changes to the
+ * EditorState in order
+ */
+export type Dispatch = (tx: Transaction) => void;
+/**
+ * Curry a Command
+ */
+export type CommandFactory = (...args: any[]) => Command;
+export type CommandOrTransaction = Command | Transaction;
+export type MarkRange = {
+    from: number;
+    to: number;
+};
+export type Doc = {
+    type: string;
+    content: DocContent;
+};
+export type DocContent = Array<Record<string, any>>;
+/**
+ * Overload the EditorView` from ProseMirror to allow for the dispatch
+ * function to take either a Command` or a Transaction
+ */
+export type EditorView = ProseMirrorEditorView & {
+    dispatch(commandOrTransaction: CommandOrTransaction): void;
+};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/LinkManager.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from "react";
+import { MarkType } from "prosemirror-model";
+import { Plugin } from "prosemirror-state";
+import { AttrsValidator } from "../../commands";
+import { LinkEditorProps } from "./components/LinkEditor";
+type CreateLinkManagerArgs = {
+    markType: MarkType;
+    linkAttributeValidator?: AttrsValidator;
+    editorComponent?: ComponentType<LinkEditorProps>;
+};
+export declare const createLinkManager: ({ markType, editorComponent, linkAttributeValidator, }: CreateLinkManagerArgs) => Plugin;
+export {};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkEditor/LinkEditor.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { SelectionPosition } from "../../types";
+export type LinkEditorAttrs = {
+    href: string | null;
+    _metadata: {
+        [key: string]: unknown;
+    } | null;
+};
+export type LinkEditorProps = {
+    removeMark: () => void;
+    updateAttrs: ({ href }: LinkEditorAttrs) => void;
+    attrs: LinkEditorAttrs;
+    selectionPosition: SelectionPosition;
+    focusEditor: () => void;
+};
+export declare const LinkEditor: {
+    ({ attrs, removeMark, updateAttrs, selectionPosition, focusEditor, }: LinkEditorProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkEditor/index.d.ts

@@ -0,0 +1 @@
+export * from "./LinkEditor";

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type LinkModalProps = {
+    onSubmit: (href: string) => void;
+    onDismiss: () => void;
+    onAfterLeave: () => void;
+    isOpen: boolean;
+    defaultHref?: string;
+};
+export declare const LinkModal: {
+    ({ onSubmit, onDismiss, onAfterLeave, isOpen, defaultHref, }: LinkModalProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/index.d.ts

@@ -0,0 +1 @@
+export * from "./LinkModal";

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SelectionPosition } from "../../types";
+export type LinkPopoverProps = {
+    href?: string;
+    onRemove: () => void;
+    onEdit: () => void;
+    selectionPosition: SelectionPosition;
+};
+export declare const LinkPopover: {
+    ({ href, onRemove, onEdit, selectionPosition, }: LinkPopoverProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/Positioner.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SelectionPosition } from "../../types";
+export declare const Positioner: React.ForwardRefExoticComponent<SelectionPosition & React.RefAttributes<HTMLElement>>;

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/index.d.ts

@@ -0,0 +1 @@
+export * from "./LinkPopover";

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./LinkEditor";
+export * from "./LinkModal";
+export * from "./LinkPopover";

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/createReactTooltipWrapper.d.ts

@@ -0,0 +1,10 @@
+import { ElementType } from "react";
+import { LinkEditorProps } from "./components";
+/**
+ * Create a wrapping connector for rendering a React element into a separate
+ * part of the DOM while being able to update it without remounting.
+ */
+export declare const createReactTooltipWrapper: (parentNode: HTMLElement, Component: ElementType, componentProps: LinkEditorProps) => {
+    destroy: () => void;
+    update: (props: LinkEditorProps) => void;
+};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./LinkManager";
+export * from "./components";

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/types.d.ts

@@ -0,0 +1,13 @@
+import { Transaction, Command } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+export type MaybeCommand = Command | Transaction;
+export type Dispatcher = (tx: Transaction) => void;
+export interface CAEditorView extends EditorView {
+    dispatch(maybeCommand: MaybeCommand): void;
+}
+export type SelectionPosition = {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+};

package/dist/esm/dts/RichTextEditor/utils/plugins/LinkManager/validation.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type ValidationResponse = {
+    status: "success" | "error" | "default";
+    message?: React.ReactNode;
+};
+export declare const validateLink: (href: string) => ValidationResponse;

package/dist/esm/dts/RichTextEditor/utils/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from "./LinkManager";

package/dist/esm/dts/RichTextEditor/utils/prosemirror/index.d.ts

@@ -0,0 +1,7 @@
+export * as ProseMirrorCommands from "prosemirror-commands";
+export * as ProseMirrorKeymap from "prosemirror-keymap";
+export * as ProseMirrorHistory from "prosemirror-history";
+export * as ProseMirrorState from "prosemirror-state";
+export * as ProseMirrorModel from "prosemirror-model";
+export * as ProseMirrorInputrules from "prosemirror-inputrules";
+export * as ProseMirrorSchemaList from "prosemirror-schema-list";

package/dist/esm/dts/RichTextEditor/utils/schema/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./marks";
+export * from "./nodes";

package/dist/esm/dts/RichTextEditor/utils/schema/marks.d.ts

@@ -0,0 +1,2 @@
+import { MarkSpec } from "prosemirror-model";
+export declare const getMarks: () => MarkSpec;

package/dist/esm/dts/RichTextEditor/utils/schema/nodes.d.ts

@@ -0,0 +1,2 @@
+import { NodeSpec } from "prosemirror-model";
+export declare const getNodes: () => NodeSpec;

package/dist/esm/dts/TextField/TextField.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { InputProps } from "../Input";
 type OmittedInputProps = "startIconAdornment" | "endIconAdornment" | "ariaDescribedBy" | "ariaLabel";
-export interface TextFieldProps extends Omit<InputProps, OmittedInputProps> {
+export type TextFieldProps = {
     /**
      * A short example of input text. For context or additional information use the `description` prop
      */
@@ -16,7 +16,7 @@ export interface TextFieldProps extends Omit<InputProps, OmittedInputProps> {
      * A description that provides context for the text field
      */
     description?: string | React.ReactNode;
-}
+} & Omit<InputProps, OmittedInputProps>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}

package/dist/esm/dts/index.d.ts

@@ -43,6 +43,7 @@ export * from "./Pagination";
 export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./Radio";
+export * from "./RichTextEditor";
 export * from "./SearchField";
 export * from "./Select";
 export * from "./Skirt";