@nulogy/components 15.0.0 → 15.1.0

package/dist/src/Textarea/Textarea.js

@@ -0,0 +1,30 @@
+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, { forwardRef } from "react";
+import propTypes from "@styled-system/prop-types";
+import { Field } from "../Form";
+import { MaybeFieldLabel } from "../FieldLabel";
+import { InlineValidation } from "../Validation";
+import { getSubset, omitSubset } from "../utils/subset";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import StyledTextarea from "./StyledTextarea";
+const Textarea = forwardRef((_a, ref) => {
+    var { disabled = false, required = false, rows = 3, errorMessage, errorList, error = !!(errorMessage || errorList), labelText, requirementText, helpText, id, className, isResizeable = true, variant } = _a, props = __rest(_a, ["disabled", "required", "rows", "errorMessage", "errorList", "error", "labelText", "requirementText", "helpText", "id", "className", "isResizeable", "variant"]);
+    const componentVariant = useComponentVariant(variant);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    return (React.createElement(Field, Object.assign({ className: className }, spaceProps),
+        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
+            React.createElement(StyledTextarea, Object.assign({ "aria-invalid": error, "aria-required": required, required: required, id: id, ref: ref, errorMessage: errorMessage, errorList: errorList, error: error, rows: rows, isResizeable: isResizeable, variant: componentVariant, disabled: disabled }, restProps))),
+        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+});
+export default Textarea;

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

@@ -1,14 +1,14 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Textarea: () => React.JSX.Element;
-export declare const TextareaWithAllProps: () => React.JSX.Element;
-export declare const SetToDisabled: () => React.JSX.Element;
-export declare const WithNoResizing: () => React.JSX.Element;
-export declare const WithErrorMessage: () => React.JSX.Element;
-export declare const WithErrorList: () => React.JSX.Element;
-export declare const WithCustomNumberOfRows: () => React.JSX.Element;
-export declare const WithCustomId: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Textarea: () => React.JSX.Element;
+export declare const TextareaWithAllProps: () => React.JSX.Element;
+export declare const SetToDisabled: () => React.JSX.Element;
+export declare const WithNoResizing: () => React.JSX.Element;
+export declare const WithErrorMessage: () => React.JSX.Element;
+export declare const WithErrorList: () => React.JSX.Element;
+export declare const WithCustomNumberOfRows: () => React.JSX.Element;
+export declare const WithCustomId: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: () => React.JSX.Element;

package/dist/src/Textarea/Textarea.story.js

@@ -0,0 +1,24 @@
+import React, { useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { Textarea, Button } from "../index";
+const errorList = ["Error message 1", "Error message 2"];
+export default {
+    title: "Components/Textarea",
+};
+export const _Textarea = () => (React.createElement(Textarea, { labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
+export const TextareaWithAllProps = () => (React.createElement(Textarea, { labelText: "Label", placeholder: "Placeholder", helpText: "here's some help...", requirementText: "(Required)", required: true, onChange: action("value changed"), onBlur: action("blurred") }));
+export const SetToDisabled = () => React.createElement(Textarea, { labelText: "Label", disabled: true, value: "Disabled" });
+export const WithNoResizing = () => (React.createElement(Textarea, { labelText: "Label", value: "I shouldn't be able to be resized", isResizeable: false }));
+export const WithErrorMessage = () => (React.createElement(Textarea, { labelText: "Label", errorMessage: "Please fill this out", onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithErrorList = () => (React.createElement(Textarea, { labelText: "Label", errorMessage: "Please fill this out", errorList: errorList, onChange: action("value changed") }));
+export const WithCustomNumberOfRows = () => (React.createElement(Textarea, { labelText: "Label", rows: 7, onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithCustomId = () => (React.createElement(Textarea, { id: "my-custom-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Textarea, { ref: ref, labelText: "Label", rows: 7, onChange: action("value changed"), onBlur: action("blurred") }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+};

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

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

package/dist/src/Textarea/index.js

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

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

@@ -1,42 +1,42 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type TimePickerProps = SpaceProps & {
-    variant?: ComponentVariant;
-    disabled?: boolean;
-    value?: string;
-    timeFormat?: string;
-    interval?: number;
-    placeholder?: string;
-    className?: string;
-    onChange?: (...args: any[]) => any;
-    onInputChange?: (...args: any[]) => any;
-    minTime?: string;
-    maxTime?: string;
-    defaultValue?: string;
-    "aria-label"?: string;
-    errorMessage?: string;
-    errorList?: React.ReactNode;
-    labelText?: string;
-    ref?: any;
-    onBlur?: (...args: any[]) => any;
-    onFocus?: (...args: any[]) => any;
-    onClick?: (...args: any[]) => any;
-};
-export declare const convertTo24HourTimeArray: (timeInput: any) => any;
-export declare const getBestMatchTime: ({ time, timeFormat, minTime, maxTime, locale }: {
-    time: any;
-    timeFormat: any;
-    minTime: any;
-    maxTime: any;
-    locale: any;
-}) => {
-    value: string;
-    label: string;
-};
-export declare const getTimeOptions: (interval: any, timeFormat: any, minTime: any, maxTime: any, locale: any) => {
-    value: string;
-    label: string;
-}[];
-declare const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>>;
-export default TimePicker;
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type TimePickerProps = SpaceProps & {
+    variant?: ComponentVariant;
+    disabled?: boolean;
+    value?: string;
+    timeFormat?: string;
+    interval?: number;
+    placeholder?: string;
+    className?: string;
+    onChange?: (...args: any[]) => any;
+    onInputChange?: (...args: any[]) => any;
+    minTime?: string;
+    maxTime?: string;
+    defaultValue?: string;
+    "aria-label"?: string;
+    errorMessage?: string;
+    errorList?: React.ReactNode;
+    labelText?: string;
+    ref?: any;
+    onBlur?: (...args: any[]) => any;
+    onFocus?: (...args: any[]) => any;
+    onClick?: (...args: any[]) => any;
+};
+export declare const convertTo24HourTimeArray: (timeInput: any) => any;
+export declare const getBestMatchTime: ({ time, timeFormat, minTime, maxTime, locale }: {
+    time: any;
+    timeFormat: any;
+    minTime: any;
+    maxTime: any;
+    locale: any;
+}) => {
+    value: string;
+    label: string;
+};
+export declare const getTimeOptions: (interval: any, timeFormat: any, minTime: any, maxTime: any, locale: any) => {
+    value: string;
+    label: string;
+}[];
+declare const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>>;
+export default TimePicker;

package/dist/src/TimePicker/TimePicker.js

@@ -0,0 +1,231 @@
+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;
+};
+// @ts-nocheck
+import React, { useState, useContext, useEffect, forwardRef, useRef, useCallback } from "react";
+import { setMinutes } from "date-fns";
+import debounce from "debounce";
+import { useTranslation } from "react-i18next";
+import { InlineValidation } from "../Validation";
+import { LocaleContext } from "../NDSProvider/LocaleContext";
+import { localizedFormat } from "../utils/localized-date-fns";
+import { DetectOutsideClick } from "../utils";
+import { Box } from "../Box";
+import { keyCodes } from "../constants";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import TimePickerOption from "./TimePickerOption";
+import TimePickerDropdown from "./TimePickerDropdown";
+import TimePickerInput from "./TimePickerInput";
+const DEFAULT_TIME_FORMAT = "h:mm aa";
+const DEFAULT_PLACEHOLDER = "HH:MM";
+const MILITARY_TIME_FORMAT = "HH:mm";
+const ZERO_DATE = new Date(Date.UTC(0));
+const stripLetters = (x) => Number(x.replace(/\D/g, ""));
+const stripLettersFromMinutes = (x) => {
+    let minNoLetters = String(x).replace(/\D/g, "");
+    if (minNoLetters.length < 2) {
+        minNoLetters = `${minNoLetters}0`;
+    }
+    return Number(minNoLetters);
+};
+const standardizeTime = (input) => {
+    if (input) {
+        const standardizedInput = input.toUpperCase().replace(/ /g, ""); // strip spaces
+        return standardizedInput;
+    }
+    return input;
+};
+export const convertTo24HourTimeArray = (timeInput) => {
+    const time = standardizeTime(timeInput);
+    const timeArray = time.includes(":") ? time.split(":") : [time, 0];
+    timeArray[0] = stripLetters(timeArray[0]);
+    timeArray[1] = stripLettersFromMinutes(timeArray[1]);
+    if (time.includes("A") && timeArray[0] === 12) {
+        return [0, timeArray[1]];
+    }
+    if (time.includes("P")) {
+        return [(timeArray[0] += 12), timeArray[1]];
+    }
+    return timeArray;
+};
+const getIntervalFromTime = (time, interval, minTime) => {
+    const minInterval = minTime ? getIntervalFromTime(minTime, interval) : 0;
+    if (time && interval) {
+        const timeArray = convertTo24HourTimeArray(time);
+        const hours = timeArray[0];
+        const minutes = timeArray[1];
+        const getInterval = (h, m) => Math.round((h * 60) / interval + m / interval);
+        const currentTimeInterval = getInterval(hours, minutes);
+        const nearestInterval = currentTimeInterval >= minInterval
+            ? currentTimeInterval - minInterval
+            : getInterval(hours + 12, minutes) - minInterval;
+        return nearestInterval;
+    }
+    return 0;
+};
+export const getBestMatchTime = ({ time, timeFormat, minTime, maxTime, locale }) => {
+    return getTimeOptions(1, timeFormat, minTime, maxTime, locale)[getIntervalFromTime(time, 1, minTime)];
+};
+const getTimeIntervals = (interval) => {
+    const numberOfOptions = (24 * 60) / interval;
+    const times = [];
+    for (let i = 0; i < numberOfOptions; i += 1) {
+        times.push(setMinutes(ZERO_DATE, interval * i));
+    }
+    return times;
+};
+export const getTimeOptions = (interval, timeFormat, minTime, maxTime, locale) => {
+    const allTimes = getTimeIntervals(interval);
+    let startingInterval = 0;
+    let finalInterval = allTimes.length;
+    if (minTime) {
+        startingInterval = getIntervalFromTime(minTime, interval);
+    }
+    if (maxTime) {
+        finalInterval = getIntervalFromTime(maxTime, interval) + 1;
+    }
+    return allTimes
+        .map((date) => ({
+        value: localizedFormat(date, MILITARY_TIME_FORMAT, locale),
+        label: localizedFormat(date, timeFormat, locale),
+    }))
+        .sort((a, b) => getIntervalFromTime(a.value, interval) - getIntervalFromTime(b.value, interval))
+        .slice(startingInterval, finalInterval);
+};
+const TimePicker = forwardRef((_a, inputRef) => {
+    var { timeFormat, interval, className, minTime, maxTime, defaultValue, onInputChange, onBlur, onFocus, errorMessage, errorList, labelText, placeholder, onClick, onChange, "aria-label": ariaLabel, value, error, disabled, variant } = _a, props = __rest(_a, ["timeFormat", "interval", "className", "minTime", "maxTime", "defaultValue", "onInputChange", "onBlur", "onFocus", "errorMessage", "errorList", "labelText", "placeholder", "onClick", "onChange", "aria-label", "value", "error", "disabled", "variant"]);
+    const [input, setInput] = useState(defaultValue ? defaultValue : "");
+    const [currentOptionRef, setCurrentOptionRef] = useState(null);
+    const [dropdownIsOpen, setDropdownIsOpen] = useState(false);
+    const { locale } = useContext(LocaleContext);
+    const [ref, setRef] = useState(null);
+    const dropdownRef = useRef(null);
+    const { t } = useTranslation();
+    const componentVariant = useComponentVariant(variant);
+    const scrollToSelection = useCallback(debounce((currentOption, dropdown) => {
+        const currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);
+        if (currentIndex > 2) {
+            dropdown.current.scrollTop = (currentIndex - 2) * currentOption.scrollHeight;
+        }
+        else {
+            dropdown.current.scrollTop = 0;
+        }
+    }, 200), []);
+    useEffect(() => {
+        if (currentOptionRef && dropdownIsOpen) {
+            scrollToSelection(currentOptionRef, dropdownRef);
+        }
+    }, [currentOptionRef, dropdownIsOpen, input]);
+    const matchingIndex = getIntervalFromTime(input, interval, minTime);
+    const getDropdownOptions = () => {
+        const optionsAtInterval = getTimeOptions(interval, timeFormat, minTime, maxTime, locale) || [];
+        return optionsAtInterval;
+    };
+    const dropdownOptions = getDropdownOptions() || [];
+    const hasError = !!(errorMessage || errorList || error);
+    const handleOptionSelection = (option, showDropdown = false) => {
+        if (option && option.label && option.value) {
+            setInput(option.label);
+            onChange(option.label, option.value);
+        }
+        setDropdownIsOpen(showDropdown);
+    };
+    const handleBlur = (e) => {
+        if (input) {
+            const option = getBestMatchTime({
+                time: input,
+                timeFormat,
+                minTime,
+                maxTime,
+                locale,
+            });
+            handleOptionSelection(option);
+        }
+        setDropdownIsOpen(false);
+        onBlur(e);
+    };
+    const handleFocus = (e) => {
+        onFocus(e);
+    };
+    const handleClickInput = (e) => {
+        onClick(e);
+        setDropdownIsOpen(true);
+    };
+    const onCurrentOptionRefChange = React.useCallback((node) => {
+        if (node) {
+            setCurrentOptionRef(node);
+        }
+    }, []);
+    const onRefChange = React.useCallback((node) => {
+        if (node) {
+            setRef(node);
+        }
+    }, []);
+    const handleKeyDown = (event) => {
+        if (event.keyCode === keyCodes.DOWN) {
+            setInput(dropdownOptions[matchingIndex] ? dropdownOptions[matchingIndex].label : null);
+            if (input) {
+                setInput(dropdownOptions[matchingIndex + 1] ? dropdownOptions[matchingIndex + 1].label : null);
+            }
+            setDropdownIsOpen(true);
+        }
+        if (event.keyCode === keyCodes.UP) {
+            setInput(dropdownOptions[matchingIndex - 1] ? dropdownOptions[matchingIndex - 1].label : null);
+        }
+        if (event.keyCode === keyCodes.TAB) {
+            handleBlur(event);
+        }
+        if (event.keyCode === keyCodes.RETURN) {
+            setInput(dropdownOptions[matchingIndex] ? dropdownOptions[matchingIndex].label : null);
+        }
+    };
+    const handleInputChange = (e) => {
+        const inputValue = e.currentTarget.value;
+        setInput(inputValue);
+        if (onInputChange) {
+            onInputChange(inputValue);
+        }
+    };
+    const displayValue = value ? value : input || "";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, Object.assign({ className: `nds-time-picker ${className || ""}`, position: "relative", ref: onRefChange, width: componentVariant === "touch" ? "208px" : "130px", "data-testid": "select-container" }, props),
+            React.createElement(TimePickerInput, { labelText: labelText, error: hasError, dropdownIsOpen: dropdownIsOpen, onChange: handleInputChange, onFocus: handleFocus, value: displayValue, placeholder: placeholder, iconRight: "queryBuilder", onClick: handleClickInput, onKeyDown: (e) => handleKeyDown(e), "aria-label": ariaLabel || t("Select a time"), inputWidth: componentVariant === "touch" ? "208px" : "130px", iconRightSize: "x2", "data-testid": "select-input", type: "text", ref: inputRef, disabled: disabled, autoComplete: "off", variant: componentVariant }),
+            React.createElement(TimePickerDropdown, { isOpen: dropdownIsOpen, "aria-expanded": dropdownIsOpen, role: "listbox", "data-testid": "select-dropdown", ref: dropdownRef }, dropdownOptions.map((option, i) => {
+                const isClosest = matchingIndex === i;
+                const isSelected = standardizeTime(option.label) === standardizeTime(input);
+                const closestTestId = isClosest ? "closest-select-option" : "";
+                const selectedTestId = isSelected ? "selected-select-option" : "";
+                return (React.createElement(TimePickerOption, { ref: isClosest ? onCurrentOptionRefChange : undefined, isSelected: isSelected, isClosest: isClosest, key: option.label, "data-name": option.label, "data-value": option.value, onClick: () => {
+                        handleOptionSelection(option);
+                    }, role: "option", "data-testid": `select-option ${closestTestId} ${selectedTestId}`, variant: componentVariant }, option.label));
+            })),
+            React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })),
+        React.createElement(DetectOutsideClick, { onClick: handleBlur, clickRef: [ref] })));
+});
+TimePicker.defaultProps = {
+    timeFormat: DEFAULT_TIME_FORMAT,
+    interval: 15,
+    placeholder: DEFAULT_PLACEHOLDER,
+    className: undefined,
+    onChange: undefined,
+    onInputChange: undefined,
+    minTime: undefined,
+    maxTime: undefined,
+    defaultValue: "",
+    "aria-label": undefined,
+    errorMessage: undefined,
+    errorList: undefined,
+    labelText: undefined,
+    onClick: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+};
+export default TimePicker;

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

@@ -1,65 +1,65 @@
-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 WithCustomTimeFormat: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomTimeInterval: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomPlaceholder: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const disabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorState: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithMinAndMaxTime: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomDefault: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithValue: {
-    (): 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 WithCustomTimeFormat: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomTimeInterval: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomPlaceholder: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const disabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorState: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithMinAndMaxTime: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomDefault: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithValue: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const UsingRefToControlFocus: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/TimePicker/TimePicker.story.js

@@ -0,0 +1,58 @@
+import React, { useState, useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { TimePicker, Button } from "../index";
+export default {
+    title: "Components/TimePicker",
+};
+export const Default = () => (React.createElement(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" }));
+Default.story = {
+    name: "default",
+};
+export const WithCustomTimeFormat = () => (React.createElement(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
+WithCustomTimeFormat.story = {
+    name: "with custom time format",
+};
+export const WithCustomTimeInterval = () => (React.createElement(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
+WithCustomTimeInterval.story = {
+    name: "with custom time interval",
+};
+export const WithCustomPlaceholder = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" }));
+WithCustomPlaceholder.story = {
+    name: "with custom placeholder",
+};
+export const disabled = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true }));
+disabled.story = {
+    name: "disabled",
+};
+export const WithErrorState = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" }));
+WithErrorState.story = {
+    name: "with error state",
+};
+export const WithMinAndMaxTime = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" }));
+WithMinAndMaxTime.story = {
+    name: "with min and max time",
+};
+export const WithCustomDefault = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" }));
+WithCustomDefault.story = {
+    name: "with custom default",
+};
+const ControlledTimePicker = () => {
+    const [value, setValue] = useState("13:43");
+    return React.createElement(TimePicker, { onChange: setValue, onInputChange: setValue, labelText: "End Time", value: value });
+};
+export const WithValue = () => React.createElement(ControlledTimePicker, null);
+WithValue.story = {
+    name: "with value",
+};
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+};
+UsingRefToControlFocus.story = {
+    name: "using ref to control focus",
+};

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const TimePickerDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export default TimePickerDropdown;
+/// <reference types="react" />
+declare const TimePickerDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export default TimePickerDropdown;

package/dist/src/TimePicker/TimePickerDropdown.js

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import styled from "styled-components";
+const TimePickerDropdown = styled.ul(({ theme, isOpen }) => {
+    return {
+        position: "absolute",
+        width: "100%",
+        background: theme.colors.white,
+        listStyle: "none",
+        margin: "0px",
+        padding: "0px",
+        maxHeight: "200px",
+        overflow: "auto",
+        boxShadow: theme.shadows.focus,
+        border: "1px solid",
+        borderColor: theme.colors.blue,
+        borderBottomLeftRadius: theme.radii.medium,
+        borderBottomRightRadius: theme.radii.medium,
+        display: isOpen ? "block" : "none",
+        zIndex: theme.zIndices.content,
+        scrollBehavior: "smooth",
+    };
+});
+export default TimePickerDropdown;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { InputFieldProps } from "../Input/InputField";
-type TimePickerInputProps = InputFieldProps & {
-    dropdownIsOpen: boolean;
-};
-declare const TimePickerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, TimePickerInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
-export default TimePickerInput;
+/// <reference types="react" />
+import { InputFieldProps } from "../Input/InputField";
+type TimePickerInputProps = InputFieldProps & {
+    dropdownIsOpen: boolean;
+};
+declare const TimePickerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, TimePickerInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+export default TimePickerInput;

package/dist/src/TimePicker/TimePickerInput.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { InputField } from "../Input/InputField";
+const TimePickerInput = styled(InputField)(({ dropdownIsOpen }) => (Object.assign({}, (dropdownIsOpen && {
+    borderBottomLeftRadius: "0px",
+    borderBottomRightRadius: "0px",
+}))));
+export default TimePickerInput;