@nulogy/components 14.8.2 → 15.0.1

package/dist/src/TimePicker/TimePickerOption.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type TimePickerOptionProps = React.ComponentProps<"li"> & {
-    variant?: ComponentVariant;
-    isSelected: boolean;
-    isFocused: boolean;
-    isClosest: boolean;
-};
-declare const TimePickerOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, TimePickerOptionProps>> & string;
-export default TimePickerOption;
+import React from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type TimePickerOptionProps = React.ComponentProps<"li"> & {
+    variant?: ComponentVariant;
+    isSelected: boolean;
+    isFocused: boolean;
+    isClosest: boolean;
+};
+declare const TimePickerOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, TimePickerOptionProps>> & string;
+export default TimePickerOption;

package/dist/src/TimePicker/TimePickerOption.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { variant } from "styled-system";
+const TimePickerOption = styled.li(({ theme, isSelected }) => ({
+    marginBottom: "0px",
+    backgroundColor: isSelected ? theme.colors.darkBlue : theme.colors.white,
+    color: isSelected ? theme.colors.white : theme.colors.black,
+    "&:hover": {
+        background: !isSelected && theme.colors.lightBlue,
+    },
+    padding: theme.space.x1,
+}), variant({
+    variants: {
+        touch: {
+            fontSize: "md",
+            lineHeight: "base",
+        },
+    },
+}), ({ isSelected, theme, isFocused, isClosest }) => {
+    if (isFocused || isClosest) {
+        return {
+            background: !isSelected && theme.colors.lightBlue,
+            outline: "none",
+        };
+    }
+});
+export default TimePickerOption;

package/dist/src/TimePicker/index.d.ts

@@ -1 +1 @@
-export { default as TimePicker } from "./TimePicker";
+export { default as TimePicker } from "./TimePicker";

package/dist/src/TimePicker/index.js

@@ -0,0 +1 @@
+export { default as TimePicker } from "./TimePicker";

package/dist/src/TimeRange/TimeRange.d.ts

@@ -1,24 +1,24 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    variant?: ComponentVariant;
-    timeFormat?: string;
-    onRangeChange?: Function;
-    onStartTimeChange?: Function;
-    onEndTimeChange?: Function;
-    ref?: React.MutableRefObject<unknown>;
-    errorMessage?: string;
-    defaultStartTime?: string;
-    defaultEndTime?: string;
-    disableRangeValidation?: boolean;
-    labelProps?: any;
-    minTime?: string;
-    maxTime?: string;
-    interval?: number;
-    startAriaLabel?: string;
-    endAriaLabel?: string;
-    endTimeProps?: any;
-    startTimeProps?: any;
-}, "ref"> & React.RefAttributes<unknown>>;
-export default TimeRange;
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    variant?: ComponentVariant;
+    timeFormat?: string;
+    onRangeChange?: Function;
+    onStartTimeChange?: Function;
+    onEndTimeChange?: Function;
+    ref?: React.MutableRefObject<unknown>;
+    errorMessage?: string;
+    defaultStartTime?: string;
+    defaultEndTime?: string;
+    disableRangeValidation?: boolean;
+    labelProps?: any;
+    minTime?: string;
+    maxTime?: string;
+    interval?: number;
+    startAriaLabel?: string;
+    endAriaLabel?: string;
+    endTimeProps?: any;
+    startTimeProps?: any;
+}, "ref"> & React.RefAttributes<unknown>>;
+export default TimeRange;

