@televet/kibble-ui 1.8.0-beta.3ygebpe.1 → 1.8.0

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

@@ -10,10 +10,6 @@ export interface MenuListProps extends CMenuListProps {
     onMenuItemSelect?: ((selectedItem: MenuItemProps) => void) | ((selectedItem: MenuItemProps) => Promise<void>);
     onMenuItemSelectAll?: ((selectedItems: MenuItemProps[]) => void) | ((selectedItems: MenuItemProps[]) => Promise<void>);
     searchPlaceholder?: string;
-    minW?: string;
-    maxW?: string;
-    maxH?: string;
-    isMatchWidthSet?: boolean;
 }
-declare const MenuList: ({ canSelectAll, canSelectGroups, children, isGrouped, isMatchWidthSet, isMultiSelect, isSearchable, menuItems, onMenuItemSelect, onMenuItemSelectAll, searchPlaceholder, minW, maxW, maxH, ...rest }: MenuListProps) => JSX.Element;
+declare const MenuList: ({ canSelectAll, canSelectGroups, children, isGrouped, isMultiSelect, isSearchable, menuItems, onMenuItemSelect, onMenuItemSelectAll, searchPlaceholder, ...rest }: MenuListProps) => JSX.Element;
 export default MenuList;

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

@@ -1,14 +1,16 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { MenuProps as CMenuProps } from '@chakra-ui/react';
+import { MenuContainerProps } from './Components/MenuContainer/menuContainer.component';
 import { MenuButtonProps } from './Components/MenuButton/menuButton.component';
 import { MenuItemProps } from './Components/MenuItem/menuItem.component';
 import { MenuListProps } from './Components/MenuList/menuList.component';
 export interface MenuProps extends Omit<CMenuProps, 'children'> {
     buttonConfig?: MenuButtonProps;
+    containerConfig?: MenuContainerProps;
     CustomTriggerElement?: FunctionComponent;
     listConfig?: MenuListProps;
     menuItems: MenuItemProps[];
     onMenuClose?: (value: (string | undefined)[]) => void;
     children?: ReactNode;
 }
-export declare const BetaMenu: ({ buttonConfig, CustomTriggerElement, listConfig, menuItems, onMenuClose, isLazy, ...props }: MenuProps) => JSX.Element;
+export declare const BetaMenu: ({ buttonConfig, containerConfig, CustomTriggerElement, listConfig, menuItems, onMenuClose, ...props }: MenuProps) => JSX.Element;

package/build/index.js

