@majoo-ui/react 1.50.2-rc.3 → 1.51.0

package/components/checkboxTable/CheckboxTable.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Column } from 'react-table';
+import { CSS } from '../../config/stitches.config';
+interface CheckboxTableProps<Data extends object> {
+    /**
+     * Columns of table.
+     */
+    columns: ReadonlyArray<Column<Data>>;
+    /**
+     * Data record array to be displayed.
+     */
+    data: Data[];
+    /**
+     * Displayed message if data does not exist.
+     */
+    emptyDataMessage?: string;
+    /**
+     * Additional height of the rows.
+     */
+    rowHeight?: number;
+    /**
+     * Additional align items of the rows.
+     */
+    align?: 'top' | 'center' | 'bottom';
+    css?: CSS;
+    onChange?: (e: any) => void;
+}
+export default function CheckboxTable(props: CheckboxTableProps<object>): JSX.Element;
+export {};

package/components/checkboxTable/index.d.ts

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

package/components/checkboxTable/transition.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare function Collapalse({ children, isOpen }: {
+    children: any;
+    isOpen: any;
+}): JSX.Element;
+declare namespace Collapalse {
+    var defaultProps: {
+        isOpen: boolean;
+    };
+}
+export default Collapalse;

package/components/editableTable/EditableTable.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Column } from 'react-table';
+import { Column, Row } from 'react-table';
+import { CSS } from '../../config/stitches.config';
+interface CustomRows {
+    predicate: boolean;
+    css?: CSS;
+    Row?: any;
+}
 interface EditableTableProps<Data extends object> {
     /**
      * Columns of table.
@@ -21,6 +27,10 @@ interface EditableTableProps<Data extends object> {
      * Additional align items of the rows.
      */
     align?: 'top' | 'center' | 'bottom';
+    /**
+     * Additional customize one of the rows based on the specified condition
+     */
+    customRows?: (row: Row<object>) => CustomRows[];
 }
 interface RemoveProps {
     position?: 'leftBottom' | 'rightBottom' | 'leftTop' | 'rightTop';
@@ -131,5 +141,201 @@ declare namespace EditableTable {
     }>>;
     var Switch: (props: any) => JSX.Element;
     var Remove: (props: RemoveProps) => JSX.Element;
+    var TableRow: import("@stitches/react/types/styled-component").StyledComponent<"tr", {
+        subRow?: boolean | "true" | 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 [$$ScaleValue]: "space";
+        }) => {
+            margin: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: {
+            readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
+        };
+        subtleColor: (value: string) => {
+            color: string;
+            backgroundColor: string;
+        };
+    }>>;
+    var TableCell: import("@stitches/react/types/styled-component").StyledComponent<"td", {
+        verticalAlign?: "bottom" | "top" | "middle" | 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 [$$ScaleValue]: "space";
+        }) => {
+            margin: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: {
+            readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
+        };
+        subtleColor: (value: string) => {
+            color: string;
+            backgroundColor: string;
+        };
+    }>>;
 }
 export default EditableTable;

package/components/form/components/InputCounter/InputCounter.d.ts

@@ -29,6 +29,14 @@ interface CounterProps {
      * Additional css style.
      */
     css?: CSS;
+    /**
+     * add prefix to input.
+     */
+    prefix?: string;
+    /**
+     * add suffix to input.
+     */
+    suffix?: string;
 }
 declare const InputCounter: React.ForwardRefExoticComponent<CounterProps & React.RefAttributes<unknown>>;
 export default InputCounter;

package/components/index.d.ts

@@ -43,3 +43,4 @@ export * from './progressIndicator';
 export * from './link';
 export * from './mapPicker';
 export * from './chart';
+export * from './checkboxTable';

package/components/pageDialog/PageDialog.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Dialog } from '../../';
 import { FocusScopeProps } from '@radix-ui/react-dialog';
+import { PointerDownOutsideEvent, FocusOutsideEvent } from '@radix-ui/react-dismissable-layer';
 import type { DialogContentProps } from '..';
 export declare const PageDialogFooter: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: "(min-width: 359px)";
@@ -394,6 +395,9 @@ interface PageDialogProps extends IDialog, DialogContentProps {
     isMobile?: boolean | undefined;
     /** Set default behavior when opening dialog with form. Usually used with prevent default*/
     onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
 }
 /**
  * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.