@veracity/vui 0.3.2 → 0.5.0

package/modal/modal.js

@@ -0,0 +1,113 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+var react_1 = __importStar(require("react"));
+var react_remove_scroll_1 = require("react-remove-scroll");
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var portal_1 = __importDefault(require("../portal"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var focusLock_1 = __importDefault(require("./focusLock"));
+var ModalBackdrop_1 = __importDefault(require("./ModalBackdrop"));
+var ModalContent_1 = __importDefault(require("./ModalContent"));
+var modalManager_1 = require("./modalManager");
+/**
+ * Displays provided content on top of a dark backdrop element with fixed position.
+ * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.
+ * Uses focus and scroll lock to achieve proper accessibility.
+ * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
+ */
+exports.Modal = (0, core_1.vui)(function (props, ref) {
+    var _a, _b;
+    var allowPinchZoom = props.allowPinchZoom, children = props.children, className = props.className, contentProps = props.contentProps, disableAutoFocus = props.disableAutoFocus, disableBackdropClose = props.disableBackdropClose, disableEscClose = props.disableEscClose, disablePortal = props.disablePortal, disableReturnFocus = props.disableReturnFocus, disableScrollLock = props.disableScrollLock, disableTrapFocus = props.disableTrapFocus, finalFocusRef = props.finalFocusRef, hideBackdrop = props.hideBackdrop, initialFocusRef = props.initialFocusRef, isOpen = props.isOpen, onBackdropClickProp = props.onBackdropClick, onClose = props.onClose, onEsc = props.onEsc, preserveScrollBar = props.preserveScrollBar, size = props.size, variant = props.variant, rest = __rest(props, ["allowPinchZoom", "children", "className", "contentProps", "disableAutoFocus", "disableBackdropClose", "disableEscClose", "disablePortal", "disableReturnFocus", "disableScrollLock", "disableTrapFocus", "finalFocusRef", "hideBackdrop", "initialFocusRef", "isOpen", "onBackdropClick", "onClose", "onEsc", "preserveScrollBar", "size", "variant"]);
+    var modalRef = (0, react_1.useRef)(null);
+    var mouseDownTarget = (0, react_1.useRef)(null);
+    (0, modalManager_1.useModalManager)(modalRef, isOpen);
+    if (!isOpen)
+        return null;
+    var onBackdropClick = function (e) {
+        e.stopPropagation();
+        // Avoid closing modal when click starts inside the content and is released outside
+        if (mouseDownTarget.current !== e.target)
+            return;
+        if (!modalManager_1.manager.isTopModal(modalRef))
+            return;
+        !disableBackdropClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        onBackdropClickProp === null || onBackdropClickProp === void 0 ? void 0 : onBackdropClickProp(e);
+    };
+    var onKeyDown = function (e) {
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            !disableEscClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
+            onEsc === null || onEsc === void 0 ? void 0 : onEsc();
+        }
+    };
+    var onMouseDown = function (e) {
+        mouseDownTarget.current = e.target;
+    };
+    var childProps = {
+        onClick: function (e) {
+            var _a, _b;
+            e.stopPropagation();
+            (_b = (_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        },
+        tabIndex: (_b = (_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.tabIndex) !== null && _b !== void 0 ? _b : -1
+    };
+    var context = { isOpen: isOpen, onBackdropClick: onBackdropClick, onClose: onClose, size: size, variant: variant };
+    return (react_1.default.createElement(context_1.ModalProvider, { value: context },
+        react_1.default.createElement(portal_1.default, { disablePortal: disablePortal },
+            react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-modal', className), ref: (0, utils_1.mergeRefs)(ref, modalRef) }, rest, { onKeyDown: (0, utils_1.callAll)(props.onKeyDown, onKeyDown), onMouseDown: (0, utils_1.callAll)(props.onMouseDown, onMouseDown) }),
+                !hideBackdrop && react_1.default.createElement(ModalBackdrop_1.default, null),
+                react_1.default.createElement(focusLock_1.default, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, isDisabled: disableTrapFocus, returnFocus: !disableReturnFocus },
+                    react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar },
+                        react_1.default.createElement(ModalContent_1.default, __assign({}, contentProps), (0, react_1.cloneElement)(children, childProps))))))));
+});
+exports.Modal.displayName = 'Modal';
+exports.Modal.Backdrop = ModalBackdrop_1.default;
+exports.Modal.Content = ModalContent_1.default;
+exports.default = exports.Modal;

