@apolitical/component-library 4.1.0-beta.0 → 4.1.0-beta.10

package/accessibility/visually-hidden/visually-hidden.d.ts

@@ -8,21 +8,39 @@ interface Props {
     children: React.ReactNode | JSX.Element | string;
     /** An `href`, for links */
     href?: string;
+    /** An `onBlur`, for buttons */
+    onBlur?: (e: React.FocusEvent) => void;
     /** An `onClick`, for buttons */
     onClick?: (e: React.MouseEvent) => void;
+    /** An `onFocus`, for buttons */
+    onFocus?: (e: React.FocusEvent) => void;
+    /** An `onKeyDown`, for buttons */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
     /** `for`, for labels */
     htmlFor?: string;
     /** Additional classes */
     className?: string;
+    /** Additional aria props */
+    'aria-expanded'?: boolean;
+    'aria-controls'?: string;
 }
 declare const _default: React.MemoExoticComponent<({ element, showOnFocus, children, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     className: string;
     children: React.ReactNode | JSX.Element;
     /** An `href`, for links */
     href?: string | undefined;
+    /** An `onBlur`, for buttons */
+    onBlur?: ((e: React.FocusEvent<Element, Element>) => void) | undefined;
     /** An `onClick`, for buttons */
     onClick?: ((e: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+    /** An `onFocus`, for buttons */
+    onFocus?: ((e: React.FocusEvent<Element, Element>) => void) | undefined;
+    /** An `onKeyDown`, for buttons */
+    onKeyDown?: ((e: React.KeyboardEvent<Element>) => void) | undefined;
     /** `for`, for labels */
     htmlFor?: string | undefined;
+    /** Additional aria props */
+    'aria-expanded'?: boolean | undefined;
+    'aria-controls'?: string | undefined;
 }, HTMLElement>>;
 export default _default;

package/discussion/components/form/form.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
 import { DiscussionCreateContentFunction, IDiscussionContent } from './../../discussion';
 export interface IDiscussionForm {
+    /** A unique ID for the form */
+    id?: string;
     /** Information about the content being created/edited */
     content: IDiscussionContent;
     /** If the user has permission to interact with the form, e.g. if they're a member of the community */
@@ -20,8 +21,6 @@ export interface IDiscussionForm {
         /** Whether the success message should show on a successful submit */
         showSuccessMessage?: boolean;
     };
-    /** The `ref` for the input, if we need to have control over it in the parent */
-    editorRef?: React.MutableRefObject<string | null>;
     /** The placeholder text - this defaults to the intl text */
     placeholder?: string;
     /** The maximum number of characters */
@@ -50,5 +49,5 @@ export interface IDiscussionForm {
     /** The language to use for the text */
     locale?: string;
 }
-declare const Form: ({ content, userHasPermissions, meta, editorRef, placeholder, maxLength, forceShow, functions, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
+declare const Form: ({ id, content, userHasPermissions, meta, placeholder, maxLength, forceShow, functions, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
 export default Form;

package/discussion/components/likes/likes.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { MemberProps } from '../../../user';
 import { IDiscussionContent } from './../../discussion';
 interface Props {
@@ -25,5 +26,10 @@ interface Props {
     /** The language to use for the text */
     locale?: string;
 }
-declare const Likes: ({ element, likes, peopleWhoLiked, isShort, userLiked, content, canLike, functions: { createLike, deleteLike }, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Likes: ({ element, likes, peopleWhoLiked, isShort, userLiked, content, canLike, functions: { createLike, deleteLike }, }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}, HTMLElement>;
 export default Likes;

package/form/components/form/form.d.ts

@@ -1,3 +1,3 @@
 import { IFormProps } from './form.types';
-declare const Form: ({ fields, className, id: formId, formRef: ref, intlPath, button, secondaryActionButton, meta, gtm, functions: { onSuccess, onCancel, onCatch, onFailure, }, ...props }: IFormProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Form: ({ element, fields, className, id: formId, formRef: ref, intlPath, button, secondaryActionButton, meta, gtm, functions: { onSuccess, onCancel, onCatch, onFailure, }, ...props }: IFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Form;

package/form/components/form/form.types.d.ts

@@ -174,6 +174,8 @@ export interface IFormProps {
     secondaryActionButton?: FormCancelButtonPropsType;
     /** The classes to add to the form */
     className?: string;
+    /** The type of element to render. This is in case we need to render a separate form inside the first, e.g. rendering the link form on the rich text editor inside the discussion form. */
+    element?: 'form' | 'fieldset';
     /** The fields to render in the form */
     fields: IField[];
     /** An optional `ref` for the form, in case we need to interact with it in another file */

package/form/components/rich-text-editor/components/context/context.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch } from 'react';
 import { Point } from 'slate';
 declare const RichTextEditorContext: import("react").Context<{
     /** The id of the editor */
@@ -9,15 +9,11 @@ declare const RichTextEditorContext: import("react").Context<{
     setFocus: (option: string | null) => void;
     /** The tooltip that is currently open */
     openTooltip: string | null;
-    /** The function to set the open tooltip */
-    setOpenTooltip: (option: string | null) => void;
     /** Whether the link editor is open */
     showLinkEditor: boolean;
-    /** The function to set the link editor */
-    setShowLinkEditor: (open: boolean) => void;
     /** The last anchor point (used for Slate to know where the cursor is) */
     lastAnchor: Point | null;
-    /** The function to set the last anchor */
-    setLastAnchor: (anchor: Point | null) => void;
+    /** The function to update the state */
+    dispatch: Dispatch<any>;
 }>;
 export default RichTextEditorContext;

package/form/components/rich-text-editor/components/toolbar/components/block-option/index.d.ts

@@ -1 +1,2 @@
 export { default as BlockOption } from './block-option';
+export * from './block-option.helpers';

package/form/components/rich-text-editor/components/toolbar/components/link-editor/link-editor.helpers.d.ts

@@ -1,5 +1,5 @@
 import { BaseEditor } from 'slate';
 export declare const isLinkActive: (editor: BaseEditor) => boolean;
-export declare const insertLink: (editor: BaseEditor, url: string) => void;
-export declare const wrapLink: (editor: BaseEditor, url: string) => void;
+export declare const insertLink: (editor: BaseEditor, url: string, id: string) => void;
+export declare const wrapLink: (editor: BaseEditor, url: string, id: string) => void;
 export declare const unwrapLink: (editor: BaseEditor) => void;

package/form/components/rich-text-editor/components/toolbar/components/mark-option/mark-option.helpers.d.ts

@@ -1,3 +1,5 @@
 import { BaseEditor } from 'slate';
+import { MarkOptionType } from '../../../../../../../form/components/rich-text-editor/rich-text-editor.types';
+export declare const isMarkOptionType: (value: string) => value is MarkOptionType;
 export declare const isMarkActive: (editor: BaseEditor, format: string) => boolean;
 export declare const toggleMark: (editor: BaseEditor, format: string) => void;

package/form/components/rich-text-editor/components/toolbar/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Toolbar } from './toolbar';
 export * from './toolbar.data';
-export { toggleMark, wrapLink } from './components';
+export { isMarkOptionType, toggleBlock, toggleMark, wrapLink } from './components';

package/form/components/rich-text-editor/helpers/ast-types/ast-types.d.ts

@@ -0,0 +1,156 @@
+export interface NodeTypes {
+    paragraph: string;
+    block_quote: string;
+    code_block: string;
+    link: string;
+    ul_list: string;
+    ol_list: string;
+    listItem: string;
+    heading: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    emphasis_mark: string;
+    strong_mark: string;
+    delete_mark: string;
+    inline_code_mark: string;
+    thematic_break: string;
+    image: string;
+}
+export type MdastNodeType = 'paragraph' | 'heading' | 'list' | 'listItem' | 'link' | 'image' | 'blockquote' | 'code' | 'html' | 'emphasis' | 'strong' | 'delete' | 'inlineCode' | 'thematicBreak' | 'text';
+export declare const defaultNodeTypes: NodeTypes;
+export interface LeafType {
+    text: string;
+    strikeThrough?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    code?: boolean;
+    parentType?: string;
+}
+export interface BlockType {
+    type: string;
+    parentType?: string;
+    link?: string;
+    caption?: string;
+    language?: string;
+    break?: boolean;
+    children: Array<BlockType | LeafType>;
+}
+export interface InputNodeTypes {
+    paragraph: string;
+    block_quote: string;
+    code_block: string;
+    link: string;
+    ul_list: string;
+    ol_list: string;
+    listItem: string;
+    heading: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    emphasis_mark: string;
+    strong_mark: string;
+    delete_mark: string;
+    inline_code_mark: string;
+    thematic_break: string;
+    image: string;
+}
+type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+export interface OptionType<T extends InputNodeTypes = InputNodeTypes> {
+    nodeTypes?: RecursivePartial<T>;
+    linkDestinationKey?: string;
+    imageSourceKey?: string;
+    imageCaptionKey?: string;
+}
+export interface MdastNode {
+    type?: MdastNodeType;
+    ordered?: boolean;
+    value?: string;
+    text?: string;
+    children?: Array<MdastNode>;
+    depth?: 1 | 2 | 3 | 4 | 5 | 6;
+    url?: string;
+    alt?: string;
+    lang?: string;
+    position?: any;
+    spread?: any;
+    checked?: any;
+    indent?: any;
+}
+export type TextNode = {
+    text?: string | undefined;
+};
+export type CodeBlockNode<T extends InputNodeTypes> = {
+    type: T['code_block'];
+    language: string | undefined;
+    children: Array<TextNode>;
+};
+export type HeadingNode<T extends InputNodeTypes> = {
+    type: T['heading'][1] | T['heading'][2] | T['heading'][3] | T['heading'][4] | T['heading'][5] | T['heading'][6];
+    children: Array<DeserializedNode<T>>;
+};
+export type ListNode<T extends InputNodeTypes> = {
+    type: T['ol_list'] | T['ul_list'];
+    children: Array<DeserializedNode<T>>;
+};
+export type ListItemNode<T extends InputNodeTypes> = {
+    type: T['listItem'];
+    children: Array<DeserializedNode<T>>;
+};
+export type ParagraphNode<T extends InputNodeTypes> = {
+    type: T['paragraph'];
+    break?: true;
+    children: Array<DeserializedNode<T>>;
+};
+export type LinkNode<T extends InputNodeTypes> = {
+    type: T['link'];
+    children: Array<DeserializedNode<T>>;
+    [urlKey: string]: string | undefined | Array<DeserializedNode<T>>;
+};
+export type ImageNode<T extends InputNodeTypes> = {
+    type: T['image'];
+    children: Array<DeserializedNode<T>>;
+    [sourceOrCaptionKey: string]: string | undefined | Array<DeserializedNode<T>>;
+};
+export type BlockQuoteNode<T extends InputNodeTypes> = {
+    type: T['block_quote'];
+    children: Array<DeserializedNode<T>>;
+};
+export type InlineCodeMarkNode<T extends InputNodeTypes> = {
+    type: T['inline_code_mark'];
+    children: Array<TextNode>;
+    language: string | undefined;
+};
+export type ThematicBreakNode<T extends InputNodeTypes> = {
+    type: T['thematic_break'];
+    children: Array<DeserializedNode<T>>;
+};
+export type ItalicNode<T extends InputNodeTypes> = {
+    [K in T['emphasis_mark']]: true;
+} & {
+    children: TextNode;
+};
+export type BoldNode = {
+    bold: true;
+    children: TextNode;
+};
+export type StrikeThoughNode = {
+    strikeThrough: true;
+    children: TextNode;
+};
+export type InlineCodeNode = {
+    code: true;
+    text: string | undefined;
+};
+export type DeserializedNode<T extends InputNodeTypes> = CodeBlockNode<T> | HeadingNode<T> | ListNode<T> | ListItemNode<T> | ParagraphNode<T> | LinkNode<T> | ImageNode<T> | BlockQuoteNode<T> | InlineCodeMarkNode<T> | ThematicBreakNode<T> | ItalicNode<T> | BoldNode | StrikeThoughNode | InlineCodeNode | TextNode;
+export {};

package/form/components/rich-text-editor/helpers/ast-types/index.d.ts

@@ -0,0 +1 @@
+export * from './ast-types';

package/form/components/rich-text-editor/helpers/deserialize/deserialize.d.ts

@@ -0,0 +1,3 @@
+import { Descendant } from 'slate';
+declare const deserialize: (node: string, callback?: (v: Descendant[]) => void) => void;
+export default deserialize;

package/form/components/rich-text-editor/helpers/deserialize/index.d.ts

@@ -0,0 +1 @@
+export { default as deserialize } from './deserialize';

package/form/components/rich-text-editor/helpers/helpers.data.d.ts

@@ -0,0 +1,97 @@
+export declare const html: {
+    paragraph: {
+        type: string;
+        children: {
+            text: string;
+        }[];
+    }[];
+    link: {
+        type: string;
+        children: ({
+            text: string;
+            type?: undefined;
+            link?: undefined;
+            children?: undefined;
+        } | {
+            type: string;
+            link: string;
+            children: {
+                text: string;
+            }[];
+            text?: undefined;
+        })[];
+    }[];
+    bold: {
+        type: string;
+        children: ({
+            text: string;
+            bold?: undefined;
+        } | {
+            bold: boolean;
+            text: string;
+        })[];
+    }[];
+    italic: {
+        type: string;
+        children: ({
+            text: string;
+            italic?: undefined;
+        } | {
+            italic: boolean;
+            text: string;
+        })[];
+    }[];
+    strikethrough: {
+        type: string;
+        children: ({
+            text: string;
+            strikeThrough?: undefined;
+        } | {
+            strikeThrough: boolean;
+            text: string;
+        })[];
+    }[];
+    blockquote: {
+        type: string;
+        children: {
+            type: string;
+            children: {
+                text: string;
+            }[];
+        }[];
+    }[];
+    ulList: {
+        type: string;
+        children: {
+            type: string;
+            children: {
+                type: string;
+                children: {
+                    text: string;
+                }[];
+            }[];
+        }[];
+    }[];
+    olList: {
+        type: string;
+        children: {
+            type: string;
+            children: {
+                type: string;
+                children: {
+                    text: string;
+                }[];
+            }[];
+        }[];
+    }[];
+};
+export declare const text: {
+    paragraph: string;
+    link: string;
+    bold: string;
+    italic: string;
+    strikethrough: string;
+    blockquote: string;
+    ulList: string;
+    olList: string;
+};

package/form/components/rich-text-editor/helpers/hot-keys/hot-keys.d.ts

@@ -0,0 +1,4 @@
+declare const HOTKEYS: {
+    [key: string]: string;
+};
+export default HOTKEYS;

package/form/components/rich-text-editor/helpers/hot-keys/index.d.ts

@@ -0,0 +1 @@
+export { default as HOTKEYS } from './hot-keys';

package/form/components/rich-text-editor/helpers/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ast-types';
+export * from './deserialize';
+export * from './hot-keys';
+export * from './serialize';
+export * from './transform';

package/form/components/rich-text-editor/helpers/serialize/do-serialize.d.ts

@@ -0,0 +1,3 @@
+import { Descendant } from 'slate';
+declare const doSerialize: (value: Descendant[]) => string;
+export default doSerialize;

package/form/components/rich-text-editor/helpers/serialize/index.d.ts

@@ -0,0 +1,2 @@
+export { default as serialize } from './serialize';
+export { default as doSerialize } from './do-serialize';

package/form/components/rich-text-editor/helpers/serialize/serialize.d.ts

@@ -0,0 +1,8 @@
+import { BlockType, LeafType, NodeTypes } from './../ast-types';
+interface Options {
+    nodeTypes: NodeTypes;
+    listDepth?: number;
+    ignoreParagraphNewline?: boolean;
+}
+export default function serialize(chunk: BlockType | LeafType, opts?: Options): string | undefined;
+export {};

package/form/components/rich-text-editor/helpers/transform/index.d.ts

@@ -0,0 +1 @@
+export { default as transform } from './transform';

package/form/components/rich-text-editor/helpers/transform/transform.d.ts

@@ -0,0 +1,21 @@
+import { BlockQuoteNode, CodeBlockNode, HeadingNode, ImageNode, InputNodeTypes, ItalicNode, LinkNode, ListItemNode, ListNode, MdastNode, OptionType, ParagraphNode, ThematicBreakNode } from './../ast-types';
+export default function transform<T extends InputNodeTypes>(node: MdastNode, opts?: OptionType<T>): CodeBlockNode<T> | HeadingNode<T> | ListNode<T> | ListItemNode<T> | ParagraphNode<T> | LinkNode<T> | ImageNode<T> | BlockQuoteNode<T> | ThematicBreakNode<T> | ItalicNode<T> | {
+    type: string;
+    children: {
+        text: string;
+    }[];
+} | {
+    value?: string | undefined;
+    position?: any;
+    url?: string | undefined;
+    alt?: string | undefined;
+    checked?: any;
+    ordered?: boolean | undefined;
+    depth?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    lang?: string | undefined;
+    spread?: any;
+    indent?: any;
+    text: string | undefined;
+    type?: undefined;
+    children?: undefined;
+};

package/form/components/rich-text-editor/plugins/with-linlines/with-inlines.d.ts

@@ -1,5 +1,5 @@
 import { BaseEditor } from 'slate';
 import { HistoryEditor } from 'slate-history';
 import { ReactEditor } from 'slate-react';
-declare const withInlines: (editor: BaseEditor & ReactEditor & HistoryEditor) => BaseEditor & ReactEditor & HistoryEditor;
+declare const withInlines: (editor: BaseEditor & ReactEditor & HistoryEditor, id: string) => BaseEditor & ReactEditor & HistoryEditor;
 export default withInlines;

package/form/components/rich-text-editor/rich-text-editor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface Props {
     /** The id of the rich text editor */
     id?: string;
@@ -15,5 +14,5 @@ interface Props {
     /**  Optional aria error message */
     'aria-errormessage'?: string;
 }
-declare const RichTextEditor: React.ForwardRefExoticComponent<Props & React.RefAttributes<string | null>>;
+declare const RichTextEditor: ({ id, value, placeholder, onChange, autoFocus, ...props }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default RichTextEditor;

package/general/buttons/button/button.d.ts

@@ -28,6 +28,12 @@ export interface ButtonPropsType {
     element?: string;
     /** The function the button should run when clicked */
     onClick?: false | ((e: React.MouseEvent<HTMLElement>) => void);
+    /** An optional function to call on focus */
+    onFocus?: () => void;
+    /** An optional function to call on blur */
+    onBlur?: () => void;
+    /** An optional function to call on keydown */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
     /** Additional classes to add to the button */
     className?: string;
     /** `disabled` is usually true or false, but we will want nuance in some places, for example the ability
@@ -61,6 +67,6 @@ export interface ButtonPropsType {
     'data-testid'?: string;
 }
 declare const Button: ({ variant, size, styling, icon, href, element, onClick, className, disabled, screenreaderText, children, ...rest }: ButtonPropsType) => React.DOMElement<{
-    [key: string]: string | boolean | addClasses.ArgumentArray | ((e: React.MouseEvent<HTMLElement>) => void) | React.RefObject<HTMLButtonElement>;
+    [key: string]: string | boolean | addClasses.ArgumentArray | (() => void) | ((e: React.KeyboardEvent<HTMLElement>) => void) | ((e: React.MouseEvent<HTMLElement>) => void) | React.RefObject<HTMLButtonElement>;
 }, Element>;
 export default Button;

package/general/index.d.ts

@@ -2,6 +2,7 @@ export * from './buttons';
 export * from './divider';
 export * from './image-container';
 export * from './link';
+export * from './portal';
 export * from './progress-tracker';
 export * from './responsive-image';
 export * from './return-to-nav-button';

package/general/link/link.d.ts

@@ -10,12 +10,18 @@ interface Props {
     className?: string;
     /** Function to be called when clicked */
     onClick?: ((e?: React.MouseEvent<HTMLElement>) => void) | undefined;
+    /** Function to be called when focused */
+    onFocus?: ((e?: React.FocusEvent<HTMLElement>) => void) | undefined;
+    /** Function to be called when key is pressed */
+    onKeyDown?: ((e?: React.KeyboardEvent<HTMLElement>) => void) | undefined;
     /** GTM event context */
     gtmContext?: string;
     /** GTM event type */
     gtmType?: string;
     /** Target for link */
     target?: '_blank' | '_self' | '_parent' | '_top';
+    /** The tab index of the link, e.g. in case we're setting up event handlers to move the focus on arrow press and want to remove the default tabability of the link */
+    tabIndex?: number;
     /** Whether link should be disabled */
     disabled?: boolean;
     /** An ARIA label for the link */

package/general/portal/index.d.ts

@@ -0,0 +1 @@
+export { default as Portal } from './portal';

package/general/portal/portal.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare const Portal: ({ children }: {
+    children?: ReactNode;
+}) => import("react").ReactPortal | null;
+export default Portal;

package/general/tooltip/tooltip.d.ts

@@ -30,6 +30,8 @@ interface Props {
     };
     /** Whether the tooltip is hidden from screen readers or not */
     'aria-hidden'?: boolean;
+    /** The id of the tooltip */
+    id?: string;
 }
 declare const Tooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement | null>>;
 export default Tooltip;

package/helpers/intl.d.ts

@@ -132,6 +132,7 @@ export declare const checkIntlPathExists: (path: string, language?: {
     discussion_likes_more: string;
     discussion_likes_like: string;
     discussion_likes_unlike: string;
+    discussion_likes_show: string;
     discussion_moreMenu_edit: string;
     discussion_moreMenu_delete: string;
     discussion_moreMenu_report: string;
@@ -301,6 +302,7 @@ export declare const checkIntlPathExists: (path: string, language?: {
     footer_legal_terms: string;
     footer_legal_cookie: string;
     footer_legal_accessibility: string;
+    footer_legal_ai: string;
     footer_legal_dataProtection: string;
     footer_legal_euDataProtection: string;
     footer_contact: string;