scorer-ui-kit 2.2.0 → 2.2.2

package/dist/Form/index.d.ts

@@ -25,7 +25,8 @@ import AreaUploadManager from './organisms/AreaUploadManager';
 import Form from './Form';
 import { ButtonHTMLAttributes } from 'react';
 import SplitButton, { ISplitButtonProps } from './molecules/SplitButton';
-export { Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, ActionButtons, SmallInput, Input, Label, Checkbox, Switch, PasswordField, TextField, TextArea, TextAreaField, SliderInput, DurationSlider, PercentageSlider, InputFileButton, AvatarUploader, DropArea, CropTool, SelectField, SelectWrapper, AreaUploadManager, RadioButton, SplitButton };
+import ButtonsStack, { IButtonsStack, IButtonStack } from './molecules/ButtonsStack';
+export { Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, ActionButtons, SmallInput, Input, Label, Checkbox, Switch, PasswordField, TextField, TextArea, TextAreaField, SliderInput, DurationSlider, PercentageSlider, InputFileButton, AvatarUploader, DropArea, CropTool, SelectField, SelectWrapper, AreaUploadManager, RadioButton, SplitButton, ButtonsStack, };
 export declare type TypeFieldState = 'default' | 'disabled' | 'required' | 'valid' | 'invalid' | 'processing';
 export declare type TypeButtonDesigns = 'primary' | 'secondary' | 'danger';
 export declare type TypeButtonSizes = 'xsmall' | 'small' | 'normal' | 'large';
@@ -36,4 +37,4 @@ interface ButtonProps {
     design?: TypeButtonDesigns;
 }
 export declare type IButtonProps = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
-export type { IconButtonData, ISliderMark, ISplitButtonProps };
+export type { IconButtonData, ISliderMark, ISplitButtonProps, IButtonsStack, IButtonStack };

package/dist/Form/molecules/ButtonsStack.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IButtonProps } from '..';
+export declare type IButtonType = 'default' | 'icon-button';
+export interface IButtonStack extends IButtonProps {
+    id?: string;
+    buttonType?: IButtonType;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
+    text: string;
+}
+export interface IButtonsStack {
+    buttons: IButtonStack[];
+}
+declare const ButtonsStack: React.FC<IButtonsStack>;
+export default ButtonsStack;

package/dist/Layouts/atoms/ResizeLine.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare type TResizeLineStates = 'default' | 'arrow';
+export declare type TResizeLineLayouts = 'horizontal' | 'vertical';
+export declare type TResizeLineDirection = 'up' | 'down' | 'left' | 'right' | undefined;
+interface IResizeLineProps {
+    state?: 'default' | 'arrow';
+    layout?: TResizeLineLayouts;
+    arrowDirection?: TResizeLineDirection;
+}
+declare const ResizeLine: React.FC<IResizeLineProps>;
+export default ResizeLine;

package/dist/Layouts/index.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import ContentLayout from './organisms/ContentLayout';
 import FullWidthContentBlock from './atoms/FullWidthContentBlock';
 import UtilityHeader from './molecules/UtilityHeader';
+import SplitLayout from './molecules/SplitLayout';
 interface IBreadcrumb {
     text: string;
     href: string;
@@ -19,4 +20,30 @@ export interface IHeaderContent {
     PageHeaderArea?: React.ReactNode | React.FC;
     TabsElementArea?: React.ReactNode | React.FC;
 }
-export { ContentLayout, FullWidthContentBlock, UtilityHeader };
+export interface IMainArea {
+    content: ReactElement;
+    minSize?: number;
+}
+export interface ISideArea {
+    content: ReactElement;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsable?: boolean;
+}
+export interface ISplitLayoutProps {
+    layout: 'horizontal' | 'vertical';
+    reverse?: boolean;
+    dividerSize?: number;
+    mainArea: IMainArea;
+    sideArea: ISideArea;
+    persist?: boolean;
+    persistenceKey?: string;
+    showDebug?: boolean;
+}
+export interface ISplitLayoutHandles {
+    open: () => void;
+    close: () => void;
+    reset: () => void;
+}
+export { ContentLayout, FullWidthContentBlock, UtilityHeader, SplitLayout, };

package/dist/Layouts/molecules/SplitLayout.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISplitLayoutHandles, ISplitLayoutProps } from '..';
+declare const SplitLayout: React.ForwardRefExoticComponent<ISplitLayoutProps & React.RefAttributes<ISplitLayoutHandles>>;
+export default SplitLayout;