package/modal/modal.types.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { MouseEvent } from '../utils';
+import { FocusableElement } from './focusLock.types';
+export declare type ModalBackdropProps = SystemProps;
+export declare type ModalContentProps = SystemProps;
+export declare type ModalContext = Pick<ModalProps, 'isOpen' | 'onBackdropClick' | 'onClose' | 'size' | 'variant'>;
+export declare type ModalProps = SystemProps & ThemingProps<'Modal'> & {
+    /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
+    allowPinchZoom?: boolean;
+    /** A single child content element. */
+    children: React.ReactElement;
+    /** Props passed to internal ModalContent component. */
+    contentProps?: ModalContentProps;
+    /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */
+    disableAutoFocus?: boolean;
+    /** Clicking Backdrop element will not trigger 'onClose'. */
+    disableBackdropClose?: boolean;
+    /** Pressing 'Escape' will not trigger 'onClose'. */
+    disableEscClose?: boolean;
+    /** The children will be under the DOM hierarchy of the parent component. */
+    disablePortal?: boolean;
+    /** Focus won't be returned to the element that triggered the FocusLock once it unmounts. */
+    disableReturnFocus?: boolean;
+    /** Allows scrolling to happen on the content beneath the Modal. */
+    disableScrollLock?: boolean;
+    /** Disables FocusLock mechanism and allows focusing elements outside the Modal. */
+    disableTrapFocus?: boolean;
+    /** 'ref' of the element to return focus to when FocusLock unmounts. */
+    finalFocusRef?: React.RefObject<FocusableElement>;
+    /** Hides the dark backdrop element that is normally displayed beneath modal content. */
+    hideBackdrop?: boolean;
+    /** 'ref' of the element to receive focus initially when FocusLock mounts. */
+    initialFocusRef?: React.RefObject<FocusableElement>;
+    /** Displays the modal with its content on top of a backdrop. */
+    isOpen?: boolean;
+    /** Callback triggered when the backdrop element is clicked. Defaults to onClose. */
+    onBackdropClick?: (e: MouseEvent) => void;
+    /** Callback triggered to close the modal. */
+    onClose?: () => void;
+    /** Callback triggered when pressing 'Escape' key. Defaults to onClose. */
+    onEsc?: () => void;
+    /** Test this prop on Windows scrollbars */
+    preserveScrollBar?: boolean;
+};

package/modal/modal.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/modal/modalManager.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+/** State management for nested modals. */
+declare class ModalManager {
+    modals: any[];
+    add: (modal: any) => void;
+    remove: (modal: any) => void;
+    isTopModal: (modal: any) => boolean;
+}
+export declare const manager: ModalManager;
+/** Refs of new modals will be automatically added/removed from the state when rendering. */
+export declare function useModalManager(ref: Ref<any>, isOpen?: boolean): void;
+export {};

package/modal/modalManager.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalManager = exports.manager = void 0;
+var react_1 = require("react");
+/** State management for nested modals. */
+var ModalManager = /** @class */ (function () {
+    function ModalManager() {
+        var _this = this;
+        this.modals = [];
+        this.add = function (modal) {
+            _this.modals.push(modal);
+        };
+        this.remove = function (modal) {
+            _this.modals = _this.modals.filter(function (m) { return m !== modal; });
+        };
+        this.isTopModal = function (modal) {
+            var topmostModal = _this.modals[_this.modals.length - 1];
+            return topmostModal === modal;
+        };
+    }
+    return ModalManager;
+}());
+exports.manager = new ModalManager();
+/** Refs of new modals will be automatically added/removed from the state when rendering. */
+function useModalManager(ref, isOpen) {
+    (0, react_1.useEffect)(function () {
+        isOpen && exports.manager.add(ref);
+        return function () {
+            exports.manager.remove(ref);
+        };
+    }, [isOpen, ref]);
+}
+exports.useModalManager = useModalManager;

package/modal/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/modal/theme.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {};
+var parts = ['container', 'backdrop', 'content'];
+var sizes = {};
+var variants = {};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/notification/consts.js

