@televet/kibble-ui 1.18.0 → 1.19.0

package/build/components/Forms/TimePicker/components/ScrollContainer.d.ts

@@ -0,0 +1,4 @@
+declare const ScrollContainer: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default ScrollContainer;

package/build/components/Forms/TimePicker/components/TimeOption.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+interface TimeOptionProps {
+    value: string;
+    innerRef?: MutableRefObject<HTMLDivElement | null> | null;
+    isSelected: boolean;
+    handleClick: (selectedValue: string) => void;
+}
+declare const TimeOption: ({ value, innerRef, isSelected, handleClick }: TimeOptionProps) => JSX.Element;
+export default TimeOption;

package/build/components/Forms/TimePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './timePicker.component';
+export * from './timePicker.types';
+export * from '../TimeRange/timeRange.component';

package/build/components/Forms/TimePicker/timePicker.argTypes.d.ts

@@ -0,0 +1,82 @@
+export declare const timePickerArgTypes: {
+    initialTime: {
+        defaultValue: Date;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: null;
+        };
+        type: {
+            name: string;
+        };
+    };
+    minuteInterval: {
+        defaultValue: number;
+        description: string;
+        control: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: number;
+        };
+        type: {
+            name: string;
+        };
+    };
+    placement: {
+        description: string;
+        options: import("@chakra-ui/popper/dist/declarations/src/popper.placement").PlacementWithLogical[];
+        control: {
+            type: string;
+        };
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    onTimeChange: {
+        description: string;
+        action: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    inputProps: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            summary: {
+                variant: string;
+                size: string;
+            };
+        };
+    };
+    onChange: any;
+    size: any;
+    label: any;
+    helperText: any;
+    helperTextAlignment: any;
+    errorText: any;
+    isDisabled: any;
+    isInvalid: any;
+    useInvalidIcon: any;
+    useInvalidText: any;
+    useInvalidBorder: any;
+    invalidIconColor: any;
+    isReadOnly: any;
+    isRequired: any;
+    autoFocus: any;
+    labelStyle: any;
+    formControlStyle: any;
+};

package/build/components/Forms/TimePicker/timePicker.component.d.ts

@@ -0,0 +1,10 @@
+import { PlacementWithLogical } from '@chakra-ui/react';
+import { TextInputProps } from '../TextInput';
+export interface TimePickerProps {
+    initialTime: Date;
+    minuteInterval?: number;
+    inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;
+    placement?: PlacementWithLogical;
+    onTimeChange?: (time: Date) => void;
+}
+export declare const TimePicker: ({ initialTime, minuteInterval, inputProps, placement, onTimeChange, }: TimePickerProps) => JSX.Element;

package/build/components/Forms/TimePicker/timePicker.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum Meridiem {
+    AM = "AM",
+    PM = "PM"
+}

package/build/components/Forms/TimeRange/index.d.ts

@@ -0,0 +1 @@
+export * from './timeRange.component';

package/build/components/Forms/TimeRange/timeRange.argTypes.d.ts

@@ -0,0 +1,38 @@
+export declare const timeRangeArgTypes: {
+    startTimePickerProps: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            summary: {
+                variant: string;
+                size: string;
+            };
+        };
+    };
+    endTimePickerProps: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            summary: {
+                variant: string;
+                size: string;
+            };
+        };
+    };
+    dashContainerProps: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            summary: {
+                variant: string;
+                size: string;
+            };
+        };
+    };
+};

package/build/components/Forms/TimeRange/timeRange.component.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@chakra-ui/react';
+import { TimePickerProps } from '../TimePicker/timePicker.component';
+export interface TimeRangeProps {
+    startTimePickerProps: TimePickerProps;
+    endTimePickerProps: TimePickerProps;
+    dashContainerProps?: BoxProps;
+}
+export declare const TimeRange: ({ startTimePickerProps, endTimePickerProps, dashContainerProps, }: TimeRangeProps) => JSX.Element;

package/build/components/Forms/index.d.ts

@@ -8,3 +8,4 @@ export * from './Select';
 export * from './Switch';
 export * from './DatePicker';
 export * from './FormControl';
+export * from './TimePicker';

package/build/components/Overlay/Menu/components/MenuItem/menuItem.component.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, MutableRefObject, KeyboardEvent } from 'react';
+import { ReactNode, MutableRefObject, KeyboardEvent, ReactElement } from 'react';
 import { TextColor } from 'components/Typography';
 export interface MenuItemProps {
     canSelectAll?: boolean;

package/build/components/Overlay/Popover/popover.component.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PopoverProps as ChakraPopoverProps } from '@chakra-ui/react';
+import { PopoverProps as ChakraPopoverProps, PopoverContentProps } from '@chakra-ui/react';
 import { PopoverSize } from './popover.types';
 import { Token } from '@chakra-ui/styled-system/dist/declarations/src/utils';
 import * as CSS from 'csstype';
