@televet/kibble-ui 1.7.1-beta.3yvw2xa.1 → 1.7.2

package/build/components/DataDisplay/NotificationCounter/notificationCounter.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FlexProps } from '@chakra-ui/react';
 import { NotificationCounterSize } from './notificationCounter.types';
 export interface NotificationCounterProps extends FlexProps {

package/build/components/Forms/RatingDots/ratingDot.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IRatingDotProps {
     number: number;
     isInteractive?: boolean;

package/build/components/Forms/RatingDots/ratingDots.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IRatingDotsProps {
     minValue: number;
     maxValue: number;

package/build/components/MediaAndIcons/AvatarGroup/avatarGroup.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AvatarProps, AvatarSize } from 'components/MediaAndIcons/Avatar';
 export interface AvatarGroupProps {
     avatars: AvatarProps[];

package/build/components/MediaAndIcons/Logo/logo.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LogoHoliday, LogoType, LogoColor } from './logo.types';
 export interface ILogoProps {
     type?: LogoType;

package/build/components/Overlay/Menu/Components/MenuContainer/menuContainer.component.d.ts

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { MenuProps as CMenuProps } from '@chakra-ui/react';
 export interface MenuContainerProps extends Omit<CMenuProps, 'children'> {
     children?: ReactNode;
-    onMenuClose?: (value: (string | undefined)[]) => void;
 }
-declare const MenuContainer: ({ children, onMenuClose, ...rest }: MenuContainerProps) => JSX.Element;
+declare const MenuContainer: ({ children, ...rest }: MenuContainerProps) => JSX.Element;
 export default MenuContainer;

package/build/components/Overlay/Menu/Components/MenuList/menuList.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuListProps as CMenuListProps } from '@chakra-ui/react';
 import { MenuItemProps } from '../MenuItem/menuItem.component';
 export interface MenuListProps extends CMenuListProps {

package/build/components/Overlay/Menu/Components/MenuOptionGroup/menuOptionGroup.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuOptionGroupProps as CMenuOptionGroupProps } from '@chakra-ui/react';
 declare const MenuOptionGroup: ({ children, ...rest }: CMenuOptionGroupProps) => JSX.Element;
 export default MenuOptionGroup;

package/build/components/Overlay/Menu/Components/MenuSelectAllButtons/menuSelectAllButtons.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface MenuSelectAllButtonsProps {
     groupName?: string;
     handleToggleAllItems: ({ groupName, clear }: {

package/build/components/Overlay/Menu/menu.context.d.ts

@@ -6,7 +6,7 @@ export interface IMenuContext {
     focusedItemIndex: number;
     groups: (string | undefined)[] | null;
     menuItemRefs?: MutableRefObject<HTMLDivElement[] | null[]>;
-    handleOnClose: () => void;
+    handleOnClose: (value: (string | undefined)[]) => void;
     searchInputRef?: MutableRefObject<HTMLInputElement | null>;
     setFilteredMenuItems: Dispatch<SetStateAction<MenuItemProps[]>>;
     setFocusedItemIndex: Dispatch<SetStateAction<number>>;

package/build/components/Overlay/Tooltip/tooltip.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlacementWithLogical, TooltipProps as ChakraTooltipProps } from '@chakra-ui/react';
 export interface TooltipProps extends ChakraTooltipProps {
     label: string;

package/build/index.js

@@ -1825,7 +1825,7 @@ function withFormControl(Component) {
 }
 
 var Textarea = function (props) {
-    return React__default["default"].createElement(react.Textarea, __assign({}, props));
+    return React__default["default"].createElement(react.Textarea, __assign({ background: colors.background.light }, props));
 };
 Textarea.displayName = 'Textarea';
 var WrappedTextArea = withFormControl(Textarea);
@@ -1895,7 +1895,7 @@ var TextInput = withFormControl(function (props) {
     var leftElement = props.leftElement, rightElement = props.rightElement, inputRef = props.inputRef, domProps = __rest(props, ["leftElement", "rightElement", "inputRef"]);
     return (React__default["default"].createElement(react.InputGroup, null,
         leftElement ? React__default["default"].createElement(react.InputLeftElement, { children: leftElement }) : null,
-        React__default["default"].createElement(react.Input, __assign({ _disabled: {
+        React__default["default"].createElement(react.Input, __assign({ background: colors.background.light, _disabled: {
                 background: colors.border.light.default,
                 opacity: 0.4,
                 cursor: 'not-allowed',
@@ -5996,59 +5996,9 @@ var DrawerConfig = {
     },
 };
 
-// TODO: Figure out how to document this functionality
-var MenuContext = React.createContext({
-    allMenuItems: [],
-    filteredMenuItems: [],
-    focusedItemIndex: -1,
-    groups: [],
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    handleOnClose: function () {
-        throw new Error('handleOnClose(): Promise<void> not implemented');
-    },
-    setFilteredMenuItems: function () {
-        throw new Error('setFilteredMenuItems(): Promise<void> not implemented');
-    },
-    setFocusedItemIndex: function () {
-        throw new Error('setFocusedItemIndex(): Promise<void> not implemented');
-    },
-    setGroups: function () {
-        throw new Error('setGroups(): Promise<void> not implemented');
-    },
-});
-var useMenuContext = function () { return React.useContext(MenuContext); };
-var MenuProvider = function (_a) {
-    var menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, children = _a.children;
-    var _b = __read(React.useState(menuItems || []), 2), filteredMenuItems = _b[0], setFilteredMenuItems = _b[1];
-    var _c = __read(React.useState(null), 2), groups = _c[0], setGroups = _c[1];
-    var _d = __read(React.useState(-1), 2), focusedItemIndex = _d[0], setFocusedItemIndex = _d[1];
-    var searchInputRef = React.useRef(null);
-    var menuItemRefs = React.useRef([]);
-    var handleOnClose = React.useCallback(function () {
-        var selectedItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.isSelected === true; }).map(function (item) { return item.value; });
-        setFocusedItemIndex(-1);
-        if (onMenuClose) {
-            onMenuClose(selectedItems);
-        }
-    }, [filteredMenuItems, onMenuClose]);
-    return (React__default["default"].createElement(MenuContext.Provider, { value: {
-            allMenuItems: menuItems,
-            filteredMenuItems: filteredMenuItems,
-            focusedItemIndex: focusedItemIndex,
-            groups: groups,
-            menuItemRefs: menuItemRefs,
-            handleOnClose: handleOnClose,
-            searchInputRef: searchInputRef,
-            setFilteredMenuItems: setFilteredMenuItems,
-            setFocusedItemIndex: setFocusedItemIndex,
-            setGroups: setGroups,
-        } }, children));
-};
-
 var MenuContainer = function (_a) {
-    var children = _a.children; _a.onMenuClose; var rest = __rest(_a, ["children", "onMenuClose"]);
-    var handleOnClose = useMenuContext().handleOnClose;
-    return (React__default["default"].createElement(react.Menu, __assign({ onClose: handleOnClose }, rest), children));
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React__default["default"].createElement(react.Menu, __assign({}, rest), children);
 };
 
 var MenuButton = function (_a) {
@@ -6103,7 +6053,7 @@ var MenuButton = function (_a) {
                 return '8px';
         }
     }, [isIconButton, size]);
-    return (React__default["default"].createElement(react.MenuButton, __assign({ as: Button, variant: variant, size: size, position: "relative" }, rest, { p: buttonPadding, lineHeight: 0, _active: { transform: 'none' } }),
+    return (React__default["default"].createElement(react.MenuButton, __assign({ as: Button, variant: variant, size: size, position: "relative" }, rest, { p: buttonPadding, lineHeight: 0 }),
         React__default["default"].createElement(react.HStack, { spacing: textSpacing, className: "menu-button__content-container" },
             leftElement && leftElement,
             leftIconName && (React__default["default"].createElement(react.Box, { p: isIconButton ? '2px' : 0, className: "menu-button__leftIcon" },
@@ -6153,11 +6103,61 @@ var MenuConfig = {
     },
 };
 
+// TODO: Figure out how to document this functionality
+var MenuContext = React.createContext({
+    allMenuItems: [],
+    filteredMenuItems: [],
+    focusedItemIndex: -1,
+    groups: [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    handleOnClose: function (value) {
+        throw new Error('handleOnClose(): Promise<void> not implemented');
+    },
+    setFilteredMenuItems: function () {
+        throw new Error('setFilteredMenuItems(): Promise<void> not implemented');
+    },
+    setFocusedItemIndex: function () {
+        throw new Error('setFocusedItemIndex(): Promise<void> not implemented');
+    },
+    setGroups: function () {
+        throw new Error('setGroups(): Promise<void> not implemented');
+    },
+});
+var useMenuContext = function () { return React.useContext(MenuContext); };
+var MenuProvider = function (_a) {
+    var menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, children = _a.children;
+    var _b = __read(React.useState(menuItems || []), 2), filteredMenuItems = _b[0], setFilteredMenuItems = _b[1];
+    var _c = __read(React.useState(null), 2), groups = _c[0], setGroups = _c[1];
+    var _d = __read(React.useState(-1), 2), focusedItemIndex = _d[0], setFocusedItemIndex = _d[1];
+    var searchInputRef = React.useRef(null);
+    var menuItemRefs = React.useRef([]);
+    var handleOnClose = React.useCallback(function () {
+        var selectedItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.isSelected === true; }).map(function (item) { return item.value; });
+        setFocusedItemIndex(-1);
+        if (onMenuClose) {
+            onMenuClose(selectedItems);
+        }
+    }, [filteredMenuItems, onMenuClose]);
+    return (React__default["default"].createElement(MenuContext.Provider, { value: {
+            allMenuItems: menuItems,
+            filteredMenuItems: filteredMenuItems,
+            focusedItemIndex: focusedItemIndex,
+            groups: groups,
+            menuItemRefs: menuItemRefs,
+            handleOnClose: handleOnClose,
+            searchInputRef: searchInputRef,
+            setFilteredMenuItems: setFilteredMenuItems,
+            setFocusedItemIndex: setFocusedItemIndex,
+            setGroups: setGroups,
+        } }, children));
+};
+
 var MenuItem = function (_a) {
-    var isMultiSelect = _a.isMultiSelect, canSelectAll = _a.canSelectAll, children = _a.children, _b = _a.closeOnSelect, closeOnSelect = _b === void 0 ? !isMultiSelect : _b; _a.groupLabel; var _c = _a.handleKeyboardNavigation, handleKeyboardNavigation = _c === void 0 ? function () { } : _c, isDisabled = _a.isDisabled, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelectItem = _a.onSelectItem, value = _a.value, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelectItem", "value"]);
     // TODO: Add truncated text functionality with tooltip on hover
+    var isMultiSelect = _a.isMultiSelect, canSelectAll = _a.canSelectAll, children = _a.children, _b = _a.closeOnSelect, closeOnSelect = _b === void 0 ? !isMultiSelect : _b; _a.groupLabel; var _c = _a.handleKeyboardNavigation, handleKeyboardNavigation = _c === void 0 ? function () { } : _c, isDisabled = _a.isDisabled, isSelected = _a.isSelected, _d = _a.itemIndex, itemIndex = _d === void 0 ? '0' : _d, label = _a.label, leftElement = _a.leftElement, menuItemRefs = _a.menuItemRefs, onSelectItem = _a.onSelectItem, value = _a.value, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelectItem", "value"]);
     var colors = useTheme().colors;
     var onClose = react.useMenuState().onClose;
+    var handleOnClose = useMenuContext().handleOnClose;
     var handleSelect = React.useCallback(function () {
         if (isDisabled)
             return;
@@ -6165,9 +6165,10 @@ var MenuItem = function (_a) {
             onSelectItem(value);
         }
         if (closeOnSelect) {
+            handleOnClose([value]);
             onClose();
         }
-    }, [value, onSelectItem, onClose, closeOnSelect, isDisabled]);
+    }, [value, onSelectItem, onClose, closeOnSelect, isDisabled, handleOnClose]);
     return (React__default["default"].createElement(react.Box, __assign({}, MenuItemConfig, { className: "menu-list__item", onClick: handleSelect, onKeyDown: function (e) { return handleKeyboardNavigation(e, false); }, tabIndex: parseInt(canSelectAll ? (itemIndex += 2) : itemIndex), ref: function (el) {
             return menuItemRefs && itemIndex ? (menuItemRefs.current[parseInt(itemIndex)] = el) : null;
         },