@televet/kibble-ui 1.17.10-beta.43w39py.13 → 1.17.10

package/build/components/Feedback/Alert/alert.component.d.ts

@@ -1,21 +1,19 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { AlertProps as CAlertProps } from '@chakra-ui/react';
 import { IconProps } from 'components/MediaAndIcons';
 import { AlertVariant } from './alert.types';
 import { ButtonProps } from 'components/Forms/Button';
 import { TextProps } from 'components/Typography/Text';
 import { Status } from '../feedback.types';
-import { HeadingProps } from '../../Typography';
 export interface AlertProps extends CAlertProps {
-    children?: ReactNode;
     status?: AlertVariant | Status;
     showIcon?: boolean;
     iconProps?: IconProps;
     showButton?: boolean;
     buttonProps?: ButtonProps;
     buttonTitle?: string;
-    alertTitle?: string;
-    titleProps?: HeadingProps;
+    alertTitle: string;
+    titleProps?: TextProps;
     description?: string;
     descriptionProps?: TextProps;
     showCloseButton?: boolean;

package/build/components/Feedback/Alert/components/AlertButton/alertButton.component.d.ts

@@ -0,0 +1,7 @@
+import { AlertButtonAlignment } from '../../alert.types';
+import { ButtonProps } from 'components/Forms/Button';
+export interface AlertButtonProps extends ButtonProps {
+    alignment: AlertButtonAlignment;
+    pairedWithCloseButton?: boolean;
+}
+export declare const AlertButton: ({ alignment, variant, size, pairedWithCloseButton, ...rest }: AlertButtonProps) => JSX.Element;

package/build/components/Feedback/Alert/components/AlertIcon/alertIcon.component.d.ts

@@ -0,0 +1,7 @@
+import { AlertVariant } from '../../alert.types';
+import { IconProps } from 'components/MediaAndIcons/Icon';
+import { Status } from '../../../feedback.types';
+export interface AlertIconProps extends IconProps {
+    status: AlertVariant | Status;
+}
+export declare const AlertIcon: ({ status, ...rest }: AlertIconProps) => JSX.Element;

package/build/components/Feedback/Alert/index.d.ts

@@ -1,4 +1,6 @@
 export { Alert as CAlert } from '@chakra-ui/react';
+export * from './components/AlertButton/alertButton.component';
+export * from './components/AlertIcon/alertIcon.component';
 export * from './alert.component';
 export * from './alert.types';
 export * from './alert.config';

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

@@ -1,5 +1,3 @@
 export * from './Alert';
 export * from './Toast';
 export * from './Spinner';
-export * from './feedback.types';
-export * from './feedback.model';

package/build/components/Overlay/Modal/components/ModalFooterButtons/modalFooterButtons.component.d.ts

@@ -1,13 +1,11 @@
 import { ModalFooterProps as ChakraModalFooterProps } from '@chakra-ui/react';
 export interface ModalFooterButtonProps extends ChakraModalFooterProps {
-    mixpanelName?: string;
     submitText?: string;
     isLoading?: boolean;
-    loadingText?: string;
     isDisabled?: boolean;
     isDestructive?: boolean;
     onSubmit?: () => void;
     allowCancel?: boolean;
     onCancel?: () => void;
 }
-export declare const ModalFooterButtons: ({ submitText, isLoading, loadingText, isDisabled, isDestructive, mixpanelName, children, onSubmit, allowCancel, onCancel, ...rest }: ModalFooterButtonProps) => JSX.Element;
+export declare const ModalFooterButtons: ({ submitText, isLoading, isDisabled, isDestructive, children, onSubmit, allowCancel, onCancel, ...rest }: ModalFooterButtonProps) => JSX.Element;

package/build/components/Overlay/Modal/index.d.ts

@@ -1,6 +1,5 @@
 export * from './modal.types';
 export * as BetaModal from './modal.component';
-export * from './modal.component';
 export * from './components/ModalHeader/modalHeader.component';
 export * from './components/ModalCloseButton/modalCloseButton.component';
 export * from './components/ModalBody/modalBody.component';

package/build/index.js

@@ -3450,21 +3450,6 @@ var Logo = function (_a) {
 };
 Logo.displayName = 'Logo';
 
-exports.AlertVariant = void 0;
-(function (AlertVariant) {
-    AlertVariant["Error"] = "error";
-    AlertVariant["Warning"] = "warning";
-    AlertVariant["Success"] = "success";
-    AlertVariant["Info"] = "info";
-})(exports.AlertVariant || (exports.AlertVariant = {}));
-exports.AlertStatusIcon = void 0;
-(function (AlertStatusIcon) {
-    AlertStatusIcon["error"] = "warningSign";
-    AlertStatusIcon["warning"] = "warningSign";
-    AlertStatusIcon["success"] = "checkmark";
-    AlertStatusIcon["info"] = "infoCircleOutlined";
-})(exports.AlertStatusIcon || (exports.AlertStatusIcon = {}));
-
 var Button = React.forwardRef(function (props, ref) {
     var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights, radii = _a.radii;
     var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
@@ -3721,6 +3706,38 @@ var ButtonSizeConfig = {
     },
 };
 
+var AlertButton = function (_a) {
+    var alignment = _a.alignment, _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.size, size = _c === void 0 ? 'xs' : _c, _d = _a.pairedWithCloseButton, pairedWithCloseButton = _d === void 0 ? false : _d, rest = __rest(_a, ["alignment", "variant", "size", "pairedWithCloseButton"]);
+    return (React__default["default"].createElement(Button, __assign({ size: size, variant: variant }, rest, (alignment === 'bottom' && { mt: 2, mb: 1 }), (alignment === 'right' && pairedWithCloseButton && { mr: 2 })), rest.children));
+};
+
+var AlertIconColorMap = {
+    info: 'active',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+};
+var AlertIcon = function (_a) {
+    var status = _a.status, rest = __rest(_a, ["status"]);
+    var color = react.useColorModeValue(AlertIconColorMap[status], 'currentColor');
+    return React__default["default"].createElement(Icon, __assign({ color: color, size: "lg" }, rest));
+};
+
+exports.AlertVariant = void 0;
+(function (AlertVariant) {
+    AlertVariant["Error"] = "error";
+    AlertVariant["Warning"] = "warning";
+    AlertVariant["Success"] = "success";
+    AlertVariant["Info"] = "info";
+})(exports.AlertVariant || (exports.AlertVariant = {}));
+exports.AlertStatusIcon = void 0;
+(function (AlertStatusIcon) {
+    AlertStatusIcon["error"] = "warningSign";
+    AlertStatusIcon["warning"] = "warningSign";
+    AlertStatusIcon["success"] = "checkmark";
+    AlertStatusIcon["info"] = "infoCircleOutlined";
+})(exports.AlertStatusIcon || (exports.AlertStatusIcon = {}));
+
 var DrawerConfig = {
     variants: {
         alwaysOpen: {
@@ -4664,7 +4681,7 @@ var Select = function (_a) {
     }
     return (React__default["default"].createElement(MenuProvider, { menuItems: allOptions },
         React__default["default"].createElement(MenuContainer, { matchWidth: true, isLazy: true },
-            React__default["default"].createElement(react.Select, __assign({ icon: React__default["default"].createElement(Icon, { name: "chevronDown", size: size }), as: react.MenuButton, _focus: {
+            React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton, _focus: {
                     boxShadow: "0 0 0 1px ".concat(colors.border.light.focus, " !important"),
                     borderColor: colors.border.light.focus,
                 }, ref: selectRef, onClick: function (event) { return event.stopPropagation(); }, type: "button", className: "Select__MenuButton", maxW: maxW, style: { minHeight: { xs: 24, sm: 32, md: 40, lg: 48 }[size] } }, flexibleHeightProps, domProps),
@@ -15110,7 +15127,7 @@ var ModalFooter = function (_a) {
 };
 
 var ModalFooterButtons = function (_a) {
-    var _b = _a.submitText, submitText = _b === void 0 ? 'Submit' : _b, isLoading = _a.isLoading, loadingText = _a.loadingText, isDisabled = _a.isDisabled, isDestructive = _a.isDestructive, mixpanelName = _a.mixpanelName; _a.children; var onSubmit = _a.onSubmit, _c = _a.allowCancel, allowCancel = _c === void 0 ? true : _c, onCancel = _a.onCancel, rest = __rest(_a, ["submitText", "isLoading", "loadingText", "isDisabled", "isDestructive", "mixpanelName", "children", "onSubmit", "allowCancel", "onCancel"]);
+    var _b = _a.submitText, submitText = _b === void 0 ? 'Submit' : _b, isLoading = _a.isLoading, isDisabled = _a.isDisabled, isDestructive = _a.isDestructive; _a.children; var onSubmit = _a.onSubmit, _c = _a.allowCancel, allowCancel = _c === void 0 ? true : _c, onCancel = _a.onCancel, rest = __rest(_a, ["submitText", "isLoading", "isDisabled", "isDestructive", "children", "onSubmit", "allowCancel", "onCancel"]);
     var onClose = react.useModalContext().onClose;
     var handleCancel = function () {
         if (onCancel) {
@@ -15122,7 +15139,7 @@ var ModalFooterButtons = function (_a) {
         React__default["default"].createElement(react.Flex, { w: "100%" },
             allowCancel && (React__default["default"].createElement(Button, { variant: "tertiary", onClick: handleCancel }, "Cancel")),
             React__default["default"].createElement(react.Spacer, null),
-            React__default["default"].createElement(Button, { "data-mixpanel-name": mixpanelName, onClick: onSubmit, isLoading: isLoading, loadingText: loadingText, isDisabled: isDisabled, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
+            React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, isDisabled: isDisabled, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
 };
 
 var Popover = function (_a) {
@@ -15273,43 +15290,71 @@ var TextConfig = {
     },
 };
 
-var LightStatusVariantMap = {
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
-var DarkStatusVariantMap = {
-    info: 'infoDark',
-    success: 'successDark',
-    warning: 'warningDark',
-    error: 'errorDark',
-};
-var AlertIconColorMap = {
-    info: 'active',
-    success: 'success',
-    error: 'error',
-    warning: 'warning',
+function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    var _a = __read(React.useState({
+        width: undefined,
+        height: undefined,
+    }), 2), windowSize = _a[0], setWindowSize = _a[1];
+    React.useEffect(function () {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+var useOverflowingText = function (text, textRef) {
+    var size = useWindowSize();
+    var _a = __read(React.useState(false), 2), isTextOverFlowing = _a[0], setIsTextOverFlowing = _a[1];
+    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
+        var _a;
+        if (containerRefValue && containerRefValue.current) {
+            var lines = (_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].getClientRects().length;
+            return lines > 1;
+        }
+        return false;
+    }, []);
+    React.useEffect(function () {
+        // if size of window changes, or if title length changes, check if text is overflowing
+        var isOverFlowing = onCheckTextOverFlowing(textRef);
+        setIsTextOverFlowing(isOverFlowing);
+    }, [size, text, onCheckTextOverFlowing, textRef]);
+    return isTextOverFlowing;
 };
 
 var Alert = function (_a) {
     var children = _a.children, _b = _a.status, status = _b === void 0 ? exports.AlertVariant.Success : _b, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, iconProps = _a.iconProps, _d = _a.showButton, showButton = _d === void 0 ? false : _d, buttonProps = _a.buttonProps, buttonTitle = _a.buttonTitle, alertTitle = _a.alertTitle, titleProps = _a.titleProps, description = _a.description, descriptionProps = _a.descriptionProps, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? true : _e, onClose = _a.onClose, rest = __rest(_a, ["children", "status", "showIcon", "iconProps", "showButton", "buttonProps", "buttonTitle", "alertTitle", "titleProps", "description", "descriptionProps", "showCloseButton", "onClose"]);
-    var alertVariant = react.useColorModeValue(LightStatusVariantMap[status], DarkStatusVariantMap[status]);
-    var iconColor = react.useColorModeValue(AlertIconColorMap[status], 'currentColor');
-    return (React__default["default"].createElement(react.Alert, __assign({ justifyContent: "space-between", overflow: "visible", variant: alertVariant, pl: 3, pr: showCloseButton ? 2 : 3, pb: description || children ? 3 : 2 }, rest),
-        React__default["default"].createElement(react.Flex, { w: "100%" },
-            showIcon && (React__default["default"].createElement(react.Box, { mr: 2 },
-                React__default["default"].createElement(Icon, __assign({ color: iconColor, size: "lg", name: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || exports.AlertStatusIcon[status] }, iconProps)))),
-            React__default["default"].createElement(react.Flex, { flexGrow: 1 },
-                React__default["default"].createElement(react.Flex, { alignItems: "flex-start", flexDirection: description ? 'column' : 'row', flexWrap: "wrap", w: "100%", justify: "space-between", align: "center" },
-                    alertTitle && (React__default["default"].createElement(react.Box, { pt: 0.5, pr: 1, flexGrow: 1 },
-                        React__default["default"].createElement(Heading, __assign({ size: "sm", colorToken: "default" }, titleProps), alertTitle))),
-                    description && (React__default["default"].createElement(react.Box, { flexGrow: 1, pb: 2 },
-                        React__default["default"].createElement(Text, __assign({ as: "p", size: "md" }, descriptionProps), description))),
-                    children,
-                    showButton && (React__default["default"].createElement(Button, __assign({ size: "xs", variant: "secondary" }, buttonProps), buttonTitle)))),
-            showCloseButton && (React__default["default"].createElement(react.Box, { ml: 2 },
-                React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "close", size: "xs", onClick: onClose }))))));
+    var titleRef = React.useRef(null);
+    var isTitleOverflowing = useOverflowingText(alertTitle, titleRef);
+    var showButtonInline = showButton && !description && !isTitleOverflowing;
+    var showButtonBottom = (showButton && description) || (showButton && !description && isTitleOverflowing);
+    return (React__default["default"].createElement(react.Alert, __assign({ justifyContent: "space-between", overflow: "visible", variant: status, pl: 3, pr: showCloseButton ? 2 : 3 }, rest),
+        React__default["default"].createElement(react.HStack, { justifyContent: "space-between", w: "100%" },
+            showIcon && (React__default["default"].createElement(react.Flex, { alignSelf: "flex-start" },
+                React__default["default"].createElement(AlertIcon, __assign({ status: status, name: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || exports.AlertStatusIcon[status] }, iconProps)))),
+            React__default["default"].createElement(react.Flex, __assign({ width: "100%", flexDirection: "column" }, (showIcon && { ml: 2 })),
+                React__default["default"].createElement(react.Flex, { alignItems: "flex-start", w: "100%", justifyContent: "space-between" },
+                    React__default["default"].createElement(react.Box, { ref: titleRef, mr: showButtonInline || showCloseButton ? 2 : 0 },
+                        React__default["default"].createElement(Text, __assign({ size: "md", variant: "semibold" }, titleProps), alertTitle)),
+                    React__default["default"].createElement(react.Flex, { alignItems: "center" },
+                        showButtonInline && (React__default["default"].createElement(AlertButton, __assign({ alignment: "right" }, buttonProps, { pairedWithCloseButton: showCloseButton }), buttonTitle)),
+                        showCloseButton && React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "close", size: "xs", onClick: onClose }))),
+                description && (React__default["default"].createElement(Text, __assign({ size: "md" }, descriptionProps), description)),
+                children,
+                React__default["default"].createElement(react.Box, null, showButtonBottom && (React__default["default"].createElement(AlertButton, __assign({ alignment: "bottom" }, buttonProps), buttonTitle)))))));
 };
 
 var AlertConfig = {
@@ -21739,11 +21784,17 @@ function getToastPlacement(position, dir) {
     return (_a = logical === null || logical === void 0 ? void 0 : logical[dir]) !== null && _a !== void 0 ? _a : position;
 }
 
+var StatusVariantMap = {
+    info: 'infoDark',
+    success: 'successDark',
+    warning: 'warningDark',
+    error: 'errorDark',
+};
 var Toast = function (props) {
     var _a = props.status, status = _a === void 0 ? 'info' : _a, id = props.id, title = props.title, isClosable = props.isClosable, onClose = props.onClose, description = props.description, buttonTitle = props.buttonTitle, onButtonClick = props.onButtonClick, _b = props.hideIcon, hideIcon = _b === void 0 ? false : _b;
     var buttonProps = { onClick: onButtonClick };
     return (React__namespace.createElement(react.DarkMode, null,
-        React__namespace.createElement(Alert, { id: id, alertTitle: title, buttonTitle: buttonTitle, description: description, showIcon: !hideIcon, status: status, showCloseButton: isClosable, onClose: onClose, variant: DarkStatusVariantMap[status], showButton: !!onButtonClick && !!buttonTitle, buttonProps: buttonProps })));
+        React__namespace.createElement(Alert, { id: id, alertTitle: title, buttonTitle: buttonTitle, description: description, showIcon: !hideIcon, status: status, showCloseButton: isClosable, onClose: onClose, variant: StatusVariantMap[status], showButton: !!onButtonClick && !!buttonTitle, buttonProps: buttonProps })));
 };
 var defaults = {
     title: '',
@@ -24771,8 +24822,9 @@ Object.defineProperty(exports, 'useRadioGroup', {
     get: function () { return react.useRadioGroup; }
 });
 exports.Alert = Alert;
+exports.AlertButton = AlertButton;
 exports.AlertConfig = AlertConfig;
-exports.AlertIconColorMap = AlertIconColorMap;
+exports.AlertIcon = AlertIcon;
 exports.Avatar = Avatar;
 exports.AvatarConfig = AvatarConfig;
 exports.AvatarGroup = AvatarGroup;
@@ -24783,7 +24835,6 @@ exports.ButtonVariantConfig = ButtonVariantConfig;
 exports.Checkbox = Checkbox$1;
 exports.CheckboxConfig = CheckboxConfig;
 exports.CheckboxGroup = WrappedCheckboxGroup;
-exports.DarkStatusVariantMap = DarkStatusVariantMap;
 exports.DatePicker = DatePicker;
 exports.DatePickerContext = DatePickerContext;
 exports.DrawerConfig = DrawerConfig;
@@ -24791,13 +24842,11 @@ exports.Heading = Heading;
 exports.HeadingConfig = HeadingConfig;
 exports.Icon = Icon;
 exports.KibbleThemeProvider = KibbleThemeProvider;
-exports.LightStatusVariantMap = LightStatusVariantMap;
 exports.Logo = Logo;
 exports.Menu = Menu;
 exports.MenuConfig = MenuConfig;
 exports.MenuContext = MenuContext;
 exports.MenuItemConfig = MenuItemConfig;
-exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;
 exports.ModalFooter = ModalFooter;