@reapit/elements 2.2.0 → 2.3.0

package/v3/components/input/input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+export declare type InputWrapped = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<React.InputHTMLAttributes<HTMLInputElement>>>;
+export declare const Input: InputWrapped;

package/v3/{esm/components → components}/input-group/input-group.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconNames } from '../icon';
 import { Intent } from '../../helpers/intent';
 export interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -21,4 +21,5 @@ export interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElem
      */
     className?: string;
 }
-export declare const InputGroup: FC<InputGroupProps>;
+export declare type InputGroupWrapped = React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<React.InputHTMLAttributes<HTMLInputElement>>>;
+export declare const InputGroup: InputGroupWrapped;

package/v3/components/multi-select/__styles__/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const elHasGreyChips: string;
+export declare const ElMultiSelectCheckbox: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElMultiSelectLabel: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElMultiSelect: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElMultiSelectSelected: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElMultiSelectUnSelected: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElMultiSelectInput: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElMultiSelectInputWrapper: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/v3/components/multi-select/multi-select.d.ts

@@ -0,0 +1,32 @@
+import React, { ChangeEvent, Dispatch, FC, HTMLAttributes, InputHTMLAttributes, RefAttributes, SetStateAction } from 'react';
+export interface MultiSelectProps extends HTMLAttributes<HTMLDivElement> {
+}
+export interface MultiSelectOption {
+    value: string;
+    name: string;
+}
+export interface MultiSelectInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    options: MultiSelectOption[];
+    defaultValues?: string[];
+    noneSelectedLabel?: string;
+}
+export declare type MultiSelectInputWrapped = React.ForwardRefExoticComponent<MultiSelectInputProps & RefAttributes<InputHTMLAttributes<HTMLInputElement>>>;
+export interface MultiSelectChipProps extends HTMLAttributes<HTMLInputElement> {
+}
+export declare const handleSetNativeInput: (id: string, selectedOptionValues: string[], testFunc?: ((value: string[]) => void) | undefined) => () => void;
+export declare const handleResetDefaultValues: (setSelectedOptionValues: Dispatch<SetStateAction<string[]>>, setSelectedDefaultValues: Dispatch<SetStateAction<string[]>>, defaultValues?: string[] | undefined, selectedDefaultValues?: string[] | undefined) => () => void;
+export declare const handleSelectedOptions: (value: string, selectedOptionValues: string[], setSelectedOptionValues: Dispatch<SetStateAction<string[]>>) => (event: ChangeEvent<HTMLInputElement>) => void;
+export declare const MultiSelectChip: FC<MultiSelectChipProps>;
+export declare const MultiSelect: FC<MultiSelectProps>;
+export declare const MultiSelectSelected: FC<MultiSelectProps>;
+export declare const MultiSelectUnSelected: FC<MultiSelectProps>;
+/** This looks like I have had a bit of a meltdown but promise it makes sense!
+ * I want the component to behave like an input ie accept refs and onChange handlers and respond as a standard
+ * input would. To do this, I have a hidden input apply all the input props to (onChange included) and I forward
+ * any refs to this input. Intutitively I should be able to update the value of the input from the component state
+ * however, this does not trigger on change. As such, I have to treat the input as a native element, get the
+ * global setter and call it on the input with the value. I then dispatch a real DOM change event and that triggers
+ * the React handler, which hands back to my form lib or similar. It's adapted from this suggested workaround below:
+ *  https://github.com/facebook/react/issues/11095#issuecomment-334305739  */
+export declare const MultiSelectInput: MultiSelectInputWrapped;

