@reapit/elements 4.0.0-beta.2 → 4.0.0-beta.4

package/assets/menu-icons/appLauncherMenu.svg

@@ -1,19 +1,12 @@
-<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="App launcher">
-<g id="Vector">
-<path d="M5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5C7 6.10457 6.10457 7 5 7Z" fill="currentColor"/>
-<path d="M3 12C3 13.1046 3.89543 14 5 14C6.10457 14 7 13.1046 7 12C7 10.8954 6.10457 10 5 10C3.89543 10 3 10.8954 3 12Z" fill="currentColor"/>
-<path d="M3 19C3 20.1046 3.89543 21 5 21C6.10457 21 7 20.1046 7 19C7 17.8954 6.10457 17 5 17C3.89543 17 3 17.8954 3 19Z" fill="currentColor"/>
-</g>
-<g id="Vector_2">
-<path d="M12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5C14 6.10457 13.1046 7 12 7Z" fill="currentColor"/>
-<path d="M10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12Z" fill="currentColor"/>
-<path d="M10 19C10 20.1046 10.8954 21 12 21C13.1046 21 14 20.1046 14 19C14 17.8954 13.1046 17 12 17C10.8954 17 10 17.8954 10 19Z" fill="currentColor"/>
-</g>
-<g id="Vector_3">
-<path d="M19 7C17.8954 7 17 6.10457 17 5C17 3.89543 17.8954 3 19 3C20.1046 3 21 3.89543 21 5C21 6.10457 20.1046 7 19 7Z" fill="currentColor"/>
-<path d="M17 12C17 13.1046 17.8954 14 19 14C20.1046 14 21 13.1046 21 12C21 10.8954 20.1046 10 19 10C17.8954 10 17 10.8954 17 12Z" fill="currentColor"/>
-<path d="M17 19C17 20.1046 17.8954 21 19 21C20.1046 21 21 20.1046 21 19C21 17.8954 20.1046 17 19 17C17.8954 17 17 17.8954 17 19Z" fill="currentColor"/>
-</g>
-</g>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="4" fill="white"/>
+<circle cx="10" cy="10" r="2" fill="#798DA1"/>
+<circle cx="18" cy="10" r="2" fill="#798DA1"/>
+<circle cx="26" cy="10" r="2" fill="#798DA1"/>
+<circle cx="10" cy="18" r="2" fill="#798DA1"/>
+<circle cx="18" cy="18" r="2" fill="#798DA1"/>
+<circle cx="26" cy="18" r="2" fill="#798DA1"/>
+<circle cx="10" cy="26" r="2" fill="#798DA1"/>
+<circle cx="18" cy="26" r="2" fill="#798DA1"/>
+<circle cx="26" cy="26" r="2" fill="#798DA1"/>
 </svg>

package/dist/cjs/components/key-value-list/key-value-list.d.ts

@@ -7,12 +7,17 @@ export interface KeyValueItem {
     iconName?: IconNames;
     icon?: ReactNode;
     intent?: Intent;
+    colSize?: 'half' | 'full';
+    textEllipsis?: boolean;
+}
+export interface KeyValueContentProps {
+    item: KeyValueItem;
 }
 export interface KeyValueListProps extends HTMLAttributes<HTMLDivElement> {
     items: KeyValueItem[];
-    hasLargeGrid?: boolean;
-    hasSmallGrid?: boolean;
+    hasGrid?: boolean;
 }
 export declare const KeyValueIconWrap: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const KeyValueListWrap: FC<HTMLAttributes<HTMLDivElement>>;
+export declare const KeyValueContent: FC<KeyValueContentProps>;
 export declare const KeyValueList: FC<KeyValueListProps>;

package/dist/cjs/components/layout/__styles__/index.d.ts

@@ -1,14 +1,12 @@
 /// <reference types="react" />
 export declare const elHasGreyBackground: import("@linaria/core").LinariaClassName;
+export declare const elHasMaxWidth: import("@linaria/core").LinariaClassName;
 export declare const ElMainContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
 export declare const ElPageContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
