@adaptabletools/adaptable 10.0.0-canary.0

package/src/components/OverlayTrigger/Overlay.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefresh = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
+const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const utils_1 = require("./utils");
+exports.useRefresh = () => {
+    const [x, update] = react_1.useState(0);
+    return () => {
+        update(x + 1);
+    };
+};
+const translateToValues = (x) => x
+    .split('(')[1]
+    .split(')')[0]
+    .split(',')
+    .map((s) => s.trim());
+const Overlay = React.forwardRef((props, ref) => {
+    const { visible, getConstrainRect, anchor, position } = props, domProps = tslib_1.__rest(props, ["visible", "getConstrainRect", "anchor", "position"]);
+    const domRef = react_1.useRef(null);
+    const setRef = (node) => {
+        domRef.current = node;
+        if (ref && typeof ref === 'function') {
+            ref(node);
+        }
+    };
+    const [opacity, setOpacity] = react_1.useState(0);
+    const transitionInProgressRef = react_1.useRef(false);
+    const prevVisible = usePrevious_1.default(visible, visible);
+    const prevOpacity = usePrevious_1.default(opacity, opacity);
+    const refresh = exports.useRefresh();
+    react_1.useEffect(() => {
+        batchUpdate_1.default(() => {
+            transitionInProgressRef.current = true;
+            setOpacity(props.visible ? 1 : 0);
+        }).commit();
+    }, [visible]);
+    react_1.useLayoutEffect(() => {
+        if (!visible) {
+            return;
+        }
+        const constrainRect = getConstrainRect();
+        const domNode = domRef.current;
+        const thisRect = utils_1.getRect(domNode);
+        const intersection = utils_1.getIntersection(constrainRect, thisRect);
+        if (!isEqual_1.default(intersection, thisRect)) {
+            const transform = props.style
+                ? props.style.transform || 'translate3d(0px, 0px, 0px)'
+                : 'translate3d(0px, 0px, 0px)';
+            const horizontalDiff = Math.round(thisRect.left < constrainRect.left
+                ? constrainRect.left - thisRect.left
+                : thisRect.right > constrainRect.right
+                    ? constrainRect.right - thisRect.right
+                    : 0);
+            const verticalDiff = Math.round(thisRect.top < constrainRect.top
+                ? constrainRect.top - thisRect.top
+                : thisRect.bottom > constrainRect.bottom
+                    ? constrainRect.bottom - thisRect.bottom
+                    : 0);
+            const values = translateToValues(transform);
+            if (horizontalDiff) {
+                values[0] = `calc(${values[0]} + ${horizontalDiff}px)`;
+            }
+            if (verticalDiff) {
+                values[1] = `calc(${values[1]} + ${verticalDiff}px)`;
+            }
+            domNode.style.transform = `translate3d(${values.join(', ')})`;
+        }
+    }, [visible]);
+    if (prevVisible && !visible) {
+        transitionInProgressRef.current = true;
+    }
+    const onTransitionEnd = () => {
+        transitionInProgressRef.current = false;
+        refresh();
+    };
+    const renderTime = Date.now();
+    const renderTimeRef = react_1.useRef(renderTime);
+    renderTimeRef.current = renderTime;
+    react_1.useEffect(() => {
+        let timeoutId;
+        if (prevOpacity && !opacity) {
+            timeoutId = setTimeout(() => {
+                if (renderTimeRef.current != renderTime) {
+                    //we had other renders, so dont do anything - bail out
+                    return;
+                }
+                if (!visible) {
+                    onTransitionEnd();
+                }
+            }, 1500);
+        }
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [opacity, prevOpacity, renderTime]);
+    const transitionInProgress = transitionInProgressRef.current;
+    if (!visible && !transitionInProgress) {
+        return null;
+    }
+    return (React.createElement("div", Object.assign({}, domProps, { ref: setRef, style: Object.assign(Object.assign({}, props.style), { opacity }), onTransitionEnd: onTransitionEnd })));
+});
+exports.default = Overlay;

package/src/components/OverlayTrigger/getOverlayStyle.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { BoundingClientRect } from '../utils/getAvailableSizeInfo';
+export declare type OverlayHorizontalAlign = 'center' | 'left' | 'right' | 'auto';
+interface OverlayStyleParam {
+    targetRect: BoundingClientRect;
+    constrainRect: BoundingClientRect;
+    maxSizeOffset?: number;
+    anchor: 'vertical' | 'horizontal';
+    alignHorizontal?: OverlayHorizontalAlign;
+    targetOffset?: number;
+}
+declare const getOverlayStyle: ({ targetRect, constrainRect, anchor, targetOffset, alignHorizontal, }: OverlayStyleParam) => CSSProperties;
+export default getOverlayStyle;

package/src/components/OverlayTrigger/getOverlayStyle.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const getAvailableSizeInfo_1 = tslib_1.__importDefault(require("../utils/getAvailableSizeInfo"));
+const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
+const getWindowSize = () => ({
+    width: globalObject.innerWidth,
+    height: globalObject.innerHeight,
+});
+const getOverlayStyle = ({ targetRect, constrainRect, anchor, targetOffset, alignHorizontal, }) => {
+    alignHorizontal = alignHorizontal || 'center';
+    const sizeInfo = getAvailableSizeInfo_1.default({ targetRect, constrainRect });
+    const overlayStyle = {
+        maxWidth: sizeInfo.maxWidth,
+        maxHeight: sizeInfo.maxHeight,
+        position: 'absolute',
+    };
+    const offset = targetOffset || 0;
+    const windowSize = getWindowSize();
+    if (anchor === 'horizontal') {
+        if (sizeInfo.horizontalPosition === 'left') {
+            overlayStyle.right = windowSize.width - targetRect.left + offset;
+            overlayStyle.right -= globalObject.scrollX;
+        }
+        else {
+            overlayStyle.left = targetRect.right + offset;
+            overlayStyle.left += globalObject.scrollX;
+        }
+        overlayStyle.top = targetRect.top + targetRect.height / 2 + +globalObject.scrollY;
+        overlayStyle.transform = 'translate3d(0px, -50%, 0px)';
+        delete overlayStyle.maxHeight;
+    }
+    else {
+        if (sizeInfo.verticalPosition === 'top') {
+            overlayStyle.bottom = windowSize.height - targetRect.top + offset;
+            overlayStyle.bottom -= globalObject.scrollY;
+        }
+        else {
+            overlayStyle.top = targetRect.bottom + offset;
+            overlayStyle.top += globalObject.scrollY;
+        }
+        if (alignHorizontal === 'center') {
+            overlayStyle.left = targetRect.left + targetRect.width / 2 + globalObject.scrollX;
+            overlayStyle.transform = 'translate3d(-50%, 0px, 0px)';
+        }
+        if (alignHorizontal === 'left') {
+            overlayStyle.left = targetRect.left + globalObject.scrollX;
+        }
+        if (alignHorizontal === 'right') {
+            overlayStyle.right = windowSize.width - targetRect.right + globalObject.scrollX;
+        }
+        delete overlayStyle.maxWidth;
+    }
+    return overlayStyle;
+};
+exports.default = getOverlayStyle;

package/src/components/OverlayTrigger/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { BoundingClientRect } from '../utils/getAvailableSizeInfo';
+import { OverlayHorizontalAlign } from './getOverlayStyle';
+export declare type ConstrainToType = ((node: HTMLElement) => HTMLElement) | string;
+export declare const getConstrainRect: (target: HTMLElement, constrainTo?: ConstrainToType) => BoundingClientRect;
+export interface OverlayTriggerProps extends React.HTMLAttributes<HTMLElement> {
+    opacityTransitionDuration?: string | number;
+    children: React.ReactNode;
+    visible?: boolean;
+    showTriangle?: boolean;
+    preventPortalEventPropagation?: boolean;
+    style?: CSSProperties;
+    onVisibleChange?: (visible: boolean) => void;
+    showEvent?: 'click' | 'mousedown' | 'mouseenter' | 'focus';
+    target?: (overlayNode: HTMLElement) => HTMLElement;
+    hideEvent?: 'mouseleave' | 'blur';
+    hideDelay?: number;
+    render: () => ReactNode;
+    targetOffset?: number;
+    defaultZIndex?: number;
+    anchor?: 'vertical' | 'horizontal';
+    alignHorizontal?: OverlayHorizontalAlign;
+    constrainTo?: ConstrainToType;
+}
+declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<{
+    show: () => any;
+    hide: () => any;
+}>>;
+export default OverlayTrigger;

package/src/components/OverlayTrigger/index.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConstrainRect = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
+const getAvailableSizeInfo_1 = tslib_1.__importDefault(require("../utils/getAvailableSizeInfo"));
+const react_dom_1 = require("react-dom");
+const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
+const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+const Overlay_1 = tslib_1.__importDefault(require("./Overlay"));
+const getOverlayStyle_1 = tslib_1.__importDefault(require("./getOverlayStyle"));
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
+const utils_1 = require("./utils");
+const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
+const useVendorClassName_1 = tslib_1.__importDefault(require("./useVendorClassName"));
+const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
+const UIHelper_1 = require("../../View/UIHelper");
+exports.getConstrainRect = (target, constrainTo) => {
+    let el = null;
+    if (typeof constrainTo === 'string') {
+        el = selectParent_1.default(constrainTo, target);
+    }
+    if (typeof constrainTo === 'function') {
+        el = constrainTo(target);
+    }
+    if (el && el.tagName) {
+        return utils_1.getRect(el);
+    }
+    return utils_1.getDocRect();
+};
+let portalElement;
+const ensurePortalElement = () => {
+    if (!UIHelper_1.isBrowserDocumentAvailable()) {
+        return;
+    }
+    if (portalElement) {
+        return;
+    }
+    portalElement = document.createElement('div');
+    document.body.appendChild(portalElement);
+};
+const OverlayTrigger = React.forwardRef((props, ref) => {
+    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignHorizontal, constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignHorizontal", "constrainTo", "target"]);
+    const domRef = react_1.useRef(null);
+    const targetRef = react_1.useRef(null);
+    const overlayRef = react_1.useRef(null);
+    const [visible, doSetVisible] = useProperty_1.default(props, 'visible', false);
+    const hideTimeoutRef = react_1.useRef(null);
+    const setVisible = React.useCallback((visible) => {
+        if (!visible) {
+            hideTimeoutRef.current = setTimeout(() => {
+                hideTimeoutRef.current = null;
+                doSetVisible(false);
+            }, hideDelay);
+            return;
+        }
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
+        }
+        doSetVisible(true);
+    }, []);
+    const [targetRect, setTargetRect] = react_1.useState(null);
+    const [sizeInfo, setSizeInfo] = react_1.useState(null);
+    const prevVisible = usePrevious_1.default(visible, false);
+    ensurePortalElement();
+    const onShow = React.useCallback((event) => {
+        const target = targetRef.current;
+        if (event && preventPortalEventPropagation && !contains_1.default(target, event.target)) {
+            // because of how React portals behave - see https://github.com/facebook/react/issues/11387
+            // after the portal is rendered, even though an item is in a separate dom parent, if it's in the portal,
+            // events from it are propagated to the components in the portal and thus break some stuff
+            return;
+        }
+        batchUpdate_1.default(() => {
+            setVisible(true);
+            const target = targetRef.current;
+            const targetRect = target.getBoundingClientRect();
+            const sizeInfo = getAvailableSizeInfo_1.default({
+                targetRect,
+                constrainRect: exports.getConstrainRect(target, constrainTo),
+            });
+            setTargetRect(targetRect);
+            setSizeInfo(sizeInfo);
+        }).commit();
+    }, [constrainTo, preventPortalEventPropagation]);
+    const onHide = React.useCallback((_event) => {
+        setVisible(false);
+    }, [setVisible]);
+    react_1.useEffect(() => {
+        if (ref) {
+            const api = {
+                show: onShow,
+                hide: onHide,
+            };
+            if (typeof ref === 'function') {
+                ref(api);
+            }
+            else {
+                ref.current = api;
+            }
+        }
+    }, [ref]);
+    react_1.useEffect(() => {
+        let target = domRef.current.previousSibling;
+        if (targetProp) {
+            target = targetProp(target);
+        }
+        if (!target) {
+            LoggingHelper_1.LogAdaptableWarning('No OverlayTrigger target - make sure you render a child inside the OverlayTrigger, which will be the overlay target');
+            return;
+        }
+        targetRef.current = target;
+        let attached = false;
+        let onShowFn = onShow;
+        let onHideFn = onHide;
+        if (props.visible === undefined) {
+            attached = true;
+            target.addEventListener(showEvent, onShowFn);
+            target.addEventListener(hideEvent, onHideFn);
+        }
+        if (props.visible && !prevVisible) {
+            onShowFn();
+        }
+        return () => {
+            if (attached) {
+                target.removeEventListener(showEvent, onShowFn);
+                target.removeEventListener(hideEvent, onHideFn);
+            }
+        };
+    }, [props.visible, showEvent, hideEvent, onShow, onHide]);
+    let overlay;
+    const vendorClassName = useVendorClassName_1.default([visible]);
+    if (targetRect) {
+        const overlayTarget = targetRef.current;
+        alignHorizontal =
+            alignHorizontal ||
+                getComputedStyle(overlayTarget)
+                    .getPropertyValue('--ab-overlay-horizontal-align')
+                    .trim();
+        let overlayStyle = getOverlayStyle_1.default({
+            constrainRect: exports.getConstrainRect(overlayTarget, constrainTo),
+            targetRect,
+            targetOffset,
+            anchor,
+            alignHorizontal,
+        });
+        overlayStyle.transition = `opacity ${opacityTransitionDuration}`;
+        overlayStyle.overflow = `visible`;
+        overlayStyle.zIndex = defaultZIndex;
+        overlayStyle = Object.assign(Object.assign({}, overlayStyle), props.style);
+        const position = anchor === 'vertical' ? sizeInfo.verticalPosition : sizeInfo.horizontalPosition;
+        overlay = react_dom_1.createPortal(React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
+                if (overlayRef.current && overlayRef.current != node) {
+                    overlayRef.current.removeEventListener(showEvent, onShow);
+                    overlayRef.current.removeEventListener(hideEvent, onHide);
+                }
+                overlayRef.current = node;
+                if (node) {
+                    node.addEventListener(showEvent, onShow);
+                    node.addEventListener(hideEvent, onHide);
+                }
+            }, className: join_1.default('ab-Overlay', `ab-Overlay--position-${position}`, showTriangle ? 'ab-Overlay--show-triangle' : '', vendorClassName, domProps.className), visible: visible, style: overlayStyle, anchor: anchor, position: position, getConstrainRect: () => exports.getConstrainRect(targetRef.current) }), props.render()), portalElement);
+    }
+    return (React.createElement(React.Fragment, null,
+        props.children,
+        React.createElement("div", { "data-name": "OverlayTrigger", "data-visible": visible, ref: domRef, style: {
+                visibility: 'hidden',
+                flex: 'none',
+                width: 0,
+                height: 0,
+                pointerEvents: 'none',
+            } }),
+        overlay));
+});
+OverlayTrigger.defaultProps = {
+    showEvent: 'mouseenter',
+    hideEvent: 'mouseleave',
+    anchor: 'vertical',
+    targetOffset: 10,
+    defaultZIndex: 1000000,
+    opacityTransitionDuration: '250ms',
+};
+exports.default = OverlayTrigger;

package/src/components/OverlayTrigger/useVendorClassName.d.ts

@@ -0,0 +1,2 @@
+declare const useVendorClassName: (deps?: any[]) => string;
+export default useVendorClassName;

package/src/components/OverlayTrigger/useVendorClassName.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const useVendorClassName = (deps = []) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    return react_1.useMemo(() => {
+        if (adaptable) {
+            return adaptable.getVendorGridCurrentThemeName();
+        }
+        return '';
+    }, deps);
+};
+exports.default = useVendorClassName;

package/src/components/OverlayTrigger/utils.d.ts

@@ -0,0 +1,4 @@
+import { BoundingClientRect } from '../utils/getAvailableSizeInfo';
+export declare const getRect: (node: HTMLElement) => BoundingClientRect;
+export declare const getDocRect: () => BoundingClientRect;
+export declare const getIntersection: (rect1: BoundingClientRect, rect2: BoundingClientRect) => BoundingClientRect;

package/src/components/OverlayTrigger/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIntersection = exports.getDocRect = exports.getRect = void 0;
+exports.getRect = (node) => {
+    const rect = node.getBoundingClientRect();
+    return {
+        top: rect.top,
+        left: rect.left,
+        bottom: rect.bottom,
+        right: rect.right,
+        width: rect.width,
+        height: rect.height,
+    };
+};
+exports.getDocRect = () => {
+    const docRect = {
+        width: window.innerWidth,
+        right: window.innerWidth,
+        height: window.innerHeight,
+        bottom: window.innerHeight,
+        left: 0,
+        top: 0,
+    };
+    return docRect;
+};
+exports.getIntersection = (rect1, rect2) => {
+    const left = Math.max(rect1.left, rect2.left);
+    const top = Math.max(rect1.top, rect2.top);
+    const right = Math.min(rect1.right, rect2.right);
+    const bottom = Math.min(rect1.bottom, rect2.bottom);
+    const width = right - left;
+    const height = bottom - top;
+    return {
+        top,
+        left,
+        bottom,
+        right,
+        width,
+        height,
+    };
+};

package/src/components/Panel/index.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, FlexProps } from 'rebass';
+import { ReactNode, HTMLProps } from 'react';
+export declare const baseClassName = "ab-Panel";
+export interface HeaderProps extends FlexProps {
+}
+export declare type PanelProps = HTMLProps<HTMLElement> & {
+    header?: ReactNode | string;
+    headerProps?: HeaderProps;
+    bodyProps?: BoxProps;
+    variant?: 'default' | 'primary' | 'modern';
+    border?: string | number;
+    borderRadius?: string | number;
+    bodyScroll?: string | boolean;
+} & BoxProps;
+declare const Panel: (props: PanelProps) => JSX.Element;
+export default Panel;

package/src/components/Panel/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseClassName = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+exports.baseClassName = 'ab-Panel';
+const Header = (_a) => {
+    var { children, variant = 'default' } = _a, headerProps = tslib_1.__rest(_a, ["children", "variant"]);
+    if (!children) {
+        return null;
+    }
+    const style = {};
+    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, headerProps, { style: Object.assign(Object.assign({}, style), headerProps.style), className: join_1.default(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-${variant}`) }), children));
+};
+const Body = (_a) => {
+    var { children, bodyScroll, variant } = _a, bodyProps = tslib_1.__rest(_a, ["children", "bodyScroll", "variant"]);
+    if (!children) {
+        return null;
+    }
+    if (bodyScroll === true) {
+        bodyScroll = 'auto';
+    }
+    return (React.createElement(rebass_1.Box, Object.assign({}, bodyProps, { className: join_1.default(`${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `${exports.baseClassName}__body--scroll-${bodyScroll}` : null) }), children));
+};
+const Panel = (props) => {
+    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default' } = props, boxProps = tslib_1.__rest(props, ["borderRadius", "border", "className", "header", "children", "headerProps", "bodyProps", "bodyScroll", "variant"]);
+    const style = {};
+    if (borderRadius !== undefined) {
+        style['--ab-cmp-panel__border-radius'] =
+            typeof borderRadius == 'number' ? `var(--ab-space-${borderRadius})` : borderRadius;
+    }
+    const headerStyle = Object.assign({ border }, (headerProps ? headerProps.style : null));
+    const bodyStyle = Object.assign({ border }, (bodyProps ? bodyProps.style : null));
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { style: Object.assign(Object.assign({}, style), boxProps.style), className: join_1.default(className, exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`) }),
+        React.createElement(Header, Object.assign({}, headerProps, { style: headerStyle, variant: variant }), header),
+        React.createElement(Body, Object.assign({}, bodyProps, { style: bodyStyle, bodyScroll: bodyScroll, variant: variant }), children)));
+};
+exports.default = Panel;

package/src/components/PopupWithFooter.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DialogProps } from './Dialog';
+/**
+ * This is the main popup that we use - so all function popups will appear here.
+ */
+export interface IPopupWithFooterProps extends DialogProps {
+    showModal: boolean;
+    onHide?: () => void;
+    modal?: boolean;
+    maxWidth?: number;
+    footer: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const PopupWithFooter: React.ForwardRefExoticComponent<Pick<IPopupWithFooterProps, "fixed" | "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "footer" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "isOpen" | "modal" | "focusOnBrowserVisible" | "modalProps" | "defaultIsOpen" | "showCloseButton" | "onDismiss" | "dismissOnClickOutside" | "onHide" | "showModal"> & React.RefAttributes<HTMLElement>>;

package/src/components/PopupWithFooter.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupWithFooter = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const FlexWithFooter_1 = tslib_1.__importDefault(require("./FlexWithFooter"));
+exports.PopupWithFooter = React.forwardRef((props, ref) => {
+    const { showModal, onHide, footer, maxWidth } = props, dialogProps = tslib_1.__rest(props, ["showModal", "onHide", "footer", "maxWidth"]);
+    return (React.createElement(Dialog_1.default, Object.assign({}, dialogProps, { ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, padding: 0 }),
+        React.createElement(FlexWithFooter_1.default, { flexDirection: "column", style: {
+                height: '100%',
+                maxHeight: '90vh',
+                width: '70vw',
+                maxWidth: maxWidth || 800,
+            }, footer: footer, footerProps: {
+                padding: 2,
+                backgroundColor: 'primary',
+                className: 'ab-Popup__footer',
+            }, children: props.children })));
+});

package/src/components/Radio/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode, SyntheticEvent } from 'react';
+import { BoxProps, FlexProps } from 'rebass';
+declare type TypeProps = {
+    checked?: boolean;
+    as?: any;
+    name?: string;
+    value?: any;
+    onChange?: (checked: boolean, event?: SyntheticEvent | any) => void;
+    children?: ReactNode | JSX.Element;
+    gapDistance?: number;
+    childrenPosition?: 'start' | 'end';
+};
+export interface RadioProps extends TypeProps, Omit<BoxProps, keyof TypeProps> {
+}
+export declare const useRadioContext: <T extends unknown>() => {
+    value: T;
+    onChange: (value: T) => void;
+    name: string;
+};
+declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, ...props }: RadioProps) => JSX.Element;
+export declare const RadioGroup: <T extends unknown>(props: FlexProps & {
+    orientation: 'horizontal' | 'vertical';
+    value?: T;
+    name?: string;
+    defaultValue?: T;
+    onRadioChange?: (value: T) => void;
+}) => JSX.Element;
+export default Radio;