@via-profit/ui-kit 0.1.0-rc.59 → 0.1.0-rc.60

package/Highlighted/index.d.ts

@@ -22,6 +22,12 @@ export interface HighlightedProps extends React.HTMLAttributes<HTMLSpanElement>
      * ```
      */
     readonly highlight: string | readonly string[];
+    /**
+     * Case sensitive\
+     * **Default:** `false`
+     *
+     */
+    readonly caseSensitive?: boolean;
     /**
      * Overridable components map
      */
@@ -37,7 +43,7 @@ export interface HighlightedOverrides {
      */
     readonly Mark?: React.ForwardRefExoticComponent<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
     /**
-     * Text element (HTML <span>)
+     * Text element (HTML <span>)regex
      */
     readonly Text?: React.ForwardRefExoticComponent<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
 }

package/Highlighted/index.js

@@ -26,11 +26,11 @@ exports.escapeRegex = escapeRegex;
  * The component allows you to highlight text matches in a string
  */
 const Highlighted = (props, ref) => {
-    const { text, highlight, overrides } = props, nativeProps = __rest(props, ["text", "highlight", "overrides"]);
+    const { text, highlight, overrides, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "caseSensitive"]);
     const patterns = react_1.default.useMemo(() => (typeof highlight === 'string' ? [highlight] : highlight)
         .filter(h => h.trim() !== '')
         .map(exports.escapeRegex), [highlight]);
-    const regex = react_1.default.useMemo(() => new RegExp(`(${patterns.join('|')})`, 'gi'), [patterns]);
+    const regex = react_1.default.useMemo(() => new RegExp(`(${patterns.join('|')})`, caseSensitive ? 'g' : 'gi'), [patterns, caseSensitive]);
     const overridesMap = react_1.default.useMemo(() => (Object.assign({ Container: HighlightedContainer_1.default,
         Mark: HighlightedMark_1.default,
         Text: HighlightedText_1.default }, overrides)), [overrides]);

package/Modal/BaseModal/ModalWrapper.js

@@ -6,13 +6,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@emotion/react");
 const context_1 = require("./context");
+const TabManager_1 = __importDefault(require("../../utils/TabManager"));
 const ModalWrapper = props => {
     const { children, isOpen: isOpenProp } = props;
     const { state, dispatch } = (0, context_1.useContext)();
     const [alreadyMounted, setMountState] = react_1.default.useState(true);
     const { closeOnEsape, isMounted, isOpen, destroyTimeout, onRequestClose } = state;
     const containerRef = react_1.default.useRef(null);
-    const id = react_1.default.useMemo(() => context_1.PORTAL_ID + ':' + new Date().getTime().toString(), []);
+    const id = context_1.PORTAL_ID + react_1.default.useId();
+    react_1.default.useEffect(() => {
+        const c = containerRef.current;
+        if (isOpen && c) {
+            TabManager_1.default.registerContainer(c);
+        }
+        return () => {
+            if (c) {
+                TabManager_1.default.unregisterContainer(c);
+            }
+        };
+    }, [isOpen]);
     const getScrollWidth = react_1.default.useCallback(() => {
         var _a;
         const outer = window.document.createElement('div');
@@ -37,69 +49,6 @@ const ModalWrapper = props => {
         (_a = outer.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(outer);
         return widthNoScroll - widthWithScroll;
     }, []);
-    /**
-     * Set focus to the next or prev element
-     */
-    const lastIndex = react_1.default.useRef(-1);
-    const nextFocus = react_1.default.useCallback((reverse) => {
-        if (!containerRef.current) {
-            return;
-        }
-        const universe = containerRef.current.querySelectorAll('input, button, select, textarea, a[href]');
-        const list = Array.prototype.filter.call(universe, function (item) {
-            return item.tabIndex >= '0';
-        });
-        if (!reverse) {
-            const nextIndex = lastIndex.current + 1;
-            if (list[nextIndex]) {
-                list[nextIndex].focus();
-                lastIndex.current = nextIndex;
-                return;
-            }
-            // othrwise
-            const nextEl = list[0];
-            if (nextEl) {
-                lastIndex.current = 0;
-                nextEl.focus();
-                return;
-            }
-        }
-        if (reverse) {
-            const nextIndex = lastIndex.current - 1;
-            if (list[nextIndex]) {
-                list[nextIndex].focus();
-                lastIndex.current = nextIndex;
-                return;
-            }
-            // othrwise
-            const nextEl = list[list.length - 1];
-            if (nextEl) {
-                lastIndex.current = list.length - 1;
-                nextEl.focus();
-                return;
-            }
-        }
-    }, []);
-    react_1.default.useEffect(() => {
-        if (isOpenProp && containerRef.current) {
-            containerRef.current.focus();
-        }
-        const keydown = (event) => {
-            if (event.key.toLowerCase() !== 'tab' || !isOpenProp) {
-                return;
-            }
-            event.preventDefault();
-            nextFocus(event.shiftKey);
-        };
-        const lastFocused = document.activeElement;
-        window.document.addEventListener('keydown', keydown);
-        return () => {
-            if (lastFocused) {
-                lastFocused.focus();
-            }
-            window.document.removeEventListener('keydown', keydown);
-        };
-    }, [nextFocus, isOpenProp]);
     /**
      * Component will unmount
      * Mark component as unmounted
@@ -108,6 +57,9 @@ const ModalWrapper = props => {
         setMountState(false);
     }, []);
     react_1.default.useEffect(() => {
+        if (isOpenProp && containerRef.current) {
+            containerRef.current.focus();
+        }
         /**
          * The last dialog will be found and closed
          */
@@ -120,12 +72,27 @@ const ModalWrapper = props => {
                     onRequestClose();
                 }
             }
+            if (event.key.toLowerCase() === 'tab' &&
+                isOpenProp &&
+                TabManager_1.default.isCurrentContainer(containerRef.current)) {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    TabManager_1.default.focusPrev();
+                }
+                else {
+                    TabManager_1.default.focusNext();
+                }
+            }
         };
+        const lastFocused = document.activeElement;
         window.document.addEventListener('keydown', keyDown);
         return () => {
+            if (lastFocused) {
+                lastFocused.focus();
+            }
             window.document.removeEventListener('keydown', keyDown);
         };
-    }, [onRequestClose, closeOnEsape, id]);
+    }, [onRequestClose, closeOnEsape, id, isOpenProp]);
     /**
      * Controller for visibility state.
      * Waiting n milliseconds after closing the modal, then sets the visibility property to true

package/Typography/Base.js

@@ -9,7 +9,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
  * Example: `import Span from '@via-profit/ui-kit/Span'`
  */
 const Base = styled_1.default.span `
