@televet/kibble-ui 1.18.0-beta.321x3bw.14 → 1.18.0

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

@@ -8,4 +8,3 @@ 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 { ReactNode, MutableRefObject, KeyboardEvent, ReactElement } from 'react';
+import { ReactElement, ReactNode, MutableRefObject, KeyboardEvent } from 'react';
 import { TextColor } from 'components/Typography';
 export interface MenuItemProps {
     canSelectAll?: boolean;
@@ -20,5 +20,5 @@ export interface MenuItemProps {
     colorToken?: TextColor;
     isPlaceholder?: boolean;
 }
-declare const MenuItem: ({ canSelectAll, children, colorToken, groupLabel, handleKeyboardNavigation, isDisabled, isMultiSelect, closeOnSelect, isSelected, itemIndex, label, leftElement, menuItemRefs, onSelect, shouldRetainSelection, shouldTruncateText, value, ...rest }: MenuItemProps) => JSX.Element;
+declare const MenuItem: ({ canSelectAll, children, colorToken, groupLabel, handleKeyboardNavigation, isDisabled, isMultiSelect, isPlaceholder, closeOnSelect, isSelected, itemIndex, label, leftElement, menuItemRefs, onSelect, shouldRetainSelection, shouldTruncateText, value, ...rest }: MenuItemProps) => JSX.Element;
 export default MenuItem;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PopoverProps as ChakraPopoverProps, PopoverContentProps } from '@chakra-ui/react';
+import { PopoverProps as ChakraPopoverProps } 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,6 +10,5 @@ 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, contentProps, ...rest }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ children, popoverTrigger, darkMode, allowEscape, size, shadow, ...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, display: isFieldInline ? 'inline-block' : 'block' },
+            React__default["default"].createElement(react.Flex, { align: "center", gap: 2 },
                 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" },
@@ -7884,7 +7884,7 @@ var MenuConfig = {
 };
 
 var MenuItem = function (_a) {
-    var canSelectAll = _a.canSelectAll, children = _a.children, colorToken = _a.colorToken; _a.groupLabel; var _b = _a.handleKeyboardNavigation, handleKeyboardNavigation = _b === void 0 ? function () { } : _b, isDisabled = _a.isDisabled, isMultiSelect = _a.isMultiSelect, _c = _a.closeOnSelect, closeOnSelect = _c === void 0 ? !isMultiSelect : _c, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelect = _a.onSelect, _e = _a.shouldRetainSelection, shouldRetainSelection = _e === void 0 ? false : _e, shouldTruncateText = _a.shouldTruncateText, value = _a.value, rest = __rest(_a, ["canSelectAll", "children", "colorToken", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isMultiSelect", "closeOnSelect", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value"]);
+    var canSelectAll = _a.canSelectAll, children = _a.children, colorToken = _a.colorToken; _a.groupLabel; var _b = _a.handleKeyboardNavigation, handleKeyboardNavigation = _b === void 0 ? function () { } : _b, isDisabled = _a.isDisabled, isMultiSelect = _a.isMultiSelect; _a.isPlaceholder; var _c = _a.closeOnSelect, closeOnSelect = _c === void 0 ? !isMultiSelect : _c, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelect = _a.onSelect, _e = _a.shouldRetainSelection, shouldRetainSelection = _e === void 0 ? false : _e, shouldTruncateText = _a.shouldTruncateText, value = _a.value, rest = __rest(_a, ["canSelectAll", "children", "colorToken", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isMultiSelect", "isPlaceholder", "closeOnSelect", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value"]);
     var colors = useTheme().colors;
     var onClose = react.useMenuState().onClose;
     var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken ? colorToken : 'default');
@@ -7914,7 +7914,7 @@ var MenuItem = function (_a) {
         }, 
         // @ts-ignore
         disabled: isDisabled }, rest), children ? (children) : (React__default["default"].createElement(react.HStack, { align: "center", spacing: 3, minH: 5, color: fontColor },
-        isMultiSelect && (React__default["default"].createElement(react.Flex, { w: 4, h: 4, className: "MenuList__ItemCheckbox", align: "center", justify: "center", color: colors.status.success }, isSelected ? (React__default["default"].createElement(Icon, { name: "checkmarkCircle", size: "sm" })) : (React__default["default"].createElement(react.Box, { w: 3, h: 3, borderRadius: "100%", bg: colors.background.grayDark })))),
+        isMultiSelect && (React__default["default"].createElement(react.Flex, { w: 4, h: 4, className: "MenuList__ItemCheckbox", align: "center", justify: "center", color: colors.status.success }, isSelected ? (React__default["default"].createElement(Icon, { name: "checkmarkCircle", size: "sm" })) : (React__default["default"].createElement(react.Box, { m: "2px", w: 3, h: 3, borderRadius: "100%", bg: colors.background.grayDark })))),
         leftElement && (React__default["default"].createElement(react.Flex, { align: "center", justify: "center", className: "MenuList__ItemLeftElement" }, leftElement)),
         React__default["default"].createElement(react.Box, { className: "MenuList__ItemLabel", position: "relative", w: "100%" }, typeof label === 'string' ? (shouldTruncateText ? (React__default["default"].createElement(TruncatedText, { color: fontColor, textContent: label || '', noOfLines: 1 })) : (React__default["default"].createElement(Text, { color: fontColor }, label))) : (label))))));
 };
@@ -8188,15 +8188,14 @@ 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, contentProps = _a.contentProps, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow", "contentProps"]);
+    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 _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, __assign({ width: width, bg: bg, borderColor: borderColor, shadow: shadow }, contentProps),
+        withDarkMode$1(React__default["default"].createElement(react.PopoverContent, { width: width, bg: bg, shadow: shadow },
             React__default["default"].createElement(react.PopoverArrow, { bg: bg }),
             React__default["default"].createElement(Text, { size: "sm" }, children)), !!darkMode)));
 };
@@ -18756,159 +18755,6 @@ 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;
@@ -25694,6 +25540,26 @@ 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"]);
@@ -28645,8 +28511,6 @@ 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;