@apolitical/component-library 4.1.12 → 4.2.0-beta.0

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

@@ -23,6 +23,7 @@ interface Props {
     /** Additional aria props */
     'aria-expanded'?: boolean;
     'aria-controls'?: string;
+    'aria-live'?: 'off' | 'polite' | 'assertive';
 }
 declare const _default: React.MemoExoticComponent<({ element, showOnFocus, children, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     className: string;
@@ -42,5 +43,6 @@ declare const _default: React.MemoExoticComponent<({ element, showOnFocus, child
     /** Additional aria props */
     'aria-expanded'?: boolean | undefined;
     'aria-controls'?: string | undefined;
+    'aria-live'?: "off" | "polite" | "assertive" | undefined;
 }, HTMLElement>>;
 export default _default;

package/constants/discussion.d.ts

@@ -0,0 +1 @@
+export declare const GET_STREAM_USER_PREFIX = "SU:";

package/constants/index.d.ts

@@ -1,5 +1,7 @@
 export * from './assets';
 export * from './contact-details';
 export * from './courses';
+export * from './discussion';
 export * from './error-messages';
+export * from './regex';
 export * from './stats';

package/constants/regex.d.ts

@@ -0,0 +1 @@
+export declare const UUID_V4_REGEX: RegExp;

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

@@ -1,4 +1,5 @@
-import { DiscussionCreateContentFunction, IDiscussionContent } from './../../discussion';
+import { type ListMembers } from '../../../form';
+import { DiscussionCreateContentFunction, IDiscussionContent, IMentions } from './../../discussion';
 export interface IDiscussionForm {
     /** A unique ID for the form */
     id?: string;
@@ -38,16 +39,22 @@ export interface IDiscussionForm {
         handleSaveEdit?: ((arg?: string) => Promise<void>) | (() => void);
         handleCancel?: () => void;
         callback?: (args: void) => void;
+        listMembers?: ListMembers;
         props?: {
             create: {
                 projectNames: ['questions-answers'];
             };
         };
     };
+    /** Data to be passed into the rich text editor */
+    data?: {
+        /** Mentions data */
+        mentions?: IMentions;
+    };
     /** The context for GTM */
     gtmContext?: string;
     /** The language to use for the text */
     locale?: string;
 }
-declare const Form: ({ id, content, userHasPermissions, meta, placeholder, maxLength, forceShow, functions, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
+declare const Form: ({ id, content, userHasPermissions, meta, placeholder, maxLength, forceShow, functions, data, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
 export default Form;

package/discussion/components/post/post.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
+import { type ListMembers } from '../../../form';
 import { DiscussionCreateContentFunction, DiscussionCreateLikeFunction, DiscussionDeleteLikeFunction, IForceHide, IFullDiscussionContent } from '../../discussion';
+interface PostContent extends IFullDiscussionContent {
+    /** The post body */
+    postBody?: string;
+}
 interface Props {
     /** The element that will render around the content */
     element?: 'li' | 'div' | 'section' | 'article';
     /** Information about the content being posted */
-    content: IFullDiscussionContent;
+    content: PostContent;
     /** If the user has permission to interact with the post box and content, e.g. if they're a member of the community */
     userHasPermissions?: boolean;
     /** If the post is still loading */
@@ -33,6 +38,10 @@ interface Props {
             /** Open comments on a post */
             openComments?: () => void;
         };
+        mentions: {
+            /** Get data to hydrate mentions */
+            listMembers: ListMembers;
+        };
     };
     /** Optional `href`s for the card to link to */
     links?: {
@@ -50,5 +59,5 @@ interface Props {
     /** If the post content is truncated */
     isTruncated?: boolean;
 }
-declare const Post: ({ element, content, userHasPermissions, isLoading, originalAuthorId, forceHide, functions: { content: { createContent, deleteContent, updateContent }, likes: { createLike, deleteLike }, comments: { openComments }, }, links, className, gtmContext, children, isTruncated, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Post: ({ element, content, userHasPermissions, isLoading, originalAuthorId, forceHide, functions: { content: { createContent, deleteContent, updateContent }, likes: { createLike, deleteLike }, comments: { openComments }, mentions: { listMembers }, }, links, className, gtmContext, children, isTruncated, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Post;

package/discussion/components/post/post.helpers.d.ts

@@ -1,2 +1,3 @@
 import { IMentions } from './../../discussion';
-export declare const getPostBody: (body: string, isTruncated: boolean, mentions?: IMentions) => string;
+import { ListMembers } from '../../../form';
+export declare const getPostBody: (body: string, isTruncated: boolean, mentions?: IMentions, listMembers?: ListMembers) => Promise<string>;

package/discussion/components/post/post.mock.d.ts

@@ -13,6 +13,9 @@ declare namespace _default {
         namespace comments {
             function openComments(): void;
         }
+        namespace mentions {
+            function listMembers(): Promise<never[]>;
+        }
     }
 }
 export default _default;

package/discussion/feeds/activities-feed/activities-feed.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { IMentionsFns } from '../../../discussion/discussion.d';
 import type { IQueryFns } from './cache';
 interface Props {
     /** The base path, used for slugs */
@@ -11,6 +12,8 @@ interface Props {
     functions: {
         /** Query functions for the activities */
         activities: IQueryFns;
+        /** Query functions for the mentions */
+        mentions: IMentionsFns;
         /** Function to join the community */
         join: () => Promise<void>;
         /** Function to leave the community */

package/discussion/feeds/replies-feed/nested-replies-feed/nested-replies-feed.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
+import type { IMentionsFns } from '../../../../discussion/discussion.d';
 import type { IQueryFns } from './../cache';
+interface NestedRepliesFunctions extends IQueryFns, IMentionsFns {
+}
 interface Props {
     /** The base path, used for slugs */
     basePath: string;
@@ -12,7 +15,7 @@ interface Props {
     /** Whether the user is a member of the community */
     isMember: boolean;
     /** Functions for the replies query */
-    functions: IQueryFns;
+    functions: NestedRepliesFunctions;
 }
 declare const NestedRepliesFeed: React.FC<Props>;
 export default NestedRepliesFeed;

package/discussion/feeds/replies-feed/replies-feed.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { IMentionsFns } from './../../discussion';
 import type { IQueryFns } from './cache';
 interface Props {
     /** The base path, used for slugs */
@@ -13,6 +14,8 @@ interface Props {
     functions: {
         /** Query functions for the replies */
         reactions: IQueryFns;
+        /** Query functions for the mentions */
+        mentions: IMentionsFns;
         /** Function to join the community */
         join: () => Promise<void>;
         /** Function to leave the community */

package/discussion/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './feeds';
 export * from './sections';
+export type { IMentionData, IMentions } from './discussion.d';

package/discussion/sections/activity-section/activity-section.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { IRepliesFeedQueryFns } from '../../../discussion/feeds';
+import type { IMentionsFns } from './../../discussion.d';
 import type { IQueryFns } from './cache';
 interface IActivitySectionQueryFns extends IQueryFns {
     remove: () => Promise<void>;
@@ -12,6 +13,7 @@ interface Props {
     functions: {
         activities: IActivitySectionQueryFns;
         reactions: IRepliesFeedQueryFns;
+        mentions: IMentionsFns;
         join: () => Promise<void>;
         leave: () => Promise<void>;
     };

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

@@ -1,6 +1,6 @@
 import { Dispatch } from 'react';
 import { Point } from 'slate';
-import { ReportError } from './../../rich-text-editor.types';
+import { ReportError, IMentionPopOver } from './../../rich-text-editor.types';
 declare const RichTextEditorContext: import("react").Context<{
     /** The id of the editor */
     id: string;
@@ -12,6 +12,8 @@ declare const RichTextEditorContext: import("react").Context<{
     openTooltip: string | null;
     /** Whether the link editor is open */
     showLinkEditor: boolean;
+    /** The data for the mention popover, including if it's showing, the selected user for the popover, and the possible users */
+    mentionPopover: IMentionPopOver;
     /** The last anchor point (used for Slate to know where the cursor is) */
     lastAnchor: Point | null;
     /** The function to update the state */

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

@@ -1,2 +1,3 @@
 export * from './element';
 export * from './leaf';
+export * from './mention-popover';

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

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

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

@@ -0,0 +1,2 @@
+declare const MentionPopover: () => import("react/jsx-runtime").JSX.Element | null;
+export default MentionPopover;

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

@@ -7,6 +7,7 @@ export interface NodeTypes {
     [Formatting.ul]: string;
     [Formatting.ol]: string;
     [Formatting.li]: string;
+    [Formatting.mention]: string;
     [Formatting.heading]: {
         1: string;
         2: string;
@@ -28,6 +29,7 @@ export declare enum MdastNodes {
     list = "list",
     listItem = "listItem",
     link = "link",
+    mention = "mention",
     image = "image",
     blockquote = "blockquote",
     code = "code",
@@ -39,7 +41,7 @@ export declare enum MdastNodes {
     thematicBreak = "thematicBreak",
     text = "text"
 }
-export type MdastNodeType = MdastNodes.paragraph | MdastNodes.heading | MdastNodes.list | MdastNodes.listItem | MdastNodes.link | MdastNodes.image | MdastNodes.blockquote | MdastNodes.code | MdastNodes.html | MdastNodes.emphasis | MdastNodes.strong | MdastNodes.delete | MdastNodes.inlineCode | MdastNodes.thematicBreak | MdastNodes.text;
+export type MdastNodeType = MdastNodes.paragraph | MdastNodes.heading | MdastNodes.list | MdastNodes.listItem | MdastNodes.link | MdastNodes.mention | MdastNodes.image | MdastNodes.blockquote | MdastNodes.code | MdastNodes.html | MdastNodes.emphasis | MdastNodes.strong | MdastNodes.delete | MdastNodes.inlineCode | MdastNodes.thematicBreak | MdastNodes.text;
 export declare const defaultNodeTypes: NodeTypes;
 export interface LeafType {
     text: string;
@@ -53,6 +55,7 @@ export interface BlockType {
     type: string;
     parentType?: string;
     link?: string;
+    mention?: string;
     caption?: string;
     language?: string;
     break?: boolean;

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

@@ -2,5 +2,6 @@ export * from './ast-types';
 export * from './deserialize';
 export * from './handle-text';
 export * from './hot-keys';
+export * from './mentions';
 export * from './serialize';
 export * from './transform';

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

@@ -0,0 +1,2 @@
+export { default as insertMention } from './insert-mention';
+export { default as shouldShowMentionsPopover } from './should-show-mentions-popover';

package/form/components/rich-text-editor/helpers/mentions/insert-mention.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch } from 'react';
+import { BaseEditor } from 'slate';
+import { IMentionPopOver } from './../../rich-text-editor.types';
+declare const insertMention: (editor: BaseEditor, mentionPopover: IMentionPopOver, dispatch: Dispatch<any>) => void;
+export default insertMention;

package/form/components/rich-text-editor/helpers/mentions/should-show-mentions-popover.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch } from 'react';
+import { BaseEditor } from 'slate';
+import { type ListMembers } from './../../rich-text-editor.types';
+declare const shouldShowMentionsPopover: (editor: BaseEditor, isShowing: boolean, listMembers: ListMembers | undefined, dispatch: Dispatch<any>) => Promise<void>;
+export default shouldShowMentionsPopover;

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

@@ -7,12 +7,12 @@ export default function transform<T extends InputNodeTypes>(node: MdastNode, opt
     }[];
 } | {
     value?: string | undefined;
-    position?: any;
-    url?: string | undefined;
     alt?: string | undefined;
+    url?: string | undefined;
+    position?: any;
     checked?: any;
     ordered?: boolean | undefined;
-    depth?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    depth?: 1 | 2 | 3 | 4 | 6 | 5 | undefined;
     lang?: string | undefined;
     spread?: any;
     indent?: any;

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

@@ -1 +1,2 @@
 export { default as RichTextEditor } from './rich-text-editor';
+export * from './rich-text-editor.types';

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

@@ -1,2 +1,3 @@
 export * from './with-linlines';
+export * from './with-mentions';
 export * from './without-empty-links';

package/form/components/rich-text-editor/plugins/with-mentions/index.d.ts

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

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

@@ -0,0 +1,6 @@
+import { BaseEditor } from 'slate';
+import { HistoryEditor } from 'slate-history';
+import { ReactEditor } from 'slate-react';
+import { ReportError } from './../../rich-text-editor.types';
+declare const withMentions: (editor: BaseEditor & ReactEditor & HistoryEditor, reportError: ReportError) => BaseEditor & ReactEditor & HistoryEditor;
+export default withMentions;

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

@@ -0,0 +1,11 @@
+export declare const MENTION_IDENTIFIER = "MENTION: ";
+export declare const FALLBACK_POSITION: {
+    anchor: {
+        offset: number;
+        path: number[];
+    };
+    focus: {
+        offset: number;
+        path: number[];
+    };
+};

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

@@ -1,4 +1,5 @@
-import { ReportError } from './rich-text-editor.types';
+import type { IMentions } from '../../../discussion/discussion';
+import { ListMembers, ReportError } from './rich-text-editor.types';
 interface Props {
     /** The id of the rich text editor */
     id?: string;
@@ -10,6 +11,8 @@ interface Props {
     maxLength?: number;
     /** Optional functions */
     functions?: {
+        /** An optional function to get a filtered list of members when the user starts typing a mention */
+        listMembers?: ListMembers;
         /** An optional event handler, called when the rich text editor is changed */
         onChange?: (value: string) => void;
         /** An optional event handler, called when the rich text editor reports an error */
@@ -21,6 +24,11 @@ interface Props {
     'aria-invalid'?: boolean;
     /**  Optional aria error message */
     'aria-errormessage'?: string;
+    /** Optional data for the editor */
+    data?: {
+        /** Optional mentions */
+        mentions?: IMentions;
+    };
 }
-declare const RichTextEditor: ({ id, value, placeholder, maxLength, functions, autoFocus, ...props }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const RichTextEditor: ({ id, value, placeholder, maxLength, functions, autoFocus, data, ...props }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default RichTextEditor;

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

@@ -1,4 +1,5 @@
-import { BaseElement, BaseText, Descendant } from 'slate';
+import { BaseElement, BaseText, Descendant, Range } from 'slate';
+import type { MemberDetailsProps } from '../../../user';
 export declare enum Formatting {
     blockquote = "block_quote",
     bold = "bold",
@@ -10,6 +11,7 @@ export declare enum Formatting {
     italic = "italic",
     li = "list_item",
     link = "link",
+    mention = "mention",
     ol = "ol_list",
     paragraph = "paragraph",
     ul = "ul_list",
@@ -26,10 +28,15 @@ export interface BaseProps {
     className?: string;
     [key: string]: unknown;
 }
-export type BlockOptionType = Formatting.blockquote | Formatting.link | Formatting.li | Formatting.ol | Formatting.ul | Formatting.paragraph | Formatting.span;
+export type BlockOptionType = Formatting.blockquote | Formatting.link | Formatting.li | Formatting.mention | Formatting.ol | Formatting.ul | Formatting.paragraph | Formatting.span;
 export interface TypeElement extends BaseElement {
     type: BlockOptionType;
 }
+export interface MentionElement extends BaseElement {
+    type: Formatting.mention;
+    id: string;
+    name?: string;
+}
 export type MarkOptionType = Formatting.bold | Formatting.italic | Formatting.strikethrough;
 export interface TypeText extends BaseText {
     [Formatting.bold]?: boolean;
@@ -46,3 +53,22 @@ export type LinkElement = {
     children: Descendant[];
 };
 export type ReportError = (error: string) => void;
+export interface IMention {
+    id: string;
+    creator?: boolean;
+    role?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    userId?: string;
+    user: MemberDetailsProps;
+}
+export type ListMembers = ({ id, name, }: {
+    id?: string;
+    name?: string;
+}) => Promise<IMention[]>;
+export interface IMentionPopOver {
+    show: boolean;
+    selectedUser: number;
+    possibleUsers: IMention[];
+    position: Range | null;
+}

package/general/index.d.ts

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

package/general/popover/index.d.ts

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

package/general/popover/popover.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    /** Additional className */
+    className?: string;
+    /** The content of the popover */
+    children: React.ReactNode;
+    /** Optional keydown event */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+}
+declare const Popover: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement | null>>;
+export default Popover;

package/helpers/cases.d.ts

@@ -1,3 +1,4 @@
 export declare const camelCaseToDashCase: (str: string) => string;
 export declare const toCamelCase: (str?: string) => string;
 export declare const toSentenceCase: (str?: string) => string;
+export declare const toCapitalisedCase: (str?: string) => string;

package/helpers/index.d.ts

@@ -9,5 +9,6 @@ export * from './intl';
 export * from './numbers';
 export { default as passPropsToChildren } from './pass-props-to-children';
 export * from './prerender';
+export { default as replaceMentionData } from './replace-mention-data';
 export * from './urls';
 export * from './validation';

package/helpers/intl.d.ts

@@ -40,6 +40,7 @@ export declare const checkIntlPathExists: (path: string, language?: {
     carousel_pagination_previous: string;
     carousel_pagination_next: string;
     carousel_pagination_page: string;
+    carousel_pagination_aria_live: string;
     activitySection_notFoundError: string;
     communityDetails_members: string;
     communityDetails_viewAll: string;

package/helpers/replace-mention-data.d.ts

@@ -0,0 +1,9 @@
+import { IMentions } from '../discussion';
+import { ListMembers } from '../form';
+declare const replaceMentionData: ({ text, template, mentions, listMembers, }: {
+    text: string;
+    template: string;
+    mentions?: IMentions | undefined;
+    listMembers: ListMembers;
+}) => Promise<string>;
+export default replaceMentionData;