@majoo-ui/react 1.47.0-rc.1 → 1.48.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/datePicker/components/DateNumber.d.ts

@@ -2,6 +2,7 @@ import type * as Stitches from '@stitches/react';
 declare const DateNumber: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     variant?: "end" | "start" | "default" | "neutral" | "disabled" | "selected" | "road" | undefined;
     size?: "large" | "small" | undefined;
+    isSunday?: boolean | "true" | undefined;
 }, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";

package/components/datePicker/state/reducer.d.ts

@@ -12,3 +12,4 @@ export declare const advancePickerOptions: {
     value: string;
 }[];
 export declare function pickerReducer(state: any, action: any): any;
+export declare function advancePickerDate(type: any): Date[];

package/components/form/components/InputOTP/InputOTP.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+interface InputOTPProps {
+    /**
+     * Number of input boxes.
+     */
+    OTPLength?: number;
+    /**
+     * Returns OTP code typed in inputs.
+     */
+    onChange: (value: string | number) => void;
+    /**
+     * The value of the otp passed into the component.
+     */
+    value: string | number;
+    /**
+     * Disables all the inputs.
+     */
+    disabled?: boolean;
+    /**
+     * Auto focuses input on initial page load.
+     */
+    autoFocus?: boolean;
+    /**
+     * any - allows any value. number - allow only numbers. alpha - allows only a-zA-Z. alphanumeric - allows 0-9a-zA-z.
+     */
+    otpType?: 'any' | 'number' | 'alpha' | 'alphanumeric';
+    /**
+     * Change input type to password.
+     */
+    secure?: boolean;
+    /**
+     * Class for input element.
+     */
+    inputClassName?: string;
+    /**
+     * Class for root element.
+     */
+    className?: string;
+    /**
+     * Styles for input element.
+     */
+    inputStyles?: object;
+    /**
+     * Styles for root element.
+     */
+    style?: object;
+    /**
+     * Placeholder value of each input.
+     */
+    placeholder?: string[];
+    /**
+     * Error state input OTP.
+     */
+    isError?: boolean;
+}
+declare function InputOTP(props: InputOTPProps): JSX.Element;
+declare namespace InputOTP {
+    var defaultProps: {
+        OTPLength: number;
+        value: string;
+        disabled: boolean;
+        autoFocus: boolean;
+        otpType: string;
+        secure: boolean;
+    };
+}
+export default InputOTP;
+interface ResendOTPProps {
+    /**
+     * Timer that user has to wait before resend otp gets active.
+     */
+    maxTime?: number;
+    /**
+     * Function get triggers when user click on resend otp button. But when button is disabled(i.e. time is not completed) it won't get trigger.
+     */
+    onResendClick: () => void;
+    /**
+     * An optional callback when timer completes.
+     */
+    onTimerComplete?: () => void;
+    /**
+     * You can change time interval.
+     */
+    timeInterval?: number;
+    /**
+     * You can use your own component for seconds. Function will get remainingTime as props you can use it to show timer.
+     */
+    renderTime?: (remainingTime: number) => React.ReactElement;
+    /**
+     * You can use your own component for resend button. Function will get disabled and onClick function and remainingTime as props you can pass it to your component.
+     */
+    renderButton?: (buttonProps: object) => void;
+    /**
+     * For changing root component inline styles.
+     */
+    style?: object;
+    /**
+     * For adding class to root component.
+     */
+    className?: string;
+}
+export declare function ResendOTP(props: ResendOTPProps): JSX.Element;
+export declare namespace ResendOTP {
+    var defaultProps: {
+        maxTime: number;
+        timeInterval: number;
+    };
+}

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

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

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

@@ -20,3 +20,4 @@ export { default as InputSelectTag } from './InputSelectTag/InputSelectTag';
 export { default as InputCreatable } from './InputCreatable/InputCreatable';
 export { default as InputResourceList } from './InputResourceList/InputResourceList';
 export * from './InputCombobox';
+export * from './InputOTP';

package/components/index.d.ts

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

package/components/mapPicker/InputMapPicker.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { InputMapPickerProps } from './types';
+declare function InputMapPicker(props: InputMapPickerProps): JSX.Element;
+declare namespace InputMapPicker {
+    var defaultProps: {
+        modalTitle: string;
+        buttonLabel: string;
+        placeholder: string;
+        value: {
+            lat: number;
+            lng: number;
+        };
+    };
+}
+export default InputMapPicker;

package/components/mapPicker/MapPicker.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import './styles.css';
+import { MapPickerProps } from './types';
+declare function MapPicker(props: MapPickerProps): JSX.Element;
+declare namespace MapPicker {
+    var defaultProps: {
+        showBanner: boolean;
+        bannerDescription: string;
+        value: {
+            lat: number;
+            lng: number;
+        };
+    };
+}
+export default MapPicker;

package/components/mapPicker/index.d.ts

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

package/components/mapPicker/types/index.d.ts

