@stenajs-webui/core 14.1.1 → 15.0.0-alpha.10
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/heading/Heading.d.ts +1 -0
- package/dist/components/layout/box/Box.d.ts +6 -2
- package/dist/components/layout/box/Box.stories.d.ts +3 -2
- package/dist/components/text/Text.d.ts +1 -0
- package/dist/hooks/UseEventListener.d.ts +1 -1
- package/dist/hooks/UseOnClickOutside.d.ts +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.es.js +66 -61
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +85 -60
- 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 +4 -5
|
@@ -4,6 +4,7 @@ import { H1Props } from "../../types/ElementProps";
|
|
|
4
4
|
export interface HeadingProps extends H1Props {
|
|
5
5
|
variant?: HeadingVariant;
|
|
6
6
|
whiteSpace?: Property.WhiteSpace;
|
|
7
|
+
wordBreak?: Property.WordBreak;
|
|
7
8
|
as?: HeadingVariant;
|
|
8
9
|
}
|
|
9
10
|
export declare type HeadingVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
@@ -23,6 +23,10 @@ export interface BoxProps extends StyledSystemProps, DivProps {
|
|
|
23
23
|
* Adds spacing left and right of content.
|
|
24
24
|
*/
|
|
25
25
|
indent?: ResponsiveValue<boolean | TLengthStyledSystem>;
|
|
26
|
+
/**
|
|
27
|
+
* Adds spacing between children.
|
|
28
|
+
*/
|
|
29
|
+
gap?: ResponsiveValue<boolean | TLengthStyledSystem>;
|
|
26
30
|
/**
|
|
27
31
|
* Adds a shadow around the box.
|
|
28
32
|
*/
|
|
@@ -66,6 +70,6 @@ export interface BoxProps extends StyledSystemProps, DivProps {
|
|
|
66
70
|
}
|
|
67
71
|
export declare const Box: import("@emotion/styled").StyledComponent<{
|
|
68
72
|
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.
|
|
73
|
+
as?: import("react").ElementType<any> | undefined;
|
|
74
|
+
} & 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
75
|
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;
|
|
@@ -65,3 +65,4 @@ export declare const ModalShadow: () => JSX.Element;
|
|
|
65
65
|
export declare const CustomShadow: () => JSX.Element;
|
|
66
66
|
export declare const FlexGrowChildren: () => JSX.Element;
|
|
67
67
|
export declare const WithAriaLabel: () => JSX.Element;
|
|
68
|
+
export declare const Gap: () => JSX.Element;
|
|
@@ -6,6 +6,7 @@ export interface TextProps extends SpanProps {
|
|
|
6
6
|
size?: TextSize;
|
|
7
7
|
userSelect?: Property.UserSelect;
|
|
8
8
|
whiteSpace?: Property.WhiteSpace;
|
|
9
|
+
wordBreak?: Property.WordBreak;
|
|
9
10
|
color?: string;
|
|
10
11
|
}
|
|
11
12
|
export declare type TextVariant = "standard" | "caption" | "overline" | "bold";
|
|
@@ -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 {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
export declare const useOnClickOutside: (ref: React.RefObject<any>, handler: (event: TouchEvent | MouseEvent) => void) => void;
|
|
2
|
+
export declare const useOnClickOutside: (ref: React.RefObject<any>, handler: (event: TouchEvent | MouseEvent) => void, options?: AddEventListenerOptions | undefined) => void;
|
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) {
|
|
@@ -128,6 +127,7 @@ var shadows = {
|
|
|
128
127
|
var excludedProps = [
|
|
129
128
|
"spacing",
|
|
130
129
|
"indent",
|
|
130
|
+
"gap",
|
|
131
131
|
"width",
|
|
132
132
|
"height",
|
|
133
133
|
"overflow",
|
|
@@ -151,6 +151,11 @@ var box = system({
|
|
|
151
151
|
property: "--current-spacing",
|
|
152
152
|
transform: booleanOrNumberToNumber,
|
|
153
153
|
},
|
|
154
|
+
gap: {
|
|
155
|
+
// @ts-ignore
|
|
156
|
+
property: "--current-gap",
|
|
157
|
+
transform: booleanOrNumberToNumber,
|
|
158
|
+
},
|
|
154
159
|
shadow: {
|
|
155
160
|
property: "boxShadow",
|
|
156
161
|
transform: function (value) { var _a; return (_a = shadows[value]) !== null && _a !== void 0 ? _a : value; },
|
|
@@ -164,11 +169,7 @@ var Box = styled("div", {
|
|
|
164
169
|
: isPropValid(propName)
|
|
165
170
|
: false;
|
|
166
171
|
},
|
|
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) {
|
|
172
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n --current-spacing: 0;\n --current-indent: 0;\n --current-gap: 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 gap: calc(var(--current-gap) * var(--swui-metrics-space));\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 --current-gap: 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 gap: calc(var(--current-gap) * var(--swui-metrics-space));\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
173
|
var hoverBackground = _a.hoverBackground;
|
|
173
174
|
return hoverBackground ? "background: " + hoverBackground + ";" : "";
|
|
174
175
|
}, function (_a) {
|
|
@@ -187,10 +188,10 @@ var Box = styled("div", {
|
|
|
187
188
|
var focusWithinBorder = _a.focusWithinBorder;
|
|
188
189
|
return focusWithinBorder ? "border: " + focusWithinBorder + ";" : "";
|
|
189
190
|
});
|
|
190
|
-
var templateObject_1$
|
|
191
|
+
var templateObject_1$1;
|
|
191
192
|
|
|
192
193
|
var Column = forwardRef(function Column(props, ref) {
|
|
193
|
-
return createElement(Box, __assign({ ref: ref }, props));
|
|
194
|
+
return React.createElement(Box, __assign({ ref: ref }, props));
|
|
194
195
|
});
|
|
195
196
|
|
|
196
197
|
var getDimensionObject = function (node) {
|
|
@@ -245,42 +246,42 @@ var ResizeAwareBox = forwardRef(function ResizeAwareBox(_a, ref) {
|
|
|
245
246
|
var localRef = useRef(null);
|
|
246
247
|
var currentRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
|
|
247
248
|
useElementDimensions(currentRef, onResize);
|
|
248
|
-
return createElement(Box, __assign({}, boxProps, { ref: ref }));
|
|
249
|
+
return React.createElement(Box, __assign({}, boxProps, { ref: ref }));
|
|
249
250
|
});
|
|
250
251
|
|
|
251
252
|
var Row = forwardRef(function Row(props, ref) {
|
|
252
|
-
return createElement(Box, __assign({ row: true, ref: ref }, props));
|
|
253
|
+
return React.createElement(Box, __assign({ row: true, ref: ref }, props));
|
|
253
254
|
});
|
|
254
255
|
|
|
255
256
|
var Indent = forwardRef(function Indent(_a, ref) {
|
|
256
257
|
var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
|
|
257
|
-
return createElement(Box, __assign({ indent: num, ref: ref }, props));
|
|
258
|
+
return React.createElement(Box, __assign({ indent: num, ref: ref }, props));
|
|
258
259
|
});
|
|
259
260
|
|
|
260
261
|
var Spacing = forwardRef(function Spacing(_a, ref) {
|
|
261
262
|
var _b = _a.num, num = _b === void 0 ? 1 : _b, props = __rest(_a, ["num"]);
|
|
262
|
-
return createElement(Box, __assign({ spacing: num, ref: ref }, props));
|
|
263
|
+
return React.createElement(Box, __assign({ spacing: num, ref: ref }, props));
|
|
263
264
|
});
|
|
264
265
|
|
|
265
|
-
var InnerSpace = styled.div(templateObject_1
|
|
266
|
+
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
267
|
var Space = function (_a) {
|
|
267
268
|
var _b;
|
|
268
269
|
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
270
|
var size = num * (half ? 0.5 : 1);
|
|
270
|
-
return (createElement(InnerSpace, { style: (_b = {},
|
|
271
|
+
return (React.createElement(InnerSpace, { style: (_b = {},
|
|
271
272
|
_b["--current-size"] = size,
|
|
272
273
|
_b.height = horizontal ? 1 : undefined,
|
|
273
274
|
_b.width = vertical ? 1 : undefined,
|
|
274
275
|
_b) }));
|
|
275
276
|
};
|
|
276
|
-
var templateObject_1
|
|
277
|
+
var templateObject_1;
|
|
277
278
|
|
|
278
279
|
var Nest = function (_a) {
|
|
279
280
|
var children = _a.children, nest = _a.nest, render = _a.render;
|
|
280
281
|
if (nest) {
|
|
281
|
-
return createElement(Fragment, null, render(children));
|
|
282
|
+
return React.createElement(React.Fragment, null, render(children));
|
|
282
283
|
}
|
|
283
|
-
return createElement(Fragment, null, children);
|
|
284
|
+
return React.createElement(React.Fragment, null, children);
|
|
284
285
|
};
|
|
285
286
|
|
|
286
287
|
function styleInject(css, ref) {
|
|
@@ -310,13 +311,13 @@ function styleInject(css, ref) {
|
|
|
310
311
|
}
|
|
311
312
|
}
|
|
312
313
|
|
|
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);
|
|
314
|
+
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";
|
|
315
|
+
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"};
|
|
316
|
+
styleInject(css_248z$1);
|
|
316
317
|
|
|
317
318
|
var Text = forwardRef(function (_a, ref) {
|
|
318
|
-
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));
|
|
319
|
+
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, wordBreak = _a.wordBreak, style = _a.style, spanProps = __rest(_a, ["children", "variant", "size", "className", "color", "userSelect", "whiteSpace", "wordBreak", "style"]);
|
|
320
|
+
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, wordBreak: wordBreak }, style) }, spanProps), children));
|
|
320
321
|
});
|
|
321
322
|
var Txt = Text;
|
|
322
323
|
|
|
@@ -324,45 +325,45 @@ var Txt = Text;
|
|
|
324
325
|
* @deprecated Please use `Text` instead.
|
|
325
326
|
*/
|
|
326
327
|
var SmallText = function (props) {
|
|
327
|
-
return createElement(Text, __assign({ size: "small" }, props));
|
|
328
|
+
return React.createElement(Text, __assign({ size: "small" }, props));
|
|
328
329
|
};
|
|
329
330
|
|
|
330
331
|
/**
|
|
331
332
|
* @deprecated Please use `Text` instead.
|
|
332
333
|
*/
|
|
333
334
|
var SmallerText = function (props) {
|
|
334
|
-
return createElement(Text, __assign({ size: "smaller" }, props));
|
|
335
|
+
return React.createElement(Text, __assign({ size: "smaller" }, props));
|
|
335
336
|
};
|
|
336
337
|
|
|
337
338
|
/**
|
|
338
339
|
* @deprecated Please use `Text` instead.
|
|
339
340
|
*/
|
|
340
341
|
var StandardText = function (props) {
|
|
341
|
-
return createElement(Text, __assign({ size: "medium" }, props));
|
|
342
|
+
return React.createElement(Text, __assign({ size: "medium" }, props));
|
|
342
343
|
};
|
|
343
344
|
|
|
344
345
|
/**
|
|
345
346
|
* @deprecated Please use `Text` instead.
|
|
346
347
|
*/
|
|
347
348
|
var LargeText = function (props) {
|
|
348
|
-
return createElement(Text, __assign({ size: "large" }, props));
|
|
349
|
+
return React.createElement(Text, __assign({ size: "large" }, props));
|
|
349
350
|
};
|
|
350
351
|
|
|
351
|
-
var css_248z
|
|
352
|
-
var styles
|
|
353
|
-
styleInject(css_248z
|
|
352
|
+
var css_248z = ".Heading-module_heading__1Y-tN {\n font-size: var(--swui-heading-font-size);\n color: var(--lhds-color-ui-900);\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";
|
|
353
|
+
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"};
|
|
354
|
+
styleInject(css_248z);
|
|
354
355
|
|
|
355
356
|
var Heading = forwardRef(function (_a, ref) {
|
|
356
|
-
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
|
+
var _b = _a.variant, variant = _b === void 0 ? "h3" : _b, className = _a.className, color = _a.color, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, style = _a.style, children = _a.children, as = _a.as, hProps = __rest(_a, ["variant", "className", "color", "whiteSpace", "wordBreak", "style", "children", "as"]);
|
|
357
358
|
var Element = as !== null && as !== void 0 ? as : variant;
|
|
358
|
-
return (createElement(Element, __assign({ className: cx(styles
|
|
359
|
+
return (React.createElement(Element, __assign({ className: cx(styles.heading, styles[variant], className), style: __assign({ color: color, whiteSpace: whiteSpace, wordBreak: wordBreak }, style), ref: ref }, hProps), children));
|
|
359
360
|
});
|
|
360
361
|
|
|
361
362
|
/**
|
|
362
363
|
* @deprecated Please use `Heading` instead.
|
|
363
364
|
*/
|
|
364
365
|
var HeaderText = function (props) {
|
|
365
|
-
return createElement(Heading, __assign({ variant: "h2" }, props));
|
|
366
|
+
return React.createElement(Heading, __assign({ variant: "h2" }, props));
|
|
366
367
|
};
|
|
367
368
|
|
|
368
369
|
var defaultComparator = function (a, b) { return a === b; };
|
|
@@ -370,13 +371,13 @@ var useArraySet = function (list, setList, comparator) {
|
|
|
370
371
|
if (comparator === void 0) { comparator = defaultComparator; }
|
|
371
372
|
var add = useCallback(function (item) {
|
|
372
373
|
if (!list.some(function (l) { return comparator(l, item); })) {
|
|
373
|
-
setList(
|
|
374
|
+
setList(__spreadArray(__spreadArray([], list, true), [item], false));
|
|
374
375
|
}
|
|
375
376
|
}, [list, setList, comparator]);
|
|
376
377
|
var addMultiple = useCallback(function (items) {
|
|
377
378
|
setList(items.reduce(function (list, item) {
|
|
378
379
|
if (!list.some(function (l) { return comparator(l, item); })) {
|
|
379
|
-
return
|
|
380
|
+
return __spreadArray(__spreadArray([], list, true), [item], false);
|
|
380
381
|
}
|
|
381
382
|
return list;
|
|
382
383
|
}, list));
|
|
@@ -507,7 +508,7 @@ var useEventListener = function (ref, eventName, handler) {
|
|
|
507
508
|
var useElementFocus = function (ref) {
|
|
508
509
|
var _a = useBoolean(false), isInFocus = _a[0], setIsInFocus = _a[1], setIsNotInFocus = _a[2];
|
|
509
510
|
useEffect(function () {
|
|
510
|
-
if (document.activeElement === findDOMNode(ref.current)) {
|
|
511
|
+
if (document.activeElement === ReactDOM.findDOMNode(ref.current)) {
|
|
511
512
|
setIsInFocus();
|
|
512
513
|
}
|
|
513
514
|
else {
|
|
@@ -570,10 +571,10 @@ var useMultiOnClickOutside = function (refs, handler) {
|
|
|
570
571
|
document.removeEventListener("touchstart", listener);
|
|
571
572
|
};
|
|
572
573
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
573
|
-
},
|
|
574
|
+
}, __spreadArray([], refs, true));
|
|
574
575
|
};
|
|
575
576
|
|
|
576
|
-
var useOnClickOutside = function (ref, handler) {
|
|
577
|
+
var useOnClickOutside = function (ref, handler, options) {
|
|
577
578
|
var eventHandler = useRef(function () {
|
|
578
579
|
return;
|
|
579
580
|
});
|
|
@@ -588,13 +589,13 @@ var useOnClickOutside = function (ref, handler) {
|
|
|
588
589
|
}
|
|
589
590
|
eventHandler.current(event);
|
|
590
591
|
};
|
|
591
|
-
document.addEventListener("mousedown", listener);
|
|
592
|
-
document.addEventListener("touchstart", listener);
|
|
592
|
+
document.addEventListener("mousedown", listener, options);
|
|
593
|
+
document.addEventListener("touchstart", listener, options);
|
|
593
594
|
return function () {
|
|
594
|
-
document.removeEventListener("mousedown", listener);
|
|
595
|
-
document.removeEventListener("touchstart", listener);
|
|
595
|
+
document.removeEventListener("mousedown", listener, options);
|
|
596
|
+
document.removeEventListener("touchstart", listener, options);
|
|
596
597
|
};
|
|
597
|
-
}, [ref]);
|
|
598
|
+
}, [ref, options]);
|
|
598
599
|
};
|
|
599
600
|
|
|
600
601
|
var events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
|
|
@@ -682,6 +683,10 @@ var exhaustSwitchCase = function (_arg, fallback) {
|
|
|
682
683
|
return fallback;
|
|
683
684
|
};
|
|
684
685
|
|
|
686
|
+
var truthyKeysAsList = function (r) {
|
|
687
|
+
return Object.keys(r).filter(function (key) { return r[key]; });
|
|
688
|
+
};
|
|
689
|
+
|
|
685
690
|
var parseFloatElseUndefined = function (s) {
|
|
686
691
|
try {
|
|
687
692
|
var f = parseFloat(s);
|
|
@@ -711,5 +716,5 @@ var parseIntElseUndefined = function (s) {
|
|
|
711
716
|
return undefined;
|
|
712
717
|
};
|
|
713
718
|
|
|
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 };
|
|
719
|
+
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
720
|
//# sourceMappingURL=index.es.js.map
|