@televet/kibble-ui 1.14.9 → 1.14.10-beta.4738dbh.2

package/build/components/DataDisplay/Tag/tag.component.d.ts

@@ -8,5 +8,6 @@ export interface TagProps extends ChakraTagProps {
     showCloseButton?: boolean;
     size?: TagSize;
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    fontWeight?: 'regular' | 'semibold';
 }
-export declare const Tag: ({ leftElement, rightElement, label, showCloseButton, onClose, size, ...rest }: TagProps) => JSX.Element;
+export declare const Tag: ({ leftElement, rightElement, label, showCloseButton, onClose, fontWeight, size, ...rest }: TagProps) => JSX.Element;

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

@@ -1,5 +1,6 @@
 export declare const menuItemArgTypes: {
     closeOnSelect: any;
+    colorToken: any;
     groupLabel: any;
     isDisabled: any;
     isMultiSelect: any;

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

@@ -1,4 +1,5 @@
 import { ReactNode, MutableRefObject, KeyboardEvent } from 'react';
+import { TextColor } from 'components/Typography';
 export interface MenuItemProps {
     canSelectAll?: boolean;
     children?: ReactNode;
@@ -16,6 +17,7 @@ export interface MenuItemProps {
     shouldRetainSelection?: boolean;
     shouldTruncateText?: boolean;
     value?: string;
+    colorToken?: TextColor;
 }
-declare const MenuItem: ({ isMultiSelect, canSelectAll, children, closeOnSelect, groupLabel, handleKeyboardNavigation, isDisabled, isSelected, itemIndex, label, leftElement, menuItemRefs, onSelect, shouldRetainSelection, shouldTruncateText, value, ...rest }: MenuItemProps) => JSX.Element;
+declare const MenuItem: ({ isMultiSelect, canSelectAll, children, closeOnSelect, groupLabel, handleKeyboardNavigation, isDisabled, isSelected, itemIndex, label, leftElement, menuItemRefs, onSelect, shouldRetainSelection, shouldTruncateText, value, colorToken, ...rest }: MenuItemProps) => JSX.Element;
 export default MenuItem;

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

@@ -1,5 +1,6 @@
 export declare const menuArgTypes: {
     closeOnSelect: any;
+    colorToken: any;
     groupLabel: any;
     isDisabled: any;
     isMultiSelect: any;

package/build/index.js

@@ -105,11 +105,11 @@ var paddingRightBySize = {
     lg: 1,
 };
 var Tag = function (_a) {
-    var leftElement = _a.leftElement, rightElement = _a.rightElement, label = _a.label, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.size, size = _c === void 0 ? 'md' : _c, rest = __rest(_a, ["leftElement", "rightElement", "label", "showCloseButton", "onClose", "size"]);
+    var leftElement = _a.leftElement, rightElement = _a.rightElement, label = _a.label, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'semibold' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["leftElement", "rightElement", "label", "showCloseButton", "onClose", "fontWeight", "size"]);
     var labelStyle = __assign(__assign({}, (!!leftElement && { ml: 1 })), (!!rightElement && { mr: 1 }));
     return (React__default["default"].createElement(react.Tag, __assign({}, rest, { size: size }, (showCloseButton && { pr: paddingRightBySize[size] })),
         leftElement,
-        React__default["default"].createElement(react.TagLabel, __assign({}, labelStyle), label),
+        React__default["default"].createElement(react.TagLabel, __assign({}, labelStyle, { fontWeight: fontWeight }), label),
         rightElement,
         showCloseButton && !!onClose && React__default["default"].createElement(react.TagCloseButton, { onClick: onClose })));
 };
@@ -1636,17 +1636,17 @@ var Button = React.forwardRef(function (props, ref) {
     };
     var iconName = p.iconName; p.darkMode; var iconPosition = p.iconPosition, domProps = __rest(p, ["iconName", "darkMode", "iconPosition"]);
     if (iconName) {
-        var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size, name: iconName });
+        var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size || 'md', name: iconName });
         if (!domProps.children) {
             var label = camelCaseToLabel(iconName);
-            return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon }, domProps)));
+            return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon, size: p.size || 'md' }, domProps)));
         }
         else {
             var position = iconPosition === 'right' ? 'rightIcon' : 'leftIcon';
             domProps[position] = ButtonIcon;
         }
     }
