@ukic/canary-react 2.0.0-canary.4 → 2.0.0-canary.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -2
- package/dist/components.d.ts +8 -1
- package/dist/components.js +10 -2
- package/dist/core/core.css +2 -2
- package/dist/react-component-lib/createComponent.js +56 -23
- package/dist/react-component-lib/createOverlayComponent.js +138 -56
- package/dist/react-component-lib/utils/attachProps.js +27 -26
- package/dist/react-component-lib/utils/case.js +8 -6
- package/dist/react-component-lib/utils/dev.js +3 -3
- package/dist/react-component-lib/utils/index.js +23 -8
- package/package.json +49 -17
package/README.md
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
|
4
4
|
[](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
|
|
5
|
+
[](https://npmjs.com/package/@ukic/canary-react)
|
|
5
6
|
|
|
6
7
|
The [Intelligence Community Design System](https://design.sis.gov.uk) helps the United Kingdom's Intelligence Community (MI6, GCHQ, MI5, and partners) to quickly build powerful capabilities that are accessible and easy to use.
|
|
7
8
|
|
|
@@ -16,10 +17,10 @@ To install the components:
|
|
|
16
17
|
In the root of your project:
|
|
17
18
|
|
|
18
19
|
```shell
|
|
19
|
-
|
|
20
|
+
# using npm
|
|
20
21
|
npm install @ukic/canary-react @ukic/fonts
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
# using yarn
|
|
23
24
|
rm package-lock.json
|
|
24
25
|
yarn add @ukic/canary-react @ukic/fonts
|
|
25
26
|
```
|
|
@@ -57,6 +58,18 @@ The `@ukic/canary-react` package will need to be transformed before you can use
|
|
|
57
58
|
|
|
58
59
|
Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
|
|
59
60
|
|
|
61
|
+
## Contributing
|
|
62
|
+
|
|
63
|
+
We have a couple of resources to help you with contributing.
|
|
64
|
+
|
|
65
|
+
- To find out more about the different types of contributions, the criteria, raising issues or our release roadmap, read [how to contribute to the Design System and UI Kit](https://design.sis.gov.uk/community/contribute).
|
|
66
|
+
- Make sure to also read our [coding standards and technical instructions](https://github.com/mi6/ic-ui-kit/blob/main/CONTRIBUTING.md).
|
|
67
|
+
- [IC Design System guidance site repository](https://github.com/mi6/ic-design-system) contains the code and content for the Design System guidance site.
|
|
68
|
+
- [IC UI Kit repository](https://github.com/mi6/ic-ui-kit) contains the code and content for the web components.
|
|
69
|
+
## Changelog
|
|
70
|
+
|
|
71
|
+
For a comprehensive changelog of the canary React components, please read the canary web components [CHANGELOG](https://github.com/mi6/ic-ui-kit/blob/main/packages/canary-web-components/CHANGELOG.md). The released updates made to the canary web components are reflected on the canary React components.
|
|
72
|
+
|
|
60
73
|
## Security
|
|
61
74
|
|
|
62
75
|
If you've found a vulnerability, we want to know so that we can fix it. [Our security policy](https://github.com/mi6/ic-ui-kit/blob/main/SECURITY.md) tells you how to do this.
|
package/dist/components.d.ts
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { JSX } from '@ukic/canary-web-components';
|
|
2
|
+
export declare const IcCardHorizontal: import("react").ForwardRefExoticComponent<JSX.IcCardHorizontal & Omit<import("react").HTMLAttributes<HTMLIcCardHorizontalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCardHorizontalElement>>;
|
|
3
3
|
export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.IcDataTable & Omit<import("react").HTMLAttributes<HTMLIcDataTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableElement>>;
|
|
4
|
+
export declare const IcDataTableTitleBar: import("react").ForwardRefExoticComponent<JSX.IcDataTableTitleBar & Omit<import("react").HTMLAttributes<HTMLIcDataTableTitleBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableTitleBarElement>>;
|
|
5
|
+
export declare const IcDateInput: import("react").ForwardRefExoticComponent<JSX.IcDateInput & Omit<import("react").HTMLAttributes<HTMLIcDateInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDateInputElement>>;
|
|
6
|
+
export declare const IcDatePicker: import("react").ForwardRefExoticComponent<JSX.IcDatePicker & Omit<import("react").HTMLAttributes<HTMLIcDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDatePickerElement>>;
|
|
7
|
+
export declare const IcMenuWithMulti: import("react").ForwardRefExoticComponent<JSX.IcMenuWithMulti & Omit<import("react").HTMLAttributes<HTMLIcMenuWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuWithMultiElement>>;
|
|
4
8
|
export declare const IcPaginationBar: import("react").ForwardRefExoticComponent<JSX.IcPaginationBar & Omit<import("react").HTMLAttributes<HTMLIcPaginationBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationBarElement>>;
|
|
9
|
+
export declare const IcSelectWithMulti: import("react").ForwardRefExoticComponent<JSX.IcSelectWithMulti & Omit<import("react").HTMLAttributes<HTMLIcSelectWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSelectWithMultiElement>>;
|
|
10
|
+
export declare const IcTreeItem: import("react").ForwardRefExoticComponent<JSX.IcTreeItem & Omit<import("react").HTMLAttributes<HTMLIcTreeItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeItemElement>>;
|
|
11
|
+
export declare const IcTreeView: import("react").ForwardRefExoticComponent<JSX.IcTreeView & Omit<import("react").HTMLAttributes<HTMLIcTreeViewElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeViewElement>>;
|
package/dist/components.js
CHANGED
|
@@ -4,5 +4,13 @@
|
|
|
4
4
|
import { createReactComponent } from './react-component-lib';
|
|
5
5
|
import { defineCustomElements } from '@ukic/canary-web-components/loader';
|
|
6
6
|
defineCustomElements();
|
|
7
|
-
export
|
|
8
|
-
export
|
|
7
|
+
export var IcCardHorizontal = /*@__PURE__*/ createReactComponent('ic-card-horizontal');
|
|
8
|
+
export var IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
|
|
9
|
+
export var IcDataTableTitleBar = /*@__PURE__*/ createReactComponent('ic-data-table-title-bar');
|
|
10
|
+
export var IcDateInput = /*@__PURE__*/ createReactComponent('ic-date-input');
|
|
11
|
+
export var IcDatePicker = /*@__PURE__*/ createReactComponent('ic-date-picker');
|
|
12
|
+
export var IcMenuWithMulti = /*@__PURE__*/ createReactComponent('ic-menu-with-multi');
|
|
13
|
+
export var IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
|
|
14
|
+
export var IcSelectWithMulti = /*@__PURE__*/ createReactComponent('ic-select-with-multi');
|
|
15
|
+
export var IcTreeItem = /*@__PURE__*/ createReactComponent('ic-tree-item');
|
|
16
|
+
export var IcTreeView = /*@__PURE__*/ createReactComponent('ic-tree-view');
|
package/dist/core/core.css
CHANGED
|
@@ -62,7 +62,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
62
62
|
);--ic-status-error-pressed:rgb(
|
|
63
63
|
calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
|
|
64
64
|
calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
|
|
65
|
-
);--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info
|
|
65
|
+
);--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info:rgb(18 77 179);--ic-status-info-dark:#041144;--ic-status-anomalous-light:#efdbff;--ic-status-anomalous-contrast:#b764fb;--ic-status-anomalous:#7c25c2;--ic-status-anomalous-dark:#350f54;--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown:var(--ic-architectural-500);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-warning-mid:var(--ic-status-warning);--ic-status-warning-mid-hover:var(--ic-status-warning-hover);--ic-status-warning-mid-pressed:var(--ic-status-warning-pressed);--ic-status-success-background:var(--ic-status-success-light);--ic-status-warning-background:var(--ic-status-warning-light);--ic-status-error-background:var(--ic-status-error-light);--ic-status-info-background:var(--ic-status-info-light);--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-800:#2c2f34;--ic-architectural-900:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-color-primary-text:#0b0c0c;--ic-color-white-text:#fff;--ic-color-secondary-text:#41464d;--ic-color-tertiary-text:#6c7580;--ic-action-default:#1759bc;--ic-action-default-hover:#0b399c;--ic-action-default-active:#07277e;--ic-action-default-active-alpha:rgba(23 89 188 / 50%);--ic-action-default-bg-hover:rgb(23 89 188 / 10%);--ic-action-default-bg-active:rgb(23 89 188 / 20%);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-active-no-alpha:#d0def2;--ic-action-destructive:#d4351c;--ic-action-destructive-hover:#ad1e0e;--ic-action-destructive-active:#8b1209;--ic-action-light:#fff;--ic-action-light-hover:#c4c8cd;--ic-action-light-active:#a7acb3;--ic-action-light-bg-hover:rgb(255 255 255 / 10%);--ic-action-light-bg-active:rgb(255 255 255 / 20%);--ic-action-dark:#0b0c0c;--ic-action-dark-hover:#2c2f34;--ic-action-dark-active:#41464d;--ic-action-dark-bg-hover:rgb(65 70 77 / 10%);--ic-action-dark-bg-active:rgb(65 70 77 / 20%);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-classification-official:#2b71c7;--ic-classification-official-foreground:#fff;--ic-classification-secret:#f39c2c;--ic-classification-secret-foreground:#000;--ic-classification-top-secret:#a00;--ic-classification-top-secret-foreground:#fff;--ic-classification-not-set:#616161;--ic-classification-not-set-foreground:#fff;--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
|
|
66
66
|
var(--ic-theme-primary-r) var(--ic-theme-primary-g)
|
|
67
67
|
var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
|
|
68
68
|
);--ic-theme-secondary:rgb(
|
|
@@ -104,4 +104,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
104
104
|
min(255, calc(var(--ic-theme-calc) + 65))
|
|
105
105
|
min(255, calc(var(--ic-theme-calc) + 70))
|
|
106
106
|
min(255, calc(var(--ic-theme-calc) + 77)) / 20%
|
|
107
|
-
);--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
|
|
107
|
+
);--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-table-row-selected:#c7d7ef;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
|
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
if (typeof b !== "function" && b !== null)
|
|
10
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
var __assign = (this && this.__assign) || function () {
|
|
17
|
+
__assign = Object.assign || function(t) {
|
|
18
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
+
s = arguments[i];
|
|
20
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
+
t[p] = s[p];
|
|
22
|
+
}
|
|
23
|
+
return t;
|
|
24
|
+
};
|
|
25
|
+
return __assign.apply(this, arguments);
|
|
26
|
+
};
|
|
1
27
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
28
|
var t = {};
|
|
3
29
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -11,30 +37,32 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
37
|
};
|
|
12
38
|
import React, { createElement } from 'react';
|
|
13
39
|
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
|
|
14
|
-
export
|
|
40
|
+
export var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) {
|
|
15
41
|
if (defineCustomElement !== undefined) {
|
|
16
42
|
defineCustomElement();
|
|
17
43
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
44
|
+
var displayName = dashToPascalCase(tagName);
|
|
45
|
+
var ReactComponent = /** @class */ (function (_super) {
|
|
46
|
+
__extends(class_1, _super);
|
|
47
|
+
function class_1(props) {
|
|
48
|
+
var _this = _super.call(this, props) || this;
|
|
49
|
+
_this.setComponentElRef = function (element) {
|
|
50
|
+
_this.componentEl = element;
|
|
24
51
|
};
|
|
52
|
+
return _this;
|
|
25
53
|
}
|
|
26
|
-
componentDidMount() {
|
|
54
|
+
class_1.prototype.componentDidMount = function () {
|
|
27
55
|
this.componentDidUpdate(this.props);
|
|
28
|
-
}
|
|
29
|
-
componentDidUpdate(prevProps) {
|
|
56
|
+
};
|
|
57
|
+
class_1.prototype.componentDidUpdate = function (prevProps) {
|
|
30
58
|
attachProps(this.componentEl, this.props, prevProps);
|
|
31
|
-
}
|
|
32
|
-
render() {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
59
|
+
};
|
|
60
|
+
class_1.prototype.render = function () {
|
|
61
|
+
var _a = this.props, children = _a.children, forwardedRef = _a.forwardedRef, style = _a.style, className = _a.className, ref = _a.ref, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
|
|
62
|
+
var propsToPass = Object.keys(cProps).reduce(function (acc, name) {
|
|
63
|
+
var value = cProps[name];
|
|
36
64
|
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
37
|
-
|
|
65
|
+
var eventName = name.substring(2).toLowerCase();
|
|
38
66
|
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
39
67
|
acc[name] = value;
|
|
40
68
|
}
|
|
@@ -42,7 +70,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
42
70
|
else {
|
|
43
71
|
// we should only render strings, booleans, and numbers as attrs in html.
|
|
44
72
|
// objects, functions, arrays etc get synced via properties on mount.
|
|
45
|
-
|
|
73
|
+
var type = typeof value;
|
|
46
74
|
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
47
75
|
acc[camelToDashCase(name)] = value;
|
|
48
76
|
}
|
|
@@ -52,7 +80,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
52
80
|
if (manipulatePropsFunction) {
|
|
53
81
|
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
54
82
|
}
|
|
55
|
-
|
|
83
|
+
var newProps = __assign(__assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style: style });
|
|
56
84
|
/**
|
|
57
85
|
* We use createElement here instead of
|
|
58
86
|
* React.createElement to work around a
|
|
@@ -61,11 +89,16 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
61
89
|
* as <tagname> instead of the actual Web Component.
|
|
62
90
|
*/
|
|
63
91
|
return createElement(tagName, newProps, children);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
92
|
+
};
|
|
93
|
+
Object.defineProperty(class_1, "displayName", {
|
|
94
|
+
get: function () {
|
|
95
|
+
return displayName;
|
|
96
|
+
},
|
|
97
|
+
enumerable: false,
|
|
98
|
+
configurable: true
|
|
99
|
+
});
|
|
100
|
+
return class_1;
|
|
101
|
+
}(React.Component));
|
|
69
102
|
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
70
103
|
if (ReactComponentContext) {
|
|
71
104
|
ReactComponent.contextType = ReactComponentContext;
|
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
if (typeof b !== "function" && b !== null)
|
|
10
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
var __assign = (this && this.__assign) || function () {
|
|
17
|
+
__assign = Object.assign || function(t) {
|
|
18
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
+
s = arguments[i];
|
|
20
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
+
t[p] = s[p];
|
|
22
|
+
}
|
|
23
|
+
return t;
|
|
24
|
+
};
|
|
25
|
+
return __assign.apply(this, arguments);
|
|
26
|
+
};
|
|
1
27
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
28
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
29
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -7,6 +33,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
33
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
34
|
});
|
|
9
35
|
};
|
|
36
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
37
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
38
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
39
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
40
|
+
function step(op) {
|
|
41
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
42
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
43
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
44
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
45
|
+
switch (op[0]) {
|
|
46
|
+
case 0: case 1: t = op; break;
|
|
47
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
48
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
49
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
50
|
+
default:
|
|
51
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
52
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
53
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
54
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
55
|
+
if (t[2]) _.ops.pop();
|
|
56
|
+
_.trys.pop(); continue;
|
|
57
|
+
}
|
|
58
|
+
op = body.call(thisArg, _);
|
|
59
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
60
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
61
|
+
}
|
|
62
|
+
};
|
|
10
63
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
11
64
|
var t = {};
|
|
12
65
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -21,88 +74,117 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
74
|
import React from 'react';
|
|
22
75
|
import ReactDOM from 'react-dom';
|
|
23
76
|
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
|
24
|
-
export
|
|
77
|
+
export var createOverlayComponent = function (tagName, controller, customElement) {
|
|
25
78
|
defineCustomElement(tagName, customElement);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
79
|
+
var displayName = dashToPascalCase(tagName);
|
|
80
|
+
var didDismissEventName = "on".concat(displayName, "DidDismiss");
|
|
81
|
+
var didPresentEventName = "on".concat(displayName, "DidPresent");
|
|
82
|
+
var willDismissEventName = "on".concat(displayName, "WillDismiss");
|
|
83
|
+
var willPresentEventName = "on".concat(displayName, "WillPresent");
|
|
84
|
+
var isDismissing = false;
|
|
85
|
+
var Overlay = /** @class */ (function (_super) {
|
|
86
|
+
__extends(Overlay, _super);
|
|
87
|
+
function Overlay(props) {
|
|
88
|
+
var _this = _super.call(this, props) || this;
|
|
35
89
|
if (typeof document !== 'undefined') {
|
|
36
|
-
|
|
90
|
+
_this.el = document.createElement('div');
|
|
37
91
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
static get displayName() {
|
|
41
|
-
return displayName;
|
|
92
|
+
_this.handleDismiss = _this.handleDismiss.bind(_this);
|
|
93
|
+
return _this;
|
|
42
94
|
}
|
|
43
|
-
|
|
95
|
+
Object.defineProperty(Overlay, "displayName", {
|
|
96
|
+
get: function () {
|
|
97
|
+
return displayName;
|
|
98
|
+
},
|
|
99
|
+
enumerable: false,
|
|
100
|
+
configurable: true
|
|
101
|
+
});
|
|
102
|
+
Overlay.prototype.componentDidMount = function () {
|
|
44
103
|
if (this.props.isOpen) {
|
|
45
104
|
this.present();
|
|
46
105
|
}
|
|
47
|
-
}
|
|
48
|
-
componentWillUnmount() {
|
|
106
|
+
};
|
|
107
|
+
Overlay.prototype.componentWillUnmount = function () {
|
|
49
108
|
if (this.overlay) {
|
|
50
109
|
this.overlay.dismiss();
|
|
51
110
|
}
|
|
52
|
-
}
|
|
53
|
-
handleDismiss(event) {
|
|
111
|
+
};
|
|
112
|
+
Overlay.prototype.handleDismiss = function (event) {
|
|
54
113
|
if (this.props.onDidDismiss) {
|
|
55
114
|
this.props.onDidDismiss(event);
|
|
56
115
|
}
|
|
57
116
|
setRef(this.props.forwardedRef, null);
|
|
58
|
-
}
|
|
59
|
-
shouldComponentUpdate(nextProps) {
|
|
117
|
+
};
|
|
118
|
+
Overlay.prototype.shouldComponentUpdate = function (nextProps) {
|
|
60
119
|
// Check if the overlay component is about to dismiss
|
|
61
120
|
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
|
62
121
|
isDismissing = true;
|
|
63
122
|
}
|
|
64
123
|
return true;
|
|
65
|
-
}
|
|
66
|
-
componentDidUpdate(prevProps) {
|
|
67
|
-
return __awaiter(this, void 0, void 0, function
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
124
|
+
};
|
|
125
|
+
Overlay.prototype.componentDidUpdate = function (prevProps) {
|
|
126
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
127
|
+
return __generator(this, function (_a) {
|
|
128
|
+
switch (_a.label) {
|
|
129
|
+
case 0:
|
|
130
|
+
if (this.overlay) {
|
|
131
|
+
attachProps(this.overlay, this.props, prevProps);
|
|
132
|
+
}
|
|
133
|
+
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
134
|
+
this.present(prevProps);
|
|
135
|
+
}
|
|
136
|
+
if (!(this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false)) return [3 /*break*/, 2];
|
|
137
|
+
return [4 /*yield*/, this.overlay.dismiss()];
|
|
138
|
+
case 1:
|
|
139
|
+
_a.sent();
|
|
140
|
+
isDismissing = false;
|
|
141
|
+
/**
|
|
142
|
+
* Now that the overlay is dismissed
|
|
143
|
+
* we need to render again so that any
|
|
144
|
+
* inner components will be unmounted
|
|
145
|
+
*/
|
|
146
|
+
this.forceUpdate();
|
|
147
|
+
_a.label = 2;
|
|
148
|
+
case 2: return [2 /*return*/];
|
|
149
|
+
}
|
|
150
|
+
});
|
|
84
151
|
});
|
|
85
|
-
}
|
|
86
|
-
present(prevProps) {
|
|
87
|
-
return __awaiter(this, void 0, void 0, function
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
152
|
+
};
|
|
153
|
+
Overlay.prototype.present = function (prevProps) {
|
|
154
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
155
|
+
var _a, children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, cProps, elementProps, _b;
|
|
156
|
+
var _c;
|
|
157
|
+
var _this = this;
|
|
158
|
+
return __generator(this, function (_d) {
|
|
159
|
+
switch (_d.label) {
|
|
160
|
+
case 0:
|
|
161
|
+
_a = this.props, children = _a.children, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, onDidPresent = _a.onDidPresent, onWillDismiss = _a.onWillDismiss, onWillPresent = _a.onWillPresent, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
162
|
+
elementProps = __assign(__assign({}, cProps), (_c = { ref: this.props.forwardedRef }, _c[didDismissEventName] = this.handleDismiss, _c[didPresentEventName] = function (e) { return _this.props.onDidPresent && _this.props.onDidPresent(e); }, _c[willDismissEventName] = function (e) { return _this.props.onWillDismiss && _this.props.onWillDismiss(e); }, _c[willPresentEventName] = function (e) { return _this.props.onWillPresent && _this.props.onWillPresent(e); }, _c));
|
|
163
|
+
_b = this;
|
|
164
|
+
return [4 /*yield*/, controller.create(__assign(__assign({}, elementProps), { component: this.el, componentProps: {} }))];
|
|
165
|
+
case 1:
|
|
166
|
+
_b.overlay = _d.sent();
|
|
167
|
+
setRef(this.props.forwardedRef, this.overlay);
|
|
168
|
+
attachProps(this.overlay, elementProps, prevProps);
|
|
169
|
+
return [4 /*yield*/, this.overlay.present()];
|
|
170
|
+
case 2:
|
|
171
|
+
_d.sent();
|
|
172
|
+
return [2 /*return*/];
|
|
173
|
+
}
|
|
174
|
+
});
|
|
94
175
|
});
|
|
95
|
-
}
|
|
96
|
-
render() {
|
|
176
|
+
};
|
|
177
|
+
Overlay.prototype.render = function () {
|
|
97
178
|
/**
|
|
98
179
|
* Continue to render the component even when
|
|
99
180
|
* overlay is dismissing otherwise component
|
|
100
181
|
* will be hidden before animation is done.
|
|
101
182
|
*/
|
|
102
183
|
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
184
|
+
};
|
|
185
|
+
return Overlay;
|
|
186
|
+
}(React.Component));
|
|
187
|
+
return React.forwardRef(function (props, ref) {
|
|
188
|
+
return React.createElement(Overlay, __assign({}, props, { forwardedRef: ref }));
|
|
107
189
|
});
|
|
108
190
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { camelToDashCase } from './case';
|
|
2
|
-
export
|
|
2
|
+
export var attachProps = function (node, newProps, oldProps) {
|
|
3
|
+
if (oldProps === void 0) { oldProps = {}; }
|
|
3
4
|
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
4
5
|
if (node instanceof Element) {
|
|
5
6
|
// add any classes in className to the class list
|
|
6
|
-
|
|
7
|
+
var className = getClassName(node.classList, newProps, oldProps);
|
|
7
8
|
if (className !== '') {
|
|
8
9
|
node.className = className;
|
|
9
10
|
}
|
|
10
|
-
Object.keys(newProps).forEach((name)
|
|
11
|
+
Object.keys(newProps).forEach(function (name) {
|
|
11
12
|
if (name === 'children' ||
|
|
12
13
|
name === 'style' ||
|
|
13
14
|
name === 'ref' ||
|
|
@@ -17,15 +18,15 @@ export const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
17
18
|
return;
|
|
18
19
|
}
|
|
19
20
|
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
var eventName = name.substring(2);
|
|
22
|
+
var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
|
22
23
|
if (!isCoveredByReact(eventNameLc)) {
|
|
23
24
|
syncEvent(node, eventNameLc, newProps[name]);
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
else {
|
|
27
28
|
node[name] = newProps[name];
|
|
28
|
-
|
|
29
|
+
var propType = typeof newProps[name];
|
|
29
30
|
if (propType === 'string') {
|
|
30
31
|
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
31
32
|
}
|
|
@@ -33,17 +34,17 @@ export const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
33
34
|
});
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
|
-
export
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
export var getClassName = function (classList, newProps, oldProps) {
|
|
38
|
+
var newClassProp = newProps.className || newProps.class;
|
|
39
|
+
var oldClassProp = oldProps.className || oldProps.class;
|
|
39
40
|
// map the classes to Maps for performance
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
var currentClasses = arrayToMap(classList);
|
|
42
|
+
var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
|
43
|
+
var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
|
44
|
+
var finalClassNames = [];
|
|
44
45
|
// loop through each of the current classes on the component
|
|
45
46
|
// to see if it should be a part of the classNames added
|
|
46
|
-
currentClasses.forEach((currentClass)
|
|
47
|
+
currentClasses.forEach(function (currentClass) {
|
|
47
48
|
if (incomingPropClasses.has(currentClass)) {
|
|
48
49
|
// add it as its already included in classnames coming in from newProps
|
|
49
50
|
finalClassNames.push(currentClass);
|
|
@@ -54,13 +55,13 @@ export const getClassName = (classList, newProps, oldProps) => {
|
|
|
54
55
|
finalClassNames.push(currentClass);
|
|
55
56
|
}
|
|
56
57
|
});
|
|
57
|
-
incomingPropClasses.forEach((s)
|
|
58
|
+
incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
|
|
58
59
|
return finalClassNames.join(' ');
|
|
59
60
|
};
|
|
60
61
|
/**
|
|
61
62
|
* Transforms a React event name to a browser event name.
|
|
62
63
|
*/
|
|
63
|
-
export
|
|
64
|
+
export var transformReactEventName = function (eventNameSuffix) {
|
|
64
65
|
switch (eventNameSuffix) {
|
|
65
66
|
case 'doubleclick':
|
|
66
67
|
return 'dblclick';
|
|
@@ -71,24 +72,24 @@ export const transformReactEventName = (eventNameSuffix) => {
|
|
|
71
72
|
* Checks if an event is supported in the current execution environment.
|
|
72
73
|
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
73
74
|
*/
|
|
74
|
-
export
|
|
75
|
+
export var isCoveredByReact = function (eventNameSuffix) {
|
|
75
76
|
if (typeof document === 'undefined') {
|
|
76
77
|
return true;
|
|
77
78
|
}
|
|
78
79
|
else {
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
var eventName = 'on' + transformReactEventName(eventNameSuffix);
|
|
81
|
+
var isSupported = eventName in document;
|
|
81
82
|
if (!isSupported) {
|
|
82
|
-
|
|
83
|
+
var element = document.createElement('div');
|
|
83
84
|
element.setAttribute(eventName, 'return;');
|
|
84
85
|
isSupported = typeof element[eventName] === 'function';
|
|
85
86
|
}
|
|
86
87
|
return isSupported;
|
|
87
88
|
}
|
|
88
89
|
};
|
|
89
|
-
export
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
export var syncEvent = function (node, eventName, newEventHandler) {
|
|
91
|
+
var eventStore = node.__events || (node.__events = {});
|
|
92
|
+
var oldEventHandler = eventStore[eventName];
|
|
92
93
|
// Remove old listener so they don't double up.
|
|
93
94
|
if (oldEventHandler) {
|
|
94
95
|
node.removeEventListener(eventName, oldEventHandler);
|
|
@@ -100,8 +101,8 @@ export const syncEvent = (node, eventName, newEventHandler) => {
|
|
|
100
101
|
}
|
|
101
102
|
}));
|
|
102
103
|
};
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
arr.forEach((s)
|
|
104
|
+
var arrayToMap = function (arr) {
|
|
105
|
+
var map = new Map();
|
|
106
|
+
arr.forEach(function (s) { return map.set(s, s); });
|
|
106
107
|
return map;
|
|
107
108
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
export var dashToPascalCase = function (str) {
|
|
2
|
+
return str
|
|
3
|
+
.toLowerCase()
|
|
4
|
+
.split('-')
|
|
5
|
+
.map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
|
|
6
|
+
.join('');
|
|
7
|
+
};
|
|
8
|
+
export var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var isDevMode = function () {
|
|
2
2
|
return process && process.env && process.env.NODE_ENV === 'development';
|
|
3
3
|
};
|
|
4
|
-
|
|
5
|
-
export
|
|
4
|
+
var warnings = {};
|
|
5
|
+
export var deprecationWarning = function (key, message) {
|
|
6
6
|
if (isDevMode()) {
|
|
7
7
|
if (!warnings[key]) {
|
|
8
8
|
console.warn(message);
|
|
@@ -1,5 +1,16 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
import React from 'react';
|
|
2
|
-
export
|
|
13
|
+
export var setRef = function (ref, value) {
|
|
3
14
|
if (typeof ref === 'function') {
|
|
4
15
|
ref(value);
|
|
5
16
|
}
|
|
@@ -8,21 +19,25 @@ export const setRef = (ref, value) => {
|
|
|
8
19
|
ref.current = value;
|
|
9
20
|
}
|
|
10
21
|
};
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
22
|
+
export var mergeRefs = function () {
|
|
23
|
+
var refs = [];
|
|
24
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
25
|
+
refs[_i] = arguments[_i];
|
|
26
|
+
}
|
|
27
|
+
return function (value) {
|
|
28
|
+
refs.forEach(function (ref) {
|
|
14
29
|
setRef(ref, value);
|
|
15
30
|
});
|
|
16
31
|
};
|
|
17
32
|
};
|
|
18
|
-
export
|
|
19
|
-
|
|
20
|
-
return React.createElement(ReactComponent,
|
|
33
|
+
export var createForwardRef = function (ReactComponent, displayName) {
|
|
34
|
+
var forwardRef = function (props, ref) {
|
|
35
|
+
return React.createElement(ReactComponent, __assign({}, props, { forwardedRef: ref }));
|
|
21
36
|
};
|
|
22
37
|
forwardRef.displayName = displayName;
|
|
23
38
|
return React.forwardRef(forwardRef);
|
|
24
39
|
};
|
|
25
|
-
export
|
|
40
|
+
export var defineCustomElement = function (tagName, customElement) {
|
|
26
41
|
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
|
27
42
|
customElements.define(tagName, customElement);
|
|
28
43
|
}
|
package/package.json
CHANGED
|
@@ -3,19 +3,25 @@
|
|
|
3
3
|
"sideEffects": [
|
|
4
4
|
"*.css"
|
|
5
5
|
],
|
|
6
|
-
"version": "2.0.0-canary.
|
|
6
|
+
"version": "2.0.0-canary.41",
|
|
7
7
|
"description": "React-wrapped web components compiled using StencilJS",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
|
|
10
|
+
"cypress": "cypress run --component --headed",
|
|
11
|
+
"cypress:open": "cypress open",
|
|
12
|
+
"cypress:component": "cypress run --component --headless",
|
|
13
|
+
"cypress:ci": "cross-env CYPRESS_CI=true npm run cypress:component",
|
|
10
14
|
"clean": "rimraf dist",
|
|
11
15
|
"compile": "npm run tsc",
|
|
12
16
|
"tsc": "tsc -p .",
|
|
13
17
|
"rollup": "rollup -c",
|
|
14
|
-
"storybook": "
|
|
15
|
-
"build-storybook": "rimraf ./storybook-static && build
|
|
18
|
+
"storybook": "storybook dev -p 6009",
|
|
19
|
+
"build-storybook": "rimraf ./storybook-static && storybook build",
|
|
16
20
|
"audit": "echo 'Audit for: @ukic/canary-react' && audit-ci -m --config ../../audit-ci.json",
|
|
17
|
-
"copy:core-css": "echo 'Copy core.css from: @ukic/web-components' && mkdirp -p ./dist/core && ncp ../web-components/dist/core/core.css ./dist/core/core.css",
|
|
18
|
-
"copy:normalize-css": "echo 'Copy normalize.css from: @ukic/web-components' && ncp ../web-components/dist/core/normalize.css ./dist/core/normalize.css"
|
|
21
|
+
"copy:core-css": "echo 'Copy core.css from: @ukic/canary-web-components' && mkdirp -p ./dist/core && ncp ../canary-web-components/dist/core/core.css ./dist/core/core.css",
|
|
22
|
+
"copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../canary-web-components/dist/core/normalize.css ./dist/core/normalize.css",
|
|
23
|
+
"prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
|
|
24
|
+
"prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write"
|
|
19
25
|
},
|
|
20
26
|
"main": "./dist/index.js",
|
|
21
27
|
"module": "./dist/index.js",
|
|
@@ -23,28 +29,49 @@
|
|
|
23
29
|
"files": [
|
|
24
30
|
"dist/"
|
|
25
31
|
],
|
|
32
|
+
"repository": {
|
|
33
|
+
"url": "git+https://github.com/mi6/ic-ui-kit.git",
|
|
34
|
+
"directory": "packages/canary-react"
|
|
35
|
+
},
|
|
36
|
+
"bugs": {
|
|
37
|
+
"url": "https://github.com/mi6/ic-ui-kit/issues",
|
|
38
|
+
"email": "icds@gchq.gov.uk"
|
|
39
|
+
},
|
|
26
40
|
"dependencies": {
|
|
27
|
-
"@ukic/canary-web-components": "^2.0.0-canary.
|
|
28
|
-
"@ukic/react": "^2.
|
|
41
|
+
"@ukic/canary-web-components": "^2.0.0-canary.41",
|
|
42
|
+
"@ukic/react": "^2.38.0",
|
|
43
|
+
"@ukic/web-components": "^2.38.0"
|
|
29
44
|
},
|
|
30
45
|
"devDependencies": {
|
|
31
46
|
"@babel/core": "^7.16.0",
|
|
47
|
+
"@babel/preset-env": "^7.23.9",
|
|
48
|
+
"@babel/preset-react": "^7.26.3",
|
|
49
|
+
"@babel/preset-typescript": "^7.23.3",
|
|
50
|
+
"@cypress/react": "^8.0.0",
|
|
51
|
+
"@cypress/webpack-preprocessor": "^6.0.0",
|
|
32
52
|
"@mdi/js": "^7.2.96",
|
|
33
53
|
"@stencil/react-output-target": "^0.5.3",
|
|
34
|
-
"@storybook/addon-a11y": "^
|
|
35
|
-
"@storybook/addon-actions": "^
|
|
36
|
-
"@storybook/addon-
|
|
37
|
-
"@storybook/addon-
|
|
38
|
-
"@storybook/addon-
|
|
54
|
+
"@storybook/addon-a11y": "^8.5.4",
|
|
55
|
+
"@storybook/addon-actions": "^8.5.4",
|
|
56
|
+
"@storybook/addon-essentials": "^8.5.4",
|
|
57
|
+
"@storybook/addon-links": "^8.5.4",
|
|
58
|
+
"@storybook/addon-mdx-gfm": "^8.5.4",
|
|
39
59
|
"@storybook/addon-postcss": "^2.0.0",
|
|
40
|
-
"@storybook/
|
|
41
|
-
"@storybook/
|
|
42
|
-
"@storybook/react": "^
|
|
60
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
|
|
61
|
+
"@storybook/blocks": "^8.5.4",
|
|
62
|
+
"@storybook/react": "^8.5.4",
|
|
63
|
+
"@storybook/react-webpack5": "^8.5.4",
|
|
43
64
|
"@types/jest": "27.0.3",
|
|
44
65
|
"@types/node": "^16.11.11",
|
|
45
66
|
"@types/react": "^17.0.37",
|
|
46
67
|
"@types/react-dom": "^17.0.11",
|
|
47
68
|
"babel-loader": "^8.2.3",
|
|
69
|
+
"cross-env": "^7.0.3",
|
|
70
|
+
"cypress": "^13.3.1",
|
|
71
|
+
"cypress-axe": "^1.5.0",
|
|
72
|
+
"cypress-image-diff-html-report": "^2.2.0",
|
|
73
|
+
"cypress-image-diff-js": "^2.1.3",
|
|
74
|
+
"eslint-plugin-cypress": "^2.15.1",
|
|
48
75
|
"github-markdown-css": "^5.5.0",
|
|
49
76
|
"jest": "^27.4.1",
|
|
50
77
|
"jest-dom": "^4.0.0",
|
|
@@ -56,11 +83,15 @@
|
|
|
56
83
|
"react-markdown": "^8.0.7",
|
|
57
84
|
"react-router-dom": "^6.3.0",
|
|
58
85
|
"remark-gfm": "^3.0.1",
|
|
86
|
+
"storybook": "^8.5.4",
|
|
87
|
+
"storybook-addon-performance": "^0.17.3",
|
|
88
|
+
"ts-loader": "^9.5.0",
|
|
59
89
|
"typescript": "^4.5.2",
|
|
90
|
+
"url-loader": "^4.1.1",
|
|
60
91
|
"webpack": "^5.76.0"
|
|
61
92
|
},
|
|
62
93
|
"peerDependencies": {
|
|
63
|
-
"@ukic/fonts": "^2.
|
|
94
|
+
"@ukic/fonts": "^2.6.0",
|
|
64
95
|
"react": "^16.7.0 || ^17.0.2 || ^18.2.0",
|
|
65
96
|
"react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0"
|
|
66
97
|
},
|
|
@@ -73,5 +104,6 @@
|
|
|
73
104
|
]
|
|
74
105
|
},
|
|
75
106
|
"license": "MIT",
|
|
76
|
-
"
|
|
107
|
+
"packageManager": "^npm@10.9.2",
|
|
108
|
+
"gitHead": "90c8705913c4c507424803ba2cc9170692081bd1"
|
|
77
109
|
}
|