@@ -18,8 +18,8 @@ exports.notificationStatusMapping = {
         colorScheme: 'blue',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            fill: ['blue.40', 'blue.60'],
-            name: 'fadSpinnerThird'
+            name: 'fadSpinnerThird',
+            pathFill: ['blue.40', 'blue.60']
         }
     },
     success: {

package/notification/notification.types.d.ts

@@ -2,14 +2,13 @@ import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { IconProp, IconProps } from '../icon';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
 export declare type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
     /** Socket displaying a button on the right. */
     action?: ReactNode;
     /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow';
     /** Socket displaying an icon on the left. */
-    icon?: IconProp | AnyElement;
+    icon?: IconProp | JSX.Element;
     /** If provided, displays a close button with this function as onClick. */
     onClose?: () => void;
     /** Modifies Notification style and content based on the given status. */

package/notification/theme.js

@@ -28,7 +28,7 @@ var defaultProps = {
     colorScheme: 'blue',
     variant: 'subtle'
 };
-var parts = ['container', 'button', 'icon', 'message', 'text', 'title'];
+var parts = ['container', 'button', 'icon', 'text', 'title'];
 var sizes = {};
 var variants = {
     subtle: variantSubtle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -18,6 +18,8 @@
   "dependencies": {
     "@types/styled-components": "^5.1.15",
     "@xstyled/styled-components": "^2.4.1",
+    "react-focus-lock": "^2.7.1",
+    "react-remove-scroll": "^2.4.3",
     "styled-components": "^5.3.1",
     "tippy.js": "^6.3.7"
   },

package/popover/popover.d.ts

@@ -4,7 +4,7 @@ import { PopoverProps } from './popover.types';
  * Uses 'usePopover' hook to expose relevant data to its children parts.
  * By default, renders provided content only when popover is opened (lazy).
  */
-declare function Popover({ children, isLazy, ...props }: PopoverProps): JSX.Element;
+declare function Popover(props: PopoverProps): JSX.Element;
 declare namespace Popover {
     var Content: import("..").VuiComponent<"div", import("..").BoxProps>;
     var Trigger: import("..").VuiComponent<"button", import("..").SystemProps>;

package/popover/popover.js

@@ -35,11 +35,12 @@ var usePopover_1 = __importDefault(require("./usePopover"));
  * Uses 'usePopover' hook to expose relevant data to its children parts.
  * By default, renders provided content only when popover is opened (lazy).
  */
-function Popover(_a) {
-    var children = _a.children, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, props = __rest(_a, ["children", "isLazy"]);
-    var popoverProps = (0, usePopover_1.default)(props);
+function Popover(props) {
+    var children = props.children, _a = props.isLazy, isLazy = _a === void 0 ? true : _a, rest = __rest(props, ["children", "isLazy"]);
+    var popoverProps = (0, usePopover_1.default)(rest);
     var close = popoverProps.close, isOpen = popoverProps.isOpen, open = popoverProps.open;
-    return (react_1.default.createElement(context_1.PopoverProvider, { value: __assign({ isLazy: isLazy }, popoverProps) }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open })));
+    var context = (0, utils_1.filterUndefined)(__assign({ isLazy: isLazy }, popoverProps));
+    return react_1.default.createElement(context_1.PopoverProvider, { value: context }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open }));
 }
 exports.default = Popover;
 Popover.Content = popoverContent_1.default;

package/popover/popoverContent.js

@@ -42,7 +42,7 @@ exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     return (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
     react_1.default.createElement("div", null,
-        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "scroll", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
+        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
 });
 exports.PopoverContent.displayName = 'PopoverContent';
 exports.default = exports.PopoverContent;

package/popover/popoverTrigger.js

@@ -40,9 +40,14 @@ exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
     var _b = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}, setReference = _b.setReference, popoverProps = __rest(_b, ["setReference"]);
     var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
     // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
-    var As = props.as, rest = __rest(props, ["as"]);
+    var As = props.as, onClickProp = props.onClick, rest = __rest(props, ["as", "onClick"]);
     var Element = As || core_1.v.button;
-    return react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest));
+    var onClick = function (e) {
+        // Avoids triggering parent's onClick, like when inside a ListItem
+        e.stopPropagation();
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+    };
+    return (react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", onClick: onClick, ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest)));
 });
 exports.PopoverTrigger.displayName = 'PopoverTrigger';
 exports.default = exports.PopoverTrigger;

package/popover/usePopover.js