-    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
+    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, size: p.size || 'md', iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
 });
 Button.displayName = 'Button';
 
@@ -4394,9 +4394,10 @@ var MenuConfig = {
 };
 
 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, onSelect = _a.onSelect, shouldRetainSelection = _a.shouldRetainSelection, shouldTruncateText = _a.shouldTruncateText, value = _a.value, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value"]);
+    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, onSelect = _a.onSelect, shouldRetainSelection = _a.shouldRetainSelection, shouldTruncateText = _a.shouldTruncateText, value = _a.value, colorToken = _a.colorToken, rest = __rest(_a, ["isMultiSelect", "canSelectAll", "children", "closeOnSelect", "groupLabel", "handleKeyboardNavigation", "isDisabled", "isSelected", "itemIndex", "label", "leftElement", "menuItemRefs", "onSelect", "shouldRetainSelection", "shouldTruncateText", "value", "colorToken"]);
     var colors = useTheme().colors;
     var onClose = react.useMenuState().onClose;
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken ? colorToken : 'default');
     var handleSelect = React.useCallback(function () {
         if (isDisabled)
             return;
@@ -4411,16 +4412,21 @@ var MenuItem = function (_a) {
             onClose();
         }
     }, [value, onSelect, onClose, closeOnSelect, isDisabled, label, leftElement]);
-    return (React__default["default"].createElement(react.Box, __assign({}, MenuItemConfig, { bg: isSelected ? colors.background.hover : '', className: "MenuList__Item", onClick: handleSelect, onKeyDown: function (e) { return handleKeyboardNavigation(e, false); }, tabIndex: parseInt(canSelectAll ? (itemIndex += 2) : itemIndex), ref: function (el) {
+    var fontColor = React.useMemo(function () {
+        if (colorToken) {
+            return adaptiveColor;
+        }
+        return isSelected && shouldRetainSelection && !isMultiSelect ? colors.text.light.link : colors.text.light.default;
+    }, [isSelected, shouldRetainSelection, isMultiSelect, adaptiveColor, colorToken, colors]);
+    return (React__default["default"].createElement(react.Box, __assign({}, MenuItemConfig, { bg: isSelected && !isMultiSelect ? colors.background.hover : '', className: "MenuList__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;
         }, 
         // @ts-ignore
-        disabled: isDisabled }, rest), children ? (children) : (React__default["default"].createElement(react.HStack, { alignItems: "center", spacing: "12px", minH: "21px" },
+        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.Box, { className: "MenuList__ItemCheckbox" },
             React__default["default"].createElement(Checkbox, { variant: "round", isChecked: isSelected, size: "sm" }))),
-        React__default["default"].createElement(react.HStack, { color: isSelected && shouldRetainSelection && !isMultiSelect ? colors.text.light.link : colors.text.light.default },
-            leftElement && React__default["default"].createElement(react.Box, { className: "MenuList__ItemLeftElement" }, leftElement),
-            React__default["default"].createElement(react.Box, { className: "MenuList__ItemLabel" }, shouldTruncateText ? React__default["default"].createElement(TruncatedText, { textContent: label || '', noOfLines: 1 }) : React__default["default"].createElement(Text, null, label)))))));
+        leftElement && (React__default["default"].createElement(react.Flex, { align: "center", justify: "center", className: "MenuList__ItemLeftElement" }, leftElement)),
+        React__default["default"].createElement(react.Box, { className: "MenuList__ItemLabel" }, shouldTruncateText ? React__default["default"].createElement(TruncatedText, { textContent: label || '', noOfLines: 1 }) : React__default["default"].createElement(Text, null, label))))));
 };
 
 var MenuSearchBar = function (_a) {
@@ -4578,7 +4584,7 @@ var MenuList = function (_a) {
             }
         }
     }, [filteredMenuItems, isGrouped, setGroups]);
