@ebay/ui-core-react 1.0.0

package/README.md

@@ -0,0 +1,186 @@
+# ebayui-core-react
+
+eBayUI React components
+
+[Demo](https://opensource.ebay.com/ebayui-core-react/main)
+
+### Requirements
+
+* [Node.js](https://nodejs.org/en/) (v16.14+)
+* [React](https://reactjs.org/) (v16.8+)
+* [eBay Skin](https://ebay.github.io/skin/) (v14)
+
+### eBayUI Components
+* [x] [ebay-alert-dialog](src/ebay-alert-dialog)
+* [x] [ebay-confirm-dialog](src/ebay-confirm-dialog)
+* [x] [ebay-badge](src/ebay-badge)
+* [x] [ebay-breadcrumbs](src/ebay-breadcrumbs)
+* [x] [ebay-button](src/ebay-button)
+* [ ] `ebay-carousel` (in progress...)
+* [x] [ebay-checkbox](src/ebay-checkbox)
+* [ ] `ebay-combobox`
+* [ ] `ebay-combobox-readonly`
+* [x] [ebay-cta-button](src/ebay-cta-button)
+* [ ] `ebay-details`
+* [x] [ebay-drawer-dialog](src/ebay-drawer-dialog)
+* [x] [ebay-eek](src/ebay-eek)
+* [x] [ebay-expand-button](src/ebay-expand-button)
+* [x] [ebay-fullscreen-dialog](src/ebay-fullscreen-dialog)
+* [ ] `ebay-fake-menu` (in progress...)
+* [ ] `ebay-fake-menu-button` (in progress...)
+* [ ] `ebay-fake-tabs`
+* [x] [ebay-floating-label](src/ebay-floating-label)
+* [x] [ebay-field](src/ebay-field)
+* [ ] `ebay-filter` (in progress...)
+* [ ] `ebay-filter-menu`
+* [ ] `ebay-filter-menu-button`
+* [x] [ebay-icon](src/ebay-icon)
+* [x] [ebay-infotip](src/ebay-infotip)
+* [x] [ebay-inline-notice](src/ebay-inline-notice)
+* [x] [ebay-legacy-floating-label](src/ebay-legacy-floating-label)
+* [x] [ebay-lightbox-dialog](src/ebay-lightbox-dialog)
+* [x] [ebay-listbox-button](src/ebay-listbox-button)
+* [x] [ebay-menu] (src/ebay-menu)
+* [ ] `ebay-menu-button` (in progress...)
+* [x] [ebay-page-notice](src/ebay-page-notice)
+* [x] [ebay-pagination](src/ebay-pagination)
+* [x] [ebay-panel-dialog](src/ebay-panel-dialog)
+* [x] [ebay-progress-bar](src/ebay-progress-bar)
+* [x] [ebay-progress-spinner](src/ebay-progress-spinner)
+* [x] [ebay-progress-stepper](src/ebay-progress-stepper)
+* [x] [ebay-radio](src/ebay-radio)
+* [x] [ebay-section-title](src/ebay-section-title)
+* [x] [ebay-section-notice](src/ebay-section-notice)
+* [x] [ebay-select](src/ebay-select)
+* [ ] `ebay-snackbar-dialog`
+* [x] [ebay-switch](src/ebay-switch)
+* [x] [ebay-signal](src/ebay-signal)
+* [x] [ebay-tab](src/ebay-tabs)
+* [x] [ebay-textbox](src/ebay-textbox)
+* [x] [ebay-toast-dialog](src/ebay-toast-dialog)
+* [x] [ebay-tooltip](src/ebay-tooltip)
+* [ ] `ebay-tourtip`
+* [ ] `ebay-video`
+* [ ] `ebay-window-notice`
+
+[Progress overview](https://github.com/eBay/ebayui-core-react/projects/1)
+
+## Getting Started
+
+These react components are available as `@ebay/ui-core-react` package on [NPM](https://npmjs.org/@ebay/ui-core-react).
+
+Use npm or yarn to add the package dependency to your project:
+
+```sh
+yarn add @ebay/ui-core-react
+```
+
+### for quick development/POC
+```jsx
+import { EbayTextbox, EbayButton } from '@ebay/ui-core-react'
+
+<EbayTextbox placeholder="Enter text here" />
+<EbayButton>Submit</EbayButton>
+```
+
+### for smaller bundle size
+```jsx harmony
+import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'
+import { EbayButton } from '@ebay/ui-core-react/ebay-button'
+
+<EbayTextbox placeholder="Enter text here" />
+<EbayButton>Submit</EbayButton>
+```
+
+### Notes
+If you render children components dynamically and don't want to get React `key` warnings then provide a `key`:
+```jsx harmony
+<EbayParentComponent>
+    {items.map((item, index) => <EbayChildComponent key={index}>{item}</EbayChildComponent>)}
+</EbayParentComponent>
+```
+
+#### IE-10/11 (deprecated)
+You will need polyfills for IE. Recommended approach is using `core-js` with or without `babel`.
+
+To manually use polyfills you need to import them:
+```js
+import 'core-js/stable/object/values'
+
+Object.values({ a: 'Hello' }).map(console.log)
+```
+
+But we suggest to use polyfills automatically by editing your `.babelrc`:
+```json
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "useBuiltIns": "usage",
+                "corejs": "3",
+                "targets": {
+                    "chrome": "63",
+                    "safari": "12",
+                    "ios": "12",
+                    "edge": "18",
+                    "ie": "11"
+                }
+            }
+        ]
+    ]
+}
+```
+`targets` can also be something like "> 0.2%, not dead"
+
+
+### Issues
+
+Create an issue on github
+
+## Contributing
+
+Write an email to tmanyanov@ebay.com
+
+### How to update icons on `skin` changes
+This will update `EbaySvg` and `EbayIcon` components:
+```shell script
+yarn update-icons
+```
+
+### Quick guidance for contribution:
+
+- Create a feature branch `git checkout -b features/new-component`
+- `yarn install` to install dependencies
+- Add documentations:
+  * `README.md` on component level
+  * Unit test
+  * Storybook file for snapshot tests and also component showcase/demo
+- Make your changes pass the:
+  * `yarn lint`. You can do `yarn lint --fix` to automatically fix small lint issues (e.g indentation, whitespace, semicolons, ...)
+  * `yarn test`. Do `yarn test -u` to automatically the snapshot tests.
+
+
+### Requirements for new component
+
+If you implement a new component, make sure that it complies with eBay UI guidelines:
+  * [Skin](https://ebay.github.io/skin/)
+  * [MIND pattern](https://ebay.gitbook.io/mindpatterns/) for accessibility
+
+One way to comply those guidelines is to implement your new component as similiar as possible with the Marko [eBayUI Core](https://github.com/eBay/ebayui-core), or port the Marko implementation to React. This means the new component should:
+
+  * Output the same HTML structure
+  * Have similiar behaviour (e.g open menu dropdown on click and keyboard)
+  * Support the same attributes (e.g ebay-breadcrumb `a11y-heading-text`, or ebay-button `priority`)
+  * Support the same events (e.g ebay-select `select-change`). Since React does not use event emitter (unlike Marko), one can implement this as a prop with Function.
+
+## Changelog
+
+### version 9.x (skin 13)
+### version 8.x (skin 12)
+### version 6.x (skin 10)
+### version 5.x (removed less, changed imports to minimize bundle size)
+### version 3.x (skin 9, react 16.8 with hooks support)
+### version 2.x (skin 7, react 16.7)
+### legacy
+

package/common/component-utils/forwardRef.d.ts

@@ -0,0 +1,3 @@
+import React, { FC } from 'react';
+export declare const withForwardRef: <Props>(Component: React.FC<Props>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<React.FC<Props>>>;
+//# sourceMappingURL=forwardRef.d.ts.map

package/common/component-utils/forwardRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forwardRef.d.ts","sourceRoot":"","sources":["../../../src/common/component-utils/forwardRef.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAO7C,eAAO,MAAM,cAAc,6IAO1B,CAAA"}

package/common/component-utils/forwardRef.js

@@ -0,0 +1,45 @@
+"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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withForwardRef = void 0;
+var react_1 = __importStar(require("react"));
+var getDisplayName = function (Component) { return Component.displayName || Component.name || 'Component'; };
+// Typescript will automatically find the return type crom forwardRef() function
+// Disabling eslint for this use case
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+exports.withForwardRef = function (Component) {
+    var ForwardRef = react_1.forwardRef(function (props, ref) {
+        return react_1.default.createElement(Component, __assign({}, props, { forwardedRef: ref }));
+    });
+    ForwardRef.displayName = getDisplayName(Component);
+    return ForwardRef;
+};

package/common/component-utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './forwardRef';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/common/component-utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/component-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/common/component-utils/index.js

@@ -0,0 +1,14 @@
+"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" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./forwardRef"), exports);
+__exportStar(require("./utils"), exports);

package/common/component-utils/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<T>(value: T): T;
+//# sourceMappingURL=usePrevious.d.ts.map

package/common/component-utils/usePrevious.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../../src/common/component-utils/usePrevious.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAQ1C"}

package/common/component-utils/usePrevious.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = void 0;
+var react_1 = require("react");
+function usePrevious(value) {
+    var ref = react_1.useRef();
+    react_1.useEffect(function () {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+exports.usePrevious = usePrevious;

package/common/component-utils/utils.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactElement, ReactNode } from 'react';
+export declare function findComponent(nodes: ReactNode, componentType: FC): ReactElement | undefined;
+export declare function excludeComponent(nodes: ReactNode, componentType: FC): ReactElement[];
+export declare function filterByType(nodes: ReactNode, componentType: FC, fn?: () => void): ReactElement[];
+export declare function filterBy(nodes: ReactNode, predicate: (el: ReactElement) => boolean): ReactElement[];
+//# sourceMappingURL=utils.d.ts.map

package/common/component-utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/common/component-utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7D,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAc,EAAE,aAAa,EAAE,EAAE,GAAG,YAAY,GAAG,SAAS,CAGhG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAc,EAAE,aAAa,EAAE,EAAE,GAAG,YAAY,EAAE,CAGzF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAc,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,YAAY,EAAE,CAGtG;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAc,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,OAAO,GAAG,YAAY,EAAE,CAGxG"}

package/common/component-utils/utils.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterBy = exports.filterByType = exports.excludeComponent = exports.findComponent = void 0;
+var react_1 = require("react");
+function findComponent(nodes, componentType) {
+    if (nodes === void 0) { nodes = []; }
+    var elements = react_1.Children.toArray(nodes);
+    return elements.find(function (_a) {
+        var type = _a.type;
+        return type === componentType;
+    }) || null;
+}
+exports.findComponent = findComponent;
+function excludeComponent(nodes, componentType) {
+    if (nodes === void 0) { nodes = []; }
+    var elements = react_1.Children.toArray(nodes);
+    return elements.filter(function (_a) {
+        var type = _a.type;
+        return type !== componentType;
+    });
+}
+exports.excludeComponent = excludeComponent;
+function filterByType(nodes, componentType, fn) {
+    if (nodes === void 0) { nodes = []; }
+    var elements = react_1.Children.toArray(nodes);
+    return elements.filter(function (_a) {
+        var type = _a.type;
+        return type === componentType;
+    });
+}
+exports.filterByType = filterByType;
+function filterBy(nodes, predicate) {
+    if (nodes === void 0) { nodes = []; }
+    var elements = react_1.Children.toArray(nodes);
+    return elements.filter(predicate);
+}
+exports.filterBy = filterBy;

package/common/debounce.d.ts

@@ -0,0 +1,2 @@
+export declare function debounce(fn: (any: any) => any, ms: number): () => void;
+//# sourceMappingURL=debounce.d.ts.map

package/common/debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/common/debounce.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,EAAE,EAAE,CAAC,GAAG,KAAA,KAAK,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,IAAI,CASjE"}

package/common/debounce.js

@@ -0,0 +1,26 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debounce = void 0;
+function debounce(fn, ms) {
+    var _this = this;
+    var timer;
+    return function () {
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            timer = null;
+            fn.apply.apply(fn, __spreadArrays([_this], args));
+        }, ms);
+    };
+}
+exports.debounce = debounce;

package/common/event-utils/index.d.ts

@@ -0,0 +1,15 @@
+declare type Callback = () => void;
+export declare function handleEnterKeydown(e: KeyboardEvent, callback: Callback): void;
+export declare function handleActionKeydown(e: KeyboardEvent, callback: Callback): void;
+export declare function handleEscapeKeydown(e: KeyboardEvent, callback: Callback): void;
+export declare function handleUpDownArrowsKeydown(e: KeyboardEvent, callback: Callback): void;
+export declare function handleLeftRightArrowsKeydown(e: KeyboardEvent, callback: Callback): void;
+export declare function handleTextInput(e: KeyboardEvent, callback: Callback): void;
+export declare function preventDefaultIfHijax(e: KeyboardEvent, hijax: boolean): void;
+declare type Handler = (e: KeyboardEvent) => void;
+export declare function addEventListener(_: unknown, handler: Handler): void;
+export declare function removeEventListener(_: unknown, handler: Handler): void;
+export declare function handleResize(e: KeyboardEvent): void;
+export declare function wrapEvent(parentEventHandler: Handler, localEventHandler: Handler): (e: KeyboardEvent) => void;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/common/event-utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/index.ts"],"names":[],"mappings":"AAMA,aAAK,QAAQ,GAAG,MAAM,IAAI,CAAA;AAqB1B,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE7E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE9E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE9E;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAEpF;AAED,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAEvF;AAGD,wBAAgB,eAAe,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAwB1E;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAI5E;AAED,aAAK,OAAO,GAAG,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;AAIzC,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAKnE;AACD,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAKtE;AACD,wBAAgB,YAAY,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI,CAanD;AAED,wBAAgB,SAAS,CAAC,kBAAkB,EAAE,OAAkB,EAAE,iBAAiB,EAAE,OAAO,OAC7E,aAAa,KAAG,IAAI,CAMlC"}

package/common/event-utils/index.js

@@ -0,0 +1,118 @@
+"use strict";
+/*
+* Based on https://github.com/eBay/ebayui-core/edit/master/src/common/event-utils/index.js
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapEvent = exports.handleResize = exports.removeEventListener = exports.addEventListener = exports.preventDefaultIfHijax = exports.handleTextInput = exports.handleLeftRightArrowsKeydown = exports.handleUpDownArrowsKeydown = exports.handleEscapeKeydown = exports.handleActionKeydown = exports.handleEnterKeydown = void 0;
+/**
+ * Generic keydown handler used by more specific cases
+ * @param {Array} keyList: List of acceptable keys
+ * @param {KeyboardEvent} e
+ * @param {Function} callback
+ */
+function handleKeydown(keyList, e, callback) {
+    if (callback === void 0) { callback = function () { }; }
+    if (keyList.includes(e.key)) {
+        callback();
+    }
+}
+// inverse of found keys
+function handleNotKeydown(keyList, e, callback) {
+    if (callback === void 0) { callback = function () { }; }
+    if (!keyList.includes(e.key)) {
+        callback();
+    }
+}
+function handleEnterKeydown(e, callback) {
+    handleKeydown(['Enter'], e, callback);
+}
+exports.handleEnterKeydown = handleEnterKeydown;
+function handleActionKeydown(e, callback) {
+    handleKeydown([' ', 'Enter'], e, callback);
+}
+exports.handleActionKeydown = handleActionKeydown;
+function handleEscapeKeydown(e, callback) {
+    handleKeydown(['Esc', 'Escape'], e, callback);
+}
+exports.handleEscapeKeydown = handleEscapeKeydown;
+function handleUpDownArrowsKeydown(e, callback) {
+    handleKeydown(['Up', 'ArrowUp', 'Down', 'ArrowDown'], e, callback);
+}
+exports.handleUpDownArrowsKeydown = handleUpDownArrowsKeydown;
+function handleLeftRightArrowsKeydown(e, callback) {
+    handleKeydown(['Left', 'ArrowLeft', 'Right', 'ArrowRight'], e, callback);
+}
+exports.handleLeftRightArrowsKeydown = handleLeftRightArrowsKeydown;
+// only fire for character input, not modifier/meta keys (enter, escape, backspace, tab, etc.)
+function handleTextInput(e, callback) {
+    var keyList = [
+        // Edge
+        'Esc',
+        'Left',
+        'Up',
+        'Right',
+        'Down',
+        // Browsers
+        'Tab',
+        'Enter',
+        'Shift',
+        'Control',
+        'Alt',
+        'CapsLock',
+        'Escape',
+        'ArrowLeft',
+        'ArrowUp',
+        'ArrowRight',
+        'ArrowDown',
+        'Meta'
+    ];
+    handleNotKeydown(keyList, e, callback);
+}
+exports.handleTextInput = handleTextInput;
+function preventDefaultIfHijax(e, hijax) {
+    if (hijax) {
+        e.preventDefault();
+    }
+}
+exports.preventDefaultIfHijax = preventDefaultIfHijax;
+var handlers = [];
+function addEventListener(_, handler) {
+    if (handlers.length === 0) {
+        window.addEventListener('resize', handleResize);
+    }
+    handlers.push(handler);
+}
+exports.addEventListener = addEventListener;
+function removeEventListener(_, handler) {
+    if (handlers.length === 1) {
+        window.removeEventListener('resize', handleResize);
+    }
+    handlers.splice(handlers.indexOf(handler), 1);
+}
+exports.removeEventListener = removeEventListener;
+function handleResize(e) {
+    window.removeEventListener('resize', handleResize);
+    var callback = function () {
+        if (handlers.length) {
+            handlers.forEach(function (handler) { return handler(e); });
+            window.addEventListener('resize', handleResize);
+        }
+    };
+    if (window.requestAnimationFrame) {
+        window.requestAnimationFrame(callback);
+    }
+    else {
+        window.setTimeout(callback, 16);
+    }
+}
+exports.handleResize = handleResize;
+function wrapEvent(parentEventHandler, localEventHandler) {
+    if (parentEventHandler === void 0) { parentEventHandler = function () { }; }
+    return function (e) {
+        parentEventHandler(e);
+        if (!e.defaultPrevented) {
+            return localEventHandler(e);
+        }
+    };
+}
+exports.wrapEvent = wrapEvent;

package/common/event-utils/types.d.ts

@@ -0,0 +1,6 @@
+declare type ModifierKeys = 'Alt' | 'AltGraph' | 'Control' | 'Shift' | 'CapsLock' | 'Meta';
+declare type NavigationKeys = 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'Enter' | 'Tab' | ' ' | 'Escape' | 'End' | 'Home' | 'PageDown' | 'PageUp';
+declare type NavigationKeysEdge = 'Down' | 'Left' | 'Right' | 'Up' | 'Esc';
+export declare type Key = ModifierKeys | NavigationKeys | NavigationKeysEdge;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/common/event-utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/types.ts"],"names":[],"mappings":"AAAA,aAAK,YAAY,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;AAElF,aAAK,cAAc,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,GAAG,GAAG,QAAQ,GACvG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAC5C,aAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AAMlE,oBAAY,GAAG,GAAG,YAAY,GAAG,cAAc,GAAG,kBAAkB,CAAA"}

package/common/event-utils/types.js

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

package/common/event-utils/use-key-press.d.ts

@@ -0,0 +1,3 @@
+declare const useKeyPress: () => [boolean, boolean];
+export default useKeyPress;
+//# sourceMappingURL=use-key-press.d.ts.map

package/common/event-utils/use-key-press.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-key-press.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/use-key-press.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,QAAO,CAAC,OAAO,EAAE,OAAO,CAiCxC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/common/event-utils/use-key-press.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useKeyPress = function () {
+    var _a = react_1.useState(false), arrowUpPressed = _a[0], setArrowUpPressed = _a[1];
+    var _b = react_1.useState(false), arrowDownPressed = _b[0], setArrowDownPressed = _b[1];
+    var upHandler = function (_a) {
+        var key = _a.key;
+        var fn = {
+            ArrowUp: setArrowUpPressed,
+            ArrowDown: setArrowDownPressed
+        }[key];
+        if (fn)
+            fn(false);
+    };
+    var downHandler = function (_a) {
+        var key = _a.key;
+        var fn = {
+            ArrowUp: setArrowUpPressed,
+            ArrowDown: setArrowDownPressed
+        }[key];
+        if (fn)
+            fn(true);
+    };
+    react_1.useEffect(function () {
+        window.addEventListener('keydown', downHandler);
+        window.addEventListener('keyup', upHandler);
+        return function () {
+            window.removeEventListener('keydown', downHandler);
+            window.removeEventListener('keyup', upHandler);
+        };
+    }, []);
+    return [arrowUpPressed, arrowDownPressed];
+};
+exports.default = useKeyPress;

package/common/event-utils/use-roving-index.d.ts

@@ -0,0 +1,4 @@
+import { Dispatch, FC, ReactNode, SetStateAction } from 'react';
+declare const useRovingIndex: (children: ReactNode, FocusableType: FC, defaultValue?: number) => [number, Dispatch<SetStateAction<number>>];
+export default useRovingIndex;
+//# sourceMappingURL=use-roving-index.d.ts.map

package/common/event-utils/use-roving-index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-roving-index.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/use-roving-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,QAAQ,EAAE,EAAE,EAAgB,SAAS,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAA;AAG5G,QAAA,MAAM,cAAc,aACN,SAAS,iBACJ,EAAE,iBACF,MAAM,KACtB,CAAC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CA+B3C,CAAA;AAED,eAAe,cAAc,CAAA"}

package/common/event-utils/use-roving-index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var use_key_press_1 = __importDefault(require("./use-key-press"));
+var useRovingIndex = function (children, FocusableType, defaultValue) {
+    var _a = react_1.useState(defaultValue), rovingIndex = _a[0], setRovingIndex = _a[1];
+    var _b = use_key_press_1.default(), arrowUpPressed = _b[0], arrowDownPressed = _b[1];
+    var rovingIndexArray = react_1.Children
+        .toArray(children)
+        .reduce(function (focusables, child, i) {
+        return child.type === FocusableType ? __spreadArrays(focusables, [i]) : focusables;
+    }, []);
+    var currentIndex = rovingIndexArray.indexOf(rovingIndex);
+    var previousOrCurrent = function () {
+        if (currentIndex === -1)
+            return rovingIndex;
+        var previousRovingIndex = rovingIndexArray[currentIndex - 1];
+        return previousRovingIndex === undefined ? rovingIndex : previousRovingIndex;
+    };
+    var nextOrCurrent = function () {
+        if (currentIndex === -1)
+            return rovingIndex;
+        var nextRovingIndex = rovingIndexArray[currentIndex + 1];
+        return nextRovingIndex === undefined ? rovingIndex : nextRovingIndex;
+    };
+    react_1.useEffect(function () {
+        if (arrowUpPressed)
+            setRovingIndex(previousOrCurrent());
+        if (arrowDownPressed)
+            setRovingIndex(nextOrCurrent());
+    }, [arrowUpPressed, arrowDownPressed]);
+    return [rovingIndex, setRovingIndex];
+};
+exports.default = useRovingIndex;

package/common/notice-utils/notice-content.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+declare type Props = {
+    type: 'inline' | 'section' | 'page';
+    className?: string;
+    children?: ReactNode;
+};
+declare const NoticeContent: FC<Props>;
+export default NoticeContent;
+//# sourceMappingURL=notice-content.d.ts.map

package/common/notice-utils/notice-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-content.d.ts","sourceRoot":"","sources":["../../../src/common/notice-utils/notice-content.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5C,aAAK,KAAK,GAAG;IACT,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,KAAK,CAO5B,CAAA;AAED,eAAe,aAAa,CAAA"}

package/common/notice-utils/notice-content.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var NoticeContent = function (_a) {
+    var className = _a.className, type = _a.type, children = _a.children;
+    var ContentTag = type === 'inline' ? 'span' : 'div';
+    return (react_1.default.createElement(ContentTag, { className: classnames_1.default(className, type + "-notice__main") }, children));
+};
+exports.default = NoticeContent;