@majoo-ui/react 1.46.2 → 1.46.3-rc.3

package/components/datePicker/AdvancedOption.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type Option = {
+    value: string;
+    label: string;
+};
+interface AdvancedOptionProps {
+    options: Option[];
+    disabled?: boolean;
+    optionHandler: (value: string) => void;
+}
+export declare const AdvancedOption: ({ options, disabled, optionHandler }: AdvancedOptionProps) => JSX.Element;
+export {};

package/components/datePicker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SINGLE_PICKER: "single";
+export declare const RANGE_PICKER: "range";
+export declare const ADVANCE_PICKER: "advance";
+export declare const DatePicker: (props: any) => JSX.Element;

package/components/datePicker/InputDatePicker.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { ADVANCE_PICKER, RANGE_PICKER, SINGLE_PICKER } from './DatePicker';
+import { CSS } from '../../config/stitches.config';
+import { PopoverPlacement } from '../../type/base.types';
+export interface InputDatePickerProps {
+    /**
+     * Specify the InputDatePicker type.
+     */
+    type?: typeof SINGLE_PICKER | typeof RANGE_PICKER | typeof ADVANCE_PICKER;
+    /**
+     * Specify the InputDatePicker placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Specify the InputDatePicker size.
+     */
+    size?: 'lg' | 'sm';
+    /**
+     * Specify whether the InputDatePicker should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Specify an `onChange` handler that is called whenever the InputDatePicker value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Specify the InputDatePicker value.
+     */
+    value?: Date | Date[];
+    /**
+     * Specify the InputDatePicker default value.
+     */
+    defaultValue?: Date | Date[];
+    /**
+     * Deprecated in v1.46.2. Use 'value' instead.
+     */
+    date?: Date | Date[];
+    /**
+     * Deprecated in v1.46.2. Use 'defaultValue' instead.
+     */
+    defaultDate?: Date | Date[];
+    /**
+     * Specify the 'advance' typed InputDatePicker custom view.
+     */
+    advanceView?: React.ReactNode;
+    /**
+     * Specify the picker popover placement.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * If true, the TimePicker component will be visible.
+     */
+    showTimePicker?: boolean;
+    /**
+     * Specify the minimum date.
+     */
+    minDate?: Date;
+    /**
+     * Specify the maximum date.
+     */
+    maxDate?: Date;
+    css?: CSS;
+}
+export declare function InputDatePicker({ type, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, }: InputDatePickerProps): JSX.Element;

package/components/datePicker/components/Calendar.d.ts

@@ -0,0 +1,24 @@
+import { RenderProps } from 'dayzed';
+import React from 'react';
+import { CSS } from '../../../config/stitches.config';
+export declare const DATE_PICKER = 0;
+export declare const MONTH_PICKER = 1;
+export declare const YEAR_PICKER = 2;
+export declare const YEAR_RANGE_PICKER = 3;
+export declare const TIME_PICKER = 4;
+export interface CalendarProps extends RenderProps {
+    advanceView?: React.ReactNode;
+    onCalendarDateChange: (date: Date) => void;
+    onIsMultiDateChange?: (isMultiDate: boolean) => void;
+    onUpdate?: () => void;
+    onCancel: () => void;
+    selected?: Date[];
+    containerStyle?: CSS;
+    disabled?: boolean;
+    showTimePicker?: boolean;
+    renderTimePicker?: () => React.ReactNode;
+    minDate?: Date;
+    maxDate?: Date;
+}
+declare const CalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, selected, containerStyle, disabled, showTimePicker, renderTimePicker, minDate, maxDate, }: CalendarProps) => JSX.Element | null;
+export default CalendarBox;

package/components/datePicker/components/DateNumber.d.ts

@@ -0,0 +1,102 @@
+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;
+}, {
+    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;
+    };
+}>>;
+export declare type DateNumberVariantProps = Stitches.VariantProps<typeof DateNumber>;
+export default DateNumber;

package/components/datePicker/components/MobileCalendar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CalendarProps } from './Calendar';
+declare const MobileCalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, selected, containerStyle, disabled, minDate, maxDate, }: CalendarProps) => JSX.Element | null;
+export default MobileCalendarBox;

package/components/datePicker/components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Calendar } from './Calendar';
+export * from './Calendar';
+export { default as MobileCalendar } from './MobileCalendar';
+export * from './MobileCalendar';
+export * from './DateNumber';

package/components/datePicker/index.d.ts

@@ -0,0 +1,5 @@
+export * from './InputDatePicker';
+export * from './DatePicker';
+export * from './AdvancedOption';
+export * from './state/reducer';
+export * from './timePicker';

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

