@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
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "core-js/modules/es.object.keys.js";
|
|
2
|
+
import "core-js/modules/es.symbol.js";
|
|
3
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
4
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
5
|
+
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
7
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
8
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
9
|
+
|
|
10
|
+
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; }
|
|
11
|
+
|
|
12
|
+
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; }
|
|
13
|
+
|
|
4
14
|
import "core-js/modules/es.regexp.exec.js";
|
|
5
15
|
import "core-js/modules/es.string.replace.js";
|
|
6
16
|
import "core-js/modules/es.string.split.js";
|
|
@@ -16,6 +26,7 @@ import "core-js/modules/es.array.reverse.js";
|
|
|
16
26
|
import "core-js/modules/es.array.index-of.js";
|
|
17
27
|
import "core-js/modules/es.array.concat.js";
|
|
18
28
|
import "core-js/modules/es.array.includes.js";
|
|
29
|
+
import "core-js/modules/es.object.is-frozen.js";
|
|
19
30
|
import "core-js/modules/es.array.join.js";
|
|
20
31
|
import { warn } from '../../shared/component-helper';
|
|
21
32
|
export var spacingDefaultProps = {
|
|
@@ -159,41 +170,44 @@ export var findNearestTypes = function findNearestTypes(num) {
|
|
|
159
170
|
|
|
160
171
|
return res;
|
|
161
172
|
};
|
|
162
|
-
export var isValidSpaceProp = function isValidSpaceProp(
|
|
163
|
-
return
|
|
173
|
+
export var isValidSpaceProp = function isValidSpaceProp(propName) {
|
|
174
|
+
return propName && ['top', 'right', 'bottom', 'left'].includes(propName);
|
|
164
175
|
};
|
|
165
|
-
export var removeSpaceProps = function removeSpaceProps(
|
|
166
|
-
var
|
|
176
|
+
export var removeSpaceProps = function removeSpaceProps(props) {
|
|
177
|
+
var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
167
178
|
|
|
168
|
-
for (var i in
|
|
179
|
+
for (var i in p) {
|
|
169
180
|
if (isValidSpaceProp(i)) {
|
|
170
|
-
delete
|
|
181
|
+
delete p[i];
|
|
171
182
|
}
|
|
172
183
|
}
|
|
173
184
|
|
|
174
|
-
return
|
|
185
|
+
return p;
|
|
175
186
|
};
|
|
176
187
|
export var createSpacingClasses = function createSpacingClasses(props) {
|
|
177
188
|
var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
189
|
+
var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
178
190
|
|
|
179
|
-
if (typeof
|
|
180
|
-
if (typeof
|
|
181
|
-
|
|
191
|
+
if (typeof p.space !== 'undefined') {
|
|
192
|
+
if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
|
|
193
|
+
p.top = p.right = p.bottom = p.left = p.space;
|
|
182
194
|
}
|
|
183
195
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
196
|
+
if (_typeof(p.space) === 'object') {
|
|
197
|
+
for (var i in p.space) {
|
|
198
|
+
if (!p[i] && isValidSpaceProp(i)) {
|
|
199
|
+
p[i] = p.space[i];
|
|
200
|
+
}
|
|
187
201
|
}
|
|
188
202
|
}
|
|
189
203
|
|
|
190
|
-
delete
|
|
204
|
+
delete p.space;
|
|
191
205
|
}
|
|
192
206
|
|
|
193
|
-
return Object.entries(
|
|
194
|
-
var
|
|
195
|
-
direction =
|
|
196
|
-
cur =
|
|
207
|
+
return Object.entries(p).reduce(function (acc, _ref6) {
|
|
208
|
+
var _ref7 = _slicedToArray(_ref6, 2),
|
|
209
|
+
direction = _ref7[0],
|
|
210
|
+
cur = _ref7[1];
|
|
197
211
|
|
|
198
212
|
if (isValidSpaceProp(direction)) {
|
|
199
213
|
if (String(cur) === '0' || String(cur) === 'false') {
|
|
@@ -223,33 +237,35 @@ export var createSpacingClasses = function createSpacingClasses(props) {
|
|
|
223
237
|
}, []);
|
|
224
238
|
};
|
|
225
239
|
export var createStyleObject = function createStyleObject(props) {
|
|
226
|
-
|
|
227
|
-
|
|
240
|
+
var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
241
|
+
|
|
242
|
+
if (p.top && !(parseFloat(String(p.top)) > 0)) {
|
|
243
|
+
p.top = sumTypes(p.top);
|
|
228
244
|
}
|
|
229
245
|
|
|
230
|
-
if (
|
|
231
|
-
|
|
246
|
+
if (p.bottom && !(parseFloat(String(p.bottom)) > 0)) {
|
|
247
|
+
p.bottom = sumTypes(p.bottom);
|
|
232
248
|
}
|
|
233
249
|
|
|
234
|
-
if (
|
|
235
|
-
|
|
250
|
+
if (p.left && !(parseFloat(String(p.left)) > 0)) {
|
|
251
|
+
p.left = sumTypes(p.left);
|
|
236
252
|
}
|
|
237
253
|
|
|
238
|
-
if (
|
|
239
|
-
|
|
254
|
+
if (p.right && !(parseFloat(String(p.right)) > 0)) {
|
|
255
|
+
p.right = sumTypes(p.right);
|
|
240
256
|
}
|
|
241
257
|
|
|
242
258
|
return Object.entries({
|
|
243
|
-
marginTop:
|
|
244
|
-
marginBottom:
|
|
245
|
-
maxWidth:
|
|
246
|
-
maxHeight:
|
|
247
|
-
width:
|
|
248
|
-
height:
|
|
249
|
-
}).reduce(function (acc,
|
|
250
|
-
var
|
|
251
|
-
key =
|
|
252
|
-
val =
|
|
259
|
+
marginTop: p.top && "".concat(p.top, "rem"),
|
|
260
|
+
marginBottom: p.bottom && "".concat(p.bottom, "rem"),
|
|
261
|
+
maxWidth: p.maxWidth && "".concat(p.maxWidth, "rem"),
|
|
262
|
+
maxHeight: p.maxHeight && "".concat(p.maxHeight, "rem"),
|
|
263
|
+
width: p.width && "".concat(p.width, "rem"),
|
|
264
|
+
height: p.height && "".concat(p.height, "rem")
|
|
265
|
+
}).reduce(function (acc, _ref8) {
|
|
266
|
+
var _ref9 = _slicedToArray(_ref8, 2),
|
|
267
|
+
key = _ref9[0],
|
|
268
|
+
val = _ref9[1];
|
|
253
269
|
|
|
254
270
|
if (typeof val !== 'undefined') {
|
|
255
271
|
acc[key] = val;
|
|
@@ -258,10 +274,8 @@ export var createStyleObject = function createStyleObject(props) {
|
|
|
258
274
|
return acc;
|
|
259
275
|
}, {});
|
|
260
276
|
};
|
|
261
|
-
export var isInline = function isInline(
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
switch (Element) {
|
|
277
|
+
export var isInline = function isInline(elementName) {
|
|
278
|
+
switch (elementName) {
|
|
265
279
|
case 'h1':
|
|
266
280
|
case 'h2':
|
|
267
281
|
case 'h3':
|
|
@@ -269,9 +283,8 @@ export var isInline = function isInline(Element) {
|
|
|
269
283
|
case 'h5':
|
|
270
284
|
case 'h6':
|
|
271
285
|
case 'p':
|
|
272
|
-
|
|
273
|
-
break;
|
|
286
|
+
return true;
|
|
274
287
|
}
|
|
275
288
|
|
|
276
|
-
return
|
|
289
|
+
return false;
|
|
277
290
|
};
|
|
@@ -19,11 +19,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
19
19
|
|
|
20
20
|
import React from 'react';
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
|
+
import classnames from 'classnames';
|
|
22
23
|
import { extendPropsWithContextInClassComponent } from '../../shared/component-helper';
|
|
23
24
|
import Context from '../../shared/Context';
|
|
24
25
|
import StepIndicatorList from './StepIndicatorList';
|
|
25
26
|
import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
|
|
26
27
|
import { StepIndicatorProvider } from './StepIndicatorContext';
|
|
28
|
+
import { createSpacingClasses } from '../space/SpacingHelper';
|
|
27
29
|
|
|
28
30
|
var StepIndicatorSidebar = function (_React$PureComponent) {
|
|
29
31
|
_inherits(StepIndicatorSidebar, _React$PureComponent);
|
|
@@ -87,7 +89,7 @@ var StepIndicatorSidebar = function (_React$PureComponent) {
|
|
|
87
89
|
var providerProps = this.state.showInitialData ? this.getContextAndProps() : null;
|
|
88
90
|
return React.createElement("div", {
|
|
89
91
|
id: 'sidebar__' + this.props.sidebar_id,
|
|
90
|
-
className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar"
|
|
92
|
+
className: classnames("dnb-step-indicator-v2 dnb-step-indicator__sidebar", createSpacingClasses(this.props), this._hasSkeletonData && (providerProps === null || providerProps === void 0 ? void 0 : providerProps.skeleton) && 'dnb-step-indicator__sidebar--ssr-skeleton')
|
|
91
93
|
}, providerProps && React.createElement(StepIndicatorProvider, _extends({
|
|
92
94
|
isSidebar: true,
|
|
93
95
|
sidebar_id: this.props.internalId || this.props.sidebar_id
|
package/elements/Element.d.ts
CHANGED
|
@@ -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;
|
|
@@ -43,9 +43,9 @@ function Element(_ref) {
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
if (isTrue(no_collapse)) {
|
|
46
|
-
const R = E === 'span' || isInline(
|
|
46
|
+
const R = E === 'span' || isInline(element) ? 'span' : 'div';
|
|
47
47
|
return React.createElement(R, {
|
|
48
|
-
className: 'dnb-space--no-collapse' + (isInline(
|
|
48
|
+
className: 'dnb-space--no-collapse' + (isInline(element) ? " dnb-space--inline" : "")
|
|
49
49
|
}, component);
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -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 {};
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
|
|
3
|
+
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; }
|
|
4
|
+
|
|
5
|
+
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; }
|
|
6
|
+
|
|
2
7
|
import { warn } from '../../shared/component-helper';
|
|
3
8
|
export const spacingDefaultProps = {
|
|
4
9
|
space: null,
|
|
@@ -121,34 +126,38 @@ export const findNearestTypes = num => {
|
|
|
121
126
|
|
|
122
127
|
return res;
|
|
123
128
|
};
|
|
124
|
-
export const isValidSpaceProp =
|
|
125
|
-
export const removeSpaceProps =
|
|
126
|
-
|
|
129
|
+
export const isValidSpaceProp = propName => propName && ['top', 'right', 'bottom', 'left'].includes(propName);
|
|
130
|
+
export const removeSpaceProps = props => {
|
|
131
|
+
const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
127
132
|
|
|
128
|
-
for (const i in
|
|
133
|
+
for (const i in p) {
|
|
129
134
|
if (isValidSpaceProp(i)) {
|
|
130
|
-
delete
|
|
135
|
+
delete p[i];
|
|
131
136
|
}
|
|
132
137
|
}
|
|
133
138
|
|
|
134
|
-
return
|
|
139
|
+
return p;
|
|
135
140
|
};
|
|
136
141
|
export const createSpacingClasses = (props, Element = null) => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
142
|
+
const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
143
|
+
|
|
144
|
+
if (typeof p.space !== 'undefined') {
|
|
145
|
+
if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
|
|
146
|
+
p.top = p.right = p.bottom = p.left = p.space;
|
|
140
147
|
}
|
|
141
148
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
149
|
+
if (typeof p.space === 'object') {
|
|
150
|
+
for (const i in p.space) {
|
|
151
|
+
if (!p[i] && isValidSpaceProp(i)) {
|
|
152
|
+
p[i] = p.space[i];
|
|
153
|
+
}
|
|
145
154
|
}
|
|
146
155
|
}
|
|
147
156
|
|
|
148
|
-
delete
|
|
157
|
+
delete p.space;
|
|
149
158
|
}
|
|
150
159
|
|
|
151
|
-
return Object.entries(
|
|
160
|
+
return Object.entries(p).reduce((acc, [direction, cur]) => {
|
|
152
161
|
if (isValidSpaceProp(direction)) {
|
|
153
162
|
if (String(cur) === '0' || String(cur) === 'false') {
|
|
154
163
|
acc.push(`dnb-space__${direction}--zero`);
|
|
@@ -175,29 +184,31 @@ export const createSpacingClasses = (props, Element = null) => {
|
|
|
175
184
|
}, []);
|
|
176
185
|
};
|
|
177
186
|
export const createStyleObject = props => {
|
|
178
|
-
|
|
179
|
-
|
|
187
|
+
const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
|
|
188
|
+
|
|
189
|
+
if (p.top && !(parseFloat(String(p.top)) > 0)) {
|
|
190
|
+
p.top = sumTypes(p.top);
|
|
180
191
|
}
|
|
181
192
|
|
|
182
|
-
if (
|
|
183
|
-
|
|
193
|
+
if (p.bottom && !(parseFloat(String(p.bottom)) > 0)) {
|
|
194
|
+
p.bottom = sumTypes(p.bottom);
|
|
184
195
|
}
|
|
185
196
|
|
|
186
|
-
if (
|
|
187
|
-
|
|
197
|
+
if (p.left && !(parseFloat(String(p.left)) > 0)) {
|
|
198
|
+
p.left = sumTypes(p.left);
|
|
188
199
|
}
|
|
189
200
|
|
|
190
|
-
if (
|
|
191
|
-
|
|
201
|
+
if (p.right && !(parseFloat(String(p.right)) > 0)) {
|
|
202
|
+
p.right = sumTypes(p.right);
|
|
192
203
|
}
|
|
193
204
|
|
|
194
205
|
return Object.entries({
|
|
195
|
-
marginTop:
|
|
196
|
-
marginBottom:
|
|
197
|
-
maxWidth:
|
|
198
|
-
maxHeight:
|
|
199
|
-
width:
|
|
200
|
-
height:
|
|
206
|
+
marginTop: p.top && `${p.top}rem`,
|
|
207
|
+
marginBottom: p.bottom && `${p.bottom}rem`,
|
|
208
|
+
maxWidth: p.maxWidth && `${p.maxWidth}rem`,
|
|
209
|
+
maxHeight: p.maxHeight && `${p.maxHeight}rem`,
|
|
210
|
+
width: p.width && `${p.width}rem`,
|
|
211
|
+
height: p.height && `${p.height}rem`
|
|
201
212
|
}).reduce((acc, [key, val]) => {
|
|
202
213
|
if (typeof val !== 'undefined') {
|
|
203
214
|
acc[key] = val;
|
|
@@ -206,10 +217,8 @@ export const createStyleObject = props => {
|
|
|
206
217
|
return acc;
|
|
207
218
|
}, {});
|
|
208
219
|
};
|
|
209
|
-
export const isInline =
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
switch (Element) {
|
|
220
|
+
export const isInline = elementName => {
|
|
221
|
+
switch (elementName) {
|
|
213
222
|
case 'h1':
|
|
214
223
|
case 'h2':
|
|
215
224
|
case 'h3':
|
|
@@ -217,9 +226,8 @@ export const isInline = Element => {
|
|
|
217
226
|
case 'h5':
|
|
218
227
|
case 'h6':
|
|
219
228
|
case 'p':
|
|
220
|
-
|
|
221
|
-
break;
|
|
229
|
+
return true;
|
|
222
230
|
}
|
|
223
231
|
|
|
224
|
-
return
|
|
232
|
+
return false;
|
|
225
233
|
};
|
|
@@ -5,11 +5,13 @@ var _StepIndicatorList;
|
|
|
5
5
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
|
+
import classnames from 'classnames';
|
|
8
9
|
import { extendPropsWithContextInClassComponent } from '../../shared/component-helper';
|
|
9
10
|
import Context from '../../shared/Context';
|
|
10
11
|
import StepIndicatorList from './StepIndicatorList';
|
|
11
12
|
import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
|
|
12
13
|
import { StepIndicatorProvider } from './StepIndicatorContext';
|
|
14
|
+
import { createSpacingClasses } from '../space/SpacingHelper';
|
|
13
15
|
export default class StepIndicatorSidebar extends React.PureComponent {
|
|
14
16
|
constructor(...args) {
|
|
15
17
|
super(...args);
|
|
@@ -54,7 +56,7 @@ export default class StepIndicatorSidebar extends React.PureComponent {
|
|
|
54
56
|
const providerProps = this.state.showInitialData ? this.getContextAndProps() : null;
|
|
55
57
|
return React.createElement("div", {
|
|
56
58
|
id: 'sidebar__' + this.props.sidebar_id,
|
|
57
|
-
className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar"
|
|
59
|
+
className: classnames("dnb-step-indicator-v2 dnb-step-indicator__sidebar", createSpacingClasses(this.props), this._hasSkeletonData && (providerProps === null || providerProps === void 0 ? void 0 : providerProps.skeleton) && 'dnb-step-indicator__sidebar--ssr-skeleton')
|
|
58
60
|
}, providerProps && React.createElement(StepIndicatorProvider, _extends({
|
|
59
61
|
isSidebar: true,
|
|
60
62
|
sidebar_id: this.props.internalId || this.props.sidebar_id
|
package/es/elements/Element.d.ts
CHANGED
|
@@ -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/es/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
|
*
|
|
@@ -46,16 +46,11 @@ export function makeMediaQueryList({
|
|
|
46
46
|
when,
|
|
47
47
|
not = null,
|
|
48
48
|
log = false,
|
|
49
|
-
disabled = false
|
|
50
|
-
dismissWarning = false
|
|
49
|
+
disabled = false
|
|
51
50
|
} = {}, breakpoints = null) {
|
|
52
51
|
const isSupported = isMatchMediaSupported();
|
|
53
52
|
|
|
54
53
|
if (disabled || !isSupported) {
|
|
55
|
-
if (!dismissWarning && !isSupported) {
|
|
56
|
-
warn('window.matchMedia is "undefined"');
|
|
57
|
-
}
|
|
58
|
-
|
|
59
54
|
return null;
|
|
60
55
|
}
|
|
61
56
|
|
package/es/shared/useMedia.js
CHANGED
|
@@ -62,8 +62,7 @@ export default function useMedia(props = {}) {
|
|
|
62
62
|
const mediaQueryList = makeMediaQueryList({
|
|
63
63
|
when,
|
|
64
64
|
disabled,
|
|
65
|
-
log
|
|
66
|
-
dismissWarning: true
|
|
65
|
+
log
|
|
67
66
|
}, context.breakpoints);
|
|
68
67
|
const event = createMediaQueryListener(mediaQueryList, match => {
|
|
69
68
|
if (!disabledRef.current && match) {
|
|
@@ -34,13 +34,15 @@ export default function useMediaQuery(props) {
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
if (typeof listenerRef.current === 'function') {
|
|
37
|
+
var _mediaQueryList$curre2;
|
|
38
|
+
|
|
37
39
|
listenerRef.current();
|
|
38
40
|
mediaQueryList.current = makeMediaQueryList(props, context.breakpoints);
|
|
39
|
-
matchUpdate(mediaQueryList.current.matches);
|
|
41
|
+
matchUpdate((_mediaQueryList$curre2 = mediaQueryList.current) === null || _mediaQueryList$curre2 === void 0 ? void 0 : _mediaQueryList$curre2.matches);
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
listenerRef.current = createMediaQueryListener(mediaQueryList.current, match => matchUpdate(match));
|
|
43
45
|
return listenerRef.current;
|
|
44
46
|
}, [query, when, not, disabled]);
|
|
45
|
-
return match;
|
|
47
|
+
return Boolean(match);
|
|
46
48
|
}
|