@majoo-ui/react 1.44.4 → 1.46.0-rc.1

package/README.md

@@ -1,7 +1,7 @@
-React
-
-This library was generated with [Nx](https://nx.dev).
-
-Running unit tests
-
-Run `nx test react` to execute the unit tests via [Jest](https://jestjs.io).
+React
+
+This library was generated with [Nx](https://nx.dev).
+
+Running unit tests
+
+Run `nx test react` to execute the unit tests via [Jest](https://jestjs.io).

package/components/button/Button.d.ts

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import type * as Stitches from '@stitches/react';
+import { CSS } from '../../config/stitches.config';
+export declare const ButtonPrimitive: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    buttonType?: "primary" | "secondary" | "ghost" | "negative" | "negative-secondary" | "headerMenu" | "tableMenu" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
+}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [Stitches.$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [Stitches.$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [Stitches.$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
+interface AdditionalButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+    /**
+     * Specify whether the button should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the button should be displayed as block and 100% width , or not
+     */
+    block?: boolean;
+    /**
+     * Specify the button width
+     */
+    width?: string | number;
+    /**
+     * Specify the button left icon component
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Specify the button right icon component
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Specify whether the Button children is icon only , or not
+     */
+    icon?: boolean;
+    css?: CSS;
+}
+export declare const Button: React.ForwardRefExoticComponent<import("@stitches/react/types/styled-component").TransformProps<{
+    buttonType?: "primary" | "secondary" | "ghost" | "negative" | "negative-secondary" | "headerMenu" | "tableMenu" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
+}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}> & AdditionalButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export * from './Button';

package/components/form/components/InputCombobox/InputCombobox.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { CSS } from '../../../../config/stitches.config';
+interface InputComboboxProps extends Partial<Omit<React.ComponentPropsWithoutRef<'input'>, 'size'>> {
+    /**
+     * Array of options.
+     */
+    options: string[];
+    /**
+     * If true, the search icon is shown.
+     */
+    showLeadingIcon?: boolean;
+    /**
+     * Specify the default value.
+     */
+    defaultValue?: string;
+    /**
+     * 	If true, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Specify the options view placement.
+     */
+    placement?: 'top' | 'bottom';
+    /**
+     * Specify the input size.
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * If true, the input will become invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * Called whenever the input value changes.
+     */
+    onValueChange?: (value: string) => void;
+    css?: CSS;
+}
+export declare const InputCombobox: React.ForwardRefExoticComponent<InputComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1 @@
+export * from './InputCombobox';

package/components/form/components/InputSelect/InputSelect.migration.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare type Option = {
+    label: string;
+    value: string;
+};
+interface InputComboboxProps {
+    options: any[];
+    placeholder?: string;
+    onChange?: (value: string, option: Option) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    showSearch?: boolean;
+    allowClear?: boolean;
+    isInvalid?: boolean;
+    size?: 'sm' | 'lg';
+}
+declare const InputSelect: React.FC<InputComboboxProps>;
+export default InputSelect;

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

@@ -14,6 +14,9 @@ export { default as InputTags } from './InputTags/InputTags';
 export { default as InputSwitch } from './InputSwitch/InputSwitch';
 export { default as InputSearchbox } from './InputSearchbox/InputSearchbox';
 export { default as InputSelect } from './InputSelect/InputSelect';
+export * from './InputSelect';
+export { default as InputSelectCheck } from './InputSelectCheck/InputSelectCheck';
 export { default as InputSelectTag } from './InputSelectTag/InputSelectTag';
 export { default as InputCreatable } from './InputCreatable/InputCreatable';
 export { default as InputResourceList } from './InputResourceList/InputResourceList';
+export * from './InputCombobox';

package/components/index.d.ts

@@ -40,3 +40,4 @@ export * from './tableOfContent';
 export * from './editableTable';
 export * from './loadingBar';
 export * from './progressIndicator';
+export * from './link';

package/components/link/Link.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import type * as Stitches from '@stitches/react';
+import { CSS } from '../../config/stitches.config';
+declare const StyledLink: import("@stitches/react/types/styled-component").StyledComponent<"a", {
+    color?: "success" | "info" | "warning" | "failed" | undefined;
+}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [Stitches.$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [Stitches.$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [Stitches.$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [Stitches.$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [Stitches.$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
+declare type LinkVariants = Stitches.VariantProps<typeof StyledLink> & React.ComponentPropsWithoutRef<'a'>;
+interface ButtonLinkProps extends LinkVariants {
+    isExternal: boolean;
+    css?: CSS;
+}
+export declare const Link: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/components/link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/components/loadingBar/LoadingBar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type * as Stitches from '@stitches/react';
 interface LoadingBarProps {
     progress: number;
@@ -7,6 +7,7 @@ interface LoadingBarProps {
     showProgressOnly?: boolean;
     show?: boolean;
     isAuto?: boolean;
+    onCompleted?: React.ChangeEventHandler;
 }
 export default function LoadingBar(props: LoadingBarProps): JSX.Element;
 export {};

package/components/table/Table.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { Column } from 'react-table';
+import * as React from 'react';
+import { CellProps } from 'react-table';
 import { CSS } from '../../config/stitches.config';
 export declare const TableContent: import("@stitches/react/types/styled-component").StyledComponent<"table", {}, {
     sm: "(min-width: 359px)";
@@ -877,35 +877,84 @@ export declare const addOnCellStyle: (id: any) => {
 } | {
     style?: undefined;
 };
-export declare const defaultFetchDataParams: {
-    pageIndex: number;
-    pageSize: number;
-};
+export declare const defaultFetchDataParams: FetchDataParams;
 interface FetchDataParams {
     pageIndex?: number;
     pageSize?: number;
     sortAccessor?: string;
     sortDirection?: string;
 }
-interface TableProps {
+export interface TableProps {
+    /**
+     * The data array that you want to display on the table.
+     */
     data: any[];
-    columns: Column<any>[];
-    keyId: string;
-    pageIndex: number;
-    totalData: number;
+    /**
+     * The core columns configuration object for the entire table.
+     */
+    columns: any[];
+    /**
+     * 	Row's unique key (for selectedIds & onSelectedChange purpose).
+     */
+    keyId?: string;
+    /**
+     * The index of the page that should be displayed.
+     */
+    pageIndex?: number;
+    /**
+     * Total amount of the data.
+     */
+    totalData?: number;
+    /**
+     * Function executed when pagination or sorter is changed.
+     * interface FetchDataParams { <br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;pageIndex?: number;<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;pageSize?: number;<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;sortAccessor?: string;<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;sortDirection?: string;<br/>
+     * }
+     */
     fetchData?: (params: FetchDataParams) => void;
-    isLoading: boolean;
+    /**
+     * Loading status of table.
+     */
+    isLoading?: boolean;
     css?: CSS;
+    /**
+     * Table header css styling.
+     */
     headerCss?: CSS;
+    /**
+     * Callback fired when the selected rows are updated.
+     */
     onSelectedChange?: (selectedIds: string[]) => void;
-    hideDataInfo: boolean;
+    /**
+     * If true, the left-side footer component is hidden.
+     */
+    hideDataInfo?: boolean;
+    /**
+     * Table empty data message.
+     */
     emptyDataMessage?: string;
-    isInfiniteScroll: boolean;
-    hasMoreItems: boolean;
-    rowLimit: number;
-    cellAlign: 'top' | 'center' | 'bottom';
     /**
-     * Example:
+     * If true, the table pagination will become an infinite scroll.
+     */
+    isInfiniteScroll?: boolean;
+    /**
+     * Determine whether more data can be loaded.
+     */
+    hasMoreItems?: boolean;
+    /**
+     * Determines the amount of rows on any given page.
+     */
+    rowLimit?: number;
+    /**
+     * Specify the table cell align position.
+     */
+    cellAlign?: 'top' | 'center' | 'bottom';
+    /**
+     * Selected data id (based on the keyId prop).
+     * Example:<br/>
      * {
      *   '8192389219289': true,
      *   '2130912039281': true,
@@ -914,8 +963,65 @@ interface TableProps {
      */
     selectedIds?: Record<string, boolean>;
 }
-declare function Table({ columns, data, keyId, pageIndex: controlledPageIndex, totalData, fetchData, hideDataInfo, emptyDataMessage, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, }: TableProps): JSX.Element;
-declare namespace Table {
-    var displayName: string;
+export declare function Table({ columns, data, keyId, pageIndex: controlledPageIndex, totalData, fetchData, hideDataInfo, emptyDataMessage, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, }: TableProps): JSX.Element;
+export interface TableColumnProps {
+    /**
+     * Required if accessor is a function<br/>
+     * This is the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc.
+     * If a string accessor is used, it defaults as the column ID, but can be overridden if necessary.
+     */
+    id: string;
+    /**
+     * Column header name
+     */
+    Header?: string | (() => string | null) | null;
+    /**
+     * This string/function is used to build the data model for your column.
+     * The data returned by an accessor should be primitive and sortable.
+     */
+    accessor: string | ((originalRow: any, rowIndex: any) => any);
+    /**
+     * This function (or component) is primarily used for formatting the column value,<br/>
+     * eg. If your column accessor returns a date object, you can use a Cell function to format that date to a readable format.
+     */
+    Cell: (props: CellProps<any>) => React.ReactNode;
+    /**
+     * Required if responsive mobile layout is needed.<br/>
+     * If true, the column will become main column on mobile layout.
+     */
+    isMobileHeader: boolean;
+    /**
+     * If true, the column will be rendered on the expanded row.
+     */
+    isSubRow?: boolean;
+    /**
+     * If false, the column  will be sortable.
+     */
+    unsortable?: boolean;
+    /**
+     * Specifies the width for the column.
+     */
+    colWidth?: number;
+    /**
+     * Specifies the maximum width for the column.
+     */
+    colMaxWidth?: number;
+    /**
+     * Specifies the minimum width for the column.
+     */
+    colMinWidth?: number;
+    /**
+     * Specifies the sticky column order position.
+     */
+    sticky?: 'left' | 'right';
+    /**
+     * Specifies the sticky column absolute position.
+     */
+    stickyPosition?: number;
+    /**
+     * If true, the column will be rendered on the bottom flex of mobile layout.
+     */
+    isAction?: boolean;
 }
-export default Table;
+export declare const TableColumn: React.FC<TableColumnProps>;
+export {};

package/components/table/index.d.ts

@@ -1,4 +1,3 @@
-export { default as Table } from './Table';
 export * from './Table';
 export * from './components';
 export { default as MobileTable } from './MobileTable';

package/hooks/useListOption.d.ts

@@ -0,0 +1,9 @@
+export interface ITransform<T> {
+    name: string;
+    value: any;
+    rec: T;
+    key: any;
+    isDisabled: boolean;
+}
+declare function useListOption<T>(list: T[], nameKey?: string | string[], valueKey?: string | string[], disableList?: string[], separator?: string | ((values: string | string[], item: any, index: any) => string)): ITransform<T>[];
+export default useListOption;