@mailstep/design-system 0.4.21 → 0.5.0-beta.10

package/ui/Blocks/CommonGrid/styles.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import { Button } from '../../Elements/Button';
+import CommonGrid from './CommonGrid';
+export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"], ["\n  margin-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"])), function (_a) {
+    var isAbsolute = _a.isAbsolute;
+    return (isAbsolute ? 'absolute' : 'relative');
+}, function (_a) {
+    var isAbsolute = _a.isAbsolute, theme = _a.theme;
+    return (isAbsolute ? theme.colors.bgLightGray : 'transparent');
+});
+export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n"])));
+export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  border-bottom: 0.5px solid ", ";\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
+export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])));
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 20px;\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 20px;\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), th('fonts.primary'), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+}, function (_a) {
+    var height = _a.height;
+    return (height ? 'fit-content' : 'auto');
+}, function (_a) {
+    var height = _a.height;
+    return (height ? '35px' : '0');
+}, function (_a) {
+    var height = _a.height;
+    return (height ? "".concat(height, "px") : '475px');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/CommonGrid/translations.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/CommonGrid/translations.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Trans } from '@lingui/react';
+/** catalog for lungui to track commonGrid translations - DO NOT REMOVE */
+var NonsensCop = function () {
+    return (_jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), _jsx(Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.title", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" })] }));
+};

package/ui/Blocks/CommonGrid/types.d.ts

@@ -0,0 +1,313 @@
+import React from 'react';
+export declare const rowClassSymbol: unique symbol;
+type Option = {
+    value: string | number;
+    label: string | number;
+};
+type ButtonPublicInterfaceProps = {
+    children?: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    appearance?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    margin?: string;
+    className?: string;
+    onClick?: (arg?: any) => void;
+};
+type CheckboxPublicInterfaceProps = {
+    name?: string;
+    label?: string | JSX.Element;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+};
+type SwitchPublicInterfaceProps = {
+    onChange?: (event: React.ChangeEvent) => void;
+    label?: string;
+    name: string;
+    checked?: boolean;
+};
+export type PaginatorProps = {
+    page: number;
+    itemCount: number;
+    itemPerPage: number;
+    onPageChange: (number: number) => void;
+};
+export type FilterComponentProps<VT> = {
+    name: string;
+    onChange: (value: VT | {
+        event: {
+            target: VT;
+        };
+    } | null) => void;
+    value: VT | null;
+    OverlayComponent?: React.FunctionComponent;
+} & Record<string, any>;
+export type ColumnTitleComponentType = React.ComponentType<{
+    title?: string | JSX.Element;
+    isSortable: boolean;
+    onSetSort: (value: SortingValueType) => void;
+    sortValue: SortingValueType;
+}>;
+export type ComponentsProps = {
+    Translator: React.ComponentType<any>;
+    Checkbox: React.ComponentType<CheckboxPublicInterfaceProps>;
+    Button: React.ComponentType<ButtonPublicInterfaceProps>;
+    Switch: React.ComponentType<SwitchPublicInterfaceProps>;
+    Paginator: React.ComponentType<PaginatorProps>;
+    ColumnTitle?: ColumnTitleComponentType;
+};
+export type FiltersConfig = {
+    [name: string]: {
+        CellComponent: React.ComponentType<FilterComponentProps<any>>;
+        defaultExtraProps?: {
+            [name: string]: any;
+        };
+    };
+};
+type Filtering = {
+    [column: string]: {
+        value: any;
+        filterProps: FilterProps;
+    };
+};
+type Sorting = {
+    column: string;
+    direction: SortingValueType;
+}[];
+export type Settings = {
+    filter: Filtering;
+    sorting: Sorting;
+    offset: number;
+    limit: number;
+};
+export interface SelectMenuItem {
+    label: string;
+    value: string | number;
+    labelInList?: string;
+    disabled?: boolean;
+}
+export type RowProps = {
+    id: string;
+    [rowClassSymbol]?: string;
+};
+type ColumnBaseProps = {
+    flexBasis: number;
+};
+export type RowValueType = string | JSX.Element | number | void;
+export type ColumnDefinition<ColumnName extends string = string> = ColumnBaseProps & {
+    name: ColumnName;
+    group?: Group['name'];
+    systemName?: string;
+    systemFilter?: string;
+    title?: string | JSX.Element;
+    filtering?: boolean;
+    filteringType?: 'number' | 'text' | 'date' | 'flag';
+    disableRowTouch?: boolean;
+    filterExtraProps?: {
+        isMulti?: boolean;
+        comparators?: any;
+        filterTime?: boolean;
+        decimals?: number;
+        isFloat?: boolean;
+        isBigInt?: boolean;
+        isUuid?: boolean;
+        defaultComparator?: string;
+    };
+    getFilterCriteria?: (value: string) => {
+        [column: string]: any;
+    } | null;
+    filterOptions?: Option[];
+    sorting?: boolean;
+    formatRowValue?: (row: any) => RowValueType;
+    cellComponent?: React.ComponentType<DataCellProps<any>>;
+    flexGrow?: number;
+    flexShrink?: number;
+    fixedSize?: boolean;
+    alwaysOn?: boolean;
+    defaultHidden?: boolean;
+    sticky?: boolean;
+    stickTo?: StickTo;
+    passProps?: any;
+};
+export type StickTo = 'left' | 'right';
+type batchAction = {
+    value: string;
+    label: string;
+    isEnabled?: (checkedRows: any[]) => boolean;
+};
+export type OnBatchActionFn<T = RowProps> = (action: batchAction, affectedRows: T[]) => void;
+export type ActionColumn = ColumnBaseProps & {
+    actionOptions?: batchAction[];
+    canRowEdit?: boolean | ((row: any) => boolean);
+    canRowRead?: boolean | ((row: any) => boolean);
+    createLink?: (params?: object) => string;
+    forceCheckboxes?: boolean;
+    checkAllPosition?: 'top' | 'bottom';
+    addRowNumbers?: boolean;
+    addRowNumbersLabel?: string;
+};
+export type ActionColumnHeadProps = {
+    actionColumn: ActionColumn;
+    onBatchAction?: OnBatchActionFn;
+    handleUxChange?: GridActionsType['handleUxChange'];
+    rowsData: RowProps[];
+    uxState: UxState;
+};
+export type DataCellProps<T> = {
+    rowData: T;
+    onRowAction?: (id: string, field: string, value: any) => void | Promise<any>;
+    column: ColumnDefinition;
+};
+type SingleColumnConfig = {
+    isHidden?: boolean;
+};
+export type ColumnConfig = {
+    [key: string]: SingleColumnConfig;
+};
+export type SortingValueType = 'asc' | 'desc' | null;
+export type InitProps = {
+    defaultSorting?: Settings['sorting'];
+};
+export type FilterProps = {
+    type: Required<ColumnDefinition>['filteringType'] | 'options';
+    filterExtraProps: ColumnDefinition['filterExtraProps'];
+    computedValue?: any;
+};
+export type UxState = {
+    checkedRows?: {
+        [key: string]: boolean;
+    };
+    selectedRow?: string | null;
+};
+export type ColumnLayout = 'normal' | 'no-scroll' | 'sticky';
+export type GridState = {
+    page: number;
+    rowsPerPage: number;
+    filter: Settings['filter'];
+    sorting: Settings['sorting'];
+    defaultSorting: Settings['sorting'];
+    isConfigFormOpen: boolean;
+    uxState: UxState;
+    columnConfig: ColumnConfig;
+    columnsOrder: string[];
+    columnsWidth: {
+        [anyKey: string]: number;
+    };
+    columnsWidthVariant?: string;
+};
+export type GridSelectorsType = {
+    uxState?: UxState;
+    columnConfig?: ColumnConfig;
+    page?: number;
+    rowsPerPage?: number;
+    filter?: Settings['filter'];
+    sorting?: Settings['sorting'];
+    isConfigFormOpen?: boolean;
+    columnsWidth?: {
+        [anyColumn: string]: number;
+    };
+    columnsWidthVariant?: string;
+    columnsOrder?: string[];
+};
+export type RowsPerPageType = {
+    gridName: string;
+    rowsPerPage: number;
+    type: string;
+};
+export type GridActionsType = {
+    init?: (params?: InitProps) => void;
+    clearUxState?: () => void;
+    handleUxChange?: (uxKey: keyof UxState, uxValue: any) => void;
+    setColumnConfig?: (columnConfig: ColumnConfig) => void | Promise<any>;
+    setPage?: (number: number) => void;
+    setRowsPerPage?: (number: number) => RowsPerPageType | null;
+    addFilter?: (column: string, value: any, filterProps: FilterProps) => void;
+    resetFilters?: () => void;
+    addSorting?: (column: string, direction: SortingValueType) => void;
+    openConfigForm?: () => void;
+    closeConfigForm?: () => void;
+    clearSettings?: () => void;
+    resetGrid?: () => void;
+    setColumnWidth?: (columnsWidth: null | {
+        [anyColumn: string]: number;
+    }, columnLayout: ColumnLayout) => void;
+    setColumnsOrder?: (columnsOrder: string[]) => void;
+};
+export type AsyncFilters = {
+    [anyColumn: string]: Option[];
+};
+export type CommonGridProps<TData extends RowProps = RowProps> = {
+    components?: ComponentsProps;
+    filters?: FiltersConfig;
+    gridSelectors: GridSelectorsType;
+    gridActions: GridActionsType;
+    isLoading?: boolean;
+    rowsData: TData[];
+    hasColouredRows?: boolean;
+    columnsDefinitions: ColumnDefinition[];
+    actionColumnDefinition?: ActionColumn;
+    totalRowsCount?: number;
+    allowRowSelect?: boolean;
+    allowRowSelectOnAction?: boolean;
+    onRowAction?: (id: string, field: string, value: any) => void;
+    onRowEditClick?: (id: string, props: TData) => void;
+    onRowReadClick?: (id: string, props: TData) => void;
+    onRowClick?: (id: string, props: TData) => void;
+    onBatchAction?: OnBatchActionFn;
+    columnLayout?: ColumnLayout;
+    confirmOnReset?: () => boolean;
+    hideColumnConfig?: boolean;
+    hideAllControls?: boolean;
+    className?: string;
+    gridRef?: React.MutableRefObject<HTMLElement>;
+    minColumnWidth?: number;
+    errorMessage?: string;
+    extraControlButtons?: ExtraControlButton[];
+    perPageOptions?: number[];
+    floatingButtonProps?: FloatingButtonProps;
+};
+export declare enum ExtraControlButtonPosition {
+    TopLeft = "top-left",
+    TopRight = "top-right",
+    BottomLeft = "bottom-left",
+    BottomRight = "bottom-right"
+}
+export type ExtraControlButton = {
+    node?: React.ReactNode;
+    onClick?: () => void;
+    onSelect?: (value: string) => void;
+    label?: string | JSX.Element;
+    style?: 'primary' | 'secondary';
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    position?: ExtraControlButtonPosition;
+    hide?: boolean;
+    hideChevron?: boolean;
+    disabled?: boolean;
+};
+export type Group = {
+    name?: string;
+    start: boolean;
+    end: boolean;
+};
+export type GridProps = Omit<CommonGridProps, 'components' | 'filters'> & {
+    optimizeFilters?: boolean;
+    allowRowSelectOnAction?: boolean;
+    eshopSelect: CommonGridProps['extraControlButtons'];
+    onExport: (range: 'filtered' | 'selected', format: string) => void;
+    hideControlButtons?: boolean;
+};
+export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'hideColumnConfig' | 'minColumnWidth' | 'columnLayout'>;
+export type Item = {
+    label: string | JSX.Element;
+    value: string;
+    name: string;
+};
+export type FloatingButtonProps = {
+    options?: Item[];
+    onSelect?: (value: Item['value']) => void;
+    onClick?: () => void;
+};
+export {};