@@ -0,0 +1,87 @@
+import { CSS } from '../../../config/stitches.config';
+export interface AddressComponents {
+    long_name: string;
+    short_name: string;
+    types: string[];
+}
+export interface MapObject {
+    place_id?: string;
+    lat: number;
+    lng: number;
+    formatted_address?: string;
+    address_components?: AddressComponents[];
+}
+export interface LatLng {
+    lat: number;
+    lng: number;
+}
+export interface MapPickerProps {
+    /**
+     * Google MAP API Key.
+     */
+    mapsApiKey?: string;
+    /**
+     * Additional css styles.
+     */
+    css?: CSS;
+    /**
+     * State to show or hide the banner.
+     */
+    showBanner?: boolean;
+    /**
+     * Custom banner description.
+     */
+    bannerDescription?: string;
+    /**
+     * To binding current address.
+     * `{ lat: number, lng: number }`
+     */
+    value?: LatLng;
+    /**
+     * Change event handler.
+     */
+    onChange: (MapObject: any) => void;
+    /**
+     * Marker Click event handler.
+     */
+    onMarkerClick?: () => void;
+}
+export interface InputMapPickerProps {
+    /**
+     * Google MAP API Key.
+     */
+    mapsApiKey?: string;
+    /**
+     * Additional css styles.
+     */
+    css?: CSS;
+    /**
+     * Custom title of the modal.
+     */
+    modalTitle?: string;
+    /**
+     * Custom label of the button.
+     */
+    buttonLabel?: string;
+    /**
+     * Custom InputMap placeholder.
+     */
+    placeholder?: string;
+    /**
+     * State to show or hide the banner.
+     */
+    showBanner?: boolean;
+    /**
+     * Custom banner description.
+     */
+    bannerDescription?: string;
+    /**
+     * To binding current address.
+     * `{ lat: number, lng: number }`
+     */
+    value?: LatLng;
+    /**
+     * Change event handler.
+     */
+    onChange: (MapObject: any) => void;
+}

package/components/modalDialog/ModalDialog.d.ts

@@ -392,30 +392,34 @@ interface ModalDialogProps extends IDialog, DialogContentProps {
     /** Force to mobile view or desktop view, if undefined ModalDialog will be responsive according to current screen size */
     isMobile?: boolean | undefined;
     /**
-    * @deprecated Use size or css props css={{width: width css property}} instead. This will be deleted in the future to limit unnecessary props.
-    */
+     * @deprecated Use size or css props css={{width: width css property}} instead. This will be deleted in the future to limit unnecessary props.
+     */
     width?: string | number;
     /** Set default behavior when opening dialog with form. Usually used with prevent default*/
     onOpenAutoFocus?(): void;
+    /**
+     * If true, the close icon button is hidden
+     */
+    hideCloseButton?: boolean;
 }
 /**
-* ModalDialog 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.
-* https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-* @param size - default fullsize
-* @param layer - z-index default 1400
-* @param isMobile - force mobile/desktop view, default is responsive
-* @param onOpenAutoFocus - set default open behaviour
-*
-* @example
-* // Uncontrolled Example
-*  <ModalDialog>
-*    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
-*    <ModalDialogTitle>Title</ModalDialogTitle>
-*    <ModalDialogContent>Content</ModalDialogContent>
-*    <ModalDialogFooter>Footer</ModalDialogFooter>
-*  </ModalDialog>
-* @component
-*/
+ * ModalDialog 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.
+ * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+ * @param size - default fullsize
+ * @param layer - z-index default 1400
+ * @param isMobile - force mobile/desktop view, default is responsive
+ * @param onOpenAutoFocus - set default open behaviour
+ *
+ * @example
+ * // Uncontrolled Example
+ *  <ModalDialog>
+ *    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
+ *    <ModalDialogTitle>Title</ModalDialogTitle>
+ *    <ModalDialogContent>Content</ModalDialogContent>
+ *    <ModalDialogFooter>Footer</ModalDialogFooter>
+ *  </ModalDialog>
+ * @component
+ */
 declare const ModalDialog: {
     (props: ModalDialogProps): JSX.Element;
     Trigger: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {

package/components/pageDialog/PageDialog.d.ts

@@ -395,23 +395,23 @@ interface PageDialogProps extends IDialog, DialogContentProps {
     onOpenAutoFocus?(): 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.
-* https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-* @param size - default fullsize
-* @param layer - z-index default 1400
-* @param isMobile - force mobile/desktop view, default is responsive
-* @param onOpenAutoFocus - set default open behaviour
-*
-* @example
-* // Uncontrolled Example
-*  <PageDialog>
-*    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
-*    <PageDialogTitle>Title</PageDialogTitle>
-*    <PageDialogContent>Content</PageDialogContent>
-*    <PageDialogFooter>Footer</PageDialogFooter>
-*  </PageDialog>
-* @component
-*/
+ * 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.
+ * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+ * @param size - default fullsize
+ * @param layer - z-index default 1400
+ * @param isMobile - force mobile/desktop view, default is responsive
+ * @param onOpenAutoFocus - set default open behaviour
+ *
+ * @example
+ * // Uncontrolled Example
+ *  <PageDialog>
+ *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
+ *    <PageDialogTitle>Title</PageDialogTitle>
+ *    <PageDialogContent>Content</PageDialogContent>
+ *    <PageDialogFooter>Footer</PageDialogFooter>
+ *  </PageDialog>
+ * @component
+ */
 export declare const PageDialog: {
     (props: PageDialogProps): JSX.Element;
     Trigger: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {