@televet/kibble-ui 1.13.2 → 1.14.0-beta.2f7t8x7.2

package/build/components/Overlay/Popover/components/PopoverBody/popoverBody.component.d.ts

@@ -0,0 +1,2 @@
+import { PopoverBodyProps } from '@chakra-ui/react';
+export declare const PopoverBody: ({ children, ...rest }: PopoverBodyProps) => JSX.Element;

package/build/components/Overlay/Popover/components/PopoverCloseButton/popoverCloseButton.component.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '../../../../Forms';
+export declare const PopoverCloseButton: ({ right, left, size, ...rest }: ButtonProps) => JSX.Element;

package/build/components/Overlay/Popover/components/PopoverFooter/popoverFooter.component.d.ts

@@ -0,0 +1,4 @@
+import { PopoverFooterProps as ChakraPopoverFooterProps } from '@chakra-ui/react';
+export interface PopoverFooterProps extends ChakraPopoverFooterProps {
+}
+export declare const PopoverFooter: ({ children, ...rest }: PopoverFooterProps) => JSX.Element;

package/build/components/Overlay/Popover/components/PopoverFooterButtons/popoverFooterButtons.component.d.ts

@@ -0,0 +1,11 @@
+import { PopoverFooterProps as ChakraPopoverFooterProps } from '@chakra-ui/react';
+export interface PopoverFooterButtonProps extends ChakraPopoverFooterProps {
+    submitText?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isDestructive?: boolean;
+    onSubmit?: () => void;
+    allowCancel?: boolean;
+    onCancel?: () => void;
+}
+export declare const PopoverFooterButtons: ({ submitText, isLoading, isDisabled, isDestructive, children, onSubmit, allowCancel, onCancel, ...rest }: PopoverFooterButtonProps) => JSX.Element;

package/build/components/Overlay/Popover/components/PopoverHeader/popoverHeader.component.d.ts

@@ -0,0 +1,7 @@
+import { PopoverHeaderProps as ChakraPopoverHeaderProps } from '@chakra-ui/react';
+import { HeadingSize, TextColor } from '../../../../Typography';
+export interface PopoverHeaderProps extends ChakraPopoverHeaderProps {
+    size?: HeadingSize;
+    colorToken?: TextColor;
+}
+export declare const PopoverHeader: ({ size, colorToken, children, ...rest }: PopoverHeaderProps) => JSX.Element;

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