@@ -63,33 +63,31 @@ function usePopover(props) {
     if (props === void 0) { props = {}; }
     var _a = props.closeOnBlur, closeOnBlur = _a === void 0 ? true : _a, _b = props.closeOnEsc, closeOnEsc = _b === void 0 ? true : _b, _c = props.defaultIsOpen, defaultIsOpen = _c === void 0 ? false : _c, 
     // disablePortal,
-    isOpenProp = props.isOpen, matchWidth = props.matchWidth, offset = props.offset, onClose = props.onClose, onOpen = props.onOpen, options = props.options, _d = props.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = props.trigger, trigger = _e === void 0 ? 'click' : _e;
+    isOpenProp = props.isOpen, matchWidth = props.matchWidth, offset = props.offset, onCloseProp = props.onClose, onOpenProp = props.onOpen, options = props.options, _d = props.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = props.trigger, trigger = _e === void 0 ? 'click' : _e;
     var _f = __read((0, react_1.useState)(isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : defaultIsOpen), 2), isOpen = _f[0], setIsOpen = _f[1];
     var _g = __read((0, react_1.useState)(null), 2), instance = _g[0], setInstance = _g[1];
     var _h = __read((0, react_1.useState)(null), 2), reference = _h[0], setReference = _h[1];
     var _j = __read((0, react_1.useState)(null), 2), popper = _j[0], setPopper = _j[1];
     var close = (0, react_1.useCallback)(function () { return instance === null || instance === void 0 ? void 0 : instance.hide(); }, [instance]);
-    var onCloseRef = (0, utils_1.useFnRef)(onClose);
-    var onOpenRef = (0, utils_1.useFnRef)(onOpen);
+    var onClose = (0, utils_1.useCallbackRef)(onCloseProp);
+    var onOpen = (0, utils_1.useCallbackRef)(onOpenProp);
     var open = (0, react_1.useCallback)(function () { return instance === null || instance === void 0 ? void 0 : instance.show(); }, [instance]);
     var isControlled = isOpenProp !== undefined;
     var tippyOptions = (0, react_1.useMemo)(function () {
         var _a, _b;
         var _c = options !== null && options !== void 0 ? options : {}, optionsOffset = _c.offset, onHidden = _c.onHidden, onHide = _c.onHide, onShow = _c.onShow, _d = _c.plugins, plugins = _d === void 0 ? [] : _d, _e = _c.popperOptions, popperOptions = _e === void 0 ? {} : _e, otherOptions = __rest(_c, ["offset", "onHidden", "onHide", "onShow", "plugins", "popperOptions"]);
-        return __assign({ arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, maxWidth: 'none', offset: (_a = optionsOffset !== null && optionsOffset !== void 0 ? optionsOffset : offset) !== null && _a !== void 0 ? _a : [0, 2], onHidden: function (instance) {
+        return __assign({ arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, maxWidth: 'none', offset: (_a = optionsOffset !== null && optionsOffset !== void 0 ? optionsOffset : offset) !== null && _a !== void 0 ? _a : [0, 4], onHidden: function (instance) {
                 setIsOpen(false);
                 onHidden === null || onHidden === void 0 ? void 0 : onHidden(instance);
             }, onHide: function (instance) {
-                var _a;
-                (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef, instance);
+                onClose(instance);
                 onHide === null || onHide === void 0 ? void 0 : onHide(instance);
             }, onShow: function (instance) {
-                var _a;
                 setIsOpen(true);
-                (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, instance);
+                onOpen(instance);
                 onShow === null || onShow === void 0 ? void 0 : onShow(instance);
             }, placement: placement, plugins: __spreadArray(__spreadArray([], __read((!isControlled && closeOnEsc ? [consts_1.closeOnEscPlugin] : [])), false), __read(plugins), false), popperOptions: __assign(__assign({}, popperOptions), { modifiers: __spreadArray([__assign(__assign({}, consts_1.matchWidthModifier), { enabled: !!matchWidth })], __read(((_b = popperOptions.modifiers) !== null && _b !== void 0 ? _b : [])), false) }), showOnCreate: defaultIsOpen, trigger: !isControlled ? trigger : 'manual' }, otherOptions);
-    }, [closeOnBlur, closeOnEsc, placement, trigger]);
+    }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger]);
     // Create a new Tippy instance
     (0, react_1.useEffect)(function () {
         if (popper !== null && reference !== null) {

package/popover/usePopover.types.d.ts

@@ -19,7 +19,7 @@ export declare type UsePopoverProps = {
     /** Invoked once content begins to show. */
     onOpen?: (instance: Instance<TippyProps>) => void;
     /** Object with any Tippy props. */
-    options?: TippyProps;
+    options?: Partial<TippyProps>;
     /** Preferred placement of the content. Might be flipped if needs more space. */
     placement?: Placement;
     /** Determintes the events that cause the content to show. */

package/portal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './portal';
+export { default } from './portal';
+export * from './portal.types';

package/portal/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./portal"), exports);
+var portal_1 = require("./portal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(portal_1).default; } });
+__exportStar(require("./portal.types"), exports);

package/portal/portal.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PortalProps } from './portal.types';
+/** Provided children are portaled to document.body or custom container. */
+export declare const Portal: FC<PortalProps>;
+export default Portal;

package/portal/portal.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+/** Provided children are portaled to document.body or custom container. */
+var Portal = function (props) {
+    var children = props.children, containerRef = props.containerRef, disablePortal = props.disablePortal;
+    var _a = __read((0, react_1.useState)(), 2), mountNode = _a[0], setMountNode = _a[1];
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!disablePortal) {
+            setMountNode((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _a !== void 0 ? _a : document.body);
+        }
+    }, [disablePortal]);
+    if (disablePortal)
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    return mountNode ? (0, react_dom_1.createPortal)(children, mountNode) : react_1.default.createElement(react_1.default.Fragment, null, mountNode);
+};
+exports.Portal = Portal;
+exports.default = exports.Portal;

package/portal/portal.types.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export declare type PortalProps = {
+    /** Ref of a custom container that will be used instead of document.body. */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Content will be rendered as usual, without portaling. */
+    disablePortal?: boolean;
+};

package/portal/portal.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/radio/radio.d.ts

@@ -1,5 +1,5 @@
 import { RadioProps, RadioStyleProps } from './radio.types';
-export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("..").SpaceAroundProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & RadioStyleProps, never>;
+export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & RadioStyleProps, never>;
 /**
  * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
  * Uses icons to display itself in different states.

package/radio/radioGroup.js

@@ -66,7 +66,7 @@ var react_1 = __importStar(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var context_1 = require("./context");
-exports.RadioGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n"
+exports.RadioGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1;\n"
     /**
      * Organizes layout and display of multiple radio buttons as a row or column.
      * Exposes some props to the children via context.

package/svg/svg.js

@@ -106,13 +106,15 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 var cache_1 = __importDefault(require("./cache"));
 var helpers_1 = require("./helpers");
-exports.SvgBase = core_1.styled.svgBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n"], ["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n"
-    /**
-     * Displays an svg element based on provided children or 'src' prop.
-     * When using src, it loads the content from the given URL and saves in in cache.
-     * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
-     */
-])), function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); });
+exports.SvgBase = core_1.styled.svgBox(function (_a) {
+    var pathFill = _a.pathFill;
+    return (0, core_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t", "\n\t"], ["\n\t\t", "\n\t"])), pathFill !== undefined &&
+        (Array.isArray(pathFill)
+            ? pathFill
+                .map(function (fill, index) { return "\n\t\t\t\t\t& > path:nth-child(" + (index + 1) + ") {\n\t\t\t\t\t\tfill: " + fill + ";\n\t\t\t\t\t}\n\t\t\t\t"; })
+                .join()
+            : "\n\t\t\t\t& > path {\n\t\t\t\t\tfill: " + pathFill + ";\n\t\t\t\t}\n\t\t\t"));
+});
 /**
  * Displays an svg element based on provided children or 'src' prop.
  * When using src, it loads the content from the given URL and saves in in cache.

package/svg/svg.types.d.ts

@@ -1,8 +1,8 @@
 import { ColorGetter, SystemProps } from '../system';
 import { Dict } from '../utils';
 export declare type SvgProps = SystemProps & {
-    /** Color or aray of colors used for first and second path elements. */
-    fill?: ColorGetter | ColorGetter[];
+    /** If string, adds fill color to all paths. If array, adds fill color to consecutive path elements. */
+    pathFill?: ColorGetter | ColorGetter[];
     /** If provided, loads an svg file from this URL and displays parsed content. */
     src?: string;
 };

package/system/custom.d.ts

@@ -8,10 +8,6 @@ export declare type MaxLinesProps = {
 };
 /** Provides styling to truncate multi-line text. */
 export declare const maxLines: import("@xstyled/styled-components").StyleGenerator;
-export declare type SpaceAroundProps = {
-    spaceAround?: number | string;
-};
-export declare const spaceAround: import("@xstyled/styled-components").StyleGenerator;
 export declare type WordBreakProps = {
     wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
 };