package/dist/Misc/atoms/Tag.d.ts

@@ -4,10 +4,15 @@ export declare const TagWrapper: import("styled-components").StyledComponent<"di
     hoverColor: ISvgIcons['color'];
     enableHover: boolean;
     size: number;
+    tagSize?: TypeTagSize;
+    noBorder: boolean;
 }, never>;
+export declare type TypeTagSize = undefined | 'compact' | 'default';
 interface OwnProps {
     label?: string;
     linkTo?: string;
+    noBorder?: boolean;
+    tagSize?: TypeTagSize;
 }
 export declare type ITag = OwnProps & IconProps;
 declare const Tag: React.FC<ITag>;

package/dist/Misc/molecules/Pagination.d.ts

@@ -9,8 +9,10 @@ interface OwnProps {
     activePage?: number;
     buttonText?: string;
     itemsText?: string;
+    itemsDefaultValue?: number;
     selectWidth?: string;
     selectDisabled?: boolean;
+    selectId?: string;
     itemsOptions: IItemsOption[];
     onPageChange: (page: number) => void;
     onItemsChange: (items: number) => void;

package/dist/Pages/atoms/PageTitle.d.ts

@@ -2,10 +2,12 @@ import React from 'react';
 interface IProps {
     title: string;
     icon?: string;
+    iconColor?: ISvgIcons['color'];
     areaTitle?: string;
     areaHref?: string;
     updateDocTitle?: boolean;
     hideAreaInDocTitle?: boolean;
+    areaTitleBottom?: boolean;
 }
 declare const PageTitle: React.FC<IProps>;
 export default PageTitle;

package/dist/Pages/index.d.ts

@@ -1,5 +1,6 @@
 import PageTitle from './atoms/PageTitle';
 import IntroductionText from './atoms/IntroductionText';
-import PageHeader from './molecules/PageHeader';
+import PageHeader, { IHeaderTag } from './molecules/PageHeader';
 import MultilineContent from './molecules/MultilineContent';
 export { PageTitle, IntroductionText, PageHeader, MultilineContent };
+export type { IHeaderTag };

package/dist/Pages/molecules/PageHeader.d.ts

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+export declare type IHeaderTag = {
+    label: string;
+    linkTo?: string;
+    icon?: string;
+};
 interface IProps {
     title: string;
     areaHref?: string;
@@ -7,6 +12,9 @@ interface IProps {
     introductionText?: string;
     updateDocTitle?: boolean;
     hideAreaInDocTitle?: boolean;
+    tagList?: IHeaderTag[];
+    areaTitleBottom?: boolean;
+    rightContent?: React.ReactNode | React.FC | ReactElement;
 }
 declare const PageHeader: React.FC<IProps>;
 export default PageHeader;

package/dist/Tables/atoms/TableRowThumbnail.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IMediaType } from '../..';
 declare type VideoAspects = '4:3' | '16:9';
-interface IProps {
+export interface ITableRowThumbnail {
     image?: string;
     hoverZoom?: boolean;
     aspect?: VideoAspects;
@@ -10,6 +10,7 @@ interface IProps {
     retryImageLoad?: boolean;
     retryLimit?: number;
     closeText?: string;
+    onClickThumbnail?: () => void;
 }
-declare const TableRowThumbnail: React.FC<IProps>;
+declare const TableRowThumbnail: React.FC<ITableRowThumbnail>;
 export default TableRowThumbnail;

package/dist/Tables/index.d.ts

@@ -44,6 +44,7 @@ export interface IRowHeader {
     mediaType?: IMediaType;
     retryImageLoad?: boolean;
     icon?: string;
+    onClickThumbnail?: () => void;
 }
 export interface IRowData {
     _checked?: boolean;

package/dist/common/ContentPlaceholder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FlexContentPlaceholder: React.FC<{
+    title?: string;
+}>;

package/dist/common/index.d.ts

@@ -1,5 +1,7 @@
+import { FlexContentPlaceholder } from './ContentPlaceholder';
 export declare const RowCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const ColumnCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const resetButtonStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare const removeAutoFillStyle: import("styled-components").FlattenSimpleInterpolation;
 export declare const EllipsisStyles: import("styled-components").FlattenSimpleInterpolation;
+export { FlexContentPlaceholder };

package/dist/hooks/index.d.ts

@@ -2,6 +2,7 @@ import { useInterval } from './useInterval';
 import { useTo } from './useTo';
 import { useTitle } from './useTitle';
 import { useCopyToClipboard } from './useCopyToClipboard';
+import { useLocalStorage } from './useLocalStorage';
 import { useModal, IModal } from './useModal';
 import { useNotification } from './useNotification';
 import { useClickOutside } from './useClickOutside';
@@ -10,5 +11,5 @@ import useBreakpoints from './useBreakpoints';
 import useMediaQuery from './useMediaQuery';
 import { useMediaModal } from './useMediaModal';
 import useThemeToggle from './useThemeToggle';
-export { useInterval, useTo, useTitle, useCopyToClipboard, useModal, useNotification, useClickOutside, usePoll, useMediaQuery, useBreakpoints, useMediaModal, useThemeToggle };
+export { useInterval, useTo, useTitle, useCopyToClipboard, useModal, useNotification, useClickOutside, usePoll, useMediaQuery, useBreakpoints, useMediaModal, useThemeToggle, useLocalStorage };
 export type { IModal };

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export declare function useLocalStorage<T>(key: string, initialValue: T): readonly [T, (value: T | ((val: T) => T)) => void];

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 import defaultTheme from './theme';
 import ThemeVariables from './theme/ThemeVariables';
+import { BaseStyles } from './theme/ThemeHelpers';
 import { AlertBar, Notification, INotificationProps, AlertWrapper } from './Alerts';
-import { Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, IconButtonData, ActionButtons, SmallInput, Input, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, ISliderMark, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton, SplitButton, ISplitButtonProps } from './Form';
+import { Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, IconButtonData, ActionButtons, SmallInput, Input, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, ISliderMark, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton, SplitButton, ISplitButtonProps, ButtonsStack, IButtonsStack, IButtonStack } from './Form';
 import { DatePicker, DateInterval, isDateInterval, IFilterDatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, SortDropdown, FilterLayout, FilterInputs, ISearchFilter, IFilterDropdownExt, FiltersResults, IFilterLabel, FilterBar, IFilterDropdownConfig, IFilterType, IFilterItem, IFilterValue, IFilterResult, isFilterItem } from './Filters';
 import Icon, { IconSVGs } from './Icons/Icon';
 import StatusIcon from './Icons/StatusIcon';
 import { LineUI, LineUIVideo, LineUIRTC, LineSetContext, LineReducer } from './LineUI';
-import { IntroductionText, PageHeader, PageTitle, MultilineContent } from './Pages';
+import { IntroductionText, PageHeader, PageTitle, MultilineContent, IHeaderTag } from './Pages';
 import { TypeTable, TableRowThumbnail, TableHeaderTitle, EditCell } from './Tables';
 import { Controls, PTZProvider, PTZReducer, usePTZ, PTZContext } from './PTZControl';
 import { CameraPanels, CameraPanelWrapper, ICameraPanel, IMediaStream, IPanelMetaData } from './CameraPanels';
@@ -14,13 +15,13 @@ import { Tag, TagList, ITag, ITagList, TagListWrapper, MediaBox, BasicSearchInpu
 import { ConfirmationModal } from './Modals';
 import { useInterval, useTo, useTitle, useCopyToClipboard, useModal, useNotification, useClickOutside, useMediaModal, IModal, usePoll, useThemeToggle } from './hooks';
 import { NotificationProvider, ModalContext, ModalProvider } from './context';
-import { resetButtonStyles } from './common';
+import { resetButtonStyles, FlexContentPlaceholder } from './common';
 import Spinner from './Indicators/Spinner';
 import WebRTCClient from './WebRTCClient';
-import { ContentLayout, FullWidthContentBlock, UtilityHeader, IHeaderContent, IUtilityHeader } from './Layouts';
+import { ContentLayout, FullWidthContentBlock, UtilityHeader, SplitLayout, IHeaderContent, IUtilityHeader, ISplitLayoutHandles } from './Layouts';
 import { MainMenu, TopBar, Content, Layout, MainContainer, SidebarBox, SidebarLink, SidebarHeading, Logo, SidebarLinkHeading, BackLink, Sidebar, GlobalUI, INotificationItem, INotificationsHistory, ICustomDrawer } from './Global';
 import { Tabs, TabContext, Tab, TabList, TabContent, TabWithIcon, TabsWithIconBar, ITabIcon } from './Tabs';
-export { defaultTheme, ThemeVariables, AlertBar, Notification, AlertWrapper, LineUI, LineUIVideo, LineUIRTC, LineSetContext, LineReducer, Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, ActionButtons, Input, SmallInput, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton, SplitButton, ConfirmationModal, DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, SortDropdown, FilterLayout, FilterInputs, FiltersResults, FilterBar, isFilterItem, isDateInterval, Icon, IconSVGs, StatusIcon, IntroductionText, PageHeader, PageTitle, MultilineContent, Controls, PTZProvider, PTZContext, PTZReducer, usePTZ, TypeTable, TableRowThumbnail, TableHeaderTitle, EditCell, useInterval, useTo, useTitle, useCopyToClipboard, useClickOutside, usePoll, useMediaModal, useThemeToggle, resetButtonStyles, Spinner, WebRTCClient, MainMenu, TopBar, MainContainer, Layout, Content, SidebarBox, SidebarLink, SidebarHeading, Logo, SidebarLinkHeading, BackLink, Sidebar, GlobalUI, ContentLayout, FullWidthContentBlock, UtilityHeader, Tabs, TabContext, Tab, TabList, TabContent, TabWithIcon, TabsWithIconBar, CameraPanels, CameraPanelWrapper, Tag, TagList, TagListWrapper, MediaBox, BasicSearchInput, DebouncedSearcher, ActionsBar, Pagination, NotificationProvider, useNotification, ModalContext, ModalProvider, useModal };
+export { defaultTheme, ThemeVariables, BaseStyles, AlertBar, Notification, AlertWrapper, LineUI, LineUIVideo, LineUIRTC, LineSetContext, LineReducer, Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, ActionButtons, Input, SmallInput, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton, SplitButton, ButtonsStack, ConfirmationModal, DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, SortDropdown, FilterLayout, FilterInputs, FiltersResults, FilterBar, isFilterItem, isDateInterval, Icon, IconSVGs, StatusIcon, IntroductionText, PageHeader, PageTitle, MultilineContent, Controls, PTZProvider, PTZContext, PTZReducer, usePTZ, TypeTable, TableRowThumbnail, TableHeaderTitle, EditCell, useInterval, useTo, useTitle, useCopyToClipboard, useClickOutside, usePoll, useMediaModal, useThemeToggle, resetButtonStyles, FlexContentPlaceholder, Spinner, WebRTCClient, MainMenu, TopBar, MainContainer, Layout, Content, SidebarBox, SidebarLink, SidebarHeading, Logo, SidebarLinkHeading, BackLink, Sidebar, GlobalUI, ContentLayout, FullWidthContentBlock, UtilityHeader, SplitLayout, Tabs, TabContext, Tab, TabList, TabContent, TabWithIcon, TabsWithIconBar, CameraPanels, CameraPanelWrapper, Tag, TagList, TagListWrapper, MediaBox, BasicSearchInput, DebouncedSearcher, ActionsBar, Pagination, NotificationProvider, useNotification, ModalContext, ModalProvider, useModal };
 /**
  * Values based on colors.feedback from theme
  */
@@ -28,4 +29,4 @@ export declare type IFeedbackColor = 'error' | 'warning' | 'info' | 'success' |
 export declare type ITimeUnit = 'seconds' | 'minutes' | 'hours';
 export declare type IMediaType = 'img' | 'video';
 export declare type IStatusDot = 'caution' | 'danger' | 'good' | 'neutral' | 'highlight';
-export type { IModal, INotificationProps, IconButtonData, ITag, ITagList, ISliderMark, INotificationItem, INotificationsHistory, ICustomDrawer, ISearchFilter, IFilterDropdownExt, IFilterLabel, IFilterDropdownConfig, ITabIcon, IFilterType, IFilterItem, IFilterValue, IFilterResult, DateInterval, IFilterDatePicker, ICameraPanel, IMediaStream, IPanelMetaData, IActionsButton, ISplitButtonProps, IItemsOption, IPagination, IHeaderContent, IUtilityHeader };
+export type { IModal, INotificationProps, IconButtonData, ITag, ITagList, ISliderMark, INotificationItem, INotificationsHistory, ICustomDrawer, ISearchFilter, IFilterDropdownExt, IFilterLabel, IFilterDropdownConfig, ITabIcon, IFilterType, IFilterItem, IFilterValue, IFilterResult, DateInterval, IFilterDatePicker, ICameraPanel, IMediaStream, IPanelMetaData, IActionsButton, ISplitButtonProps, IHeaderTag, IItemsOption, IPagination, IHeaderContent, IUtilityHeader, IButtonsStack, IButtonStack, ISplitLayoutHandles };