package/dist/src/TimeRange/TimeRange.js

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { TimePicker } from "../TimePicker";
+import { RangeContainer } from "../RangeContainer";
+import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { getDuration } from "./TimeRange.utils";
+const DEFAULT_LABEL = "Time Range";
+const TimeRange = forwardRef((_a, ref) => {
+    var { timeFormat, onRangeChange, onStartTimeChange, onEndTimeChange, errorMessage, defaultStartTime, defaultEndTime, minTime, maxTime, interval, startAriaLabel, endAriaLabel, endTimeProps, startTimeProps, variant, disableRangeValidation = false, labelProps = Object.assign(Object.assign({}, FieldLabelDefaultProps), { labelText: DEFAULT_LABEL }) } = _a, props = __rest(_a, ["timeFormat", "onRangeChange", "onStartTimeChange", "onEndTimeChange", "errorMessage", "defaultStartTime", "defaultEndTime", "minTime", "maxTime", "interval", "startAriaLabel", "endAriaLabel", "endTimeProps", "startTimeProps", "variant", "disableRangeValidation", "labelProps"]);
+    const [startTime, setStartTime] = useState();
+    const [endTime, setEndTime] = useState();
+    const [rangeError, setRangeError] = useState();
+    const inputRef1 = useRef();
+    const inputRef2 = useRef();
+    const { t } = useTranslation();
+    const componentVariant = useComponentVariant(variant);
+    useImperativeHandle(ref, () => ({
+        inputRef1: Object.assign(Object.assign({}, inputRef1), { focus: () => {
+                if (inputRef1.current) {
+                    // @ts-ignore
+                    inputRef1.current.focus();
+                }
+            } }),
+        inputRef2: Object.assign(Object.assign({}, inputRef2), { focus: () => {
+                if (inputRef2.current) {
+                    // @ts-ignore
+                    inputRef2.current.focus();
+                }
+            } }),
+    }));
+    useEffect(() => {
+        validateTimeRange();
+    }, [startTime, endTime]);
+    const changeStartTimeHandler = (label, value) => {
+        setStartTime(value);
+        if (onStartTimeChange) {
+            onStartTimeChange(label);
+        }
+    };
+    const changeEndTimeHandler = (label, value) => {
+        setEndTime(value);
+        if (onEndTimeChange) {
+            onEndTimeChange(label);
+        }
+    };
+    const validateTimeRange = () => {
+        let error;
+        const end = endTime || defaultEndTime;
+        const start = startTime || defaultStartTime;
+        if (start && end) {
+            const duration = getDuration(start, end);
+            if (duration < 0) {
+                error = "end time is before start time";
+            }
+        }
+        setRangeError(error);
+        if (onRangeChange) {
+            onRangeChange({
+                startTime,
+                endTime,
+                error,
+            });
+        }
+    };
+    const startInput = (React.createElement(TimePicker, Object.assign({ timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant }, startTimeProps)));
+    const endInput = (React.createElement(TimePicker, Object.assign({ timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant }, endTimeProps)));
+    return (React.createElement(RangeContainer, Object.assign({ labelProps: Object.assign(Object.assign({}, labelProps), { labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText }), startComponent: startInput, endComponent: endInput, errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage], variant: componentVariant }, props)));
+});
+export default TimeRange;

package/dist/src/TimeRange/TimeRange.story.d.ts

@@ -1,35 +1,35 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const DefaultSelections: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithRangeValidation: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithMinAndMaxTimeRange: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const DefaultSelections: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithRangeValidation: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithMinAndMaxTimeRange: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const UsingRefToControlFocus: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/TimeRange/TimeRange.story.js

