@apolitical/component-library 6.3.4 → 6.4.0

package/form/components/character-limit/character-limit.helpers.d.ts

@@ -1,5 +1,5 @@
-import { FieldOnChange, IFieldFunctions } from '../../../form/components/form/form.types';
+import { IFieldFunctions } from '../../../form/components/form/form.types';
 export declare const getValueLength: (value: string | number | boolean | null | undefined) => number;
-export declare const getCharacterLimitProps: (limit: number, onChange?: FieldOnChange | null) => {
+export declare const getCharacterLimitProps: (limit: number, functions: IFieldFunctions) => {
     [key: string]: number | IFieldFunctions;
 };

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, submitOnEnter, ...props }: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
+declare const FieldWrapper: (fieldWrapperProps: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
 export default FieldWrapper;

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

@@ -27,6 +27,12 @@ export declare const Checkbox: ({ className, disabled, element, functions: allFu
         topbar?: boolean | undefined;
         submitSection?: boolean | undefined;
     } | undefined;
+    multipleInputs?: {
+        showCount?: boolean | undefined;
+        label?: string | undefined;
+        maxInputs: number;
+        hasButton?: false | import("../../../../../..").ButtonPropsType | undefined;
+    } | undefined;
     name?: string | undefined;
     options?: import("../../../form.types").IFieldOption[] | undefined;
     placeholder?: string | undefined;
@@ -35,6 +41,9 @@ export declare const Checkbox: ({ className, disabled, element, functions: allFu
     } | undefined;
     required?: boolean | undefined;
     submitOnEnter?: boolean | undefined;
+    styling?: {
+        displayOptionsAsPills?: boolean | undefined;
+    } | undefined;
     validation?: import("../../../form.types").IFieldValidation[] | undefined;
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
     className: string;

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

@@ -2,5 +2,6 @@ export * from './input';
 export * from './input-autocomplete';
 export * from './checkbox';
 export * from './dropdown-menu';
+export * from './multiple-inputs';
 export * from './multiple-options';
 export * from './password';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IField, InputTypes, InputValues } from '../../../form.types';
-export declare const Input: ({ className, element, id, inputRef: ref, functions, name, placeholder, type, value, autoFocus, ...props }: IField) => React.DOMElement<{
+export declare const Input: ({ className, element, id, inputRef: ref, functions, name, placeholder, type, value, autoFocus, label, ...props }: IField) => React.DOMElement<{
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
     onMultiSelectSubmit?: ((arg1: import("../../../form.types").FormValues) => void) | undefined;
     onBlur?: (() => void) | undefined;
@@ -35,13 +35,18 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     } | undefined;
     initialValue?: import("../../../form.types").FormValues;
     intlPath?: string | false | undefined;
-    label?: React.ReactNode;
     limit?: number | undefined;
     multiSelect?: boolean | undefined;
     multiSelectOptions?: {
         topbar?: boolean | undefined;
         submitSection?: boolean | undefined;
     } | undefined;
+    multipleInputs?: {
+        showCount?: boolean | undefined;
+        label?: string | undefined;
+        maxInputs: number;
+        hasButton?: false | import("../../../../../..").ButtonPropsType | undefined;
+    } | undefined;
     options?: import("../../../form.types").IFieldOption[] | undefined;
     props?: {
         [key: string]: string | number | boolean | object | React.RefObject<any> | (() => void);
@@ -49,6 +54,9 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     required?: boolean | undefined;
     shownValue?: InputValues | undefined;
     submitOnEnter?: boolean | undefined;
+    styling?: {
+        displayOptionsAsPills?: boolean | undefined;
+    } | undefined;
     validation?: import("../../../form.types").IFieldValidation[] | undefined;
     ref: React.RefObject<HTMLInputElement>;
 }, HTMLInputElement>;

package/form/components/form/components/fields/multiple-inputs/index.d.ts

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

package/form/components/form/components/fields/multiple-inputs/multiple-inputs.d.ts

@@ -0,0 +1,3 @@
+import type { IFieldWrapper } from '../../../form.types';
+export declare const MultipleInputs: ({ id, label: legend, limit, value, placeholder, functions, error: allFormErrors, multipleInputs, validation, fieldData, type, ...props }: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
+export default MultipleInputs;

package/form/components/form/components/fields/multiple-options/multiple-options.d.ts

@@ -1,3 +1,3 @@
 import { IField } from '../../../form.types';
-export declare const MultipleOptions: ({ className, functions, intlPath, id: groupId, label, multiSelect, name, options, required, type, value, accessibilityOptions, ...props }: IField) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleOptions: ({ className, functions, intlPath, id: groupId, label, multiSelect, name, options, required, type, value, accessibilityOptions, styling: { displayOptionsAsPills }, ...props }: IField) => import("react/jsx-runtime").JSX.Element;
 export default MultipleOptions;

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

@@ -0,0 +1,2 @@
+import type { InputValues } from './form.types';
+export declare const showError: (type: string, value: InputValues) => boolean;

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

@@ -5,10 +5,12 @@ 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' | 'url' | 'checkbox' | 'select' | 'radio' | 'password' | 'autocomplete' | 'number';
+export type InputTypes = 'text' | 'textarea' | 'email' | 'url' | 'checkbox' | 'checkboxes' | 'select' | 'radio' | 'password' | 'autocomplete' | 'number' | 'multiple-inputs';
 export interface ILabel {
     /** The element to be used, defaulting to `label` */
     element?: string;
+    /** Optional class for the label */
+    className?: string;
     /** The ID of the input to be labelled */
     htmlFor?: string;
 }
@@ -41,13 +43,14 @@ export interface IFormPayload {
     /** Function to call when something fails */
     onFailure?: (arg: IFormValues, arg2?: FormValues) => void;
 }
+interface IFormErrors {
+    [key: string]: (() => void) | FormValues;
+}
 export interface IFormReducerAction extends IReducerAction<IFormPayload> {
 }
 export interface IFormReducerState {
     'custom-validation'?: string | boolean;
-    errors?: {
-        [key: string]: (() => void) | FormValues;
-    };
+    errors?: IFormErrors;
     formSubmitted: boolean;
     isSubmitting: boolean;
     values?: IFormValues;
@@ -132,7 +135,7 @@ export interface IField {
     /** The internationalisation path for the field */
     intlPath?: string | false;
     /** The label for the field */
-    label?: string | React.ReactNode;
+    label?: string | React.ReactNode | false;
     /** An optional character limit, for textareas */
     limit?: number;
     /** Whether the field can have multiple values, for checkboxes */
@@ -144,6 +147,17 @@ export interface IField {
         /** Whether to display the submit button in the dropdown - this allows the user to submit the dropdown only */
         submitSection?: boolean;
     };
+    /** Props for the inputs rendered in a `multiple` field */
+    multipleInputs?: {
+        /** Whether or not to show the number of filled in inputs in the legend */
+        showCount?: boolean;
+        /** The template text for each label */
+        label?: string;
+        /** How many inputs can be added in total */
+        maxInputs: number;
+        /** Whether to add options with a button */
+        hasButton?: false | ButtonPropsType;
+    };
     /** The name of the field */
     name?: string;
     /** The options for the field, for checkboxes and dropdowns */
@@ -160,8 +174,12 @@ export interface IField {
     shownValue?: InputValues;
     /** Whether hitting enter on the field should submit the form */
     submitOnEnter?: boolean;
+    styling?: {
+        /** Whether to display options for the multiselect as pills */
+        displayOptionsAsPills?: boolean;
+    };
     /** The type of the input */
-    type?: InputTypes | 'checkboxes';
+    type?: InputTypes;
     /** The validation for the field */
     validation?: IFieldValidation[];
     /** The value of the field */
@@ -239,9 +257,16 @@ export interface IFormProps {
 }
 export interface IFieldWrapper extends IField {
     /** The error to show */
-    error: string;
+    error: string | IFormErrors | undefined;
     /** Whether the field wrapper should show required labels */
     showRequiredLabels?: boolean;
     /** The value of the field */
     value?: FormValues;
+    /** The setter to amend the fields to validate; this is needed for multiple inputs, to give each input its own error handling */
+    fieldData?: {
+        fields: IField[];
+        setFields: React.Dispatch<React.SetStateAction<IField[]>>;
+        dispatch: React.Dispatch<IFormReducerAction>;
+    };
 }
+export {};

package/helpers/intl.d.ts

@@ -233,6 +233,9 @@ export declare const checkIntlPathExists: (path: string, language?: {
     form_submitting: string;
     form_submitted: string;
     form_success: string;
+    form_multipleInputs_label: string;
+    form_multipleInputs_filledInCount: string;
+    form_multipleInputs_filledInCount_aria: string;
     inviteForm_email_placeholder: string;
     inviteForm_title: string;
     inviteForm_label: string;