@dnb/eufemia 9.35.0 → 9.36.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/CHANGELOG.md +18 -0
- package/cjs/components/space/Space.js +2 -2
- package/cjs/components/space/SpacingUtils.d.ts +14 -9
- package/cjs/components/space/SpacingUtils.js +59 -45
- package/cjs/components/step-indicator/StepIndicatorSidebar.js +5 -1
- package/cjs/elements/Element.d.ts +1 -1
- package/cjs/shared/Eufemia.js +1 -1
- package/cjs/shared/MediaQueryUtils.d.ts +1 -5
- package/cjs/shared/MediaQueryUtils.js +1 -7
- package/cjs/shared/SpacingHelper.d.ts +6 -1
- package/cjs/shared/useMedia.js +1 -2
- package/cjs/shared/useMediaQuery.js +4 -2
- package/components/space/Space.js +2 -2
- package/components/space/SpacingUtils.d.ts +14 -9
- package/components/space/SpacingUtils.js +57 -44
- package/components/step-indicator/StepIndicatorSidebar.js +3 -1
- package/elements/Element.d.ts +1 -1
- package/es/components/space/Space.js +2 -2
- package/es/components/space/SpacingUtils.d.ts +14 -9
- package/es/components/space/SpacingUtils.js +44 -36
- package/es/components/step-indicator/StepIndicatorSidebar.js +3 -1
- package/es/elements/Element.d.ts +1 -1
- package/es/shared/Eufemia.js +1 -1
- package/es/shared/MediaQueryUtils.d.ts +1 -5
- package/es/shared/MediaQueryUtils.js +1 -6
- package/es/shared/SpacingHelper.d.ts +6 -1
- package/es/shared/useMedia.js +1 -2
- package/es/shared/useMediaQuery.js +4 -2
- package/esm/dnb-ui-basis.min.mjs +5 -0
- package/esm/dnb-ui-components.min.mjs +17 -0
- package/esm/dnb-ui-elements.min.mjs +16 -0
- package/esm/dnb-ui-extensions.min.mjs +17 -0
- package/esm/dnb-ui-icons.min.mjs +1 -0
- package/esm/dnb-ui-lib.min.mjs +2 -2
- package/esm/dnb-ui-web-components.min.mjs +17 -0
- package/package.json +1 -1
- package/shared/Eufemia.js +1 -1
- package/shared/MediaQueryUtils.d.ts +1 -5
- package/shared/MediaQueryUtils.js +1 -7
- package/shared/SpacingHelper.d.ts +6 -1
- package/shared/useMedia.js +1 -2
- package/shared/useMediaQuery.js +4 -2
- package/umd/dnb-ui-basis.min.js +12 -0
- package/umd/dnb-ui-components.min.js +24 -0
- package/umd/dnb-ui-elements.min.js +23 -0
- package/umd/dnb-ui-extensions.min.js +24 -0
- package/umd/dnb-ui-icons.min.js +1 -0
- package/umd/dnb-ui-lib.min.js +2 -2
- package/umd/dnb-ui-web-components.min.js +24 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to @dnb/eufemia will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [9.36.0](https://github.com/dnbexperience/eufemia/compare/v9.35.0...v9.36.0) (2022-11-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Section:** add official support for x-large and xx-large spacing ([#1672](https://github.com/dnbexperience/eufemia/issues/1672)) ([0c0e7c2](https://github.com/dnbexperience/eufemia/commit/0c0e7c2936b029d9b919619b1667ed4eb310e98d))
|
|
12
|
+
* **StepIndicator:** add example on how to use it with a router (browser location) ([9e7e708](https://github.com/dnbexperience/eufemia/commit/9e7e708ea6f34c72a821e53ce1865db294a6f542))
|
|
13
|
+
* **StepIndicator:** support spacing in Sidebar ([#1681](https://github.com/dnbexperience/eufemia/issues/1681)) ([de9735f](https://github.com/dnbexperience/eufemia/commit/de9735fab1bb4ad6a2086c6f848a104a2f1b3024))
|
|
14
|
+
* **Tabs:** align styles to properly function side by side with Section component in content ([#1671](https://github.com/dnbexperience/eufemia/issues/1671)) ([a607b5f](https://github.com/dnbexperience/eufemia/commit/a607b5ff70e39644e2640674a0322eac55914a32))
|
|
15
|
+
* **useMediaQuery:** remove warning and handle environments without breaking ([#1685](https://github.com/dnbexperience/eufemia/issues/1685)) ([480c509](https://github.com/dnbexperience/eufemia/commit/480c5096f21bafb932c74af4df91f530278ff374))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* **Tabs:** make tabs content animate its height ([#1667](https://github.com/dnbexperience/eufemia/issues/1667)) ([3f1bf5e](https://github.com/dnbexperience/eufemia/commit/3f1bf5e81aa1520cb5363c5ec26c9dba7b43949f))
|
|
21
|
+
* **Upload:** accept jpeg when only jpg is defined ([#1677](https://github.com/dnbexperience/eufemia/issues/1677)) ([b5eb00b](https://github.com/dnbexperience/eufemia/commit/b5eb00bf63592e69ebbc864c3f053f18a19d6adc))
|
|
22
|
+
* **Upload:** highlight existing files visually ([#1657](https://github.com/dnbexperience/eufemia/issues/1657)) ([e17f66d](https://github.com/dnbexperience/eufemia/commit/e17f66d918860c6e529f44267b628e9ec901f800))
|
|
23
|
+
|
|
6
24
|
# [9.35.0](https://github.com/dnbexperience/eufemia/compare/v9.34.3...v9.35.0) (2022-10-28)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -122,9 +122,9 @@ function Element(_ref) {
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
if ((0, _componentHelper.isTrue)(no_collapse)) {
|
|
125
|
-
var R = E === 'span' || (0, _SpacingUtils.isInline)(
|
|
125
|
+
var R = E === 'span' || (0, _SpacingUtils.isInline)(element) ? 'span' : 'div';
|
|
126
126
|
return _react.default.createElement(R, {
|
|
127
|
-
className: 'dnb-space--no-collapse' + ((0, _SpacingUtils.isInline)(
|
|
127
|
+
className: 'dnb-space--no-collapse' + ((0, _SpacingUtils.isInline)(element) ? " dnb-space--inline" : "")
|
|
128
128
|
}, component);
|
|
129
129
|
}
|
|
130
130
|
|
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
* Space helper
|
|
3
3
|
*
|
|
4
4
|
*/
|
|
5
|
+
import type { SpacingProps } from './types';
|
|
6
|
+
declare type Props = SpacingProps | Record<string, unknown>;
|
|
7
|
+
declare type StyleObjectProps = {
|
|
8
|
+
maxWidth?: string;
|
|
9
|
+
maxHeight?: string;
|
|
10
|
+
width?: string;
|
|
11
|
+
height?: string;
|
|
12
|
+
};
|
|
5
13
|
export declare const spacingDefaultProps: {
|
|
6
14
|
space: any;
|
|
7
15
|
top: any;
|
|
@@ -27,12 +35,9 @@ export declare const findType: (num: any, { returnObject }?: {
|
|
|
27
35
|
returnObject?: boolean;
|
|
28
36
|
}) => string | [string, number];
|
|
29
37
|
export declare const findNearestTypes: (num: any) => any[];
|
|
30
|
-
export declare const isValidSpaceProp: (
|
|
31
|
-
export declare const removeSpaceProps: (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
36
|
-
export declare const createSpacingClasses: (props: any, Element?: any) => any[];
|
|
37
|
-
export declare const createStyleObject: (props: any) => {};
|
|
38
|
-
export declare const isInline: (Element: any) => boolean;
|
|
38
|
+
export declare const isValidSpaceProp: (propName: string) => boolean;
|
|
39
|
+
export declare const removeSpaceProps: (props: Props) => Props;
|
|
40
|
+
export declare const createSpacingClasses: (props: Props, Element?: any) => any[];
|
|
41
|
+
export declare const createStyleObject: (props: Props & StyleObjectProps) => {};
|
|
42
|
+
export declare const isInline: (elementName: string) => boolean;
|
|
43
|
+
export {};
|
|
@@ -18,7 +18,11 @@ require("core-js/modules/es.function.name.js");
|
|
|
18
18
|
|
|
19
19
|
require("core-js/modules/es.array.from.js");
|
|
20
20
|
|
|
21
|
-
require("core-js/modules/es.object.
|
|
21
|
+
require("core-js/modules/es.object.keys.js");
|
|
22
|
+
|
|
23
|
+
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
24
|
+
|
|
25
|
+
require("core-js/modules/es.object.get-own-property-descriptors.js");
|
|
22
26
|
|
|
23
27
|
Object.defineProperty(exports, "__esModule", {
|
|
24
28
|
value: true
|
|
@@ -55,11 +59,19 @@ require("core-js/modules/es.array.concat.js");
|
|
|
55
59
|
|
|
56
60
|
require("core-js/modules/es.array.includes.js");
|
|
57
61
|
|
|
62
|
+
require("core-js/modules/es.object.is-frozen.js");
|
|
63
|
+
|
|
58
64
|
require("core-js/modules/es.array.join.js");
|
|
59
65
|
|
|
60
66
|
var _componentHelper = require("../../shared/component-helper");
|
|
61
67
|
|
|
62
|
-
function
|
|
68
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
69
|
+
|
|
70
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
71
|
+
|
|
72
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
73
|
+
|
|
74
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
63
75
|
|
|
64
76
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
65
77
|
|
|
@@ -243,47 +255,50 @@ var findNearestTypes = function findNearestTypes(num) {
|
|
|
243
255
|
|
|
244
256
|
exports.findNearestTypes = findNearestTypes;
|
|
245
257
|
|
|
246
|
-
var isValidSpaceProp = function isValidSpaceProp(
|
|
247
|
-
return
|
|
258
|
+
var isValidSpaceProp = function isValidSpaceProp(propName) {
|
|
259
|
+
return propName && ['top', 'right', 'bottom', 'left'].includes(propName);
|
|
248
260
|
};
|
|
249
261
|
|
|
250
262
|
exports.isValidSpaceProp = isValidSpaceProp;
|
|
251
263
|
|
|
252
|
-
var removeSpaceProps = function removeSpaceProps(
|
|
253
|
-
var
|
|
264
|
+
var removeSpaceProps = function removeSpaceProps(props) {
|
|
265
|
+
var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
254
266
|
|
|
255
|
-
for (var i in
|
|
267
|
+
for (var i in p) {
|
|
256
268
|
if (isValidSpaceProp(i)) {
|
|
257
|
-
delete
|
|
269
|
+
delete p[i];
|
|
258
270
|
}
|
|
259
271
|
}
|
|
260
272
|
|
|
261
|
-
return
|
|
273
|
+
return p;
|
|
262
274
|
};
|
|
263
275
|
|
|
264
276
|
exports.removeSpaceProps = removeSpaceProps;
|
|
265
277
|
|
|
266
278
|
var createSpacingClasses = function createSpacingClasses(props) {
|
|
267
279
|
var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
280
|
+
var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
268
281
|
|
|
269
|
-
if (typeof
|
|
270
|
-
if (typeof
|
|
271
|
-
|
|
282
|
+
if (typeof p.space !== 'undefined') {
|
|
283
|
+
if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
|
|
284
|
+
p.top = p.right = p.bottom = p.left = p.space;
|
|
272
285
|
}
|
|
273
286
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
287
|
+
if (_typeof(p.space) === 'object') {
|
|
288
|
+
for (var i in p.space) {
|
|
289
|
+
if (!p[i] && isValidSpaceProp(i)) {
|
|
290
|
+
p[i] = p.space[i];
|
|
291
|
+
}
|
|
277
292
|
}
|
|
278
293
|
}
|
|
279
294
|
|
|
280
|
-
delete
|
|
295
|
+
delete p.space;
|
|
281
296
|
}
|
|
282
297
|
|
|
283
|
-
return Object.entries(
|
|
284
|
-
var
|
|
285
|
-
direction =
|
|
286
|
-
cur =
|
|
298
|
+
return Object.entries(p).reduce(function (acc, _ref6) {
|
|
299
|
+
var _ref7 = _slicedToArray(_ref6, 2),
|
|
300
|
+
direction = _ref7[0],
|
|
301
|
+
cur = _ref7[1];
|
|
287
302
|
|
|
288
303
|
if (isValidSpaceProp(direction)) {
|
|
289
304
|
if (String(cur) === '0' || String(cur) === 'false') {
|
|
@@ -316,33 +331,35 @@ var createSpacingClasses = function createSpacingClasses(props) {
|
|
|
316
331
|
exports.createSpacingClasses = createSpacingClasses;
|
|
317
332
|
|
|
318
333
|
var createStyleObject = function createStyleObject(props) {
|
|
319
|
-
|
|
320
|
-
|
|
334
|
+
var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
335
|
+
|
|
336
|
+
if (p.top && !(parseFloat(String(p.top)) > 0)) {
|
|
337
|
+
p.top = sumTypes(p.top);
|
|
321
338
|
}
|
|
322
339
|
|
|
323
|
-
if (
|
|
324
|
-
|
|
340
|
+
if (p.bottom && !(parseFloat(String(p.bottom)) > 0)) {
|
|
341
|
+
p.bottom = sumTypes(p.bottom);
|
|
325
342
|
}
|
|
326
343
|
|
|
327
|
-
if (
|
|
328
|
-
|
|
344
|
+
if (p.left && !(parseFloat(String(p.left)) > 0)) {
|
|
345
|
+
p.left = sumTypes(p.left);
|
|
329
346
|
}
|
|
330
347
|
|
|
331
|
-
if (
|
|
332
|
-
|
|
348
|
+
if (p.right && !(parseFloat(String(p.right)) > 0)) {
|
|
349
|
+
p.right = sumTypes(p.right);
|
|
333
350
|
}
|
|
334
351
|
|
|
335
352
|
return Object.entries({
|
|
336
|
-
marginTop:
|
|
337
|
-
marginBottom:
|
|
338
|
-
maxWidth:
|
|
339
|
-
maxHeight:
|
|
340
|
-
width:
|
|
341
|
-
height:
|
|
342
|
-
}).reduce(function (acc,
|
|
343
|
-
var
|
|
344
|
-
key =
|
|
345
|
-
val =
|
|
353
|
+
marginTop: p.top && "".concat(p.top, "rem"),
|
|
354
|
+
marginBottom: p.bottom && "".concat(p.bottom, "rem"),
|
|
355
|
+
maxWidth: p.maxWidth && "".concat(p.maxWidth, "rem"),
|
|
356
|
+
maxHeight: p.maxHeight && "".concat(p.maxHeight, "rem"),
|
|
357
|
+
width: p.width && "".concat(p.width, "rem"),
|
|
358
|
+
height: p.height && "".concat(p.height, "rem")
|
|
359
|
+
}).reduce(function (acc, _ref8) {
|
|
360
|
+
var _ref9 = _slicedToArray(_ref8, 2),
|
|
361
|
+
key = _ref9[0],
|
|
362
|
+
val = _ref9[1];
|
|
346
363
|
|
|
347
364
|
if (typeof val !== 'undefined') {
|
|
348
365
|
acc[key] = val;
|
|
@@ -354,10 +371,8 @@ var createStyleObject = function createStyleObject(props) {
|
|
|
354
371
|
|
|
355
372
|
exports.createStyleObject = createStyleObject;
|
|
356
373
|
|
|
357
|
-
var isInline = function isInline(
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
switch (Element) {
|
|
374
|
+
var isInline = function isInline(elementName) {
|
|
375
|
+
switch (elementName) {
|
|
361
376
|
case 'h1':
|
|
362
377
|
case 'h2':
|
|
363
378
|
case 'h3':
|
|
@@ -365,11 +380,10 @@ var isInline = function isInline(Element) {
|
|
|
365
380
|
case 'h5':
|
|
366
381
|
case 'h6':
|
|
367
382
|
case 'p':
|
|
368
|
-
|
|
369
|
-
break;
|
|
383
|
+
return true;
|
|
370
384
|
}
|
|
371
385
|
|
|
372
|
-
return
|
|
386
|
+
return false;
|
|
373
387
|
};
|
|
374
388
|
|
|
375
389
|
exports.isInline = isInline;
|
|
@@ -33,6 +33,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
33
33
|
|
|
34
34
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
35
35
|
|
|
36
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
37
|
+
|
|
36
38
|
var _componentHelper = require("../../shared/component-helper");
|
|
37
39
|
|
|
38
40
|
var _Context = _interopRequireDefault(require("../../shared/Context"));
|
|
@@ -43,6 +45,8 @@ var _StepIndicatorProps = require("./StepIndicatorProps");
|
|
|
43
45
|
|
|
44
46
|
var _StepIndicatorContext = require("./StepIndicatorContext");
|
|
45
47
|
|
|
48
|
+
var _SpacingHelper = require("../space/SpacingHelper");
|
|
49
|
+
|
|
46
50
|
var _StepIndicatorList;
|
|
47
51
|
|
|
48
52
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -133,7 +137,7 @@ var StepIndicatorSidebar = function (_React$PureComponent) {
|
|
|
133
137
|
var providerProps = this.state.showInitialData ? this.getContextAndProps() : null;
|
|
134
138
|
return _react.default.createElement("div", {
|
|
135
139
|
id: 'sidebar__' + this.props.sidebar_id,
|
|
136
|
-
className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar"
|
|
140
|
+
className: (0, _classnames.default)("dnb-step-indicator-v2 dnb-step-indicator__sidebar", (0, _SpacingHelper.createSpacingClasses)(this.props), this._hasSkeletonData && (providerProps === null || providerProps === void 0 ? void 0 : providerProps.skeleton) && 'dnb-step-indicator__sidebar--ssr-skeleton')
|
|
137
141
|
}, providerProps && _react.default.createElement(_StepIndicatorContext.StepIndicatorProvider, _extends({
|
|
138
142
|
isSidebar: true,
|
|
139
143
|
sidebar_id: this.props.internalId || this.props.sidebar_id
|
|
@@ -49,5 +49,5 @@ declare const Element: React.ForwardRefExoticComponent<Pick<{
|
|
|
49
49
|
skeleton_method?: SkeletonMethods;
|
|
50
50
|
} & import("../shared/types").SpacingElementProps & {
|
|
51
51
|
space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
|
|
52
|
-
} & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "
|
|
52
|
+
} & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "space" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "alt" | "src" | "shape" | "list" | "step" | "content" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "class" | "innerRef" | "skeletonMethod" | "internalClass" | "css" | "skeleton_method"> & React.RefAttributes<unknown>>;
|
|
53
53
|
export default Element;
|
package/cjs/shared/Eufemia.js
CHANGED
|
@@ -32,10 +32,6 @@ export declare type MediaQueryProperties = {
|
|
|
32
32
|
* If set to true, no MediaQuery will be used.
|
|
33
33
|
*/
|
|
34
34
|
disabled?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
|
|
37
|
-
*/
|
|
38
|
-
dismissWarning?: boolean;
|
|
39
35
|
/**
|
|
40
36
|
* For debugging
|
|
41
37
|
*/
|
|
@@ -84,7 +80,7 @@ export declare const isMatchMediaSupported: () => boolean;
|
|
|
84
80
|
* @property {boolean} log - print used query to console
|
|
85
81
|
* @returns MediaQueryList type
|
|
86
82
|
*/
|
|
87
|
-
export declare function makeMediaQueryList({ query, when, not, log, disabled,
|
|
83
|
+
export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
|
|
88
84
|
/**
|
|
89
85
|
* Adds a listener to the window.matchMedia Browser API
|
|
90
86
|
*
|
|
@@ -136,18 +136,12 @@ function makeMediaQueryList() {
|
|
|
136
136
|
_ref2$log = _ref2.log,
|
|
137
137
|
log = _ref2$log === void 0 ? false : _ref2$log,
|
|
138
138
|
_ref2$disabled = _ref2.disabled,
|
|
139
|
-
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled
|
|
140
|
-
_ref2$dismissWarning = _ref2.dismissWarning,
|
|
141
|
-
dismissWarning = _ref2$dismissWarning === void 0 ? false : _ref2$dismissWarning;
|
|
139
|
+
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
|
|
142
140
|
|
|
143
141
|
var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
144
142
|
var isSupported = isMatchMediaSupported();
|
|
145
143
|
|
|
146
144
|
if (disabled || !isSupported) {
|
|
147
|
-
if (!dismissWarning && !isSupported) {
|
|
148
|
-
(0, _helpers.warn)('window.matchMedia is "undefined"');
|
|
149
|
-
}
|
|
150
|
-
|
|
151
145
|
return null;
|
|
152
146
|
}
|
|
153
147
|
|
package/cjs/shared/useMedia.js
CHANGED
|
@@ -131,8 +131,7 @@ function useMedia() {
|
|
|
131
131
|
var mediaQueryList = (0, _MediaQueryUtils.makeMediaQueryList)({
|
|
132
132
|
when: when,
|
|
133
133
|
disabled: disabled,
|
|
134
|
-
log: log
|
|
135
|
-
dismissWarning: true
|
|
134
|
+
log: log
|
|
136
135
|
}, context.breakpoints);
|
|
137
136
|
var event = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList, function (match) {
|
|
138
137
|
if (!disabledRef.current && match) {
|
|
@@ -87,9 +87,11 @@ function useMediaQuery(props) {
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
if (typeof listenerRef.current === 'function') {
|
|
90
|
+
var _mediaQueryList$curre2;
|
|
91
|
+
|
|
90
92
|
listenerRef.current();
|
|
91
93
|
mediaQueryList.current = (0, _MediaQueryUtils.makeMediaQueryList)(props, context.breakpoints);
|
|
92
|
-
matchUpdate(mediaQueryList.current.matches);
|
|
94
|
+
matchUpdate((_mediaQueryList$curre2 = mediaQueryList.current) === null || _mediaQueryList$curre2 === void 0 ? void 0 : _mediaQueryList$curre2.matches);
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
listenerRef.current = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList.current, function (match) {
|
|
@@ -98,5 +100,5 @@ function useMediaQuery(props) {
|
|
|
98
100
|
return listenerRef.current;
|
|
99
101
|
}, [query, when, not, disabled]);
|
|
100
102
|
|
|
101
|
-
return match;
|
|
103
|
+
return Boolean(match);
|
|
102
104
|
}
|
|
@@ -58,9 +58,9 @@ function Element(_ref) {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
if (isTrue(no_collapse)) {
|
|
61
|
-
var R = E === 'span' || isInline(
|
|
61
|
+
var R = E === 'span' || isInline(element) ? 'span' : 'div';
|
|
62
62
|
return React.createElement(R, {
|
|
63
|
-
className: 'dnb-space--no-collapse' + (isInline(
|
|
63
|
+
className: 'dnb-space--no-collapse' + (isInline(element) ? " dnb-space--inline" : "")
|
|
64
64
|
}, component);
|
|
65
65
|
}
|
|
66
66
|
|
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
* Space helper
|
|
3
3
|
*
|
|
4
4
|
*/
|
|
5
|
+
import type { SpacingProps } from './types';
|
|
6
|
+
declare type Props = SpacingProps | Record<string, unknown>;
|
|
7
|
+
declare type StyleObjectProps = {
|
|
8
|
+
maxWidth?: string;
|
|
9
|
+
maxHeight?: string;
|
|
10
|
+
width?: string;
|
|
11
|
+
height?: string;
|
|
12
|
+
};
|
|
5
13
|
export declare const spacingDefaultProps: {
|
|
6
14
|
space: any;
|
|
7
15
|
top: any;
|
|
@@ -27,12 +35,9 @@ export declare const findType: (num: any, { returnObject }?: {
|
|
|
27
35
|
returnObject?: boolean;
|
|
28
36
|
}) => string | [string, number];
|
|
29
37
|
export declare const findNearestTypes: (num: any) => any[];
|
|
30
|
-
export declare const isValidSpaceProp: (
|
|
31
|
-
export declare const removeSpaceProps: (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
36
|
-
export declare const createSpacingClasses: (props: any, Element?: any) => any[];
|
|
37
|
-
export declare const createStyleObject: (props: any) => {};
|
|
38
|
-
export declare const isInline: (Element: any) => boolean;
|
|
38
|
+
export declare const isValidSpaceProp: (propName: string) => boolean;
|
|
39
|
+
export declare const removeSpaceProps: (props: Props) => Props;
|
|
40
|
+
export declare const createSpacingClasses: (props: Props, Element?: any) => any[];
|
|
41
|
+
export declare const createStyleObject: (props: Props & StyleObjectProps) => {};
|
|
42
|
+
export declare const isInline: (elementName: string) => boolean;
|
|
43
|
+
export {};
|