@apolitical/component-library 4.1.0-beta.3 → 4.1.0-beta.5

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/likes/likes.d.ts

@@ -31,6 +31,5 @@ declare const Likes: ({ element, likes, peopleWhoLiked, isShort, userLiked, cont
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
-    onBlur: () => void;
 }, HTMLElement>;
 export default Likes;

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

@@ -13,6 +13,8 @@ declare const RichTextEditorContext: import("react").Context<{
     showLinkEditor: boolean;
     /** The last anchor point (used for Slate to know where the cursor is) */
     lastAnchor: Point | null;
+    /** The current selection */
+    domSelection: Selection | null;
     /** The function to update the state */
     dispatch: Dispatch<any>;
 }>;

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/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/index.d.ts

@@ -0,0 +1 @@
+export { default as serialize } from './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/general/link/link.d.ts

@@ -12,12 +12,16 @@ interface Props {
     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/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;