@@ -6318,17 +6318,9 @@ var MenuSelectAllButtons = function (_a) {
 };
 
 var MenuList = function (_a) {
-    var _b = _a.canSelectAll, canSelectAll = _b === void 0 ? false : _b, _c = _a.canSelectGroups, canSelectGroups = _c === void 0 ? false : _c, children = _a.children, _d = _a.isGrouped, isGrouped = _d === void 0 ? false : _d, isMatchWidthSet = _a.isMatchWidthSet, _e = _a.isMultiSelect, isMultiSelect = _e === void 0 ? false : _e, _f = _a.isSearchable, isSearchable = _f === void 0 ? false : _f, menuItems = _a.menuItems, onMenuItemSelect = _a.onMenuItemSelect, onMenuItemSelectAll = _a.onMenuItemSelectAll, searchPlaceholder = _a.searchPlaceholder, _g = _a.minW, minW = _g === void 0 ? '240px' : _g, maxW = _a.maxW, _h = _a.maxH, maxH = _h === void 0 ? '480px' : _h, rest = __rest(_a, ["canSelectAll", "canSelectGroups", "children", "isGrouped", "isMatchWidthSet", "isMultiSelect", "isSearchable", "menuItems", "onMenuItemSelect", "onMenuItemSelectAll", "searchPlaceholder", "minW", "maxW", "maxH"]);
-    var containerRef = React.useRef(null);
-    var _j = useMenuContext(), filteredMenuItems = _j.filteredMenuItems, setFilteredMenuItems = _j.setFilteredMenuItems, groups = _j.groups, setGroups = _j.setGroups, focusedItemIndex = _j.focusedItemIndex, setFocusedItemIndex = _j.setFocusedItemIndex, searchInputRef = _j.searchInputRef, menuItemRefs = _j.menuItemRefs;
-    var isListOverflowing = React.useCallback(function () {
-        var _a;
-        if (!((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children[0]))
-            return false;
-        var listItemsScrollHeight = containerRef.current.children[0].scrollHeight || 0;
-        var containerOffsetHeight = containerRef.current.offsetHeight || 0;
-        return listItemsScrollHeight > containerOffsetHeight;
-    }, [containerRef]);
+    // TODO: Add maxHeight and scrollability to menu list
+    var _b = _a.canSelectAll, canSelectAll = _b === void 0 ? false : _b, _c = _a.canSelectGroups, canSelectGroups = _c === void 0 ? false : _c, children = _a.children, _d = _a.isGrouped, isGrouped = _d === void 0 ? false : _d, _e = _a.isMultiSelect, isMultiSelect = _e === void 0 ? false : _e, _f = _a.isSearchable, isSearchable = _f === void 0 ? false : _f, menuItems = _a.menuItems, onMenuItemSelect = _a.onMenuItemSelect, onMenuItemSelectAll = _a.onMenuItemSelectAll, searchPlaceholder = _a.searchPlaceholder, rest = __rest(_a, ["canSelectAll", "canSelectGroups", "children", "isGrouped", "isMultiSelect", "isSearchable", "menuItems", "onMenuItemSelect", "onMenuItemSelectAll", "searchPlaceholder"]);
+    var _g = useMenuContext(), filteredMenuItems = _g.filteredMenuItems, setFilteredMenuItems = _g.setFilteredMenuItems, groups = _g.groups, setGroups = _g.setGroups, focusedItemIndex = _g.focusedItemIndex, setFocusedItemIndex = _g.setFocusedItemIndex, searchInputRef = _g.searchInputRef, menuItemRefs = _g.menuItemRefs;
     var focusNextListItem = React.useCallback(function (direction) {
         var _a, _b;
         if (!(menuItemRefs === null || menuItemRefs === void 0 ? void 0 : menuItemRefs.current))
@@ -6441,10 +6433,7 @@ var MenuList = function (_a) {
     if (children) {
         return React__default["default"].createElement(react.MenuList, __assign({}, rest), children);
     }
-    if (!isMatchWidthSet) {
-        maxW = '320px';
-    }
-    return (React__default["default"].createElement(react.MenuList, __assign({}, rest, { ref: containerRef, maxW: maxW, maxH: maxH, minW: minW, overflow: "hidden ".concat(isListOverflowing() ? 'scroll' : 'visible') }),
+    return (React__default["default"].createElement(react.MenuList, __assign({}, rest),
         (isSearchable || (canSelectAll && isMultiSelect)) && (React__default["default"].createElement(react.Box, { className: "menu-list__header", m: "0 12px 8px" },
             isSearchable && (React__default["default"].createElement(MenuSearchBar, { handleKeyboardNavigation: handleKeyboardNavigation, menuItems: menuItems || [], searchInputRef: searchInputRef, setFilteredMenuItems: setFilteredMenuItems, placeholder: searchPlaceholder })),
             canSelectAll && isMultiSelect && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.find(function (item) { return item.isSelected; })), isGrouped: false })))),
@@ -6466,13 +6455,13 @@ var MenuList = function (_a) {
 };
 
 var BetaMenu = function (_a) {
-    var buttonConfig = _a.buttonConfig, CustomTriggerElement = _a.CustomTriggerElement, listConfig = _a.listConfig, menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, props = __rest(_a, ["buttonConfig", "CustomTriggerElement", "listConfig", "menuItems", "onMenuClose", "isLazy"]);
+    var buttonConfig = _a.buttonConfig, containerConfig = _a.containerConfig, CustomTriggerElement = _a.CustomTriggerElement, listConfig = _a.listConfig, menuItems = _a.menuItems, onMenuClose = _a.onMenuClose, props = __rest(_a, ["buttonConfig", "containerConfig", "CustomTriggerElement", "listConfig", "menuItems", "onMenuClose"]);
     return (React__default["default"].createElement(MenuProvider, { menuItems: menuItems, onMenuClose: onMenuClose },
-        React__default["default"].createElement(MenuContainer, __assign({ isLazy: isLazy }, props),
+        React__default["default"].createElement(MenuContainer, __assign({}, containerConfig, props),
             CustomTriggerElement ? (
             // @ts-ignore
             React__default["default"].createElement(CustomTriggerElement, { as: react.MenuButton })) : (React__default["default"].createElement(MenuButton, __assign({}, buttonConfig))),
-            React__default["default"].createElement(MenuList, __assign({}, listConfig, { isMatchWidthSet: props.matchWidth, menuItems: menuItems })))));
+            React__default["default"].createElement(MenuList, __assign({}, listConfig, { menuItems: menuItems })))));
 };
 
 // @ts-ignore