-export declare const ElPageContainerMaxWidth: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
 export declare const ElSecondaryNavContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/dist/cjs/components/layout/layout.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, FC } from 'react';
 export interface ContainerProps extends HTMLAttributes<HTMLElement> {
     hasGreyBackground?: boolean;
+    hasMaxWidth?: boolean;
 }
 export interface ContainerFlexProps extends ContainerProps {
     isFlexRow?: boolean;
@@ -29,7 +30,6 @@ export interface ContainerFlexProps extends ContainerProps {
 }
 export declare const MainContainer: FC<ContainerProps>;
 export declare const PageContainer: FC<ContainerProps>;
-export declare const PageContainerMaxWidth: FC<ContainerProps>;
 export declare const SecondaryNavContainer: FC<ContainerProps>;
 export declare const Molecule: FC<ContainerProps>;
 export declare const FlexContainer: FC<ContainerFlexProps>;

package/dist/cjs/components/nav/__styles__/index.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+export declare const ElNavBg: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
 export declare const ElNavContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
@@ -19,3 +22,20 @@ export declare const elNavSubItemExpanded: import("@linaria/core").LinariaClassN
 export declare const elNavSubItemActive: import("@linaria/core").LinariaClassName;
 export declare const elNavItemHideDesktop: import("@linaria/core").LinariaClassName;
 export declare const elNavIsDesktop: import("@linaria/core").LinariaClassName;
+export declare const elNavIsHidden: import("@linaria/core").LinariaClassName;
+export declare const ElNavMenu: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElNavMenuOption: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElNavMenuOptionDivider: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElNavResponsiveAvatarWrap: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const elAppSwitcherOpen: import("@linaria/core").LinariaClassName;
+export declare const ElNavResponsiveAppSwitcherWrap: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/dist/cjs/components/nav/nav-responsive.d.ts

@@ -1,21 +1,44 @@
-import { Dispatch, FC, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+import { Dispatch, FC, HTMLAttributes, ReactNode, SetStateAction, MouseEvent } from 'react';
 import { IconNames } from '../icon';
 export type NavResponsiveItemType = 'ICON' | 'ITEM' | 'SECONDARY';
 export interface NavResponsiveOption {
     itemIndex: number;
-    isSecondary?: boolean;
     callback?: () => void;
     text?: string;
     href?: string;
     subItems?: NavResponsiveOption[];
+    isSecondary?: boolean;
     icon?: ReactNode;
     iconId?: IconNames;
 }
+export interface NavResponsiveAvatarOption {
+    text?: string;
+    callback?: () => void;
+}
+export interface NavResponsiveAppSwitcherOption {
+    text?: string;
+    callback?: () => void;
+    iconUrl?: ReactNode;
+}
 export interface NavResponsiveProps extends HTMLAttributes<HTMLDivElement> {
     options: NavResponsiveOption[];
+    appSwitcherOptions?: NavResponsiveAppSwitcherOption[];
+    avatarOptions?: NavResponsiveAvatarOption[];
+    avatarText?: string;
     defaultNavIndex?: number;
     defaultNavSubIndex?: number;
 }
+export interface NavResponsiveAvatarProps {
+    options: NavResponsiveAvatarOption[];
+    text: string;
+    isHidden: boolean;
+}
+export interface NavResponsiveAppSwitcherProps {
+    options: NavResponsiveAppSwitcherOption[];
+}
 export type LogoIcon = 'reapitLogoSelectedMenu' | 'reapitLogoMenu';
 export declare const handleToggleLogo: (logoState: LogoIcon, setLogoState: Dispatch<SetStateAction<LogoIcon>>) => () => void;
+export declare const handleToggleMenu: (setState: Dispatch<SetStateAction<boolean>>, callback?: () => void) => (event: MouseEvent<HTMLDivElement>) => void;
+export declare const NavResponsiveAvatar: FC<NavResponsiveAvatarProps>;
+export declare const NavResponsiveAppSwitcher: FC<NavResponsiveAppSwitcherProps>;
 export declare const NavResponsive: FC<NavResponsiveProps>;

package/dist/cjs/components/page-header/__styles__/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
+export declare const elPageHeaderMaxWidth: import("@linaria/core").LinariaClassName;
 export declare const ElPageHeaderContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
 export declare const ElPageHeaderTitleContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
+export declare const ElPageHeaderWrapInner: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
 export declare const ElPageHeaderWrap: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/dist/cjs/components/page-header/page-header.d.ts

@@ -4,6 +4,7 @@ import { AvatarProps } from '../avatar';
 import { TagProps } from '../tag';
 import { ButtonProps } from '../button';
 import { BreadCrumbProps } from '../breadcrumb';
+import { TabsProps } from '../tabs';
 export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
     avatar?: AvatarProps;
     pageTitle: TypographyProps;
@@ -12,8 +13,11 @@ export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
     breadcrumb?: BreadCrumbProps;
     tags?: TagProps[];
     buttons?: ButtonProps[];
+    tabs?: TabsProps;
+    hasMaxWidth?: boolean;
 }
 export declare const PageHeaderWrap: FC<HTMLAttributes<HTMLDivElement>>;
+export declare const PageHeaderWrapInner: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const PageHeaderContainer: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const PageHeaderTitleContainer: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const PageHeader: FC<PageHeaderProps>;

package/dist/cjs/components/searchable-dropdown/searchable-dropdown.d.ts

@@ -6,6 +6,7 @@ export interface SearchableDropdownProps<T> extends React.InputHTMLAttributes<HT
     getResultLabel: (result: T) => string;
     icon?: IconNames;
     defaultVal?: T;
+    label?: string;
 }
 export interface ControlledSearchableDropdownProps<T> extends React.InputHTMLAttributes<HTMLInputElement> {
     isResultsListVisible: boolean;
@@ -22,8 +23,9 @@ export interface ControlledSearchableDropdownProps<T> extends React.InputHTMLAtt
     }) => void;
     onClear: () => void;
     icon?: IconNames;