package/ui/Blocks/CommonGrid/types.js

@@ -0,0 +1,8 @@
+export var rowClassSymbol = Symbol();
+export var ExtraControlButtonPosition;
+(function (ExtraControlButtonPosition) {
+    ExtraControlButtonPosition["TopLeft"] = "top-left";
+    ExtraControlButtonPosition["TopRight"] = "top-right";
+    ExtraControlButtonPosition["BottomLeft"] = "bottom-left";
+    ExtraControlButtonPosition["BottomRight"] = "bottom-right";
+})(ExtraControlButtonPosition || (ExtraControlButtonPosition = {}));

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -0,0 +1,19 @@
+import { ColumnDefinition, ActionColumn, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
+export declare const getActionCellSizeProps: (column: ActionColumn) => object;
+export declare const getCellSizeProps: (column: ColumnDefinition, columnWidth: number) => object;
+export declare const getSortName: (column: ColumnDefinition) => string;
+export declare const getFilterName: (column: ColumnDefinition) => string;
+export declare const isColumnOn: (column: ColumnDefinition, columnConfig?: ColumnConfig) => boolean;
+export declare const calculatePaginator: (page: number, rowsPerPage: number) => {
+    offset: number;
+    limit: number;
+};
+export declare const createFilterType: (columnDefinition: {
+    filterOptions?: ColumnDefinition['filterOptions'];
+    filteringType?: ColumnDefinition['filteringType'];
+}) => FilterProps['type'];
+export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
+export declare const getGroupClassNames: (group?: Group) => string;
+export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
+export declare const GRID_MIN_ROWS = 6;
+export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -0,0 +1,78 @@
+import NumberRange from '../components/NumberRange';
+import TextRange from '../components/TextRange';
+import DatePickerRange from '../components/DatePickerRange';
+import BooleanSelect from '../components/BooleanSelect';
+import GridSelect from '../components/GridSelect';
+var isDefined = function (val) { return typeof val !== 'undefined'; };
+export var getActionCellSizeProps = function (column) {
+    return {
+        flexBasis: column.flexBasis,
+        flexGrow: 0,
+        flexShrink: 0,
+    };
+};
+export var getCellSizeProps = function (column, columnWidth) {
+    if (!column)
+        return {};
+    var fixedSize = column.fixedSize, flexGrow = column.flexGrow, flexShrink = column.flexShrink, sticky = column.sticky;
+    return {
+        flexBasis: columnWidth,
+        flexGrow: fixedSize ? 0 : isDefined(flexGrow) ? flexGrow : 1,
+        flexShrink: isDefined(flexShrink) ? flexShrink : 1,
+        maxWidth: sticky ? columnWidth : 'auto',
+    };
+};
+export var getSortName = function (column) {
+    return column.systemName || column.name;
+};
+export var getFilterName = function (column) {
+    return column.systemFilter || column.systemName || column.name;
+};
+export var isColumnOn = function (column, columnConfig) {
+    var _a;
+    if (column.alwaysOn)
+        return true;
+    var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
+    if (typeof isHidden === 'boolean')
+        return !isHidden; // isHidden is defined/stored => use user value
+    return !column.defaultHidden; // isHidden is undefined => use default value
+};
+export var calculatePaginator = function (page, rowsPerPage) { return ({
+    offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
+    limit: rowsPerPage,
+}); };
+export var createFilterType = function (columnDefinition) {
+    if (columnDefinition.filterOptions)
+        return 'options';
+    else
+        return columnDefinition.filteringType || 'text';
+};
+export var getGroups = function (columns) {
+    return columns.map(function (column, key) {
+        var previousGroup = key > 0 && columns[key - 1].group;
+        return {
+            name: column.group,
+            start: !!(column.group && (!previousGroup || (previousGroup && previousGroup !== column.group))),
+            end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group)),
+        };
+    });
+};
+export var getGroupClassNames = function (group) {
+    return "".concat((group === null || group === void 0 ? void 0 : group.start) ? 'group-start' : '', " ").concat((group === null || group === void 0 ? void 0 : group.end) ? 'group-end' : '');
+};
+export var getStickyCollClassNames = function (sticky, stickTo) {
+    return !sticky ? '' : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : ' sticky sticky-left');
+};
+export var GRID_MIN_ROWS = 6;
+export var getFilters = function (optimizeFilters) {
+    var filters = {
+        number: { CellComponent: NumberRange },
+        text: { CellComponent: TextRange },
+        date: { CellComponent: DatePickerRange },
+        flag: { CellComponent: BooleanSelect },
+        options: { CellComponent: GridSelect },
+    };
+    if (optimizeFilters)
+        filters.text.defaultExtraProps = { defaultComparator: 'eq' };
+    return filters;
+};