-  font-size: 1rem;
+  font-size: 1em;
   font-weight: 300;
   color: currentColor;
 `;

package/Typography/Blockquote.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Blockquote = styled_1.default.blockquote `
-  font-size: 1rem;
+  font-size: 1em;
   font-weight: 400;
   font-style: italic;
   position: relative;

package/Typography/H1.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h1 `
-  font-size: 2rem;
+  font-size: 2em;
   font-weight: 700;
   color: currentColor;
 `;

package/Typography/H2.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h2 `
-  font-size: 1.5rem;
+  font-size: 1.5em;
   font-weight: 500;
   color: currentColor;
 `;

package/Typography/H3.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h3 `
-  font-size: 1.25rem;
+  font-size: 1.25em;
   font-weight: 500;
   color: currentColor;
 `;

package/Typography/H4.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h4 `
-  font-size: 1.2rem;
+  font-size: 1.2em;
   font-weight: 500;
   color: currentColor;
 `;

package/Typography/H5.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h5 `
-  font-size: 1.2rem;
+  font-size: 1.2em;
   font-weight: 300;
   color: currentColor;
 `;

package/Typography/Paragraph.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledParagraph = styled_1.default.p `
-  font-size: 1rem;
+  font-size: 1em;
   font-weight: 300;
   margin: ${({ $noMargin }) => ($noMargin ? 0 : '0 0 0.8em 0')};
   color: currentColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.59",
+  "version": "0.1.0-rc.60",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/utils/TabManager.d.ts

@@ -0,0 +1,57 @@
+/**
+ * How to use:
+ * ```tsx
+ * const MyComponent: React.FC = () => {
+ *   const container = React.useRef<HTMLElement | null>(null);
+ *
+ *   React.useEffect(() => {
+ *      const keydown = (event: KeyboardEvent) => {
+ *        if (
+ *          event.key.toLowerCase() !== 'tab' ||
+ *          !TabManager.isCurrentContainer(containerRef.current)
+ *        ) {
+ *          return;
+ *        }
+ *
+ *        event.preventDefault();
+ *
+ *        if (event.shiftKey) {
+ *          TabManager.focusPrev();
+ *        } else {
+ *          TabManager.focusNext();
+ *        }
+ *      };
+ *
+ *     window.document.addEventListener('keydown', keydown);
+ *
+ *      return () => {
+ *         window.document.addEventListener('keydown', keydown);
+ *      }
+ *   }, []);
+ *
+ *   return (
+ *     <div ref={container} onKeyDown>
+ *      ...
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare class TabManager {
+    #private;
+    isCurrentContainer(elem: HTMLElement | null): boolean | null;
+    getTopOfTheStack(): {
+        stackElement: {
+            container: HTMLElement;
+            lastIndex: number;
+        };
+        stackIndex: number;
+    };
+    registerContainer(container: HTMLElement): void;
+    unregisterContainer(container: HTMLElement): void;
+    getElementsList(): HTMLElement[];
+    focusNext(): void;
+    focusPrev(): void;
+}
+declare const tabManager: TabManager;
+export default tabManager;

package/utils/TabManager.js

@@ -0,0 +1,136 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _TabManager_stack;
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * How to use:
+ * ```tsx
+ * const MyComponent: React.FC = () => {
+ *   const container = React.useRef<HTMLElement | null>(null);
+ *
+ *   React.useEffect(() => {
+ *      const keydown = (event: KeyboardEvent) => {
+ *        if (
+ *          event.key.toLowerCase() !== 'tab' ||
+ *          !TabManager.isCurrentContainer(containerRef.current)
+ *        ) {
+ *          return;
+ *        }
+ *
+ *        event.preventDefault();
+ *
+ *        if (event.shiftKey) {
+ *          TabManager.focusPrev();
+ *        } else {
+ *          TabManager.focusNext();
+ *        }
+ *      };
+ *
+ *     window.document.addEventListener('keydown', keydown);
+ *
+ *      return () => {
+ *         window.document.addEventListener('keydown', keydown);
+ *      }
+ *   }, []);
+ *
+ *   return (
+ *     <div ref={container} onKeyDown>
+ *      ...
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+class TabManager {
+    constructor() {
+        _TabManager_stack.set(this, []);
+    }
+    isCurrentContainer(elem) {
+        var _a, _b;
+        const lastof = (_b = (_a = this.getTopOfTheStack()) === null || _a === void 0 ? void 0 : _a.stackElement) === null || _b === void 0 ? void 0 : _b.container;
+        return lastof && elem && lastof === elem;
+    }
+    getTopOfTheStack() {
+        const stackIndex = __classPrivateFieldGet(this, _TabManager_stack, "f").length - 1;
+        return {
+            stackElement: __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex],
+            stackIndex,
+        };
+    }
+    registerContainer(container) {
+        __classPrivateFieldGet(this, _TabManager_stack, "f").push({ container, lastIndex: -1 });
+    }
+    unregisterContainer(container) {
+        __classPrivateFieldSet(this, _TabManager_stack, __classPrivateFieldGet(this, _TabManager_stack, "f").filter(stackElem => stackElem.container !== container), "f");
+    }
+    getElementsList() {
+        const { stackElement } = this.getTopOfTheStack();
+        const universe = stackElement.container.querySelectorAll('input, button, select, textarea, a[href]');
+        const list = Array.prototype.filter.call(universe, function (item) {
+            return item.tabIndex >= 0;
+        });
+        list.sort((a, b) => {
+            if (a.tabIndex === 0) {
+                return 1;
+            }
+            if (b.tabIndex === 0) {
+                return -1;
+            }
+            if (a.tabIndex < b.tabIndex) {
+                return -1;
+            }
+            if (a.tabIndex > b.tabIndex) {
+                return 1;
+            }
+            return 0;
+        });
+        return list;
+    }
+    focusNext() {
+        const { stackElement, stackIndex } = this.getTopOfTheStack();
+        const list = this.getElementsList();
+        const nextIndex = stackElement.lastIndex + 1;
+        if (list[nextIndex]) {
+            list[nextIndex].focus();
+            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = nextIndex;
+            return;
+        }
+        // Othrwise
+        const nextEl = list[0];
+        if (nextEl) {
+            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = 0;
+            nextEl.focus();
+            return;
+        }
+    }
+    focusPrev() {
+        const { stackElement, stackIndex } = this.getTopOfTheStack();
+        const list = this.getElementsList();
+        const nextIndex = stackElement.lastIndex - 1;
+        if (list[nextIndex]) {
+            list[nextIndex].focus();
+            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = nextIndex;
+            return;
+        }
+        // Othrwise
+        const nextEl = list[list.length - 1];
+        if (nextEl) {
+            __classPrivateFieldGet(this, _TabManager_stack, "f")[stackIndex].lastIndex = list.length - 1;
+            nextEl.focus();
+            return;
+        }
+    }
+}
+_TabManager_stack = new WeakMap();
+const tabManager = new TabManager();
+exports.default = tabManager;