+    label?: string;
 }
-export declare const SearchableDropdownControlledInner: <T extends unknown>({ isResultsListVisible, icon, loading, resultsList, onResultClick, onClear, isClearVisible, value, selectedValue, id, ...inputProps }: ControlledSearchableDropdownProps<T>, ref: React.ForwardedRef<HTMLInputElement>) => JSX.Element;
+export declare const SearchableDropdownControlledInner: <T extends unknown>({ isResultsListVisible, icon, loading, resultsList, onResultClick, onClear, isClearVisible, value, selectedValue, id, label, ...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>;

package/dist/cjs/components/table/__styles__/index.d.ts

@@ -30,6 +30,15 @@ export declare const ElTableCtaCell: import("@linaria/react").StyledMeta & impor
 export declare const ElTableCell: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
+export declare const ElTableCellSplitWrap: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElTableCellSplitData: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElTableCellSplitSubData: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
 export declare const ElTableExpandableRowTriggerCell: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/dist/cjs/components/table/molecules.d.ts

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

package/dist/cjs/components/table/table.d.ts

@@ -11,7 +11,7 @@ export interface CellProps {
     label: string;
     labelChild?: ReactNode;
     onLabelClick?: (event: React.MouseEvent) => void;
-    value: ReactNode;
+    value?: ReactNode;
     children?: ReactNode;
     icon?: IconNames;
     className?: string;

package/dist/cjs/components/tabs/__styles__/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const elTabsItem: import("@linaria/core").LinariaClassName;
 export declare const elTabsFullWidth: import("@linaria/core").LinariaClassName;
+export declare const elTabsHasNoBorder: import("@linaria/core").LinariaClassName;
 export declare const ElTabs: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/dist/cjs/components/tabs/tabs.d.ts

@@ -9,5 +9,6 @@ export interface TabsProps extends HTMLAttributes<HTMLInputElement> {
     options: TabsOption[];
     name: string;
     isFullWidth?: boolean;
+    hasNoBorder?: boolean;
 }
 export declare const Tabs: FC<TabsProps>;

package/dist/cjs/hooks/use-nav-state/index.d.ts

@@ -12,7 +12,7 @@ export interface NavStateContextProps {
 }
 export interface UseNavState {
     navState: NavState;
-    setNavState: (newState: Partial<NavState>) => (event: MouseEvent<HTMLAnchorElement>) => void;
+    setNavState: (newState: Partial<NavState>) => (event: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => void;
 }
 export declare const NavStateContext: React.Context<NavStateContextProps>;
 export declare const NavStateProvider: FC<PropsWithChildren>;