@@ -0,0 +1,14 @@
+export declare const UPDATE_PICKER = "UPDATE";
+export declare const TODAY = "TODAY";
+export declare const YESTERDAY = "YESTERDAY";
+export declare const LAST_7_DAYS = "LAST_7_DAYS";
+export declare const LAST_WEEK = "LAST_WEEK";
+export declare const THIS_WEEK = "THIS_WEEK";
+export declare const LAST_MONTH = "LAST_MONTH";
+export declare const LAST_TWO_MONTHS = "LAST_TWO_MONTH";
+export declare const THIS_MONTH = "THIS_MONTH";
+export declare const advancePickerOptions: {
+    label: string;
+    value: string;
+}[];
+export declare function pickerReducer(state: any, action: any): any;

package/components/datePicker/timePicker/index.d.ts

@@ -0,0 +1,4 @@
+export { default as NativeTimePicker } from './TimePicker';
+export { default as InputTimePicker } from './InputTimePicker';
+export * from './TimePicker';
+export * from './InputTimePicker';

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

@@ -0,0 +1 @@
+export { InputRightElement, InputLeftElement } from './InputElement';

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

@@ -0,0 +1 @@
+export { InputGroup } from './InputGroup';

package/components/loadingBar/LoadingBar.d.ts

@@ -1,13 +1,43 @@
 import React from 'react';
 import type * as Stitches from '@stitches/react';
 interface LoadingBarProps {
+    /**
+     * To set the completion percentage.
+     */
     progress: number;
+    /**
+     * Additional description under progress.
+     */
     description?: string;
+    /**
+     * Additional styles css.
+     */
     css?: Stitches.CSS;
+    /**
+     * To only show loading bar only.
+     */
     showProgressOnly?: boolean;
-    show?: boolean;
+    /**
+     * To make the loading bar automatically display the static percentage.
+     */
     isAuto?: boolean;
+    /**
+     * To show and hide percentage when condition `isAuto`.
+     */
+    show?: boolean;
+    /**
+     * Event callback when percentage is 100% and condition `isAuto`.
+     */
     onCompleted?: React.ChangeEventHandler;
 }
-export default function LoadingBar(props: LoadingBarProps): JSX.Element;
-export {};
+declare function LoadingBar(props: LoadingBarProps): JSX.Element;
+declare namespace LoadingBar {
+    var defaultProps: {
+        showProgressOnly: boolean;
+        isAuto: boolean;
+        show: boolean;
+        progress: number;
+        description: string;
+    };
+}
+export default LoadingBar;

package/components/paragraph/index.d.ts

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

package/components/separator/index.d.ts

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

package/components/stepWizard/index.d.ts

@@ -4,6 +4,7 @@ declare type DataContents = {
     title: string;
     withTolltip?: boolean;
     tooltipsContents?: string;
+    hidden: boolean;
 };
 declare type Transitions = {
     enterRight?: string;
@@ -26,6 +27,7 @@ interface IStepWizardProps {
     setSw: () => void;
     cssContent: Stitches.CSS;
     scrollTop?: boolean;
+    forbidClickNav: boolean;
 }
 declare const StepWizard: (props: IStepWizardProps) => JSX.Element;
 export default StepWizard;

package/components/tableOfContent/index.d.ts

@@ -0,0 +1,57 @@
+import { MutableRefObject, ReactNode } from 'react';
+interface ScrollSpyProps {
+    /**
+     * Each direct child Element should contain an id.
+     */
+    children: ReactNode;
+    /**
+     * ref to your navigation container containing items with data-to-scrollspy-id attributes.
+     */
+    navContainerRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * If you want to spy only on a particular scrollable container (Element) then pass its ref to this prop.
+     */
+    parentScrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * In milliseconds to throttle the onscroll event. Lower the number, better the response time, higher the performance cost.
+     */
+    scrollThrottle?: number;
+    /**
+     * Executes this function whenever you scroll to a new ScrollSpy child Element, callback returns the id of that Element as well.
+     */
+    onUpdateCallback?: (id: string) => void;
+    /**
+     * Spy will be fired when it has been scrolled offsetTop beyond 50% to the top of the containing element.
+     */
+    offsetTop?: number;
+    /**
+     * Spy will be fired when it has been scrolled offsetBottom beyond 50% to the bottom of the containing element.
+     */
+    offsetBottom?: number;
+    /**
+     * To customize the string after data-.
+     */
+    useDataAttribute?: string;
+    /**
+     * To customize the class added when the Element in view.
+     */
+    activeClass?: string;
+    /**
+     * Set to false if you want your spy to be active only if more than50% of that div is in the viewport.
+     */
+    useBoxMethod?: boolean;
+}
+declare const TableOfContentPage: {
+    (props: ScrollSpyProps): JSX.Element;
+    defaultProps: {
+        scrollThrottle: number;
+        offsetTop: number;
+        offsetBottom: number;
+        useDataAttribute: string;
+        activeClass: string;
+        useBoxMethod: boolean;
+    };
+};
+export { default as TableOfContent } from './TableOfContent';
+export * from './TableOfContent';
+export { TableOfContentPage };

package/components/text/index.d.ts

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