@broxus/react-uikit 0.1.0

package/dist/cjs/components/Nav/hooks/useAccessibility.js

@@ -0,0 +1,297 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const KeyCode_1 = __importDefault(require("rc-util/lib/KeyCode"));
+const raf_1 = __importDefault(require("rc-util/lib/raf"));
+const focus_1 = require("rc-util/lib/Dom/focus");
+const IdContext_1 = require("../context/IdContext");
+// destruct to reduce minify size
+const { LEFT, RIGHT, UP, DOWN, ENTER, ESC } = KeyCode_1.default;
+const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
+function getOffset(mode, isRootLevel, isRtl, which) {
+    const prev = 'prev';
+    const next = 'next';
+    const children = 'children';
+    const parent = 'parent';
+    // Inline enter is special that we use unique operation
+    if (mode === 'inline' && which === ENTER) {
+        return {
+            inlineTrigger: true,
+        };
+    }
+    const inline = {
+        [DOWN]: next,
+        [UP]: prev,
+    };
+    const horizontal = {
+        [DOWN]: children,
+        [ENTER]: children,
+        [LEFT]: isRtl ? next : prev,
+        [RIGHT]: isRtl ? prev : next,
+    };
+    const vertical = {
+        [DOWN]: next,
+        [ENTER]: children,
+        [ESC]: parent,
+        [LEFT]: isRtl ? children : parent,
+        [RIGHT]: isRtl ? parent : children,
+        [UP]: prev,
+    };
+    const offsets = {
+        horizontal,
+        horizontalSub: vertical,
+        inline,
+        inlineSub: inline,
+        vertical,
+        verticalSub: vertical,
+    };
+    const type = offsets[`${mode}${isRootLevel ? '' : 'Sub'}`]?.[which];
+    switch (type) {
+        case prev:
+            return {
+                offset: -1,
+                sibling: true,
+            };
+        case next:
+            return {
+                offset: 1,
+                sibling: true,
+            };
+        case parent:
+            return {
+                offset: -1,
+                sibling: false,
+            };
+        case children:
+            return {
+                offset: 1,
+                sibling: false,
+            };
+        default:
+            return null;
+    }
+}
+function findContainerUL(element) {
+    let current = element;
+    while (current) {
+        if (current.getAttribute('data-nav-list')) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    // Normally should not reach this line
+    /* istanbul ignore next */
+    return null;
+}
+/**
+ * Find focused element within element set provided
+ */
+function getFocusElement(activeElement, elements) {
+    let current = activeElement || document.activeElement;
+    while (current) {
+        if (elements.has(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * Get focusable elements from the element set under provided container
+ */
+function getFocusableElements(container, elements) {
+    const list = (0, focus_1.getFocusNodeList)(container, true);
+    return list.filter(ele => elements.has(ele));
+}
+function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
+    // Key on the menu item will not get validate parent container
+    if (!parentQueryContainer) {
+        return null;
+    }
+    // List current level menu item elements
+    const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+    // Find next focus index
+    const count = sameLevelFocusableMenuElementList.length;
+    let focusIndex = sameLevelFocusableMenuElementList.findIndex(ele => focusMenuElement === ele);
+    if (offset < 0) {
+        if (focusIndex === -1) {
+            focusIndex = count - 1;
+        }
+        else {
+            focusIndex -= 1;
+        }
+    }
+    else if (offset > 0) {
+        focusIndex += 1;
+    }
+    focusIndex = (focusIndex + count) % count;
+    // Focus menu item
+    return sameLevelFocusableMenuElementList[focusIndex];
+}
+function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
+    const rafRef = React.useRef();
+    const activeRef = React.useRef();
+    activeRef.current = activeKey;
+    const cleanRaf = () => {
+        raf_1.default.cancel(rafRef.current);
+    };
+    React.useEffect(() => () => {
+        cleanRaf();
+    }, []);
+    return event => {
+        const { which } = event;
+        if ([...ArrowKeys, ENTER, ESC].includes(which)) {
+            // Convert key to elements
+            let elements = new Set(), key2element = new Map(), element2key = new Map();
+            // >>> Wrap as function since we use raf for some case
+            const refreshElements = () => {
+                elements = new Set();
+                key2element = new Map();
+                element2key = new Map();
+                const keys = getKeys();
+                keys.forEach(key => {
+                    const element = document.querySelector(`[data-nav-id='${(0, IdContext_1.getNavId)(id, key)}']`);
+                    if (element) {
+                        elements.add(element);
+                        element2key.set(element, key);
+                        key2element.set(key, element);
+                    }
+                });
+                return elements;
+            };
+            refreshElements();
+            // First we should find current focused MenuItem/SubMenu element
+            const activeElement = key2element.get(activeKey);
+            const focusMenuElement = getFocusElement(activeElement, elements);
+            const focusMenuKey = focusMenuElement ? element2key.get(focusMenuElement) : undefined;
+            const offsetObj = getOffset(mode, focusMenuKey !== undefined && getKeyPath(focusMenuKey, true).length === 1, isRtl, which);
+            // Some mode do not have fully arrow operation like inline
+            if (!offsetObj) {
+                return;
+            }
+            // Arrow prevent default to avoid page scroll
+            if (ArrowKeys.includes(which)) {
+                event.preventDefault();
+            }
+            const tryFocus = (menuElement) => {
+                if (menuElement) {
+                    let focusTargetElement = menuElement;
+                    // Focus to link instead of menu item if possible
+                    const link = menuElement.querySelector('a');
+                    if (link?.getAttribute('href')) {
+                        focusTargetElement = link;
+                    }
+                    const targetKey = element2key.get(menuElement);
+                    if (targetKey !== undefined) {
+                        triggerActiveKey(targetKey);
+                    }
+                    /**
+                     * Do not `useEffect` here since `tryFocus` may trigger async
+                     * which makes React sync update the `activeKey`
+                     * that force render before `useRef` set the next activeKey
+                     */
+                    cleanRaf();
+                    rafRef.current = (0, raf_1.default)(() => {
+                        if (activeRef.current === targetKey) {
+                            focusTargetElement.focus();
+                        }
+                    });
+                }
+            };
+            if (offsetObj.sibling || !focusMenuElement) {
+                // ========================== Sibling ==========================
+                // Find walkable focus menu element container
+                let parentQueryContainer;
+                if (!focusMenuElement || mode === 'inline') {
+                    parentQueryContainer = containerRef.current;
+                }
+                else {
+                    parentQueryContainer = findContainerUL(focusMenuElement);
+                }
+                if (parentQueryContainer == null) {
+                    return;
+                }
+                // Get next focus element
+                const targetElement = getNextFocusElement(parentQueryContainer, 
+                // @ts-ignore
+                elements, 
+                // @ts-ignore
+                focusMenuElement, offsetObj.offset);
+                if (targetElement == null) {
+                    return;
+                }
+                // Focus menu item
+                tryFocus(targetElement);
+            }
+            // ======================= InlineTrigger =======================
+            else if (offsetObj.inlineTrigger && focusMenuKey !== undefined) {
+                // Inline trigger no need switch to sub menu item
+                triggerAccessibilityOpen(focusMenuKey);
+            }
+            // =========================== Level ===========================
+            else if (offsetObj.offset && focusMenuKey !== undefined) {
+                triggerAccessibilityOpen(focusMenuKey, true);
+                cleanRaf();
+                rafRef.current = (0, raf_1.default)(() => {
+                    // Async should re-sync elements
+                    refreshElements();
+                    const controlId = focusMenuElement.getAttribute('aria-controls');
+                    if (controlId == null) {
+                        return;
+                    }
+                    const subQueryContainer = document.getElementById(controlId);
+                    if (subQueryContainer == null) {
+                        return;
+                    }
+                    // Get sub focusable menu item
+                    const targetElement = getNextFocusElement(subQueryContainer, elements);
+                    if (targetElement == null) {
+                        return;
+                    }
+                    // Focus menu item
+                    tryFocus(targetElement);
+                }, 5);
+            }
+            else if ((!offsetObj.offset || offsetObj.offset < 0) && focusMenuKey !== undefined) {
+                const keyPath = getKeyPath(focusMenuKey, true);
+                const parentKey = keyPath[keyPath.length - 2];
+                const parentMenuElement = key2element.get(parentKey);
+                // Focus menu item
+                triggerAccessibilityOpen(parentKey, false);
+                if (parentMenuElement == null) {
+                    return;
+                }
+                tryFocus(parentMenuElement);
+            }
+        }
+        // Pass origin key down event
+        originOnKeyDown?.(event);
+    };
+}
+exports.default = useAccessibility;

package/dist/cjs/components/Nav/hooks/useActive.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { NavHoverEventHandler } from '../types';
+interface ActiveObj {
+    active: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+}
+export default function useActive(eventKey?: string, disabled?: boolean, onMouseEnter?: NavHoverEventHandler, onMouseLeave?: NavHoverEventHandler): ActiveObj;
+export {};

package/dist/cjs/components/Nav/hooks/useActive.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const NavContext_1 = require("../context/NavContext");
+function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
+    if (eventKey === undefined) {
+        return { active: false };
+    }
+    const { 
+    // Active
+    activeKey, onActive, onInactive, } = React.useContext(NavContext_1.NavContext);
+    const ret = {
+        active: activeKey === eventKey,
+    };
+    // Skip when disabled
+    if (!disabled) {
+        ret.onMouseEnter = domEvent => {
+            onMouseEnter?.({
+                domEvent,
+                key: eventKey,
+            });
+            onActive(eventKey);
+        };
+        ret.onMouseLeave = domEvent => {
+            onMouseLeave?.({
+                domEvent,
+                key: eventKey,
+            });
+            onInactive(eventKey);
+        };
+    }
+    return ret;
+}
+exports.default = useActive;

package/dist/cjs/components/Nav/hooks/useKeyRecords.d.ts

@@ -0,0 +1,12 @@
+export declare const OVERFLOW_KEY = "rc-menu-more";
+declare type KeyRecords = {
+    registerPath: (key: string, keyPath: string[]) => void;
+    unregisterPath: (key: string, keyPath: string[]) => void;
+    refreshOverflowKeys: (keys: string[]) => void;
+    isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
+    getKeyPath: (eventKey: string, includeOverflow?: (boolean | undefined)) => string[];
+    getKeys: () => string[];
+    getSubPathKeys: (key: string) => Set<string>;
+};
+export default function useKeyRecords(): KeyRecords;
+export {};

package/dist/cjs/components/Nav/hooks/useKeyRecords.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OVERFLOW_KEY = void 0;
+const React = __importStar(require("react"));
+const warning_1 = __importDefault(require("rc-util/lib/warning"));
+const timeUtil_1 = require("../utils/timeUtil");
+const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
+const getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
+const getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
+exports.OVERFLOW_KEY = 'rc-menu-more';
+function useKeyRecords() {
+    const [, internalForceUpdate] = React.useState({});
+    const key2pathRef = React.useRef(new Map());
+    const path2keyRef = React.useRef(new Map());
+    const [overflowKeys, setOverflowKeys] = React.useState([]);
+    const updateRef = React.useRef(0);
+    const destroyRef = React.useRef(false);
+    const forceUpdate = () => {
+        if (!destroyRef.current) {
+            internalForceUpdate({});
+        }
+    };
+    const registerPath = React.useCallback((key, keyPath) => {
+        // Warning for invalidate or duplicated `key`
+        if (process.env.NODE_ENV !== 'production') {
+            (0, warning_1.default)(!key2pathRef.current.has(key), `Duplicated key '${key}' used in Menu by path [${keyPath.join(' > ')}]`);
+        }
+        // Fill map
+        const connectedPath = getPathStr(keyPath);
+        path2keyRef.current.set(connectedPath, key);
+        key2pathRef.current.set(key, connectedPath);
+        updateRef.current += 1;
+        const id = updateRef.current;
+        (0, timeUtil_1.nextSlice)(() => {
+            if (id === updateRef.current) {
+                forceUpdate();
+            }
+        });
+    }, []);
+    const unregisterPath = React.useCallback((key, keyPath) => {
+        const connectedPath = getPathStr(keyPath);
+        path2keyRef.current.delete(connectedPath);
+        key2pathRef.current.delete(key);
+    }, []);
+    const refreshOverflowKeys = React.useCallback((keys) => {
+        setOverflowKeys(keys);
+    }, []);
+    const getKeyPath = React.useCallback((eventKey, includeOverflow) => {
+        const fullPath = key2pathRef.current.get(eventKey) || '';
+        const keys = getPathKeys(fullPath);
+        if (includeOverflow && overflowKeys.includes(keys[0])) {
+            keys.unshift(exports.OVERFLOW_KEY);
+        }
+        return keys;
+    }, [overflowKeys]);
+    const isSubPathKey = React.useCallback((pathKeys, eventKey) => pathKeys.some(pathKey => {
+        const pathKeyList = getKeyPath(pathKey, true);
+        return pathKeyList.includes(eventKey);
+    }), [getKeyPath]);
+    const getKeys = () => {
+        const keys = [...key2pathRef.current.keys()];
+        if (overflowKeys.length) {
+            keys.push(exports.OVERFLOW_KEY);
+        }
+        return keys;
+    };
+    /** Find current key related child path keys */
+    const getSubPathKeys = React.useCallback((key) => {
+        const connectedPath = `${key2pathRef.current.get(key)}${PATH_SPLIT}`;
+        const pathKeys = new Set();
+        [...path2keyRef.current.keys()].forEach(pathKey => {
+            if (pathKey.startsWith(connectedPath)) {
+                pathKeys.add(path2keyRef.current.get(pathKey));
+            }
+        });
+        return pathKeys;
+    }, []);
+    React.useEffect(() => () => {
+        destroyRef.current = true;
+    }, []);
+    return {
+        getKeyPath,
+        getKeys,
+        getSubPathKeys,
+        isSubPathKey,
+        refreshOverflowKeys,
+        registerPath,
+        unregisterPath,
+    };
+}
+exports.default = useKeyRecords;

package/dist/cjs/components/Nav/hooks/useMemoCallback.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Cache callback function that always return same ref instead.
+ * This is used for context optimization.
+ */
+export default function useMemoCallback<T extends (...args: any[]) => void>(func: T): T;

package/dist/cjs/components/Nav/hooks/useMemoCallback.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+/**
+ * Cache callback function that always return same ref instead.
+ * This is used for context optimization.
+ */
+function useMemoCallback(func) {
+    const funRef = React.useRef(func);
+    funRef.current = func;
+    const callback = React.useCallback(((...args) => funRef.current?.(...args)), []);
+    return typeof func === 'function' ? callback : undefined;
+}
+exports.default = useMemoCallback;

package/dist/cjs/components/Nav/hooks/useUUID.d.ts

@@ -0,0 +1 @@
+export default function useUUID(id?: string): string | undefined;

package/dist/cjs/components/Nav/hooks/useUUID.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const useMergedState_1 = __importDefault(require("rc-util/lib/hooks/useMergedState"));
+const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
+let internalId = 0;
+function useUUID(id) {
+    const [uuid, setUUID] = (0, useMergedState_1.default)(id, {
+        value: id,
+    });
+    React.useEffect(() => {
+        internalId += 1;
+        const newId = process.env.NODE_ENV === 'test'
+            ? 'test'
+            : `${uniquePrefix}-${internalId}`;
+        setUUID(`uk-nav-uuid-${newId}`);
+    }, []);
+    return uuid;
+}
+exports.default = useUUID;

package/dist/cjs/components/Nav/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Divider } from './Divider';
+import { Group } from './Group';
+import { Header } from './Header';
+import { Item } from './Item';
+import { Sub } from './Sub';
+import type { NavProps } from './Nav';
+import './index.scss';
+export type { NavProps };
+export interface CompoundedNav extends React.FunctionComponent<NavProps> {
+    Divider: typeof Divider;
+    Group: typeof Group;
+    Header: typeof Header;
+    Item: typeof Item;
+    Sub: typeof Sub;
+}
+export declare const Nav: CompoundedNav;

package/dist/cjs/components/Nav/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Nav = void 0;
+const Divider_1 = require("./Divider");
+const Group_1 = require("./Group");
+const Header_1 = require("./Header");
+const Item_1 = require("./Item");
+const Nav_1 = require("./Nav");
+const Sub_1 = require("./Sub");
+require("./index.scss");
+exports.Nav = Nav_1.Nav;
+exports.Nav.Divider = Divider_1.Divider;
+exports.Nav.Group = Group_1.Group;
+exports.Nav.Header = Header_1.Header;
+exports.Nav.Item = Item_1.Item;
+exports.Nav.Sub = Sub_1.Sub;