@ukic/react 2.1.0-beta.9 → 2.2.0
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/dist/components.d.ts +6 -0
- package/dist/components.js +6 -0
- package/dist/core/core.css +47 -3
- package/dist/react-component-lib/createComponent.d.ts +1 -1
- package/dist/react-component-lib/createComponent.js +22 -7
- package/dist/react-component-lib/createOverlayComponent.js +1 -1
- package/dist/react-component-lib/utils/index.js +2 -4
- package/package.json +7 -5
package/dist/components.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export declare const IcChip: import("react").ForwardRefExoticComponent<JSX.IcChi
|
|
|
12
12
|
export declare const IcClassificationBanner: import("react").ForwardRefExoticComponent<JSX.IcClassificationBanner & Omit<import("react").HTMLAttributes<HTMLIcClassificationBannerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcClassificationBannerElement>>;
|
|
13
13
|
export declare const IcDataEntity: import("react").ForwardRefExoticComponent<JSX.IcDataEntity & Omit<import("react").HTMLAttributes<HTMLIcDataEntityElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataEntityElement>>;
|
|
14
14
|
export declare const IcDataRow: import("react").ForwardRefExoticComponent<JSX.IcDataRow & Omit<import("react").HTMLAttributes<HTMLIcDataRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataRowElement>>;
|
|
15
|
+
export declare const IcDialog: import("react").ForwardRefExoticComponent<JSX.IcDialog & Omit<import("react").HTMLAttributes<HTMLIcDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDialogElement>>;
|
|
15
16
|
export declare const IcDivider: import("react").ForwardRefExoticComponent<JSX.IcDivider & Omit<import("react").HTMLAttributes<HTMLIcDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDividerElement>>;
|
|
16
17
|
export declare const IcFooter: import("react").ForwardRefExoticComponent<JSX.IcFooter & Omit<import("react").HTMLAttributes<HTMLIcFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterElement>>;
|
|
17
18
|
export declare const IcFooterLink: import("react").ForwardRefExoticComponent<JSX.IcFooterLink & Omit<import("react").HTMLAttributes<HTMLIcFooterLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterLinkElement>>;
|
|
@@ -25,11 +26,16 @@ export declare const IcInputValidation: import("react").ForwardRefExoticComponen
|
|
|
25
26
|
export declare const IcLink: import("react").ForwardRefExoticComponent<JSX.IcLink & Omit<import("react").HTMLAttributes<HTMLIcLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcLinkElement>>;
|
|
26
27
|
export declare const IcLoadingIndicator: import("react").ForwardRefExoticComponent<JSX.IcLoadingIndicator & Omit<import("react").HTMLAttributes<HTMLIcLoadingIndicatorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcLoadingIndicatorElement>>;
|
|
27
28
|
export declare const IcMenu: import("react").ForwardRefExoticComponent<JSX.IcMenu & Omit<import("react").HTMLAttributes<HTMLIcMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuElement>>;
|
|
29
|
+
export declare const IcMenuGroup: import("react").ForwardRefExoticComponent<JSX.IcMenuGroup & Omit<import("react").HTMLAttributes<HTMLIcMenuGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuGroupElement>>;
|
|
30
|
+
export declare const IcMenuItem: import("react").ForwardRefExoticComponent<JSX.IcMenuItem & Omit<import("react").HTMLAttributes<HTMLIcMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuItemElement>>;
|
|
28
31
|
export declare const IcNavigationButton: import("react").ForwardRefExoticComponent<JSX.IcNavigationButton & Omit<import("react").HTMLAttributes<HTMLIcNavigationButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationButtonElement>>;
|
|
29
32
|
export declare const IcNavigationGroup: import("react").ForwardRefExoticComponent<JSX.IcNavigationGroup & Omit<import("react").HTMLAttributes<HTMLIcNavigationGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationGroupElement>>;
|
|
30
33
|
export declare const IcNavigationItem: import("react").ForwardRefExoticComponent<JSX.IcNavigationItem & Omit<import("react").HTMLAttributes<HTMLIcNavigationItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationItemElement>>;
|
|
31
34
|
export declare const IcNavigationMenu: import("react").ForwardRefExoticComponent<JSX.IcNavigationMenu & Omit<import("react").HTMLAttributes<HTMLIcNavigationMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationMenuElement>>;
|
|
32
35
|
export declare const IcPageHeader: import("react").ForwardRefExoticComponent<JSX.IcPageHeader & Omit<import("react").HTMLAttributes<HTMLIcPageHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPageHeaderElement>>;
|
|
36
|
+
export declare const IcPagination: import("react").ForwardRefExoticComponent<JSX.IcPagination & Omit<import("react").HTMLAttributes<HTMLIcPaginationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationElement>>;
|
|
37
|
+
export declare const IcPaginationItem: import("react").ForwardRefExoticComponent<JSX.IcPaginationItem & Omit<import("react").HTMLAttributes<HTMLIcPaginationItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationItemElement>>;
|
|
38
|
+
export declare const IcPopoverMenu: import("react").ForwardRefExoticComponent<JSX.IcPopoverMenu & Omit<import("react").HTMLAttributes<HTMLIcPopoverMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPopoverMenuElement>>;
|
|
33
39
|
export declare const IcRadioGroup: import("react").ForwardRefExoticComponent<JSX.IcRadioGroup & Omit<import("react").HTMLAttributes<HTMLIcRadioGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcRadioGroupElement>>;
|
|
34
40
|
export declare const IcRadioOption: import("react").ForwardRefExoticComponent<JSX.IcRadioOption & Omit<import("react").HTMLAttributes<HTMLIcRadioOptionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcRadioOptionElement>>;
|
|
35
41
|
export declare const IcSearchBar: import("react").ForwardRefExoticComponent<JSX.IcSearchBar & Omit<import("react").HTMLAttributes<HTMLIcSearchBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSearchBarElement>>;
|
package/dist/components.js
CHANGED
|
@@ -16,6 +16,7 @@ export const IcChip = /*@__PURE__*/ createReactComponent('ic-chip');
|
|
|
16
16
|
export const IcClassificationBanner = /*@__PURE__*/ createReactComponent('ic-classification-banner');
|
|
17
17
|
export const IcDataEntity = /*@__PURE__*/ createReactComponent('ic-data-entity');
|
|
18
18
|
export const IcDataRow = /*@__PURE__*/ createReactComponent('ic-data-row');
|
|
19
|
+
export const IcDialog = /*@__PURE__*/ createReactComponent('ic-dialog');
|
|
19
20
|
export const IcDivider = /*@__PURE__*/ createReactComponent('ic-divider');
|
|
20
21
|
export const IcFooter = /*@__PURE__*/ createReactComponent('ic-footer');
|
|
21
22
|
export const IcFooterLink = /*@__PURE__*/ createReactComponent('ic-footer-link');
|
|
@@ -29,11 +30,16 @@ export const IcInputValidation = /*@__PURE__*/ createReactComponent('ic-input-va
|
|
|
29
30
|
export const IcLink = /*@__PURE__*/ createReactComponent('ic-link');
|
|
30
31
|
export const IcLoadingIndicator = /*@__PURE__*/ createReactComponent('ic-loading-indicator');
|
|
31
32
|
export const IcMenu = /*@__PURE__*/ createReactComponent('ic-menu');
|
|
33
|
+
export const IcMenuGroup = /*@__PURE__*/ createReactComponent('ic-menu-group');
|
|
34
|
+
export const IcMenuItem = /*@__PURE__*/ createReactComponent('ic-menu-item');
|
|
32
35
|
export const IcNavigationButton = /*@__PURE__*/ createReactComponent('ic-navigation-button');
|
|
33
36
|
export const IcNavigationGroup = /*@__PURE__*/ createReactComponent('ic-navigation-group');
|
|
34
37
|
export const IcNavigationItem = /*@__PURE__*/ createReactComponent('ic-navigation-item');
|
|
35
38
|
export const IcNavigationMenu = /*@__PURE__*/ createReactComponent('ic-navigation-menu');
|
|
36
39
|
export const IcPageHeader = /*@__PURE__*/ createReactComponent('ic-page-header');
|
|
40
|
+
export const IcPagination = /*@__PURE__*/ createReactComponent('ic-pagination');
|
|
41
|
+
export const IcPaginationItem = /*@__PURE__*/ createReactComponent('ic-pagination-item');
|
|
42
|
+
export const IcPopoverMenu = /*@__PURE__*/ createReactComponent('ic-popover-menu');
|
|
37
43
|
export const IcRadioGroup = /*@__PURE__*/ createReactComponent('ic-radio-group');
|
|
38
44
|
export const IcRadioOption = /*@__PURE__*/ createReactComponent('ic-radio-option');
|
|
39
45
|
export const IcSearchBar = /*@__PURE__*/ createReactComponent('ic-search-bar');
|
package/dist/core/core.css
CHANGED
|
@@ -4,7 +4,15 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
4
4
|
inset 0 0 0 8px var(--ic-architectural-white);--ic-border-focus-dark:0 0 0 2px white, 0 0 0 5px rgba(255 255 255 / 52%);--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
|
|
5
5
|
inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
|
|
6
6
|
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
|
|
7
|
-
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-disabled:1px dashed var(--ic-architectural-200);--ic-
|
|
7
|
+
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
|
|
8
|
+
var(--ic-status-error-hover);--ic-error-border-pressed:var(--ic-space-xxxs) solid
|
|
9
|
+
var(--ic-status-error-pressed);--ic-success-border-default:var(--ic-space-xxxs) solid
|
|
10
|
+
var(--ic-status-success);--ic-success-border-hover:var(--ic-space-xxxs) solid
|
|
11
|
+
var(--ic-status-success-hover);--ic-success-border-pressed:var(--ic-space-xxxs) solid
|
|
12
|
+
var(--ic-status-success-pressed);--ic-warning-border-default:var(--ic-space-xxxs) solid
|
|
13
|
+
var(--ic-status-warning-mid);--ic-warning-border-hover:var(--ic-space-xxxs) solid
|
|
14
|
+
var(--ic-status-warning-mid-hover);--ic-warning-border-pressed:var(--ic-space-xxxs) solid
|
|
15
|
+
var(--ic-status-warning-mid-pressed);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
|
|
8
16
|
var(--ic-font-line-height-h1) var(--ic-font-heading-family);--ic-font-h2:var(--ic-font-weight-bold) var(--ic-font-size-h2) /
|
|
9
17
|
var(--ic-font-line-height-h2) var(--ic-font-heading-family);--ic-font-h3:var(--ic-font-weight-regular) var(--ic-font-size-h3) /
|
|
10
18
|
var(--ic-font-line-height-h3) var(--ic-font-body-family);--ic-font-h4:var(--ic-font-weight-semibold) var(--ic-font-size-h4) /
|
|
@@ -15,7 +23,43 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
15
23
|
var(--ic-font-body-family);--ic-font-body:var(--ic-font-weight-regular) var(--ic-font-size-regular) /
|
|
16
24
|
var(--ic-font-line-height-body) var(--ic-font-body-family);--ic-font-caption:var(--ic-font-weight-semibold) var(--ic-font-size-caption) /
|
|
17
25
|
var(--ic-font-line-height-caption) var(--ic-font-body-family);--ic-font-label:var(--ic-font-weight-semibold) var(--ic-font-size-label) /
|
|
18
|
-
var(--ic-font-line-height-body) var(--ic-font-body-family);--ic-
|
|
26
|
+
var(--ic-font-line-height-body) var(--ic-font-body-family);--ic-font-code-large:var(--ic-font-weight-regular)
|
|
27
|
+
var(--ic-font-size-regular) / var(--ic-font-line-height-code)
|
|
28
|
+
var(--ic-font-code-family);--ic-font-code-small:var(--ic-font-weight-semibold) var(--ic-font-size-label) /
|
|
29
|
+
var(--ic-font-line-height-code) var(--ic-font-code-family);--ic-font-code-extra-small:var(--ic-font-weight-regular)
|
|
30
|
+
var(--ic-font-size-caption) / var(--ic-font-line-height-code)
|
|
31
|
+
var(--ic-font-code-family);--ic-keyline-darken-rgb:rgb(0 0 0 / 20%);--ic-keyline-darken:1px solid var(--ic-keyline-darken-rgb);--ic-keyline-lighten-rgb:rgb(255 255 255 / 20%);--ic-keyline-lighten:1px solid var(--ic-keyline-lighten-rgb);--ic-status-error-r:212;--ic-status-error-g:53;--ic-status-error-b:28;--ic-status-error-a:1;--ic-status-error:rgb(
|
|
32
|
+
var(--ic-status-error-r) var(--ic-status-error-g) var(--ic-status-error-b) /
|
|
33
|
+
var(--ic-status-error-a)
|
|
34
|
+
);--ic-status-error-hover:rgb(
|
|
35
|
+
calc(var(--ic-status-error-r) * 0.8) calc(var(--ic-status-error-g) * 0.8)
|
|
36
|
+
calc(var(--ic-status-error-b) * 0.8) / var(--ic-status-error-a)
|
|
37
|
+
);--ic-status-error-pressed:rgb(
|
|
38
|
+
calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
|
|
39
|
+
calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
|
|
40
|
+
);--ic-status-error-background:#ffe4e3;--ic-status-warning:#ffc107;--ic-status-warning-background:#fffbd8;--ic-status-warning-r:208;--ic-status-warning-g:121;--ic-status-warning-b:50;--ic-status-warning-a:1;--ic-status-warning-mid:rgb(
|
|
41
|
+
var(--ic-status-warning-r) var(--ic-status-warning-g)
|
|
42
|
+
var(--ic-status-warning-b) / var(--ic-status-warning-a)
|
|
43
|
+
);--ic-status-warning-mid-hover:rgb(
|
|
44
|
+
calc(var(--ic-status-warning-r) * 0.8)
|
|
45
|
+
calc(var(--ic-status-warning-g) * 0.8)
|
|
46
|
+
calc(var(--ic-status-warning-b) * 0.8) / var(--ic-status-warning-a)
|
|
47
|
+
);--ic-status-warning-mid-pressed:rgb(
|
|
48
|
+
calc(var(--ic-status-warning-r) * 0.6)
|
|
49
|
+
calc(var(--ic-status-warning-g) * 0.6)
|
|
50
|
+
calc(var(--ic-status-warning-b) * 0.6) / var(--ic-status-warning-a)
|
|
51
|
+
);--ic-status-warning-dark:#7a4c3c;--ic-status-success-r:0;--ic-status-success-g:112;--ic-status-success-b:60;--ic-status-success-a:1;--ic-status-success:rgb(
|
|
52
|
+
var(--ic-status-success-r) var(--ic-status-success-g)
|
|
53
|
+
var(--ic-status-success-b) / var(--ic-status-success-a)
|
|
54
|
+
);--ic-status-success-hover:rgb(
|
|
55
|
+
calc(var(--ic-status-success-r) * 0.8)
|
|
56
|
+
calc(var(--ic-status-success-g) * 0.8)
|
|
57
|
+
calc(var(--ic-status-success-b) * 0.8) / var(--ic-status-success-a)
|
|
58
|
+
);--ic-status-success-pressed:rgb(
|
|
59
|
+
calc(var(--ic-status-success-r) * 0.6)
|
|
60
|
+
calc(var(--ic-status-success-g) * 0.6)
|
|
61
|
+
calc(var(--ic-status-success-b) * 0.6) / var(--ic-status-success-a)
|
|
62
|
+
);--ic-status-success-background:#e8fef3;--ic-status-info:#3170c2;--ic-status-info-background:#e1f0fc;--ic-status-error-contrast:#f15b4e;--ic-status-warning-contrast:#ffc107;--ic-status-success-contrast:#1bb56c;--ic-status-info-contrast:#488fe3;--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-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(
|
|
19
63
|
var(--ic-theme-primary-r) var(--ic-theme-primary-g)
|
|
20
64
|
var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
|
|
21
65
|
);--ic-theme-secondary:rgb(
|
|
@@ -54,4 +98,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
54
98
|
);--ic-theme-active:rgb(
|
|
55
99
|
calc(var(--ic-theme-calc) + 65) calc(var(--ic-theme-calc) + 70)
|
|
56
100
|
calc(var(--ic-theme-calc) + 77) / 20%
|
|
57
|
-
);--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-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-menu:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--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)}
|
|
101
|
+
);--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-menu:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 60);--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)}
|
|
@@ -6,5 +6,5 @@ interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<El
|
|
|
6
6
|
forwardedRef: React.RefObject<ElementType>;
|
|
7
7
|
ref?: React.Ref<any>;
|
|
8
8
|
}
|
|
9
|
-
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes,
|
|
9
|
+
export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
|
|
10
10
|
export {};
|
|
@@ -9,10 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import { attachProps, createForwardRef, dashToPascalCase,
|
|
14
|
-
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction,
|
|
15
|
-
defineCustomElement
|
|
12
|
+
import React, { createElement } from 'react';
|
|
13
|
+
import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
|
|
14
|
+
export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
|
15
|
+
if (defineCustomElement !== undefined) {
|
|
16
|
+
defineCustomElement();
|
|
17
|
+
}
|
|
16
18
|
const displayName = dashToPascalCase(tagName);
|
|
17
19
|
const ReactComponent = class extends React.Component {
|
|
18
20
|
constructor(props) {
|
|
@@ -30,14 +32,20 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
30
32
|
render() {
|
|
31
33
|
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
|
|
32
34
|
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
35
|
+
const value = cProps[name];
|
|
33
36
|
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
34
37
|
const eventName = name.substring(2).toLowerCase();
|
|
35
38
|
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
36
|
-
acc[name] =
|
|
39
|
+
acc[name] = value;
|
|
37
40
|
}
|
|
38
41
|
}
|
|
39
42
|
else {
|
|
40
|
-
|
|
43
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
|
44
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
|
45
|
+
const type = typeof value;
|
|
46
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
47
|
+
acc[camelToDashCase(name)] = value;
|
|
48
|
+
}
|
|
41
49
|
}
|
|
42
50
|
return acc;
|
|
43
51
|
}, {});
|
|
@@ -45,7 +53,14 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
|
|
|
45
53
|
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
46
54
|
}
|
|
47
55
|
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
|
|
48
|
-
|
|
56
|
+
/**
|
|
57
|
+
* We use createElement here instead of
|
|
58
|
+
* React.createElement to work around a
|
|
59
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
60
|
+
* React.createElement causes all elements to be rendered
|
|
61
|
+
* as <tagname> instead of the actual Web Component.
|
|
62
|
+
*/
|
|
63
|
+
return createElement(tagName, newProps, children);
|
|
49
64
|
}
|
|
50
65
|
static get displayName() {
|
|
51
66
|
return displayName;
|
|
@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
};
|
|
21
21
|
import React from 'react';
|
|
22
22
|
import ReactDOM from 'react-dom';
|
|
23
|
-
import { attachProps, dashToPascalCase, defineCustomElement, setRef
|
|
23
|
+
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
|
24
24
|
export const createOverlayComponent = (tagName, controller, customElement) => {
|
|
25
25
|
defineCustomElement(tagName, customElement);
|
|
26
26
|
const displayName = dashToPascalCase(tagName);
|
|
@@ -10,7 +10,7 @@ export const setRef = (ref, value) => {
|
|
|
10
10
|
};
|
|
11
11
|
export const mergeRefs = (...refs) => {
|
|
12
12
|
return (value) => {
|
|
13
|
-
refs.forEach(ref => {
|
|
13
|
+
refs.forEach((ref) => {
|
|
14
14
|
setRef(ref, value);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -23,9 +23,7 @@ export const createForwardRef = (ReactComponent, displayName) => {
|
|
|
23
23
|
return React.forwardRef(forwardRef);
|
|
24
24
|
};
|
|
25
25
|
export const defineCustomElement = (tagName, customElement) => {
|
|
26
|
-
if (customElement !== undefined &&
|
|
27
|
-
typeof customElements !== 'undefined' &&
|
|
28
|
-
!customElements.get(tagName)) {
|
|
26
|
+
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
|
29
27
|
customElements.define(tagName, customElement);
|
|
30
28
|
}
|
|
31
29
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukic/react",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.2.0",
|
|
5
5
|
"description": "React-wrapped web components compiled using StencilJS",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
|
|
@@ -22,11 +22,12 @@
|
|
|
22
22
|
"dist/"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@ukic/fonts": "^2.
|
|
26
|
-
"@ukic/web-components": "^2.
|
|
25
|
+
"@ukic/fonts": "^2.2.0",
|
|
26
|
+
"@ukic/web-components": "^2.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@babel/core": "^7.16.0",
|
|
30
|
+
"@stencil/react-output-target": "^0.4.0",
|
|
30
31
|
"@storybook/addon-a11y": "^6.4.8",
|
|
31
32
|
"@storybook/addon-actions": "^6.4.8",
|
|
32
33
|
"@storybook/addon-docs": "^6.4.8",
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
"@storybook/addon-postcss": "^2.0.0",
|
|
36
37
|
"@storybook/builder-webpack5": "^6.5.14",
|
|
37
38
|
"@storybook/manager-webpack5": "^6.5.14",
|
|
38
|
-
"@storybook/react": "6.5.15",
|
|
39
|
+
"@storybook/react": "^6.5.15",
|
|
39
40
|
"@types/jest": "27.0.3",
|
|
40
41
|
"@types/node": "^16.11.11",
|
|
41
42
|
"@types/react": "^17.0.37",
|
|
@@ -64,5 +65,6 @@
|
|
|
64
65
|
"dist"
|
|
65
66
|
]
|
|
66
67
|
},
|
|
67
|
-
"
|
|
68
|
+
"license": "MIT",
|
|
69
|
+
"gitHead": "c6d9d32d9d0dbdd8c263b06af05e1da6183c1efe"
|
|
68
70
|
}
|