@@ -0,0 +1,39 @@
+import React, { useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { Button, PrimaryButton } from "..";
+import TimeRange from "./TimeRange";
+export default {
+    title: "Components/TimeRange",
+};
+export const Default = () => (React.createElement(TimeRange, { p: "x3", onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+Default.story = {
+    name: "default",
+};
+export const DefaultSelections = () => (React.createElement(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "01:30 PM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+DefaultSelections.story = {
+    name: "default selections",
+};
+export const WithRangeValidation = () => (React.createElement(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "03:30 AM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+WithRangeValidation.story = {
+    name: "with range validation",
+};
+export const WithMinAndMaxTimeRange = () => (React.createElement(TimeRange, { onRangeChange: action("range changed"), minTime: "09:00", maxTime: "18:30", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
+WithMinAndMaxTimeRange.story = {
+    name: "with min and max time range",
+};
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.inputRef1.focus();
+    };
+    const handleClick2 = () => {
+        ref.current.inputRef2.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TimeRange, { onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed"), ref: ref }),
+        React.createElement(Button, { onClick: handleClick, ml: "x2" }, "Focus the First Input"),
+        React.createElement(PrimaryButton, { onClick: handleClick2, ml: "x2" }, "Focus the Second Input")));
+};
+UsingRefToControlFocus.story = {
+    name: "using ref to control focus",
+};

package/dist/src/TimeRange/TimeRange.utils.d.ts

@@ -1 +1 @@
-export declare const getDuration: (start: any, end: any) => number;
+export declare const getDuration: (start: any, end: any) => number;

package/dist/src/TimeRange/TimeRange.utils.js

@@ -0,0 +1,12 @@
+const convertTimeToMinutes = (time) => {
+    if (time) {
+        const timeArr = time.split(":").map(Number);
+        const hours = timeArr[0];
+        const minutes = timeArr[1];
+        return hours * 60 + minutes;
+    }
+    return null;
+};
+export const getDuration = (start, end) => {
+    return convertTimeToMinutes(end) - convertTimeToMinutes(start);
+};

package/dist/src/TimeRange/index.d.ts

@@ -1 +1 @@
-export { default as TimeRange } from "./TimeRange";
+export { default as TimeRange } from "./TimeRange";

package/dist/src/TimeRange/index.js

@@ -0,0 +1 @@
+export { default as TimeRange } from "./TimeRange";

package/dist/src/Toast/Toast.d.ts

@@ -1,36 +1,36 @@
-import React from "react";
-import { AlertProps } from "../Alert/Alert";
-type ToastProps = AlertProps & {
-    triggered?: boolean;
-    isCloseable?: boolean;
-    showDuration?: number;
-    onShow?: () => void;
-    onHide?: () => void;
-    onHidden?: () => void;
-};
-export declare const TOAST_SHOW_DURATION = 5000;
-export declare const toastAnimationConfig: {
-    initial: {
-        opacity: number;
-        y: number;
-    };
-    animate: {
-        opacity: number;
-        y: number;
-        transition: {
-            type: string;
-            bounce: number;
-            duration: number;
-        };
-    };
-    exit: {
-        y: number;
-        opacity: number;
-        transition: {
-            ease: string;
-            duration: number;
-        };
-    };
-};
-export declare const Toast: ({ triggered, isCloseable, showDuration, onHide, onShow, children, onHidden, zIndex, ...props }: ToastProps) => React.JSX.Element;
-export default Toast;
+import React from "react";
+import { AlertProps } from "../Alert/Alert";
+type ToastProps = AlertProps & {
+    triggered?: boolean;
+    isCloseable?: boolean;
+    showDuration?: number;
+    onShow?: () => void;
+    onHide?: () => void;
+    onHidden?: () => void;
+};
+export declare const TOAST_SHOW_DURATION = 5000;
+export declare const toastAnimationConfig: {
+    initial: {
+        opacity: number;
+        y: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+        transition: {
+            type: string;
+            bounce: number;
+            duration: number;
+        };
+    };
+    exit: {
+        y: number;
+        opacity: number;
+        transition: {
+            ease: string;
+            duration: number;
+        };
+    };
+};
+export declare const Toast: ({ triggered, isCloseable, showDuration, onHide, onShow, children, onHidden, zIndex, ...props }: ToastProps) => React.JSX.Element;
+export default Toast;

package/dist/src/Toast/Toast.js

@@ -0,0 +1,93 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useEffect } from "react";
+import { AnimatePresence } from "framer-motion";
+import Alert from "../Alert/Alert";
+import { AnimatedBox } from "../Box";
+export const TOAST_SHOW_DURATION = 5000; // in ms
+const ANIMATE_OUT_DURATION = 1000;
+export const toastAnimationConfig = {
+    initial: {
+        opacity: 0,
+        y: 50,
+    },
+    animate: {
+        opacity: 1,
+        y: -30,
+        transition: { type: "spring", bounce: 0.4, duration: 0.6 },
+    },
+    exit: {
+        y: 50,
+        opacity: 0,
+        transition: { ease: "easeOut", duration: 0.15 },
+    },
+};
+export const Toast = (_a) => {
+    var { triggered = false, isCloseable = false, showDuration = TOAST_SHOW_DURATION, onHide, onShow, children, onHidden, zIndex } = _a, props = __rest(_a, ["triggered", "isCloseable", "showDuration", "onHide", "onShow", "children", "onHidden", "zIndex"]);
+    const [visible, setVisible] = useState(triggered);
+    const [timeoutID, setTimeoutID] = useState(undefined);
+    const cancelHidingToast = () => {
+        clearTimeout(timeoutID);
+    };
+    const hideToast = (delay = TOAST_SHOW_DURATION) => {
+        cancelHidingToast();
+        let timeoutId;
+        timeoutId = window.setTimeout(() => {
+            setVisible(false);
+            if (onHide)
+                onHide();
+            timeoutId = window.setTimeout(() => {
+                if (onHidden)
+                    onHidden();
+            }, ANIMATE_OUT_DURATION);
+        }, delay);
+        setTimeoutID(timeoutId);
+    };
+    const triggerToast = () => {
+        setVisible(true);
+        if (onShow)
+            onShow();
+        if (!isCloseable)
+            hideToast(showDuration);
+    };
+    useEffect(() => {
+        if (triggered) {
+            triggerToast();
+        }
+        else {
+            setVisible(false);
+            if (onHide)
+                onHide();
+        }
+        return () => {
+            cancelHidingToast();
+        };
+    }, [triggered]);
+    const onMouseIn = () => {
+        if (!isCloseable) {
+            cancelHidingToast();
+        }
+    };
+    const onMouseOut = () => {
+        if (!isCloseable) {
+            hideToast(TOAST_SHOW_DURATION / 2);
+        }
+    };
+    const handleCloseButtonClick = () => {
+        hideToast(0);
+    };
+    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, Object.assign({ onMouseEnter: onMouseIn, 
+        /* @ts-ignore */
+        onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true }, toastAnimationConfig),
+        React.createElement(Alert, Object.assign({ minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true }, props), children)))));
+};
+export default Toast;

package/dist/src/Toast/Toast.story.d.ts

@@ -1,42 +1,42 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Toast: () => React.JSX.Element;
-export declare const _MultipleToastsExample: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const CustomizeLengthOfTimeToastIsVisible: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCloseButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithModal: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const CloseableWithMultiLineMessage: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const MultipleCloseableToastsExample: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Toast: () => React.JSX.Element;
+export declare const _MultipleToastsExample: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CustomizeLengthOfTimeToastIsVisible: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCloseButton: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithModal: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CloseableWithMultiLineMessage: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MultipleCloseableToastsExample: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};