@veracity/vui 0.3.2 → 0.4.0

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/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/tag/tag.types.d.ts

@@ -2,7 +2,6 @@
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
 export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
@@ -11,11 +10,11 @@ export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     /** Displays tag and its content in disabled state with appropriate styling. */
     disabled?: boolean;
     /** Icon that replaces any other content. */
-    icon?: IconProp | AnyElement;
+    icon?: IconProp | JSX.Element;
     /** Socket displaying icon on the left side. */
-    iconLeft?: IconProp | AnyElement;
+    iconLeft?: IconProp | JSX.Element;
     /** Socket displaying icon on the right side. */
-    iconRight?: IconProp | AnyElement;
+    iconRight?: IconProp | JSX.Element;
     /** Makes the button take full width of the container. @deprecated */
     isFullWidth?: boolean;
     /** Makes item clickable and focusable with appropriate styling. */

package/theme/components.d.ts

@@ -230,20 +230,73 @@ declare const _default: {
         parts: string[];
         sizes: {};
         variants: {
-            test: {
+            dark: {
                 container: {
                     bg: string;
-                    color: string;
+                    borderBottom: number;
                 };
-                profile: {
-                    content: {
-                        color: string;
-                    };
+                account: {
                     trigger: {
+                        bg: string;
                         color: string;
-                        name: string;
+                        hoverBg: string;
+                        activeBg: string;
+                    };
+                };
+                createAccount: {
+                    link: {
+                        color: {
+                            xs: string;
+                            md: string;
+                        };
+                        hoverColor: {
+                            xs: string;
+                            md: string;
+                        };
+                    };
+                    text: {
+                        color: {
+                            md: string;
+                        };
                     };
                 };
+                divider: {
+                    borderColor: string;
+                };
+                linkItem: {
+                    container: {
+                        hoverBg: {
+                            xs: string;
+                            md: string;
+                        };
+                        activeBg: {
+                            xs: string;
+                            md: string;
+                        };
+                    };
+                    link: {
+                        borderColor: string;
+                    };
+                };
+                linksList: {
+                    color: {
+                        md: string;
+                    };
+                };
+                logo: {
+                    svg: {
+                        pathFill: string;
+                    };
+                };
+                mobileContent: {
+                    top: string;
+                };
+                mobileToggle: {
+                    variant: string;
+                };
+                notifications: {
+                    variant: string;
+                };
                 services: {
                     button: {
                         variant: string;

package/theme/defaultTheme.d.ts

@@ -398,20 +398,73 @@ declare const defaultTheme: {
             parts: string[];
             sizes: {};
             variants: {
-                test: {
+                dark: {
                     container: {
                         bg: string;
-                        color: string;
+                        borderBottom: number;
                     };
-                    profile: {
-                        content: {
-                            color: string;
-                        };
+                    account: {
                         trigger: {
+                            bg: string;
                             color: string;
-                            name: string;
+                            hoverBg: string;
+                            activeBg: string;
+                        };
+                    };
+                    createAccount: {
+                        link: {
+                            color: {
+                                xs: string;
+                                md: string;
+                            };
+                            hoverColor: {
+                                xs: string;
+                                md: string;
+                            };
+                        };
+                        text: {
+                            color: {
+                                md: string;
+                            };
                         };
                     };
+                    divider: {
+                        borderColor: string;
+                    };
+                    linkItem: {
+                        container: {
+                            hoverBg: {
+                                xs: string;
+                                md: string;
+                            };
+                            activeBg: {
+                                xs: string;
+                                md: string;
+                            };
+                        };
+                        link: {
+                            borderColor: string;
+                        };
+                    };
+                    linksList: {
+                        color: {
+                            md: string;
+                        };
+                    };
+                    logo: {
+                        svg: {
+                            pathFill: string;
+                        };
+                    };
+                    mobileContent: {
+                        top: string;
+                    };
+                    mobileToggle: {
+                        variant: string;
+                    };
+                    notifications: {
+                        variant: string;
+                    };
                     services: {
                         button: {
                             variant: string;

package/utils/index.d.ts

@@ -2,5 +2,6 @@ export * from './assertion';
 export * from './function';
 export * from './object';
 export * from './react';
+export * from './string';
 export * from './styles';
 export * from './types';

package/utils/index.js

@@ -14,5 +14,6 @@ __exportStar(require("./assertion"), exports);
 __exportStar(require("./function"), exports);
 __exportStar(require("./object"), exports);
 __exportStar(require("./react"), exports);
+__exportStar(require("./string"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./types"), exports);

package/utils/react.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CreateContextOptions, CreateContextReturn } from './types';
+import React, { RefObject } from 'react';
+import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
  * Assigns given value to the provided ref.
@@ -10,9 +10,14 @@ export declare function assignRef<T = any>(ref: ReactRef<T> | undefined, value:
 export declare function createContext<ContextType>(options?: CreateContextOptions): CreateContextReturn<ContextType>;
 /** Assigns a node to all provided refs. */
 export declare function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]): (node: T | null) => void;
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
 /**
- * Saves given function in a ref to ensure stable exported reference.
- * When input function changes, ref is updated.
+ * Triggers given callback when an event happens outside of a given element.
+ * Event listeners are attached to the window object.
+ * @param ref - element to check click position for
+ * @param callback - function triggered on outside click
+ * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
-export declare function useFnRef(fn?: Function): React.MutableRefObject<Function | undefined>;
+export declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], callback?: (event: Event) => void, events?: string[]): void;
 export {};

package/utils/react.js

@@ -19,8 +19,33 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFnRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
+exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
 var react_1 = __importStar(require("react"));
 var assertion_1 = require("./assertion");
 /**
@@ -69,15 +94,45 @@ function mergeRefs() {
     };
 }
 exports.mergeRefs = mergeRefs;
+// TODO: Bring it from UI-Utils
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+function useCallbackRef(callback) {
+    var ref = (0, react_1.useRef)(callback);
+    ref.current = callback;
+    return (0, react_1.useCallback)((function () {
+        var _a;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([ref], __read(args), false));
+    }), []);
+}
+exports.useCallbackRef = useCallbackRef;
+var defaultEvents = ['mousedown', 'touchstart'];
+// TODO: Bring it from UI-Utils
 /**
- * Saves given function in a ref to ensure stable exported reference.
- * When input function changes, ref is updated.
+ * Triggers given callback when an event happens outside of a given element.
+ * Event listeners are attached to the window object.
+ * @param ref - element to check click position for
+ * @param callback - function triggered on outside click
+ * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
-function useFnRef(fn) {
-    var fnRef = (0, react_1.useRef)(fn);
+function useClickOutside(ref, callback, events) {
+    if (events === void 0) { events = defaultEvents; }
+    var eventsString = JSON.stringify(events);
+    var listener = useCallbackRef(function (ev) {
+        var refs = (0, assertion_1.isArray)(ref) ? ref : [ref];
+        var target = ev.target;
+        var isClickOutside = refs.every(function (ref) { return ref.current && !ref.current.contains(target); });
+        isClickOutside && (callback === null || callback === void 0 ? void 0 : callback(ev));
+    });
     (0, react_1.useEffect)(function () {
-        fnRef.current = fn;
-    }, [fn]);
-    return fnRef;
+        var events = JSON.parse(eventsString);
+        events.forEach(function (event) { return window.addEventListener(event, listener); });
+        return function () {
+            events.forEach(function (event) { return window.removeEventListener(event, listener); });
+        };
+    }, [eventsString, ref]);
 }
-exports.useFnRef = useFnRef;
+exports.useClickOutside = useClickOutside;

package/utils/string.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Adds loggedIn=1 parameter to the URL if isLoggedIn flag is true, which means the user is logged in.
+ * This is supposed to aid login flow when navigating between Veracity applications.
+ */
+export declare function getLoggedInLink(link: string, isLoggedIn?: boolean): string;

package/utils/string.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLoggedInLink = void 0;
+/**
+ * Adds loggedIn=1 parameter to the URL if isLoggedIn flag is true, which means the user is logged in.
+ * This is supposed to aid login flow when navigating between Veracity applications.
+ */
+function getLoggedInLink(link, isLoggedIn) {
+    try {
+        var url = new URL(link);
+        if (isLoggedIn)
+            url.searchParams.append('loggedin', '1');
+        return url.toString();
+    }
+    catch (_a) {
+        return link;
+    }
+}
+exports.getLoggedInLink = getLoggedInLink;

package/utils/types.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
-/** Type for any React element without breaking autocompletion. */
-export declare type AnyElement = React.ReactNode & {};
+/** Type for a a no-op function stub. */
+export declare type AnyFunction = (...args: any[]) => any;
 /** Type for any number without breaking autocompletion. */
 export declare type AnyNumber = number & {};
 /** Type for any string without breaking autocompletion. */
@@ -21,6 +21,8 @@ export declare type CreateContextOptions = {
 export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];
 /** Basic dictionary typing. */
 export declare type Dict<T = any> = Record<string, T>;
+/** Classic application's environment names. */
+export declare type Environment = 'Prod' | 'Stag' | 'Test';
 /** Type of blur/focus event defaulted to any html element */
 export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
 /** Type of blur/focus event handler defaulted to any html element */

package/header/headerLink.d.ts

@@ -1,4 +0,0 @@
-import { HeaderLinkProps } from './header.types';
-/** Individual link item of the Header. */
-export declare const HeaderLink: import("../core").VuiComponent<"a", HeaderLinkProps>;
-export default HeaderLink;

package/header/headerLink.js

@@ -1,43 +0,0 @@
-"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 __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.HeaderLink = void 0;
-var react_1 = __importDefault(require("react"));
-var core_1 = require("../core");
-var list_1 = __importDefault(require("../list"));
-var context_1 = require("./context");
-/** Individual link item of the Header. */
-exports.HeaderLink = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var url = props.url, rest = __rest(props, ["url"]);
-    var isMobile = ((_a = (0, context_1.useHeader)()) !== null && _a !== void 0 ? _a : {}).isMobile;
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    var screenStyles = isMobile ? {} : { display: 'inline-flex' };
-    return (react_1.default.createElement(list_1.default.Item, __assign({ className: "vui-headerLink", linkProps: { href: url }, ref: ref }, screenStyles, styles.link, rest)));
-});
-exports.HeaderLink.displayName = 'HeaderLink';
-exports.default = exports.HeaderLink;

package/header/headerLinks.d.ts

@@ -1,4 +0,0 @@
-import { HeaderLinksProps } from './header.types';
-/** List of Header Links. */
-export declare const HeaderLinks: import("../core").VuiComponent<"ul", HeaderLinksProps>;
-export default HeaderLinks;

package/header/headerProfile.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { HeaderProfileProps } from './headerProfile.types';
-/** Displays user profile information and helpful links, like settings or logout. */
-export default function HeaderProfile(props: HeaderProfileProps): JSX.Element;

package/header/headerProfile.types.d.ts

@@ -1,35 +0,0 @@
-import { AvatarProps } from '../avatar';
-import { BoxProps } from '../box';
-import { PopoverProps } from '../popover';
-import { AnyElement } from '../utils';
-import { HeaderLinkData } from './header.types';
-export declare type HeaderProfileProps = PopoverProps & {
-    /** Props object passed to the PopoverContent component. */
-    contentProps?: BoxProps;
-    /** Socket displaying a set of link sections below user information. */
-    sections?: HeaderProfileData['sections'] | AnyElement;
-    /** Props object passed to the PopoverTrigger component. */
-    triggerProps?: AvatarProps;
-    /** Socket displaying user information on top of the profile popover. */
-    userInfo?: HeaderProfileData['userInfo'] | AnyElement;
-};
-/** Defines profile link sections and user information. */
-export declare type HeaderProfileData = {
-    sections?: HeaderProfileSectionsData;
-    userInfo?: HeaderProfileUserInfoData;
-};
-/** Defines heading and an array of links within one section. */
-export declare type HeaderProfileSectionData = {
-    heading?: string;
-    links?: HeaderLinkData[];
-};
-/** Defines a set of link sections within the profile popover. */
-export declare type HeaderProfileSectionsData = {
-    [sectionName: string]: HeaderProfileSectionData;
-};
-/** Defines user information within the profile. */
-export declare type HeaderProfileUserInfoData = {
-    companyName?: string;
-    userName?: string;
-};
-export declare type HeaderProfileUserInfoProps = HeaderProfileUserInfoData;