package/v3/{cjs/components → components}/nav/nav-responsive.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { Dispatch, FC, HTMLAttributes, ReactNode, SetStateAction } from 'react';
 import { IconNames } from '../icon';
 export declare type NavResponsiveItemType = 'ICON' | 'ITEM' | 'SECONDARY';
 export interface NavResponsiveOption {
@@ -16,4 +16,6 @@ export interface NavResponsiveProps extends HTMLAttributes<HTMLDivElement> {
     defaultNavIndex?: number;
     defaultNavSubIndex?: number;
 }
+export declare type LogoIcon = 'reapitLogoSelectedMenu' | 'reapitLogoMenu';
+export declare const handleToggleLogo: (logoState: LogoIcon, setLogoState: Dispatch<SetStateAction<LogoIcon>>) => () => void;
 export declare const NavResponsive: FC<NavResponsiveProps>;

package/v3/components/searchable-dropdown/__styles__/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const ElSearchableDropdownContainer: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElSearchableDropdownResult: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElSearchableDropdownResultsContainer: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElSearchableDropdownSearchInputAddOn: import("@linaria/core").StyledMeta & import("react").FC<import("../../input-add-on").InputAddOnProps>;
+export declare const ElSearchableDropdownCloseButton: import("@linaria/core").StyledMeta & import("react").FC<import("../../icon").IconProps>;
+export declare const ElSearchableDropdownSearchInput: import("@linaria/core").StyledMeta & import("../../input").InputWrapped;
+export declare const ElSearchableDropdownSearchLabel: import("@linaria/core").StyledMeta & import("react").FC<import("../../label").LabelProps>;
+export declare const ElSearchableDropdownSearchLoader: import("@linaria/core").StyledMeta & import("react").FC<import("../../loader").LoaderProps>;

package/v3/components/searchable-dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export * from './__styles__';
+export { SearchableDropdown, ControlledSearchableDropdown, SearchableDropdownSearchLabel } from './searchable-dropdown';
+import { SearchableDropdownProps as T_SearchableDropdownProps, ControlledSearchableDropdownProps as T_ControlledSearchableDropdownProps } from './searchable-dropdown';
+export declare type ControlledSearchableDropdownProps<T> = T_ControlledSearchableDropdownProps<T>;
+export declare type SearchableDropdownProps<T> = T_SearchableDropdownProps<T>;

package/v3/components/searchable-dropdown/searchable-dropdown.d.ts

@@ -0,0 +1,33 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { IconNames } from '../icon';
+export interface SearchableDropdownProps<T> extends React.InputHTMLAttributes<HTMLInputElement> {
+    getResults: (query: string) => Promise<T[]>;
+    getResultValue: (result: T) => string;
+    getResultLabel: (result: T) => string;
+    icon?: IconNames;
+}
+export interface ControlledSearchableDropdownProps<T> extends React.InputHTMLAttributes<HTMLInputElement> {
+    isResultsListVisible: boolean;
+    isClearVisible: boolean;
+    loading: boolean;
+    selectedValue: string;
+    resultsList: {
+        label: string;
+        result: T;
+    }[];
+    onResultClick: (result: {
+        label: string;
+        result: T;
+    }) => void;
+    onClear: () => void;
+    icon?: IconNames;
+}
+export declare const SearchableDropdownControlledInner: <T extends unknown>({ isResultsListVisible, icon, loading, resultsList, onResultClick, onClear, isClearVisible, value, selectedValue, ...inputProps }: ControlledSearchableDropdownProps<T>, ref: React.ForwardedRef<HTMLInputElement>) => JSX.Element;
+export declare const ControlledSearchableDropdown: <T>(props: ControlledSearchableDropdownProps<T> & {
+    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+}) => ReturnType<typeof SearchableDropdownControlledInner>;
+export declare const SearchableDropdownInner: <T extends unknown>({ getResults, icon, getResultValue, getResultLabel, onChange, ...inputProps }: SearchableDropdownProps<T>, ref: React.ForwardedRef<HTMLInputElement>) => JSX.Element;
+export declare const SearchableDropdown: <T>(props: SearchableDropdownProps<T> & {
+    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+}) => ReturnType<typeof SearchableDropdownInner>;
+export declare const SearchableDropdownSearchLabel: FC<HTMLAttributes<HTMLLabelElement>>;

package/v3/components/select/select.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+}
+export declare type SelectWrapped = React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<React.SelectHTMLAttributes<HTMLSelectElement>>>;
+export declare const Select: SelectWrapped;

package/v3/{cjs/components → components}/status-indicator/__styles__/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const elShapeTag: string;
 export declare const ElStatusIndicator: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/v3/{cjs/components → components}/status-indicator/status-indicator.d.ts

@@ -2,5 +2,6 @@ import { FC, HTMLAttributes } from 'react';
 import { Intent } from '../../helpers/intent';
 export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
     intent?: Intent;
+    shape?: 'circle' | 'tag';
 }
 export declare const StatusIndicator: FC<StatusIndicatorProps>;

package/v3/components/steps/__styles__/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const ElSteps: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElStep: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElStepsVertical: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElStepVertical: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElStepVerticalItem: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElStepVerticalContent: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/v3/components/steps/steps.d.ts

