@stenajs-webui/core 14.2.0 → 15.0.0-alpha.3
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/layout/box/Box.d.ts +2 -2
- package/dist/components/layout/box/Box.stories.d.ts +2 -2
- package/dist/hooks/UseEventListener.d.ts +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.es.js +52 -53
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +71 -52
- package/dist/index.js.map +1 -1
- package/dist/types/PickByValue.d.ts +3 -0
- package/dist/utils/TruthyKeysAsList.d.ts +1 -0
- package/dist/utils/__tests__/TruthyKeysAsList.test.d.ts +1 -0
- package/package.json +3 -4
|
@@ -66,6 +66,6 @@ export interface BoxProps extends StyledSystemProps, DivProps {
|
|
|
66
66
|
}
|
|
67
67
|
export declare const Box: import("@emotion/styled").StyledComponent<{
|
|
68
68
|
theme?: import("@emotion/react").Theme | undefined;
|
|
69
|
-
as?:
|
|
70
|
-
} & BoxProps & BoxShadowProps<Required<import("styled-system").Theme<TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<TLengthStyledSystem>>, import("csstype").Property.
|
|
69
|
+
as?: import("react").ElementType<any> | undefined;
|
|
70
|
+
} & BoxProps & BoxShadowProps<Required<import("styled-system").Theme<TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<TLengthStyledSystem>>, import("csstype").Property.Background<TLengthStyledSystem>>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
71
71
|
export {};
|
|
@@ -5,8 +5,8 @@ declare const _default: {
|
|
|
5
5
|
title: string;
|
|
6
6
|
component: import("@emotion/styled").StyledComponent<{
|
|
7
7
|
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
-
as?:
|
|
9
|
-
} & BoxProps & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<
|
|
8
|
+
as?: React.ElementType<any> | undefined;
|
|
9
|
+
} & BoxProps & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
10
|
parameters: {
|
|
11
11
|
notes: {
|
|
12
12
|
markdown: any;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { RefObject } from "react";
|
|
2
2
|
declare type EventHandler<TEventName extends keyof HTMLElementEventMap> = (event: HTMLElementEventMap[TEventName]) => void;
|
|
3
|
-
export declare const useEventListener: <TEventName extends
|
|
3
|
+
export declare const useEventListener: <TEventName extends keyof HTMLElementEventMap>(ref: RefObject<HTMLElement>, eventName: TEventName, handler: EventHandler<TEventName>) => void;
|
|
4
4
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export * from "./components/heading/Heading";
|
|
|
19
19
|
export * from "./types/ElementProps";
|
|
20
20
|
export * from "./types/DeepPartial";
|
|
21
21
|
export * from "./types/Omit";
|
|
22
|
+
export * from "./types/PickByValue";
|
|
22
23
|
export * from "./hooks/UseArraySet";
|
|
23
24
|
export * from "./hooks/UseBoolean";
|
|
24
25
|
export * from "./hooks/UseDebounce";
|
|
@@ -36,5 +37,6 @@ export * from "./hooks/UseOnScreen";
|
|
|
36
37
|
export * from "./hooks/UseForwardedRef";
|
|
37
38
|
export * from "./hooks/UseTimeoutState";
|
|
38
39
|
export * from "./utils/SwitchCaseExhauster";
|
|
40
|
+
export * from "./utils/TruthyKeysAsList";
|
|
39
41
|
export * from "./utils/parsers/NumberParser";
|
|
40
42
|
export { booleanOrNumberToNumber } from "./utils/BooleanOrNumberToNumber";
|
package/dist/index.es.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import '@stenajs-webui/theme';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
|
-
import
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { forwardRef, useState, useCallback, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
|
|
4
5
|
import isPropValid from '@emotion/is-prop-valid';
|
|
5
6
|
import { system, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flexbox, overflow, position, layout, zIndex, left, right, top, bottom } from 'styled-system';
|
|
6
7
|
import cx from 'classnames';
|
|
7
|
-
import
|
|
8
|
+
import * as ReactDOM from 'react-dom';
|
|
8
9
|
import { debounce } from 'lodash';
|
|
9
10
|
|
|
10
11
|
/*! *****************************************************************************
|
|
@@ -45,35 +46,33 @@ function __rest(s, e) {
|
|
|
45
46
|
return t;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
|
-
function
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
function __spreadArray(to, from, pack) {
|
|
50
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
51
|
+
if (ar || !(i in from)) {
|
|
52
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
53
|
+
ar[i] = from[i];
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
54
57
|
}
|
|
58
|
+
|
|
55
59
|
function __makeTemplateObject(cooked, raw) {
|
|
56
60
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
57
61
|
return cooked;
|
|
58
62
|
}
|
|
59
63
|
|
|
60
|
-
var SeparatorLineComponent = styled.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n border: 0;\n margin: 0;\n background-color: ", ";\n height: ", ";\n width: ", ";\n"], ["\n display: flex;\n border: 0;\n margin: 0;\n background-color: ", ";\n height: ",
|
|
61
|
-
";\n width: ",
|
|
62
|
-
";\n"])), function (props) { return props.color; }, function (props) {
|
|
64
|
+
var SeparatorLineComponent = styled.hr(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n border: 0;\n margin: 0;\n background-color: ", ";\n height: ", ";\n width: ", ";\n"], ["\n display: flex;\n border: 0;\n margin: 0;\n background-color: ", ";\n height: ", ";\n width: ", ";\n"])), function (props) { return props.color; }, function (props) {
|
|
63
65
|
return props.vertical ? props.size || "100%" : props.width || "1px";
|
|
64
66
|
}, function (props) {
|
|
65
67
|
return props.vertical ? props.width || "1px" : props.size || "100%";
|
|
66
68
|
});
|
|
67
69
|
var SeparatorLine = forwardRef(function (_a, ref) {
|
|
68
70
|
var _b = _a.color, color = _b === void 0 ? "var(--lhds-color-ui-300)" : _b, _c = _a.size, size = _c === void 0 ? "100%" : _c, _d = _a.width, width = _d === void 0 ? "1px" : _d, _e = _a.vertical, vertical = _e === void 0 ? false : _e;
|
|
69
|
-
return (createElement(SeparatorLineComponent, { color: color, size: size, width: width, vertical: vertical, ref: ref }));
|
|
71
|
+
return (React.createElement(SeparatorLineComponent, { color: color, size: size, width: width, vertical: vertical, ref: ref }));
|
|
70
72
|
});
|
|
71
|
-
var templateObject_1;
|
|
73
|
+
var templateObject_1$3;
|
|
72
74
|
|
|
73
|
-
var ClickableElement = styled.button(templateObject_1$
|
|
74
|
-
"\n }\n :focus {\n outline: 0;\n ",
|
|
75
|
-
"\n ", "\n }\n ", "\n ", "\n ",
|
|
76
|
-
"\n"])), function (_a) {
|
|
75
|
+
var ClickableElement = styled.button(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: inline-block;\n user-select: none;\n border: 0;\n padding: 0;\n background: ", ";\n ", "\n\n :hover {\n ", ";\n ", "\n }\n :active {\n ", "\n }\n :focus {\n outline: 0;\n ", "\n ", "\n }\n ", "\n ", "\n ", "\n"], ["\n display: inline-block;\n user-select: none;\n border: 0;\n padding: 0;\n background: ", ";\n ", "\n\n :hover {\n ", ";\n ", "\n }\n :active {\n ", "\n }\n :focus {\n outline: 0;\n ", "\n ", "\n }\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
77
76
|
var background = _a.background;
|
|
78
77
|
return background;
|
|
79
78
|
}, function (_a) {
|
|
@@ -106,9 +105,9 @@ var ClickableElement = styled.button(templateObject_1$1 || (templateObject_1$1 =
|
|
|
106
105
|
var Clickable = forwardRef(function (_a, ref) {
|
|
107
106
|
var disableFocusHighlight = _a.disableFocusHighlight, onClick = _a.onClick, onDblClick = _a.onDblClick, tooltip = _a.tooltip, disableOpacityOnClick = _a.disableOpacityOnClick, disablePointer = _a.disablePointer, opacityOnHover = _a.opacityOnHover, disabled = _a.disabled, children = _a.children, _b = _a.background, background = _b === void 0 ? "transparent" : _b, hoverBackground = _a.hoverBackground, focusBackground = _a.focusBackground, _c = _a.type, type = _c === void 0 ? "button" : _c, restProps = __rest(_a, ["disableFocusHighlight", "onClick", "onDblClick", "tooltip", "disableOpacityOnClick", "disablePointer", "opacityOnHover", "disabled", "children", "background", "hoverBackground", "focusBackground", "type"]);
|
|
108
107
|
var hasClickHandler = !!(onClick || onDblClick);
|
|
109
|
-
return (createElement(ClickableElement, __assign({ opacityOnHover: opacityOnHover, title: tooltip, disabled: disabled, disableOpacityOnClick: disableOpacityOnClick, onClick: onClick, onDoubleClick: onDblClick, disableFocusHighlight: disableFocusHighlight, pointer: hasClickHandler && !disablePointer, ref: ref, background: background, hoverBackground: hoverBackground, focusBackground: focusBackground, type: type }, restProps), children));
|
|
108
|
+
return (React.createElement(ClickableElement, __assign({ opacityOnHover: opacityOnHover, title: tooltip, disabled: disabled, disableOpacityOnClick: disableOpacityOnClick, onClick: onClick, onDoubleClick: onDblClick, disableFocusHighlight: disableFocusHighlight, pointer: hasClickHandler && !disablePointer, ref: ref, background: background, hoverBackground: hoverBackground, focusBackground: focusBackground, type: type }, restProps), children));
|
|
110
109
|
});
|
|
111
|
-
var templateObject_1$
|
|
110
|
+
var templateObject_1$2;
|
|
112
111
|
|
|
113
112
|
var booleanOrNumberToNumber = function (num) {
|
|
114
113
|
if (num == null) {
|
|
@@ -164,11 +163,7 @@ var Box = styled("div", {
|
|
|
164
163
|
: isPropValid(propName)
|
|
165
164
|
: false;
|
|
166
165
|
},
|
|
167
|
-
})(templateObject_1$
|
|
168
|
-
"\n ", "\n }\n :focus {\n ",
|
|
169
|
-
"\n ", "\n }\n :focus-within {\n ",
|
|
170
|
-
"\n ",
|
|
171
|
-
"\n }\n"])), box, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flexbox, overflow, position, layout, zIndex, left, right, top, bottom, function (_a) {
|
|
166
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n --current-spacing: 0;\n --current-indent: 0;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n padding: calc(var(--current-spacing) * var(--swui-metrics-spacing))\n calc(var(--current-indent) * var(--swui-metrics-indent));\n :hover {\n ", "\n ", "\n }\n :focus {\n ", "\n ", "\n }\n :focus-within {\n ", "\n ", "\n }\n"], ["\n --current-spacing: 0;\n --current-indent: 0;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n padding: calc(var(--current-spacing) * var(--swui-metrics-spacing))\n calc(var(--current-indent) * var(--swui-metrics-indent));\n :hover {\n ", "\n ", "\n }\n :focus {\n ", "\n ", "\n }\n :focus-within {\n ", "\n ", "\n }\n"])), box, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flexbox, overflow, position, layout, zIndex, left, right, top, bottom, function (_a) {
|
|
172
167
|
var hoverBackground = _a.hoverBackground;
|
|
173
168
|
return hoverBackground ? "background: " + hoverBackground + ";" : "";
|
|
174
169
|
}, function (_a) {
|
|
@@ -187,10 +182,10 @@ var Box = styled("div", {
|
|
|
187
182
|
var focusWithinBorder = _a.focusWithinBorder;
|
|
188
183
|
return focusWithinBorder ? "border: " + focusWithinBorder + ";" : "";
|
|
189
184
|
});
|
|
190
|
-
var templateObject_1$
|
|
185
|
+
var templateObject_1$1;
|
|
191
186
|
|
|
192
187
|
var Column = forwardRef(function Column(props, ref) {
|
|
193
|
-
return createElement(Box, __assign({ ref: ref }, props));
|
|
188
|
+
return React.createElement(Box, __assign({ ref: ref }, props));
|
|
194
189
|
});
|
|
195
190
|
|
|
196
191
|
var getDimensionObject = function (node) {
|
|
@@ -245,42 +240,42 @@ var ResizeAwareBox = forwardRef(function ResizeAwareBox(_a, ref) {
|
|
|
245
240
|
var localRef = useRef(null);
|
|
246
241
|
var currentRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
|
|
247
242
|
useElementDimensions(currentRef, onResize);
|
|
248
|
-
return createElement(Box, __assign({}, boxProps, { ref: ref }));
|
|
243
|
+
return React.createElement(Box, __assign({}, boxProps, { ref: ref }));
|
|
249
244
|
});
|
|
250
245
|
|
|
251
246
|
var Row = forwardRef(function Row(props, ref) {
|
|
252
|
-
return createElement(Box, __assign({ row: true, ref: ref }, props));
|
|
247
|
+
return React.createElement(Box, __assign({ row: true, ref: ref }, props));
|
|
253
248
|
});
|
|
254
249
|
|
|
255
250
|
var Indent = forwardRef(function Indent(_a, ref) {
|
|
256
251
|
var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
|
|
257
|
-
return createElement(Box, __assign({ indent: num, ref: ref }, props));
|
|
252
|
+
return React.createElement(Box, __assign({ indent: num, ref: ref }, props));
|
|
258
253
|
});
|
|
259
254
|
|
|
260
255
|
var Spacing = forwardRef(function Spacing(_a, ref) {
|
|
261
256
|
var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
|
|
262
|
-
return createElement(Box, __assign({ spacing: num, ref: ref }, props));
|
|
257
|
+
return React.createElement(Box, __assign({ spacing: num, ref: ref }, props));
|
|
263
258
|
});
|
|
264
259
|
|
|
265
|
-
var InnerSpace = styled.div(templateObject_1
|
|
260
|
+
var InnerSpace = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --current-size: 1;\n flex: none;\n width: calc(var(--current-size) * var(--swui-metrics-space));\n height: calc(var(--current-size) * var(--swui-metrics-space));\n"], ["\n --current-size: 1;\n flex: none;\n width: calc(var(--current-size) * var(--swui-metrics-space));\n height: calc(var(--current-size) * var(--swui-metrics-space));\n"])));
|
|
266
261
|
var Space = function (_a) {
|
|
267
262
|
var _b;
|
|
268
263
|
var _c = _a.half, half = _c === void 0 ? false : _c, _d = _a.horizontal, horizontal = _d === void 0 ? false : _d, _e = _a.num, num = _e === void 0 ? 1 : _e, _f = _a.vertical, vertical = _f === void 0 ? false : _f;
|
|
269
264
|
var size = num * (half ? 0.5 : 1);
|
|
270
|
-
return (createElement(InnerSpace, { style: (_b = {},
|
|
265
|
+
return (React.createElement(InnerSpace, { style: (_b = {},
|
|
271
266
|
_b["--current-size"] = size,
|
|
272
267
|
_b.height = horizontal ? 1 : undefined,
|
|
273
268
|
_b.width = vertical ? 1 : undefined,
|
|
274
269
|
_b) }));
|
|
275
270
|
};
|
|
276
|
-
var templateObject_1
|
|
271
|
+
var templateObject_1;
|
|
277
272
|
|
|
278
273
|
var Nest = function (_a) {
|
|
279
274
|
var children = _a.children, nest = _a.nest, render = _a.render;
|
|
280
275
|
if (nest) {
|
|
281
|
-
return createElement(Fragment, null, render(children));
|
|
276
|
+
return React.createElement(React.Fragment, null, render(children));
|
|
282
277
|
}
|
|
283
|
-
return createElement(Fragment, null, children);
|
|
278
|
+
return React.createElement(React.Fragment, null, children);
|
|
284
279
|
};
|
|
285
280
|
|
|
286
281
|
function styleInject(css, ref) {
|
|
@@ -310,13 +305,13 @@ function styleInject(css, ref) {
|
|
|
310
305
|
}
|
|
311
306
|
}
|
|
312
307
|
|
|
313
|
-
var css_248z = ".Text-module_text__2FYaC {\n /* Theme vars */\n --swui-text-color: var(--swui-text-primary-color);\n --swui-text-color-caption: var(--swui-text-primary-color);\n --swui-text-color-overline: var(--lhds-color-ui-600);\n --swui-text-font-family: var(--swui-font-primary);\n --swui-text-font-weight: var(--swui-font-weight-text);\n\n /* Current */\n --current-color: var(--swui-text-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-font-weight: var(--swui-text-font-weight);\n --current-letter-spacing: var(--swui-text-letter-spacing);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-text-font-family);\n font-weight: var(--current-font-weight);\n}\n\n .Text-module_text__2FYaC.Text-module_standard__2-bur {\n }\n\n .Text-module_text__2FYaC.Text-module_bold__1Knlz {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Text-module_text__2FYaC.Text-module_caption__153CS {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-color: var(--swui-text-color-caption);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Text-module_text__2FYaC.Text-module_overline__22jee {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-color: var(--swui-text-color-overline);\n --current-font-weight: var(--swui-font-weight-text-bold);\n --current-letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .Text-module_text__2FYaC.Text-module_large__3TF1O {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n }\n\n .Text-module_text__2FYaC.Text-module_medium__1yeKe {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Text-module_text__2FYaC.Text-module_small__3KAee {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n }\n\n .Text-module_text__2FYaC.Text-module_smaller__1mD_7 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n }\n";
|
|
314
|
-
var styles = {"text":"Text-module_text__2FYaC","standard":"Text-module_standard__2-bur","bold":"Text-module_bold__1Knlz","caption":"Text-module_caption__153CS","overline":"Text-module_overline__22jee","large":"Text-module_large__3TF1O","medium":"Text-module_medium__1yeKe","small":"Text-module_small__3KAee","smaller":"Text-module_smaller__1mD_7"};
|
|
315
|
-
styleInject(css_248z);
|
|
308
|
+
var css_248z$1 = ".Text-module_text__2FYaC {\n /* Theme vars */\n --swui-text-color: var(--swui-text-primary-color);\n --swui-text-color-caption: var(--swui-text-primary-color);\n --swui-text-color-overline: var(--lhds-color-ui-600);\n --swui-text-font-family: var(--swui-font-primary);\n --swui-text-font-weight: var(--swui-font-weight-text);\n\n /* Current */\n --current-color: var(--swui-text-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-font-weight: var(--swui-text-font-weight);\n --current-letter-spacing: var(--swui-text-letter-spacing);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-text-font-family);\n font-weight: var(--current-font-weight);\n}\n\n .Text-module_text__2FYaC.Text-module_standard__2-bur {\n }\n\n .Text-module_text__2FYaC.Text-module_bold__1Knlz {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Text-module_text__2FYaC.Text-module_caption__153CS {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-color: var(--swui-text-color-caption);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Text-module_text__2FYaC.Text-module_overline__22jee {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-color: var(--swui-text-color-overline);\n --current-font-weight: var(--swui-font-weight-text-bold);\n --current-letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .Text-module_text__2FYaC.Text-module_large__3TF1O {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n }\n\n .Text-module_text__2FYaC.Text-module_medium__1yeKe {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Text-module_text__2FYaC.Text-module_small__3KAee {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n }\n\n .Text-module_text__2FYaC.Text-module_smaller__1mD_7 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n }\n";
|
|
309
|
+
var styles$1 = {"text":"Text-module_text__2FYaC","standard":"Text-module_standard__2-bur","bold":"Text-module_bold__1Knlz","caption":"Text-module_caption__153CS","overline":"Text-module_overline__22jee","large":"Text-module_large__3TF1O","medium":"Text-module_medium__1yeKe","small":"Text-module_small__3KAee","smaller":"Text-module_smaller__1mD_7"};
|
|
310
|
+
styleInject(css_248z$1);
|
|
316
311
|
|
|
317
312
|
var Text = forwardRef(function (_a, ref) {
|
|
318
313
|
var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, className = _a.className, color = _a.color, userSelect = _a.userSelect, whiteSpace = _a.whiteSpace, style = _a.style, spanProps = __rest(_a, ["children", "variant", "size", "className", "color", "userSelect", "whiteSpace", "style"]);
|
|
319
|
-
return (createElement("span", __assign({ className: cx(styles.text, styles[variant], styles[size], className), ref: ref, style: __assign({ color: color, userSelect: userSelect, whiteSpace: whiteSpace }, style) }, spanProps), children));
|
|
314
|
+
return (React.createElement("span", __assign({ className: cx(styles$1.text, styles$1[variant], styles$1[size], className), ref: ref, style: __assign({ color: color, userSelect: userSelect, whiteSpace: whiteSpace }, style) }, spanProps), children));
|
|
320
315
|
});
|
|
321
316
|
var Txt = Text;
|
|
322
317
|
|
|
@@ -324,45 +319,45 @@ var Txt = Text;
|
|
|
324
319
|
* @deprecated Please use `Text` instead.
|
|
325
320
|
*/
|
|
326
321
|
var SmallText = function (props) {
|
|
327
|
-
return createElement(Text, __assign({ size: "small" }, props));
|
|
322
|
+
return React.createElement(Text, __assign({ size: "small" }, props));
|
|
328
323
|
};
|
|
329
324
|
|
|
330
325
|
/**
|
|
331
326
|
* @deprecated Please use `Text` instead.
|
|
332
327
|
*/
|
|
333
328
|
var SmallerText = function (props) {
|
|
334
|
-
return createElement(Text, __assign({ size: "smaller" }, props));
|
|
329
|
+
return React.createElement(Text, __assign({ size: "smaller" }, props));
|
|
335
330
|
};
|
|
336
331
|
|
|
337
332
|
/**
|
|
338
333
|
* @deprecated Please use `Text` instead.
|
|
339
334
|
*/
|
|
340
335
|
var StandardText = function (props) {
|
|
341
|
-
return createElement(Text, __assign({ size: "medium" }, props));
|
|
336
|
+
return React.createElement(Text, __assign({ size: "medium" }, props));
|
|
342
337
|
};
|
|
343
338
|
|
|
344
339
|
/**
|
|
345
340
|
* @deprecated Please use `Text` instead.
|
|
346
341
|
*/
|
|
347
342
|
var LargeText = function (props) {
|
|
348
|
-
return createElement(Text, __assign({ size: "large" }, props));
|
|
343
|
+
return React.createElement(Text, __assign({ size: "large" }, props));
|
|
349
344
|
};
|
|
350
345
|
|
|
351
|
-
var css_248z
|
|
352
|
-
var styles
|
|
353
|
-
styleInject(css_248z
|
|
346
|
+
var css_248z = ".Heading-module_heading__1Y-tN {\n font-size: var(--swui-heading-font-size);\n color: var(--lhds-color-ui-800);\n letter-spacing: 0;\n margin: 0;\n line-height: var(--swui-heading-line-height);\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-font-weight-text);\n}\n\n .Heading-module_heading__1Y-tN.Heading-module_h1__3hICB {\n --swui-heading-font-size: 28px;\n --swui-heading-line-height: 32px;\n }\n\n .Heading-module_heading__1Y-tN.Heading-module_h2__2p_cD {\n --swui-heading-font-size: 24px;\n --swui-heading-line-height: 28px;\n }\n\n .Heading-module_heading__1Y-tN.Heading-module_h3__3qTgm {\n --swui-heading-font-size: 20px;\n --swui-heading-line-height: 24px;\n }\n\n .Heading-module_heading__1Y-tN.Heading-module_h4__2ishv {\n --swui-heading-font-size: 16px;\n --swui-heading-line-height: 20px;\n }\n\n .Heading-module_heading__1Y-tN.Heading-module_h5__bYa6B {\n --swui-heading-font-size: 14px;\n --swui-heading-line-height: 18px;\n font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Heading-module_heading__1Y-tN.Heading-module_h6__4yp37 {\n --swui-heading-font-size: 12px;\n --swui-heading-line-height: 16px;\n font-weight: var(--swui-font-weight-text-bold);\n }\n";
|
|
347
|
+
var styles = {"heading":"Heading-module_heading__1Y-tN","h1":"Heading-module_h1__3hICB","h2":"Heading-module_h2__2p_cD","h3":"Heading-module_h3__3qTgm","h4":"Heading-module_h4__2ishv","h5":"Heading-module_h5__bYa6B","h6":"Heading-module_h6__4yp37"};
|
|
348
|
+
styleInject(css_248z);
|
|
354
349
|
|
|
355
350
|
var Heading = forwardRef(function (_a, ref) {
|
|
356
351
|
var _b = _a.variant, variant = _b === void 0 ? "h3" : _b, className = _a.className, color = _a.color, whiteSpace = _a.whiteSpace, style = _a.style, children = _a.children, as = _a.as, hProps = __rest(_a, ["variant", "className", "color", "whiteSpace", "style", "children", "as"]);
|
|
357
352
|
var Element = as !== null && as !== void 0 ? as : variant;
|
|
358
|
-
return (createElement(Element, __assign({ className: cx(styles
|
|
353
|
+
return (React.createElement(Element, __assign({ className: cx(styles.heading, styles[variant], className), style: __assign({ color: color, whiteSpace: whiteSpace }, style), ref: ref }, hProps), children));
|
|
359
354
|
});
|
|
360
355
|
|
|
361
356
|
/**
|
|
362
357
|
* @deprecated Please use `Heading` instead.
|
|
363
358
|
*/
|
|
364
359
|
var HeaderText = function (props) {
|
|
365
|
-
return createElement(Heading, __assign({ variant: "h2" }, props));
|
|
360
|
+
return React.createElement(Heading, __assign({ variant: "h2" }, props));
|
|
366
361
|
};
|
|
367
362
|
|
|
368
363
|
var defaultComparator = function (a, b) { return a === b; };
|
|
@@ -370,13 +365,13 @@ var useArraySet = function (list, setList, comparator) {
|
|
|
370
365
|
if (comparator === void 0) { comparator = defaultComparator; }
|
|
371
366
|
var add = useCallback(function (item) {
|
|
372
367
|
if (!list.some(function (l) { return comparator(l, item); })) {
|
|
373
|
-
setList(
|
|
368
|
+
setList(__spreadArray(__spreadArray([], list, true), [item], false));
|
|
374
369
|
}
|
|
375
370
|
}, [list, setList, comparator]);
|
|
376
371
|
var addMultiple = useCallback(function (items) {
|
|
377
372
|
setList(items.reduce(function (list, item) {
|
|
378
373
|
if (!list.some(function (l) { return comparator(l, item); })) {
|
|
379
|
-
return
|
|
374
|
+
return __spreadArray(__spreadArray([], list, true), [item], false);
|
|
380
375
|
}
|
|
381
376
|
return list;
|
|
382
377
|
}, list));
|
|
@@ -507,7 +502,7 @@ var useEventListener = function (ref, eventName, handler) {
|
|
|
507
502
|
var useElementFocus = function (ref) {
|
|
508
503
|
var _a = useBoolean(false), isInFocus = _a[0], setIsInFocus = _a[1], setIsNotInFocus = _a[2];
|
|
509
504
|
useEffect(function () {
|
|
510
|
-
if (document.activeElement === findDOMNode(ref.current)) {
|
|
505
|
+
if (document.activeElement === ReactDOM.findDOMNode(ref.current)) {
|
|
511
506
|
setIsInFocus();
|
|
512
507
|
}
|
|
513
508
|
else {
|
|
@@ -570,7 +565,7 @@ var useMultiOnClickOutside = function (refs, handler) {
|
|
|
570
565
|
document.removeEventListener("touchstart", listener);
|
|
571
566
|
};
|
|
572
567
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
573
|
-
},
|
|
568
|
+
}, __spreadArray([], refs, true));
|
|
574
569
|
};
|
|
575
570
|
|
|
576
571
|
var useOnClickOutside = function (ref, handler) {
|
|
@@ -682,6 +677,10 @@ var exhaustSwitchCase = function (_arg, fallback) {
|
|
|
682
677
|
return fallback;
|
|
683
678
|
};
|
|
684
679
|
|
|
680
|
+
var truthyKeysAsList = function (r) {
|
|
681
|
+
return Object.keys(r).filter(function (key) { return r[key]; });
|
|
682
|
+
};
|
|
683
|
+
|
|
685
684
|
var parseFloatElseUndefined = function (s) {
|
|
686
685
|
try {
|
|
687
686
|
var f = parseFloat(s);
|
|
@@ -711,5 +710,5 @@ var parseIntElseUndefined = function (s) {
|
|
|
711
710
|
return undefined;
|
|
712
711
|
};
|
|
713
712
|
|
|
714
|
-
export { Box, Clickable, Column, HeaderText, Heading, Indent, LargeText, Nest, ResizeAwareBox, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, Text, Txt, booleanOrNumberToNumber, exhaustSwitchCase, exhaustSwitchCaseElseThrow, getDimensionObject, parseFloatElseUndefined, parseIntElseUndefined, useArraySet, useBoolean, useDebounce, useDelayedFalse, useDomId, useElementDimensions, useElementFocus, useEventListener, useForwardedRef, useMouseIsEntered, useMouseIsOver, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useOnScreen, useTimeoutState };
|
|
713
|
+
export { Box, Clickable, Column, HeaderText, Heading, Indent, LargeText, Nest, ResizeAwareBox, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, Text, Txt, booleanOrNumberToNumber, exhaustSwitchCase, exhaustSwitchCaseElseThrow, getDimensionObject, parseFloatElseUndefined, parseIntElseUndefined, truthyKeysAsList, useArraySet, useBoolean, useDebounce, useDelayedFalse, useDomId, useElementDimensions, useElementFocus, useEventListener, useForwardedRef, useMouseIsEntered, useMouseIsOver, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useOnScreen, useTimeoutState };
|
|
715
714
|
//# sourceMappingURL=index.es.js.map
|