@@ -10,5 +10,6 @@ export interface PopoverProps extends ChakraPopoverProps {
     allowEscape?: boolean;
     size?: PopoverSize;
     shadow?: Token<CSS.Property.BoxShadow | number, 'shadows'>;
+    contentProps?: PopoverContentProps;
 }
-export declare const Popover: ({ children, popoverTrigger, darkMode, allowEscape, size, shadow, ...rest }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ children, popoverTrigger, darkMode, allowEscape, size, shadow, contentProps, ...rest }: PopoverProps) => JSX.Element;

package/build/index.js

@@ -7208,7 +7208,7 @@ function withFormControl(Component) {
         var labelColor = useAdaptiveColorMap(colors.text, 'default');
         return (React__default["default"].createElement(react.FormControl, __assign({}, formControlStyle, { isInvalid: isInvalid, isRequired: isRequired, isReadOnly: isReadOnly, isDisabled: isDisabled }),
             label && (React__default["default"].createElement(react.FormLabel, __assign({ display: isFieldInline ? 'inline-block' : 'block', color: labelColor, fontSize: fontSizes[size] }, labelStyle), label)),
-            React__default["default"].createElement(react.Flex, { align: "center", gap: 2 },
+            React__default["default"].createElement(react.Flex, { align: "center", gap: 2, display: isFieldInline ? 'inline-block' : 'block' },
                 React__default["default"].createElement(Component, __assign({ size: size }, props, { isFieldInline: isFieldInline, errorBorderColor: useInvalidBorder ? colors.border.light.error : colors.border.light.default, focusBorderColor: colors.border.light.focus })),
                 useInvalidIcon && isInvalid && React__default["default"].createElement(Icon, { name: "warningSign", color: invalidIconColor || 'error', size: size })),
             shouldShowBottomContent && (React__default["default"].createElement(react.Flex, { mt: 2, w: "100%", justifyContent: alignment, alignItems: "center" },
@@ -8188,14 +8188,15 @@ var ModalFooterButtons = function (_a) {
 };
 
 var Popover = function (_a) {
-    var children = _a.children, popoverTrigger = _a.popoverTrigger, darkMode = _a.darkMode, _b = _a.allowEscape, allowEscape = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.shadow, shadow = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow"]);
+    var children = _a.children, popoverTrigger = _a.popoverTrigger, darkMode = _a.darkMode, _b = _a.allowEscape, allowEscape = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.shadow, shadow = _d === void 0 ? 'md' : _d, contentProps = _a.contentProps, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow", "contentProps"]);
     var _e = useTheme(), colors = _e.colors, components = _e.components;
     var width = components.Popover[size].width;
     var adaptiveBackground = useAdaptiveColor(colors.background);
     var bg = !darkMode ? adaptiveBackground : colors.background.dark;
+    var borderColor = !darkMode ? colors.border.light.default : colors.background.dark;
     return (React__default["default"].createElement(react.Popover, __assign({}, rest, { closeOnBlur: allowEscape, closeOnEsc: allowEscape }),
         React__default["default"].createElement(react.PopoverTrigger, null, popoverTrigger),
-        withDarkMode$1(React__default["default"].createElement(react.PopoverContent, { width: width, bg: bg, shadow: shadow },
+        withDarkMode$1(React__default["default"].createElement(react.PopoverContent, __assign({ width: width, bg: bg, borderColor: borderColor, shadow: shadow }, contentProps),
             React__default["default"].createElement(react.PopoverArrow, { bg: bg }),
             React__default["default"].createElement(Text, { size: "sm" }, children)), !!darkMode)));
 };
@@ -18755,6 +18756,159 @@ var DatePicker = function (_a) {
                     React__default["default"].createElement(react.Grid, { gap: "0 64px", templateColumns: "repeat(".concat(activeMonths.length, ")") }, activeMonths.map(function (month) { return (React__default["default"].createElement(Month, { key: "".concat(month.year, "-").concat(month.month), year: month.year, month: month.month, firstDayOfWeek: firstDayOfWeek, onDaySelected: function () { return onClose(); } })); })))))));
 };
 
+var ScrollContainer = function (_a) {
+    var props = __rest(_a, []);
+    return (React__default["default"].createElement(react.Flex, { direction: "column", gap: 1, overflowY: "auto", sx: {
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+        } }, props.children));
+};
+
+var TimeOption = function (_a) {
+    var value = _a.value, innerRef = _a.innerRef, isSelected = _a.isSelected, handleClick = _a.handleClick;
+    var onClick = React.useCallback(function (event) {
+        var selectedValue = event.currentTarget.textContent || '';
+        handleClick(selectedValue);
+    }, [handleClick]);
+    return (React__default["default"].createElement(react.Box, { ref: innerRef, onClick: onClick, background: isSelected ? colors$1.background.brand : colors$1.white, color: isSelected ? colors$1.text.dark.default : colors$1.text.light.subtle, fontSize: fontSizes.sm, textAlign: "center", px: 3, py: 1, w: "100%", borderRadius: radii$1.md, cursor: "pointer", _hover: {
+            background: isSelected ? colors$1.background.brand : colors$1.background.hover,
+        } }, value));
+};
+
+exports.Meridiem = void 0;
+(function (Meridiem) {
+    Meridiem["AM"] = "AM";
+    Meridiem["PM"] = "PM";
+})(exports.Meridiem || (exports.Meridiem = {}));
+
+var useIconTextSizeMap = function (textSize) {
+    switch (textSize) {
+        case 'xs':
+            return 'xs';
+        case 'sm':
+            return 'sm';
+        case 'md':
+            return 'md';
+        case 'lg':
+        case 'xl':
+        case '2xl':
+        case '3xl':
+        case '4xl':
+            return 'lg';
+        case '5xl':
+        case '6xl':
+            return '2xl';
+    }
+};
+
+var TimePicker = function (_a) {
+    var initialTime = _a.initialTime, _b = _a.minuteInterval, minuteInterval = _b === void 0 ? 5 : _b, inputProps = _a.inputProps, placement = _a.placement, onTimeChange = _a.onTimeChange;
+    var _c = react.useDisclosure(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
+    var localTime = React.useMemo(function () { return new Date(initialTime); }, [initialTime]);
+    // selectedTime should always be UTC
+    var _d = __read(React.useState(initialTime), 2), selectedTime = _d[0], setSelectedTime = _d[1];
+    var initialSelectedHour = React.useMemo(function () {
+        var hours = localTime.getHours();
+        var adjustedHours = hours;
+        if (hours > 12) {
+            adjustedHours = hours - 12;
+        }
+        if (hours === 0) {
+            adjustedHours = 12;
+        }
+        return adjustedHours.toString();
+    }, [localTime]);
+    // convert to local time for display
+    var _e = __read(React.useState(initialSelectedHour), 2), selectedHour = _e[0], setSelectedHour = _e[1];
+    var _f = __read(React.useState(localTime.getMinutes().toString()), 2), selectedMinute = _f[0], setSelectedMinute = _f[1];
+    var _g = __read(React.useState(localTime.getHours() > 11 ? exports.Meridiem.PM : exports.Meridiem.AM), 2), selectedMeridiem = _g[0], setSelectedMeridiem = _g[1];
+    var hourRef = React.useRef(null);
+    var minuteRef = React.useRef(null);
+    React.useEffect(function () {
+        if (isOpen) {
+            if (hourRef.current) {
+                hourRef.current.scrollIntoView();
+            }
+            if (minuteRef.current) {
+                minuteRef.current.scrollIntoView();
+            }
+        }
+    }, [isOpen]);
+    var formattedTime = React.useMemo(function () {
+        return format(selectedTime, 'h:mm aa');
+    }, [selectedTime]);
+    var formatNumber = function (number) {
+        var formattedValue = number.toString();
+        if (formattedValue.length === 1) {
+            return "0".concat(formattedValue);
+        }
+        return formattedValue;
+    };
+    var hourOptions = React.useMemo(function () {
+        return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (hour) { return hour.toString(); });
+    }, []);
+    var minuteOptions = React.useMemo(function () {
+        var minutes = [];
+        for (var i = 0; i < 60; i += minuteInterval) {
+            minutes.push(i);
+        }
+        return minutes.map(formatNumber);
+    }, [minuteInterval]);
+    var meridiemOptions = [exports.Meridiem.AM, exports.Meridiem.PM];
+    var handleTimeChange = React.useCallback(function (hour, minute, meridiem) {
+        var meridiemAdjustment = 0;
+        // set 1-11pm to 13-23. Don't set 12pm to 24
+        if (meridiem === exports.Meridiem.PM && Number(hour) < 12) {
+            meridiemAdjustment = 12;
+        }
+        // set 12am to 00
+        if (meridiem === exports.Meridiem.AM && Number(hour) === 12) {
+            meridiemAdjustment = -12;
+        }
+        var hours = Number(hour) + meridiemAdjustment;
+        var time = new Date().setHours(hours, Number(minute), 0, 0);
+        var date = new Date(time);
+        setSelectedTime(date);
+        if (onTimeChange) {
+            onTimeChange(date);
+        }
+    }, [onTimeChange]);
+    var handleHourClick = React.useCallback(function (value) {
+        setSelectedHour(value);
+        handleTimeChange(value, selectedMinute, selectedMeridiem);
+    }, [handleTimeChange, selectedMeridiem, selectedMinute]);
+    var handleMinuteClick = React.useCallback(function (value) {
+        setSelectedMinute(value);
+        handleTimeChange(selectedHour, value, selectedMeridiem);
+    }, [handleTimeChange, selectedHour, selectedMeridiem]);
+    var handleMeridiemClick = React.useCallback(function (value) {
+        setSelectedMeridiem(value);
+        handleTimeChange(selectedHour, selectedMinute, value);
+    }, [handleTimeChange, selectedHour, selectedMinute]);
+    return (React__default["default"].createElement(Popover, { isOpen: isOpen, onOpen: onOpen, onClose: onClose, placement: placement, contentProps: { width: 'max-content' }, popoverTrigger: React__default["default"].createElement(react.Box, null,
+            React__default["default"].createElement(WrappedTextInput, __assign({ rightElement: React__default["default"].createElement(Icon, { size: useIconTextSizeMap((inputProps === null || inputProps === void 0 ? void 0 : inputProps.size) || 'md'), name: "clock" }), value: formattedTime, isReadOnly: true, cursor: 'pointer' }, inputProps))) },
+        React__default["default"].createElement(react.PopoverBody, { p: 3 },
+            React__default["default"].createElement(react.Flex, { height: "186px", gap: 1.5, overflow: "hidden" },
+                React__default["default"].createElement(ScrollContainer, null, hourOptions.map(function (hour) {
+                    return (React__default["default"].createElement(TimeOption, { key: "hour-option-".concat(hour), innerRef: hour === selectedHour ? hourRef : null, value: hour, isSelected: hour === selectedHour, handleClick: handleHourClick }));
+                })),
+                React__default["default"].createElement(ScrollContainer, null, minuteOptions.map(function (minute) {
+                    return (React__default["default"].createElement(TimeOption, { key: "minute-option-".concat(minute), innerRef: minute === formatNumber(selectedMinute) ? minuteRef : null, value: minute, isSelected: minute === formatNumber(selectedMinute), handleClick: handleMinuteClick }));
+                })),
+                React__default["default"].createElement(ScrollContainer, null, meridiemOptions.map(function (meridiem) {
+                    return (React__default["default"].createElement(TimeOption, { key: "meridian-option-".concat(meridiem), value: meridiem, isSelected: meridiem === selectedMeridiem, handleClick: handleMeridiemClick }));
+                }))))));
+};
+
+var TimeRange = function (_a) {
+    var startTimePickerProps = _a.startTimePickerProps, endTimePickerProps = _a.endTimePickerProps, dashContainerProps = _a.dashContainerProps;
+    return (React__default["default"].createElement(react.Flex, null,
+        React__default["default"].createElement(TimePicker, __assign({}, startTimePickerProps)),
+        React__default["default"].createElement(react.Box, __assign({ alignSelf: "center", mx: 1 }, dashContainerProps), "-"),
+        React__default["default"].createElement(TimePicker, __assign({}, endTimePickerProps))));
+};
+
 var DragHandle = function (_a) {
     var rest = __rest(_a, []);
     var _b = React.useContext(SortableItemContext), attributes = _b.attributes, listeners = _b.listeners, ref = _b.ref;
@@ -25540,26 +25694,6 @@ var LinkIcon = function (iconProps) {
     return React__default["default"].createElement(Icon, __assign({}, rest));
 };
 
-var useIconTextSizeMap = function (textSize) {
-    switch (textSize) {
-        case 'xs':
-            return 'xs';
-        case 'sm':
-            return 'sm';
-        case 'md':
-            return 'md';
-        case 'lg':
-        case 'xl':
-        case '2xl':
-        case '3xl':
-        case '4xl':
-            return 'lg';
-        case '5xl':
-        case '6xl':
-            return '2xl';
-    }
-};
-
 var Link = React.forwardRef(function (props, ref) {
     var colors = useTheme().colors;
     var children = props.children, color = props.color, _a = props.colorToken, colorToken = _a === void 0 ? 'link' : _a, _b = props.onDark, onDark = _b === void 0 ? false : _b, iconProps = props.iconProps, _c = props.size, size = _c === void 0 ? 'md' : _c, rest = __rest(props, ["children", "color", "colorToken", "onDark", "iconProps", "size"]);
@@ -28511,6 +28645,8 @@ exports.TextInput = WrappedTextInput;
 exports.TextInputConfig = TextInputConfig;
 exports.Textarea = WrappedTextArea;
 exports.TextareaConfig = TextareaConfig;
+exports.TimePicker = TimePicker;
+exports.TimeRange = TimeRange;
 exports.Tooltip = Tooltip;
 exports.TooltipConfig = TooltipConfig;
 exports.TooltipGlobalStyle = TooltipGlobalStyle;