package/ui/Blocks/CommonGrid/utils/public.d.ts

@@ -0,0 +1,16 @@
+import { RowProps, GridActionsType, ColumnDefinition, UxState, ActionColumn, OnBatchActionFn } from '../types';
+/**
+ * hook for checkbox that select and unselects all row
+ * returns [checked state, toggleAllHandler()] for checkbox
+ */
+type ToggleAllCheckboxRet = [boolean, () => void];
+export declare const useToggleAllCheckbox: (rowsData: RowProps[], uxState: UxState, handleUxChange?: GridActionsType['handleUxChange']) => ToggleAllCheckboxRet;
+/**
+ * hook for action selection and trigger
+ * returns [subset of actions that are enabled, onSelect(value) - param1: selected action value]
+ */
+type GridActionTriggerRet = [Required<ActionColumn>['actionOptions'], (value: any) => void];
+export declare const useGridActionTrigger: (rowsData: RowProps[], uxState: UxState, actionOptions?: ActionColumn['actionOptions'], onBatchAction?: OnBatchActionFn) => GridActionTriggerRet;
+type AddFilterRet = (value: any, column: ColumnDefinition) => void;
+export declare const useAddFilter: (onChange: Required<GridActionsType>['addFilter']) => AddFilterRet;
+export {};