@@ -0,0 +1,19 @@
+import { FC, HTMLAttributes, ReactNode } from 'react';
+export interface StepsProps extends HTMLAttributes<HTMLDivElement> {
+    steps: string[];
+    selectedStep?: string;
+    onStepClick?: (step: string) => void;
+    className?: string;
+}
+export interface StepsVerticalStep {
+    item: string;
+    content?: ReactNode;
+}
+export interface StepsVerticalProps extends HTMLAttributes<HTMLDivElement> {
+    steps: StepsVerticalStep[];
+    selectedStep?: string;
+    onStepClick?: (step: string) => void;
+    className?: string;
+}
+export declare const Steps: FC<StepsProps>;
+export declare const StepsVertical: FC<StepsVerticalProps>;

package/v3/{cjs/components → components}/table/__styles__/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const isNarrow = "@media only screen and (max-width: 1024px)";
 export declare const ElTableCellNarrowOrder1: string;
 export declare const ElTableCellNarrowOrder2: string;
 export declare const ElTableCellNarrowOrder3: string;
@@ -35,6 +36,12 @@ export declare const ElTableCell: import("@linaria/core").StyledMeta & import("r
 export declare const ElTableCellContent: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
+export declare const ElTableCtaIconContainer: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElTableCtaCell: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
 export declare const ElTableExpandableRowTriggerCell: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/v3/components/table/molecules.d.ts

@@ -0,0 +1,34 @@
+import { FC, HTMLAttributes } from 'react';
+import { IconNames } from '../icon';
+export declare type NarrowOrderType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface TableCellProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: IconNames;
+    darkText?: boolean;
+    narrowLabel?: string;
+    narrowIsFullWidth?: boolean;
+    className?: string;
+    narrowOrder?: NarrowOrderType;
+}
+export interface TableExpandableRowTriggerCellProps extends HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    narrowIsFullWidth?: boolean;
+}
+export interface TableExpandableRowProps extends HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    className?: string;
+}
+export interface TableRowContainerProps extends HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+}
+export interface TableCtaTriggerCellProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: IconNames;
+}
+export declare const resolveNarrowOrderClass: (order: number) => string | undefined;
+export declare const TableHeadersRow: FC;
+export declare const TableHeader: FC<HTMLAttributes<HTMLDivElement>>;
+export declare const TableRow: FC;
+export declare const TableCell: FC<TableCellProps>;
+export declare const TableExpandableRowTriggerCell: FC<TableExpandableRowTriggerCellProps>;
+export declare const TableCtaTriggerCell: FC<TableCtaTriggerCellProps>;
+export declare const TableExpandableRow: FC<TableExpandableRowProps>;
+export declare const TableRowContainer: FC<TableRowContainerProps>;

package/v3/components/table/table.d.ts

@@ -0,0 +1,40 @@
+import React, { Dispatch, FC, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+import { IconNames } from '../icon';
+import { NarrowOrderType } from './molecules';
+import { Intent } from '../../helpers/intent';
+export declare type NarrowOptionsType = {
+    showLabel?: boolean;
+    isFullWidth?: boolean;
+    order?: NarrowOrderType;
+};
+export interface CellProps {
+    label: string;
+    value: string;
+    children?: ReactNode;
+    icon?: IconNames;
+    className?: string;
+    statusCircleIntent?: Intent;
+    cellHasDarkText?: boolean;
+    narrowTable?: NarrowOptionsType;
+}
+export interface RowActionProps {
+    content?: ReactNode;
+    cellContent?: ReactNode;
+    headerContent?: ReactNode;
+    onClick?: () => void;
+    className?: string;
+    icon?: IconNames;
+}
+export interface RowProps {
+    cells: CellProps[];
+    expandableContent?: RowActionProps;
+    ctaContent?: RowActionProps;
+}
+export interface TableProps extends HTMLAttributes<HTMLDivElement> {
+    rows?: RowProps[];
+    numberColumns?: number;
+    indexExpandedRow?: number | null;
+    setIndexExpandedRow?: Dispatch<SetStateAction<number | null>>;
+}
+export declare const handleToggleExpandedRow: (index: number | null, expandedRow: number | null, setExpandedRow: Dispatch<SetStateAction<number | null>>, indexExpandedRow?: number | null | undefined, setIndexExpandedRow?: React.Dispatch<React.SetStateAction<number | null>> | undefined) => () => void;
+export declare const Table: FC<TableProps>;