@@ -0,0 +1,7 @@
+export * from './popover.component';
+export * from './popover.config';
+export * from './components/PopoverBody/popoverBody.component';
+export * from './components/PopoverFooter/popoverFooter.component';
+export * from './components/PopoverCloseButton/popoverCloseButton.component';
+export * from './components/PopoverHeader/popoverHeader.component';
+export * from './components/PopoverFooterButtons/popoverFooterButtons.component';

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { PopoverProps as ChakraPopoverProps } from '@chakra-ui/react';
+import { PopoverSize } from './popover.types';
+import { Shadows } from '../../../theme/tokens';
+export interface PopoverProps extends ChakraPopoverProps {
+    children: ReactNode;
+    popoverTrigger: ReactNode;
+    darkMode?: boolean;
+    allowEscape?: boolean;
+    size?: PopoverSize;
+    shadow?: Shadows;
+}
+export declare const Popover: ({ children, popoverTrigger, darkMode, allowEscape, size, shadow, ...rest }: PopoverProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+import { PopoverSizeConfig } from './popover.types';
+export declare const PopoverConfig: PopoverSizeConfig;

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

@@ -0,0 +1,6 @@
+export declare type PopoverSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface SizeConfig {
+    width: number;
+}
+export declare type PopoverSizeConfig = Record<PopoverSize, SizeConfig>;
+export {};

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

@@ -2,3 +2,4 @@ export * from './Drawer';
 export * from './Tooltip';
 export * from './Menu';
 export * from './Modal';
+export * from './Popover';

package/build/index.js

@@ -6902,6 +6902,65 @@ var ModalFooterButtons = function (_a) {
             React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, isDisabled: isDisabled, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
 };
 
+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, shadow = _a.shadow, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow"]);
+    var _d = useTheme(), colors = _d.colors, components = _d.components;
+    var width = components.Popover[size].width;
+    var adaptiveBackground = useAdaptiveColor(colors.background);
+    var bg = !darkMode ? adaptiveBackground : 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, { width: width, bg: bg, shadow: shadow },
+            React__default["default"].createElement(react.PopoverArrow, { bg: bg }),
+            children), !!darkMode)));
+};
+
+var PopoverConfig = {
+    xs: { width: 160 },
+    sm: { width: 200 },
+    md: { width: 260 },
+    lg: { width: 320 },
+    xl: { width: 480 },
+};
+
+var PopoverBody = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement(react.PopoverBody, __assign({ pb: 3 }, rest), children));
+};
+
+var PopoverFooter = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement(react.PopoverFooter, __assign({}, rest, { pb: 3, pt: 0, borderTop: 0 }), children));
+};
+
+var PopoverCloseButton = function (_a) {
+    var _b = _a.right, right = _b === void 0 ? 1 : _b, _c = _a.left, left = _c === void 0 ? 1 : _c, _d = _a.size, size = _d === void 0 ? 'xs' : _d, rest = __rest(_a, ["right", "left", "size"]);
+    var onClose = react.usePopoverContext().onClose;
+    return (React__default["default"].createElement(Button, __assign({ variant: "ghostNeutral", onClick: onClose, iconName: "close", position: "absolute", right: right, top: left, size: size }, rest)));
+};
+
+var PopoverHeader = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, colorToken = _a.colorToken, children = _a.children, rest = __rest(_a, ["size", "colorToken", "children"]);
+    return (React__default["default"].createElement(react.PopoverHeader, __assign({ px: 3, pt: 3, pb: 0, borderBottom: 0 }, rest),
+        React__default["default"].createElement(Heading, { size: size, colorToken: colorToken }, children)));
+};
+
+var PopoverFooterButtons = function (_a) {
+    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.usePopoverContext().onClose;
+    var handleCancel = function () {
+        if (onCancel) {
+            onCancel();
+        }
+        onClose();
+    };
+    return (React__default["default"].createElement(PopoverFooter, __assign({}, rest),
+        React__default["default"].createElement(react.Flex, { w: "100%" },
+            allowCancel && (React__default["default"].createElement(Button, { variant: "tertiary", size: "sm", onClick: handleCancel }, "Cancel")),
+            React__default["default"].createElement(react.Spacer, null),
+            React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, isDisabled: isDisabled, size: "sm", variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
+};
+
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
@@ -6939,6 +6998,7 @@ var theme = react.extendTheme({
         Tooltip: TooltipConfig,
         Avatar: AvatarConfig,
         Menu: MenuConfig,
+        Popover: PopoverConfig,
         Tag: TagConfig,
         Tabs: TabsConfig,
         Radio: RadioConfig,
@@ -9772,6 +9832,13 @@ exports.ModalFooter = ModalFooter;
 exports.ModalFooterButtons = ModalFooterButtons;
 exports.ModalHeader = ModalHeader;
 exports.NotificationCounter = NotificationCounter;
+exports.Popover = Popover;
+exports.PopoverBody = PopoverBody;
+exports.PopoverCloseButton = PopoverCloseButton;
+exports.PopoverConfig = PopoverConfig;
+exports.PopoverFooter = PopoverFooter;
+exports.PopoverFooterButtons = PopoverFooterButtons;
+exports.PopoverHeader = PopoverHeader;
 exports.Radio = Radio;
 exports.RadioConfig = RadioConfig;
 exports.RadioGroup = WrappedRadioGroup;