@apolitical/component-library 4.0.4 → 4.1.0-beta.2

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

@@ -1,7 +1,7 @@
 import React from 'react';
 interface Props {
     /** The element that will render around the content. */
-    element?: 'span' | 'small' | 'strong' | 'em' | 'sup' | 'sub' | 'div' | 'p' | 'label' | 'a' | 'button';
+    element?: 'span' | 'small' | 'strong' | 'em' | 'sup' | 'sub' | 'div' | 'p' | 'label' | 'legend' | 'a' | 'button';
     /** Whether the content should be shown on focus. */
     showOnFocus?: boolean;
     /** The content to be hidden from screen readers. */

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

@@ -21,13 +21,11 @@ export interface IDiscussionForm {
         showSuccessMessage?: boolean;
     };
     /** The `ref` for the input, if we need to have control over it in the parent */
-    inputRef?: React.Ref<HTMLTextAreaElement> | undefined;
+    editorRef?: React.MutableRefObject<string | null>;
     /** The placeholder text - this defaults to the intl text */
     placeholder?: string;
     /** The maximum number of characters */
     maxLength?: number;
-    /** The minimum number of rows */
-    minRows?: number;
     /** Force elements on the form to show, regardless of the form state */
     forceShow?: {
         /** If the cancel button should always show */
@@ -52,5 +50,5 @@ export interface IDiscussionForm {
     /** The language to use for the text */
     locale?: string;
 }
-declare const Form: ({ content, userHasPermissions, meta, inputRef, placeholder, maxLength, minRows, forceShow, functions, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
+declare const Form: ({ content, userHasPermissions, meta, editorRef, placeholder, maxLength, forceShow, functions, gtmContext, }: IDiscussionForm) => import("react/jsx-runtime").JSX.Element;
 export default Form;

package/form/components/form/components/field-wrapper/field-wrapper.d.ts

@@ -1,3 +1,3 @@
 import { IFieldWrapper } from '../../form.types';
-declare const FieldWrapper: ({ id, intlPath, className, error, functions, limit, showRequiredLabels, type, validation, value, ...props }: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
+declare const FieldWrapper: ({ id, intlPath, className, error, functions, limit, showRequiredLabels, type, validation, value, submitOnEnter, ...props }: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
 export default FieldWrapper;

package/form/components/form/components/fields/checkbox/checkbox.d.ts

@@ -5,10 +5,13 @@ export declare const Checkbox: ({ className, disabled, element, functions: allFu
     onBlur?: (() => void) | undefined;
     onFocus?: (() => void) | undefined;
     onKeyInput?: (<T>(arg1: import("../../../form.types").FormValues) => Promise<T>) | undefined;
+    onKeyDown?: ((e: React.KeyboardEvent<HTMLElement>) => void) | undefined;
+    submitForm?: ((arg: import("../../../form.types").IFormValues) => void) | undefined;
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
     autoComplete?: string | undefined;
+    autoFocus?: boolean | undefined;
     component?: any;
     'data-character-limit'?: number | undefined;
     'data-testid'?: string | undefined;
@@ -30,6 +33,7 @@ export declare const Checkbox: ({ className, disabled, element, functions: allFu
         [key: string]: string | boolean | object | React.RefObject<any> | (() => void);
     } | undefined;
     required?: boolean | undefined;
+    submitOnEnter?: boolean | undefined;
     validation?: import("../../../form.types").IFieldValidation[] | undefined;
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
     className: string;

package/form/components/form/components/fields/input/input.d.ts

@@ -6,6 +6,8 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     onBlur?: (() => void) | undefined;
     onFocus?: (() => void) | undefined;
     onKeyInput?: (<T>(arg1: import("../../../form.types").FormValues) => Promise<T>) | undefined;
+    onKeyDown?: ((e: React.KeyboardEvent<HTMLElement>) => void) | undefined;
+    submitForm?: ((arg: import("../../../form.types").IFormValues) => void) | undefined;
     type: InputTypes;
     id: string | undefined;
     name: string | undefined;
@@ -16,6 +18,7 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
     autoComplete?: string | undefined;
+    autoFocus?: boolean | undefined;
     component?: any;
     'data-character-limit'?: number | undefined;
     'data-testid'?: string | undefined;
@@ -39,6 +42,7 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     } | undefined;
     required?: boolean | undefined;
     shownValue?: InputValues | undefined;
+    submitOnEnter?: boolean | undefined;
     validation?: import("../../../form.types").IFieldValidation[] | undefined;
     ref: React.RefObject<HTMLInputElement>;
 }, HTMLInputElement>;

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

@@ -5,7 +5,7 @@ import { IntlShape } from 'react-intl';
 export type InputValues = string | number | boolean | null;
 export type MultipleInputValues = InputValues[];
 export type FormValues = InputValues | MultipleInputValues | undefined;
-export type InputTypes = 'text' | 'textarea' | 'email' | 'checkbox' | 'select' | 'radio' | 'password' | 'autocomplete' | 'number';
+export type InputTypes = 'text' | 'textarea' | 'email' | 'url' | 'checkbox' | 'select' | 'radio' | 'password' | 'autocomplete' | 'number';
 export interface ILabel {
     /** The element to be used, defaulting to `label` */
     element?: string;
@@ -68,6 +68,8 @@ export interface IField {
     'aria-required'?: boolean;
     /** Whether the field can be automatically filled */
     autoComplete?: string;
+    /** Whether the field should autofocus */
+    autoFocus?: boolean;
     /** Additional classes to be added to the field */
     className?: string;
     /** The component to render, instead of rendering a field (e.g. for when we need a component like `EmailHelperTextBox` in the middle of a form). Please specify props when passing in. */
@@ -97,6 +99,10 @@ export interface IField {
         onFocus?: () => void;
         /** The function to call when a key is pressed */
         onKeyInput?: <T>(arg1: FormValues) => Promise<T>;
+        /** The function to call when a key is pressed */
+        onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+        /** The function to call when the form is submitted from a field */
+        submitForm?: (arg: IFormValues) => void;
     };
     /** The Google Tag Manager data to be passed to the field */
     gtm?: {
@@ -140,6 +146,8 @@ export interface IField {
     required?: boolean;
     /** The selected value for checkboxes */
     shownValue?: InputValues;
+    /** Whether hitting enter on the field should submit the form */
+    submitOnEnter?: boolean;
     /** The type of the input */
     type?: InputTypes | 'checkboxes';
     /** The validation for the field */

package/form/components/index.d.ts

@@ -2,5 +2,6 @@ export * from './email-helper-text-box';
 export * from './form';
 export * from './password-rules';
 export * from './rating';
+export * from './rich-text-editor';
 export * from './toggle';
 export * from './profile-image-change';

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Point } from 'slate';
+declare const RichTextEditorContext: import("react").Context<{
+    /** The id of the editor */
+    id: string;
+    /** The toolbar option that is currently tabbable */
+    tabbableOption: string;
+    /** The function to set focus on the toolbar options */
+    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;
+}>;
+export default RichTextEditorContext;

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

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

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

@@ -0,0 +1,3 @@
+import { RenderElementProps } from 'slate-react';
+declare const Element: ({ attributes, children, element: originalElement, }: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
+export default Element;

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

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

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

@@ -0,0 +1,2 @@
+export * from './element';
+export * from './leaf';

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

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

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

@@ -0,0 +1,3 @@
+import { RenderLeafProps } from 'slate-react';
+declare const Leaf: ({ attributes, children, leaf: originalLeaf }: RenderLeafProps) => import("react/jsx-runtime").JSX.Element;
+export default Leaf;

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

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './editor';
+export * from './toolbar';

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

@@ -0,0 +1,3 @@
+import { OptionTypes } from '../../../../../../../form/components/rich-text-editor/rich-text-editor.types';
+declare const BlockOption: ({ format, hasDivider }: OptionTypes) => import("react/jsx-runtime").JSX.Element;
+export default BlockOption;

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

@@ -0,0 +1,3 @@
+import { BaseEditor } from 'slate';
+export declare const isBlockActive: (editor: BaseEditor, format: string) => boolean;
+export declare const toggleBlock: (editor: BaseEditor, format: string) => void;

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

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

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

@@ -0,0 +1,4 @@
+export * from './block-option';
+export * from './link-editor';
+export * from './link-option';
+export * from './mark-option';

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

@@ -0,0 +1,2 @@
+export { default as LinkEditor } from './link-editor';
+export * from './link-editor.helpers';

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

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

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

@@ -0,0 +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 unwrapLink: (editor: BaseEditor) => void;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { default as MarkOption } from './mark-option';
+export * from './mark-option.helpers';

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

@@ -0,0 +1,3 @@
+import { OptionTypes } from '../../../../../../../form/components/rich-text-editor/rich-text-editor.types';
+declare const MarkOption: ({ format, hasDivider }: OptionTypes) => import("react/jsx-runtime").JSX.Element;
+export default MarkOption;

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

@@ -0,0 +1,3 @@
+import { BaseEditor } from 'slate';
+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/components/option/index.d.ts

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

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

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from 'react';
+import { BaseProps } from '../../../../../../../form/components/rich-text-editor/rich-text-editor.types';
+declare const Option: ({ id, active, hasDivider, callback, className, children, ...props }: React.PropsWithChildren<{
+    /** The id of the option */
+    id: string;
+    /** Whether the option is active */
+    active?: boolean | undefined;
+    /** Whether the option has a divider */
+    hasDivider?: boolean | undefined;
+    /** The callback to fire when the option is clicked */
+    callback: () => void;
+    /** Additional classes */
+    className?: string | undefined;
+} & BaseProps>) => import("react/jsx-runtime").JSX.Element;
+export default Option;

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

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

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

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { BaseProps } from './../../rich-text-editor.types';
+declare const Toolbar: ({ ...props }: PropsWithChildren<BaseProps>) => import("react/jsx-runtime").JSX.Element;
+export default Toolbar;

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

@@ -0,0 +1,3 @@
+import { BlockOptionType, MarkOptionType } from '../../../../../form/components/rich-text-editor/rich-text-editor.types';
+export declare const marks: MarkOptionType[];
+export declare const blocks: BlockOptionType[];

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

@@ -0,0 +1,2 @@
+export * from './use-positioned-element';
+export * from './use-selected-link';

package/form/components/rich-text-editor/hooks/use-positioned-element/index.d.ts

@@ -0,0 +1 @@
+export { default as usePositionedElement } from './use-positioned-element';

package/form/components/rich-text-editor/hooks/use-positioned-element/use-positioned-element.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseEditor } from 'slate';
+declare const usePositionedElement: (editor: BaseEditor, element: string, fallback: string) => import("react").MutableRefObject<HTMLElement | null>;
+export default usePositionedElement;

package/form/components/rich-text-editor/hooks/use-selected-link/index.d.ts

@@ -0,0 +1 @@
+export { default as useSelectedLink } from './use-selected-link';

package/form/components/rich-text-editor/hooks/use-selected-link/use-selected-link.d.ts

@@ -0,0 +1,6 @@
+import { BaseEditor } from 'slate';
+declare const useSelectedLink: (editor: BaseEditor) => {
+    full: string;
+    pretty: string;
+} | null;
+export default useSelectedLink;

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

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

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

@@ -0,0 +1 @@
+export * from './with-linlines';

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

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

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

@@ -0,0 +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;
+export default withInlines;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface Props {
+    /** The id of the rich text editor */
+    id?: string;
+    /** The default value of the rich text editor */
+    value?: string;
+    /** The placeholder text of the rich text editor */
+    placeholder?: string;
+    /** An optional event handler, called when the rich text editor is changed */
+    onChange?: (value: string) => void;
+    /** Optional autoFocus */
+    autoFocus?: boolean;
+    /** Optional aria invalid */
+    'aria-invalid'?: boolean;
+    /**  Optional aria error message */
+    'aria-errormessage'?: string;
+}
+declare const RichTextEditor: React.ForwardRefExoticComponent<Props & React.RefAttributes<string | null>>;
+export default RichTextEditor;

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

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

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

@@ -0,0 +1,24 @@
+import { BaseElement, BaseText, Descendant } from 'slate';
+export interface BaseProps {
+    className?: string;
+    [key: string]: unknown;
+}
+export type BlockOptionType = 'block_quote' | 'link' | 'list_item' | 'ol_list' | 'ul_list' | 'paragraph' | 'span';
+export interface TypeElement extends BaseElement {
+    type: BlockOptionType;
+}
+export type MarkOptionType = 'bold' | 'italic' | 'strikeThrough';
+export interface TypeText extends BaseText {
+    bold?: boolean;
+    italic?: boolean;
+    strikeThrough?: boolean;
+}
+export type OptionTypes = {
+    format: BlockOptionType | MarkOptionType;
+    hasDivider?: boolean;
+};
+export type LinkElement = {
+    type: 'link';
+    link: string;
+    children: Descendant[];
+};

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

@@ -3,10 +3,14 @@ import { ButtonPropsType } from './../button';
 interface Props {
     /** The props for each button */
     buttons: ButtonPropsType[];
+    /** Optional props for each button's wrapper */
+    wrappers?: {
+        className?: string;
+    }[];
     /** Additional classes */
     className?: string;
 }
-declare const ButtonWrapper: ({ buttons, className, ...props }: Props) => React.DetailedReactHTMLElement<{
+declare const ButtonWrapper: ({ buttons, wrappers, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     children: JSX.Element[];
     className: string;
 }, HTMLElement>;

package/general/tooltip/tooltip.d.ts

@@ -1,11 +1,35 @@
 import React from 'react';
 interface Props {
+    /** Optional styling */
+    styling?: {
+        /** Whether the tooltip has extra padding */
+        extraPadding?: boolean;
+        /** Whether the tooltip has a pointer */
+        hasPointer?: false | 'top' | 'bottom';
+        /** Whether the tooltip has a form */
+        hasForm?: boolean;
+    };
     /** If the tooltip is open or not */
     isOpen?: boolean;
     /** If the content is loading or not */
     isLoading?: boolean;
     /** The content to show in the tooltip */
     children?: React.ReactNode | JSX.Element | string;
+    /** Additional classes */
+    className?: string;
+    /** Optional functions */
+    functions?: {
+        onBlur?: () => void;
+    };
+    /** Optional callbacks */
+    callbacks?: {
+        /** The callback to fire when the tooltip is opened */
+        onOpen?: () => void;
+        /** The callback to fire when the tooltip is closed */
+        onClose?: () => void;
+    };
+    /** Whether the tooltip is hidden from screen readers or not */
+    'aria-hidden'?: boolean;
 }
-declare const Tooltip: ({ isOpen, isLoading, children }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement | null>>;
 export default Tooltip;

package/helpers/intl.d.ts

@@ -219,6 +219,22 @@ export declare const checkIntlPathExists: (path: string, language?: {
     ratings_low: string;
     ratings_high: string;
     ratings_success: string;
+    richTextEditor_placeholder: string;
+    richTextEditor_toolbar: string;
+    richTextEditor_bold: string;
+    richTextEditor_italic: string;
+    richTextEditor_strikeThrough: string;
+    richTextEditor_link: string;
+    richTextEditor_link_placeholder: string;
+    richTextEditor_link_error_required: string;
+    richTextEditor_link_open: string;
+    richTextEditor_link_open_text: string;
+    richTextEditor_link_edit: string;
+    richTextEditor_link_remove: string;
+    richTextEditor_link_button: string;
+    richTextEditor_ol_list: string;
+    richTextEditor_ul_list: string;
+    richTextEditor_block_quote: string;
     search_label: string;
     search_placeholder: string;
     search_clear: string;

package/helpers/validation.d.ts

@@ -1,4 +1,4 @@
-export declare const valueIsNotEmpty: (value: string) => boolean;
+export declare const valueIsNotEmpty: (value?: string) => boolean;
 export declare const passwordValidator: (password: string) => {
     isValid: boolean;
     matchingRules: {