-    var getMenuItem = React.useCallback(function (item, index) { return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, canSelectAll: canSelectAll, isSelected: item.isSelected, isDisabled: item.isDisabled, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelect: function (selectedItem) { return handleToggleSingleItem(selectedItem, item.onSelect); }, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect, shouldRetainSelection: shouldRetainSelection, shouldTruncateText: shouldTruncateText })); }, [
+    var getMenuItem = React.useCallback(function (item, index) { return (React__default["default"].createElement(MenuItem, { handleKeyboardNavigation: handleKeyboardNavigation, isMultiSelect: isMultiSelect, canSelectAll: canSelectAll, isSelected: item.isSelected, isDisabled: item.isDisabled, itemIndex: index.toString(), key: item.value, label: item.label, leftElement: item.leftElement, menuItemRefs: menuItemRefs, onSelect: function (selectedItem) { return handleToggleSingleItem(selectedItem, item.onSelect); }, value: item.value, children: item.children, closeOnSelect: item.closeOnSelect, shouldRetainSelection: shouldRetainSelection, shouldTruncateText: shouldTruncateText, colorToken: item.colorToken })); }, [
         handleKeyboardNavigation,
         handleToggleSingleItem,
         isMultiSelect,
@@ -4594,15 +4600,15 @@ var MenuList = function (_a) {
     if (children) {
         return React__default["default"].createElement(react.MenuList, __assign({}, rest), children);
     }
-    return (React__default["default"].createElement(react.MenuList, __assign({ className: "MeuList" }, rest, { maxW: maxW, maxH: maxH, minW: minW, overflow: "hidden auto" }),
+    return (React__default["default"].createElement(react.MenuList, __assign({ className: "MeuList" }, rest, { maxW: maxW || 'unset', maxH: maxH, minW: minW, overflow: "hidden auto" }),
         (isSearchable || (canSelectAll && isMultiSelect)) && (React__default["default"].createElement(react.Box, { className: "MenuList__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 })))),
-        React__default["default"].createElement(react.Box, { className: "MenuList__Body" }, !(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.length) ? (React__default["default"].createElement(react.Box, { textAlign: "center", display: "block", p: "12px" },
+        React__default["default"].createElement(react.Box, { className: "MenuList__Body" }, !(filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.length) ? (React__default["default"].createElement(react.Box, { textAlign: "center", display: "block", p: 3 },
             React__default["default"].createElement(Text, { size: "sm", colorToken: "subtle" }, "No results found"))) : isGrouped ? (groups === null || groups === void 0 ? void 0 : groups.map(function (groupName, index) {
             var menuItems = filteredMenuItems === null || filteredMenuItems === void 0 ? void 0 : filteredMenuItems.filter(function (item) { return item.groupLabel === groupName; });
             return (React__default["default"].createElement(react.Box, { className: "MenuList__Group", key: "".concat(groupName || 'noGroup', "-").concat(index) },
-                groupName && (React__default["default"].createElement(react.Flex, { minH: "32px", p: "16px 12px 4px 20px", justifyContent: "space-between", alignItems: "center" },
+                groupName && (React__default["default"].createElement(react.Flex, { minH: 8, pt: 4, pr: 3, pb: 1, pl: 5, justify: "space-between", align: "center" },
                     React__default["default"].createElement(react.Box, { textAlign: "left", className: "MenuList__GroupTitle" },
                         React__default["default"].createElement(Heading, { size: "xs" }, groupName)),
                     isMultiSelect && canSelectGroups && (React__default["default"].createElement(MenuSelectAllButtons, { handleToggleAllItems: handleToggleAllItems, hasSelectedItems: Boolean(menuItems === null || menuItems === void 0 ? void 0 : menuItems.find(function (item) { return item.isSelected; })), isGrouped: true, groupName: groupName })))), menuItems === null || menuItems === void 0 ? void 0 :
@@ -4621,9 +4627,11 @@ var Select = function (_a) {
     var _c = __read(React.useState({
         label: placeholder,
         value: '',
+        colorToken: 'placeholder',
         leftElement: null,
         isPlaceholder: true,
     }), 2), selectedOption = _c[0], setSelectedOption = _c[1];
+    var adaptiveColor = useAdaptiveColorMap(colors.text, selectedOption.colorToken ? selectedOption.colorToken : 'default');
     React.useEffect(function () {
         if (value) {
             var defaultValue = options.find(function (option) { return option.value === value; });
@@ -4659,12 +4667,12 @@ var Select = function (_a) {
             listProps.onClose(selectedOption);
         }
     };
-    var flexibleHeightProps = !shouldTruncateText ? { height: 'max-content', minH: '40px' } : {};
+    var flexibleHeightProps = !shouldTruncateText ? { height: 'max-content', minH: 10 } : {};
     return (React__default["default"].createElement(MenuProvider, { menuItems: options, onClose: handleMenuClose },
         React__default["default"].createElement(MenuContainer, { matchWidth: true, isLazy: true },
             React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton, _focus: __assign({}, focusStyle), onClick: function (event) { return event.stopPropagation(); }, type: "button", className: "Select__MenuButton", ref: selectRef, size: size }, flexibleHeightProps, domProps),
-                React__default["default"].createElement(react.Flex, { className: "Select__Container", justifyContent: "flex-start", alignItems: "center", textAlign: "left", color: selectedOption.isPlaceholder ? colors.text.light.placeholder : colors.text.light.default },
-                    (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement) ? (React__default["default"].createElement(react.Box, { className: "Select__LeftElement", pr: "8px" }, selectedOption.leftElement)) : (listProps === null || listProps === void 0 ? void 0 : listProps.defaultLeftElement) ? (React__default["default"].createElement(react.Box, { className: "Select__LeftElement", pr: "8px" }, listProps.defaultLeftElement)) : null,
+                React__default["default"].createElement(react.Flex, { className: "Select__Container", justify: "flex-start", align: "center", textAlign: "left", color: adaptiveColor },
+                    (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement) ? (React__default["default"].createElement(react.Flex, { align: "center", className: "Select__LeftElement", pr: 2 }, selectedOption.leftElement)) : (listProps === null || listProps === void 0 ? void 0 : listProps.defaultLeftElement) ? (React__default["default"].createElement(react.Flex, { align: "center", className: "Select__LeftElement", pr: 2 }, listProps.defaultLeftElement)) : null,
                     shouldTruncateText ? (React__default["default"].createElement(TruncatedText, { className: "Select__Text", textContent: selectedOption.label || '', noOfLines: 1 })) : (React__default["default"].createElement(Text, { className: "Select__Text" }, selectedOption.label)))),
             React__default["default"].createElement(MenuList, __assign({ maxW: selectWidth || (listProps === null || listProps === void 0 ? void 0 : listProps.maxW) }, listProps, { shouldTruncateText: shouldTruncateText, shouldRetainSelection: true, menuItems: options.map(function (option) {
                     option.isSelected = option.value === selectedOption.value;
@@ -13079,10 +13087,9 @@ var Modal = function (_a) {
     // Responsive values for full screen modals on phones.
     var fullScreenMobileSize = react.useBreakpointValue({ base: 'full', md: size });
     var fullScreenMobileBorderRadius = react.useBreakpointValue({ base: 0, md: radii.xl });
-    var fullScreenMobileContentMargin = react.useBreakpointValue({ base: 0, md: 16 });
     var Modal = (React__default["default"].createElement(react.Modal, __assign({ closeOnEsc: allowEscape, closeOnOverlayClick: allowEscape, autoFocus: !!initialFocusRef, isOpen: isOpen, onClose: onClose, scrollBehavior: scrollBehavior, isCentered: isCentered, size: useFullScreenMobile ? fullScreenMobileSize : size, motionPreset: "slideInBottom" }, rest),
         React__default["default"].createElement(react.ModalOverlay, null),
-        React__default["default"].createElement(react.ModalContent, { backgroundColor: backgroundColor, m: useFullScreenMobile ? fullScreenMobileContentMargin : 16, borderRadius: useFullScreenMobile ? fullScreenMobileBorderRadius : radii.xl, minH: { base: '-webkit-fill-available', md: 'auto' } }, children)));
+        React__default["default"].createElement(react.ModalContent, __assign({ backgroundColor: backgroundColor, m: useFullScreenMobile ? 0 : 16 }, (!useFullScreenMobile && { mx: 5 }), { borderRadius: useFullScreenMobile ? fullScreenMobileBorderRadius : radii.xl }, (useFullScreenMobile && { minH: { base: '-webkit-fill-available', md: 'auto' } })), children)));
     return withDarkMode$1(Modal, !!darkMode);
 };