package/ui/Blocks/CommonGrid/utils/public.js

@@ -0,0 +1,52 @@
+import { useMemo, useCallback } from 'react';
+import { getFilterName, createFilterType } from './';
+import find from 'lodash/find';
+export var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
+    var allChecked = useMemo(function () { return (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState.checkedRows]);
+    var toggleAllHandler = useCallback(function () {
+        var checkedRows = {};
+        // if check all is not check, we check all
+        if (!allChecked && rowsData) {
+            rowsData.forEach(function (row) {
+                checkedRows[row.id] = true;
+            });
+        }
+        handleUxChange && handleUxChange('checkedRows', checkedRows);
+    }, [handleUxChange, rowsData, allChecked]);
+    return [allChecked, toggleAllHandler];
+};
+export var useGridActionTrigger = function (rowsData, uxState, actionOptions, onBatchAction) {
+    if (actionOptions === void 0) { actionOptions = []; }
+    var actionRows = useMemo(function () {
+        return (rowsData || []).filter(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; });
+    }, [uxState, rowsData]);
+    var enabledActions = useMemo(function () {
+        var actionsOptions = actionOptions || [];
+        return actionsOptions.filter(function (action) {
+            if (action.isEnabled) {
+                return action.isEnabled(actionRows);
+            }
+            else {
+                return uxState.checkedRows && find(uxState.checkedRows, Boolean);
+            }
+        });
+    }, [uxState, actionRows, actionOptions]);
+    var handleBatchAction = useCallback(function (value) {
+        var actionsOptions = actionOptions || [];
+        var action = actionsOptions.find(function (option) { return option.value == value; });
+        action && onBatchAction && onBatchAction(action, actionRows);
+    }, [actionOptions, onBatchAction, actionRows]);
+    return [enabledActions, handleBatchAction];
+};
+export var useAddFilter = function (onChange) {
+    return useCallback(function (value, column) {
+        if (onChange) {
+            var filterProps = {
+                type: createFilterType(column),
+                filterExtraProps: column.filterExtraProps || {},
+                computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null,
+            };
+            onChange(getFilterName(column), value, filterProps);
+        }
+    }, [onChange]);
+};

package/ui/Blocks/Popover/index.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { Placement } from '@popperjs/core';
+type DropdownMenuProps = {
+    parentRef: React.MutableRefObject<HTMLDivElement | null | undefined>;
+    onClose: () => void;
+    children: React.ReactChild;
+    placement?: Placement;
+};
+export declare const Popover: FC<DropdownMenuProps>;
+export {};

package/ui/Blocks/Popover/index.js

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { Popper } from 'react-popper';
+import { useClickOutside } from '../Modal/hooks/useClickOutside';
+import Portal from '../../Elements/Portal';
+var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
+export var Popover = function (_a) {
+    var placement = _a.placement, children = _a.children, onClose = _a.onClose, parentRef = _a.parentRef;
+    var popperRef = useClickOutside({ onClose: onClose, parentRef: parentRef });
+    return (_jsx(Portal, { children: _jsx("div", { ref: popperRef, children: _jsx(Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
+                    var ref = _a.ref, style = _a.style;
+                    return (_jsx(PopoverWrapper, { ref: ref, style: style, children: children }));
+                } }) }) }));
+};
+var templateObject_1;

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SpaceAround } from '../SpaceAround';
+import { DatetimepickerProps } from './Datetime/types';
+export type DatePickerType = DatetimepickerProps & {
+    onChange: (value: string | Date) => void;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    initialViewDate?: Date | null;
+    secondValue?: Date | null;
+    className?: string;
+    spaceAround?: SpaceAround;
+    showInputLabel?: boolean;
+    showCalendarLabel?: boolean;
+    error?: string;
+    icon?: boolean;
+    onClear?: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat, timeFormat, open, secondValue, input, icon, showInputLabel, showCalendarLabel, spaceAround, className, onClear, ...passProps }: DatePickerType) => JSX.Element>;
+export default _default;