@dnb/eufemia 9.19.0 → 9.20.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.
Files changed (200) hide show
  1. package/CHANGELOG.md +20 -198
  2. package/cjs/components/avatar/Avatar.js +14 -12
  3. package/cjs/components/avatar/AvatarGroup.js +11 -11
  4. package/cjs/components/avatar/style/_avatar.scss +2 -0
  5. package/cjs/components/avatar/style/dnb-avatar.css +4 -1
  6. package/cjs/components/avatar/style/dnb-avatar.min.css +1 -1
  7. package/cjs/components/breadcrumb/Breadcrumb.js +27 -52
  8. package/cjs/components/breadcrumb/BreadcrumbItem.js +15 -29
  9. package/cjs/components/button/Button.d.ts +11 -7
  10. package/cjs/components/icon-primary/IconPrimary.d.ts +2 -1
  11. package/cjs/components/info-card/InfoCard.js +22 -22
  12. package/cjs/components/pagination/Pagination.d.ts +6 -6
  13. package/cjs/components/pagination/Pagination.js +2 -2
  14. package/cjs/components/skeleton/Skeleton.d.ts +1 -1
  15. package/cjs/components/skeleton/SkeletonHelper.d.ts +2 -1
  16. package/cjs/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  17. package/cjs/components/tag/Tag.js +17 -29
  18. package/cjs/components/tag/TagGroup.js +10 -24
  19. package/cjs/components/timeline/Timeline.js +24 -64
  20. package/cjs/components/timeline/TimelineItem.js +16 -29
  21. package/cjs/elements/Div.d.ts +1 -1
  22. package/cjs/elements/P.d.ts +2 -1
  23. package/cjs/shared/AnimateHeight.js +19 -13
  24. package/cjs/shared/helpers.js +16 -4
  25. package/cjs/shared/hooks/index.js +13 -0
  26. package/cjs/shared/hooks/usePropsWithContext.js +92 -0
  27. package/cjs/style/dnb-ui-components.css +4 -1
  28. package/cjs/style/dnb-ui-components.min.css +1 -1
  29. package/cjs/style/dnb-ui-elements.css +1 -3
  30. package/cjs/style/dnb-ui-elements.min.css +1 -1
  31. package/cjs/style/dnb-ui-tags.css +2 -6
  32. package/cjs/style/dnb-ui-tags.min.css +2 -2
  33. package/cjs/style/elements/code.scss +1 -3
  34. package/cjs/style/stylis.d.ts +38 -0
  35. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.css +1 -3
  36. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +1 -1
  37. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +1 -3
  38. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +1 -1
  39. package/components/avatar/Avatar.js +14 -13
  40. package/components/avatar/Avatar.tsx +8 -9
  41. package/components/avatar/AvatarGroup.js +20 -20
  42. package/components/avatar/AvatarGroup.tsx +4 -8
  43. package/components/avatar/style/_avatar.scss +2 -0
  44. package/components/avatar/style/dnb-avatar.css +4 -1
  45. package/components/avatar/style/dnb-avatar.min.css +1 -1
  46. package/components/breadcrumb/Breadcrumb.js +22 -35
  47. package/components/breadcrumb/Breadcrumb.tsx +10 -10
  48. package/components/breadcrumb/BreadcrumbItem.js +14 -25
  49. package/components/breadcrumb/BreadcrumbItem.tsx +8 -11
  50. package/components/button/Button.d.ts +11 -7
  51. package/components/icon-primary/IconPrimary.d.ts +2 -1
  52. package/components/info-card/InfoCard.js +22 -22
  53. package/components/info-card/InfoCard.tsx +13 -12
  54. package/components/modal/Modal.tsx +1 -1
  55. package/components/modal/ModalContent.tsx +6 -2
  56. package/components/modal/components/ModalHeader.tsx +2 -2
  57. package/components/modal/types.ts +2 -2
  58. package/components/pagination/Pagination.d.ts +6 -6
  59. package/components/pagination/Pagination.js +2 -2
  60. package/components/skeleton/SkeletonHelper.d.ts +2 -1
  61. package/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  62. package/components/tag/Tag.js +17 -27
  63. package/components/tag/Tag.tsx +15 -13
  64. package/components/tag/TagGroup.js +9 -22
  65. package/components/tag/TagGroup.tsx +6 -10
  66. package/components/timeline/Timeline.js +23 -27
  67. package/components/timeline/Timeline.tsx +24 -20
  68. package/components/timeline/TimelineItem.js +15 -25
  69. package/components/timeline/TimelineItem.tsx +8 -10
  70. package/elements/P.d.ts +2 -1
  71. package/es/components/avatar/Avatar.js +7 -6
  72. package/es/components/avatar/Avatar.tsx +8 -9
  73. package/es/components/avatar/AvatarGroup.js +6 -6
  74. package/es/components/avatar/AvatarGroup.tsx +4 -8
  75. package/es/components/avatar/style/_avatar.scss +2 -0
  76. package/es/components/avatar/style/dnb-avatar.css +4 -1
  77. package/es/components/avatar/style/dnb-avatar.min.css +1 -1
  78. package/es/components/breadcrumb/Breadcrumb.js +8 -14
  79. package/es/components/breadcrumb/Breadcrumb.tsx +10 -10
  80. package/es/components/breadcrumb/BreadcrumbItem.js +9 -13
  81. package/es/components/breadcrumb/BreadcrumbItem.tsx +8 -11
  82. package/es/components/button/Button.d.ts +11 -7
  83. package/es/components/icon-primary/IconPrimary.d.ts +2 -1
  84. package/es/components/info-card/InfoCard.js +8 -8
  85. package/es/components/info-card/InfoCard.tsx +13 -12
  86. package/es/components/modal/Modal.tsx +1 -1
  87. package/es/components/modal/ModalContent.tsx +6 -2
  88. package/es/components/modal/components/ModalHeader.tsx +2 -2
  89. package/es/components/modal/types.ts +2 -2
  90. package/es/components/pagination/Pagination.d.ts +6 -6
  91. package/es/components/pagination/Pagination.js +2 -2
  92. package/es/components/skeleton/Skeleton.d.ts +1 -1
  93. package/es/components/skeleton/SkeletonHelper.d.ts +2 -1
  94. package/es/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  95. package/es/components/tag/Tag.js +11 -14
  96. package/es/components/tag/Tag.tsx +15 -13
  97. package/es/components/tag/TagGroup.js +7 -13
  98. package/es/components/tag/TagGroup.tsx +6 -10
  99. package/es/components/timeline/Timeline.js +21 -17
  100. package/es/components/timeline/Timeline.tsx +24 -20
  101. package/es/components/timeline/TimelineItem.js +9 -12
  102. package/es/components/timeline/TimelineItem.tsx +8 -10
  103. package/es/elements/Div.d.ts +1 -1
  104. package/es/elements/P.d.ts +2 -1
  105. package/es/shared/AnimateHeight.js +15 -13
  106. package/es/shared/helpers.js +9 -2
  107. package/es/shared/hooks/index.js +1 -0
  108. package/es/shared/hooks/index.ts +1 -0
  109. package/es/shared/hooks/usePropsWithContext.js +26 -0
  110. package/es/shared/hooks/usePropsWithContext.ts +45 -0
  111. package/es/shared/interfaces.tsx +0 -2
  112. package/es/style/dnb-ui-components.css +4 -1
  113. package/es/style/dnb-ui-components.min.css +1 -1
  114. package/es/style/dnb-ui-elements.css +1 -3
  115. package/es/style/dnb-ui-elements.min.css +1 -1
  116. package/es/style/dnb-ui-tags.css +2 -6
  117. package/es/style/dnb-ui-tags.min.css +2 -2
  118. package/es/style/elements/code.scss +1 -3
  119. package/es/style/stylis.d.ts +38 -0
  120. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css +1 -3
  121. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +1 -1
  122. package/es/style/themes/theme-ui/dnb-theme-ui.css +1 -3
  123. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +1 -1
  124. package/esm/components/avatar/Avatar.js +14 -13
  125. package/esm/components/avatar/Avatar.tsx +8 -9
  126. package/esm/components/avatar/AvatarGroup.js +20 -20
  127. package/esm/components/avatar/AvatarGroup.tsx +4 -8
  128. package/esm/components/avatar/style/_avatar.scss +2 -0
  129. package/esm/components/avatar/style/dnb-avatar.css +4 -1
  130. package/esm/components/avatar/style/dnb-avatar.min.css +1 -1
  131. package/esm/components/breadcrumb/Breadcrumb.js +22 -35
  132. package/esm/components/breadcrumb/Breadcrumb.tsx +10 -10
  133. package/esm/components/breadcrumb/BreadcrumbItem.js +14 -25
  134. package/esm/components/breadcrumb/BreadcrumbItem.tsx +8 -11
  135. package/esm/components/button/Button.d.ts +11 -7
  136. package/esm/components/icon-primary/IconPrimary.d.ts +2 -1
  137. package/esm/components/info-card/InfoCard.js +22 -22
  138. package/esm/components/info-card/InfoCard.tsx +13 -12
  139. package/esm/components/modal/Modal.tsx +1 -1
  140. package/esm/components/modal/ModalContent.tsx +6 -2
  141. package/esm/components/modal/components/ModalHeader.tsx +2 -2
  142. package/esm/components/modal/types.ts +2 -2
  143. package/esm/components/pagination/Pagination.d.ts +6 -6
  144. package/esm/components/pagination/Pagination.js +2 -2
  145. package/esm/components/skeleton/SkeletonHelper.d.ts +2 -1
  146. package/esm/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  147. package/esm/components/tag/Tag.js +17 -27
  148. package/esm/components/tag/Tag.tsx +15 -13
  149. package/esm/components/tag/TagGroup.js +9 -22
  150. package/esm/components/tag/TagGroup.tsx +6 -10
  151. package/esm/components/timeline/Timeline.js +23 -27
  152. package/esm/components/timeline/Timeline.tsx +24 -20
  153. package/esm/components/timeline/TimelineItem.js +15 -25
  154. package/esm/components/timeline/TimelineItem.tsx +8 -10
  155. package/esm/dnb-ui-components.min.mjs +3 -3
  156. package/esm/dnb-ui-lib.min.mjs +3 -3
  157. package/esm/dnb-ui-web-components.min.mjs +4 -4
  158. package/esm/elements/P.d.ts +2 -1
  159. package/esm/shared/AnimateHeight.js +19 -13
  160. package/esm/shared/helpers.js +15 -4
  161. package/esm/shared/hooks/index.js +1 -0
  162. package/esm/shared/hooks/index.ts +1 -0
  163. package/esm/shared/hooks/usePropsWithContext.js +47 -0
  164. package/esm/shared/hooks/usePropsWithContext.ts +45 -0
  165. package/esm/shared/interfaces.tsx +0 -2
  166. package/esm/style/dnb-ui-components.css +4 -1
  167. package/esm/style/dnb-ui-components.min.css +1 -1
  168. package/esm/style/dnb-ui-elements.css +1 -3
  169. package/esm/style/dnb-ui-elements.min.css +1 -1
  170. package/esm/style/dnb-ui-tags.css +2 -6
  171. package/esm/style/dnb-ui-tags.min.css +2 -2
  172. package/esm/style/elements/code.scss +1 -3
  173. package/esm/style/stylis.d.ts +38 -0
  174. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.css +1 -3
  175. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +1 -1
  176. package/esm/style/themes/theme-ui/dnb-theme-ui.css +1 -3
  177. package/esm/style/themes/theme-ui/dnb-theme-ui.min.css +1 -1
  178. package/package.json +1 -1
  179. package/shared/AnimateHeight.js +19 -13
  180. package/shared/helpers.js +15 -4
  181. package/shared/hooks/index.js +1 -0
  182. package/shared/hooks/index.ts +1 -0
  183. package/shared/hooks/usePropsWithContext.js +47 -0
  184. package/shared/hooks/usePropsWithContext.ts +45 -0
  185. package/shared/interfaces.tsx +0 -2
  186. package/style/dnb-ui-components.css +4 -1
  187. package/style/dnb-ui-components.min.css +1 -1
  188. package/style/dnb-ui-elements.css +1 -3
  189. package/style/dnb-ui-elements.min.css +1 -1
  190. package/style/dnb-ui-tags.css +2 -6
  191. package/style/dnb-ui-tags.min.css +2 -2
  192. package/style/elements/code.scss +1 -3
  193. package/style/stylis.d.ts +38 -0
  194. package/style/themes/theme-open-banking/dnb-theme-open-banking.css +1 -3
  195. package/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +1 -1
  196. package/style/themes/theme-ui/dnb-theme-ui.css +1 -3
  197. package/style/themes/theme-ui/dnb-theme-ui.min.css +1 -1
  198. package/umd/dnb-ui-components.min.js +3 -3
  199. package/umd/dnb-ui-lib.min.js +4 -4
  200. package/umd/dnb-ui-web-components.min.js +3 -3
@@ -25,7 +25,8 @@ export type PSize =
25
25
  /**
26
26
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
27
27
  */
28
- export interface PProps extends React.HTMLProps<HTMLElement> {
28
+ export interface PProps
29
+ extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
29
30
  space?: PSpace;
30
31
  top?: PTop;
31
32
  right?: PRight;
@@ -76,6 +76,16 @@ var AnimateHeight = function () {
76
76
  this.onCloseEnd = null;
77
77
  }
78
78
  }
79
+ }, {
80
+ key: "_emitTransitionEnd",
81
+ value: function _emitTransitionEnd() {
82
+ try {
83
+ var event = new CustomEvent('transitionend');
84
+ this.elem.dispatchEvent(event);
85
+ } catch (e) {
86
+ warn(e);
87
+ }
88
+ }
79
89
  }, {
80
90
  key: "setElement",
81
91
  value: function setElement(elem) {
@@ -172,30 +182,26 @@ var AnimateHeight = function () {
172
182
  }, {
173
183
  key: "start",
174
184
  value: function start(fromHeight, toHeight) {
175
- var _this$opts,
185
+ var _window,
186
+ _window$location,
187
+ _window$location$href,
188
+ _this$opts,
176
189
  _this4 = this;
177
190
 
178
191
  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
179
192
  _ref$animate = _ref.animate,
180
193
  animate = _ref$animate === void 0 ? true : _ref$animate;
181
194
 
182
- try {
183
- if (window.location.href.includes('data-visual-test')) {
184
- animate = false;
185
- }
186
- } catch (e) {}
195
+ if ((_window = window) !== null && _window !== void 0 && (_window$location = _window.location) !== null && _window$location !== void 0 && (_window$location$href = _window$location.href) !== null && _window$location$href !== void 0 && _window$location$href.includes('data-visual-test')) {
196
+ animate = false;
197
+ }
187
198
 
188
- if (animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
199
+ if (fromHeight === toHeight || animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
189
200
  this.elem.style.height = "".concat(toHeight, "px");
190
201
 
191
202
  this._callOnStart();
192
203
 
193
- try {
194
- var event = new CustomEvent('transitionend');
195
- this.elem.dispatchEvent(event);
196
- } catch (e) {
197
- warn(e);
198
- }
204
+ this._emitTransitionEnd();
199
205
 
200
206
  return;
201
207
  }
@@ -8,6 +8,7 @@ import "core-js/modules/es.regexp.to-string.js";
8
8
  import "core-js/modules/es.array.includes.js";
9
9
  import "core-js/modules/es.string.replace.js";
10
10
  import "core-js/modules/es.object.to-string.js";
11
+ import "core-js/modules/es.array.join.js";
11
12
  import "core-js/modules/es.array.concat.js";
12
13
  export var PLATFORM_MAC = 'Mac|iPad|iPhone|iPod';
13
14
  export var PLATFORM_WIN = 'Win';
@@ -388,12 +389,22 @@ function _copyToClipboard() {
388
389
 
389
390
  export var warn = function warn() {
390
391
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
391
- var _console;
392
+ var isBrowser = typeof window !== 'undefined';
392
393
 
393
- for (var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++) {
394
- e[_key] = arguments[_key];
394
+ for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
395
+ params[_key] = arguments[_key];
395
396
  }
396
397
 
397
- (_console = console).log.apply(_console, ['Eufemia:'].concat(e));
398
+ if (isBrowser) {
399
+ var _console;
400
+
401
+ var styles = ["padding: 0.125rem 0.5rem ".concat(IS_SAFARI ? '' : '0'), 'font-weight: bold', 'color: #00343E', 'background: #A5E1D2'].join(';');
402
+
403
+ (_console = console).log.apply(_console, ['%cEufemia', styles].concat(params));
404
+ } else {
405
+ var _console2;
406
+
407
+ (_console2 = console).log.apply(_console2, ['Eufemia:'].concat(params));
408
+ }
398
409
  }
399
410
  };
@@ -0,0 +1 @@
1
+ export { usePropsWithContext } from './usePropsWithContext';
@@ -0,0 +1 @@
1
+ export { usePropsWithContext } from './usePropsWithContext'
@@ -0,0 +1,47 @@
1
+ import "core-js/modules/es.object.keys.js";
2
+ import "core-js/modules/es.symbol.js";
3
+ import "core-js/modules/es.array.filter.js";
4
+ import "core-js/modules/es.object.get-own-property-descriptor.js";
5
+ import "core-js/modules/web.dom-collections.for-each.js";
6
+ import "core-js/modules/es.object.get-own-property-descriptors.js";
7
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
8
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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
+
14
+ import "core-js/modules/es.array.reduce.js";
15
+ import "core-js/modules/es.object.to-string.js";
16
+ import "core-js/modules/es.object.entries.js";
17
+
18
+ function usePropsWithContext(props) {
19
+ var defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
20
+
21
+ for (var _len = arguments.length, contexts = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
22
+ contexts[_key - 2] = arguments[_key];
23
+ }
24
+
25
+ var context = contexts.reduce(function (acc, cur) {
26
+ if (cur) {
27
+ acc = _objectSpread(_objectSpread({}, acc), cur);
28
+ }
29
+
30
+ return acc;
31
+ }, {});
32
+ props = _objectSpread(_objectSpread({}, defaults), props);
33
+ return _objectSpread(_objectSpread({}, props), Object.entries(context).reduce(function (acc, _ref) {
34
+ var _ref2 = _slicedToArray(_ref, 2),
35
+ key = _ref2[0],
36
+ value = _ref2[1];
37
+
38
+ if (typeof props[key] !== 'undefined' && props[key] === defaults[key]) {
39
+ acc[key] = value;
40
+ }
41
+
42
+ return acc;
43
+ }, {}));
44
+ }
45
+
46
+ export { usePropsWithContext };
47
+ export default usePropsWithContext;
@@ -0,0 +1,45 @@
1
+ export type DefaultsProps = Record<string, unknown>
2
+ export type Contexts = Array<Record<string, unknown>>
3
+
4
+ /**
5
+ * Extends props from a given context
6
+ * but give the context second priority only
7
+ *
8
+ * @param props object of component properties
9
+ * @param defaults object of potential default values
10
+ * @param contexts the rest of all context to merge
11
+ * @returns merged properties
12
+ */
13
+ function usePropsWithContext<Props>(
14
+ props: Props,
15
+ defaults: DefaultsProps = {},
16
+ ...contexts: Contexts
17
+ ) {
18
+ const context = contexts.reduce((acc, cur) => {
19
+ if (cur) {
20
+ acc = { ...acc, ...cur }
21
+ }
22
+ return acc
23
+ }, {})
24
+
25
+ props = { ...defaults, ...props }
26
+
27
+ return {
28
+ ...props,
29
+ ...Object.entries(context).reduce((acc, [key, value]) => {
30
+ if (
31
+ // check if a prop of the same name exists
32
+ typeof props[key] !== 'undefined' &&
33
+ // and if it was NOT defined as a component prop, because its still the same as the defaults
34
+ props[key] === defaults[key]
35
+ ) {
36
+ // then we use the context value
37
+ acc[key] = value
38
+ }
39
+ return acc
40
+ }, {}),
41
+ }
42
+ }
43
+
44
+ export { usePropsWithContext }
45
+ export default usePropsWithContext
@@ -10,5 +10,3 @@ export interface ISpacingElementProps {
10
10
  }
11
11
 
12
12
  export type SpaceTypes = string | boolean | number
13
-
14
- export type SkeletonTypes = string | boolean
@@ -1072,7 +1072,8 @@
1072
1072
  .dnb-avatar__group .dnb-avatar--size-x-large {
1073
1073
  margin-left: -1.5rem; }
1074
1074
  .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
1075
- margin-left: 0; }
1075
+ margin-left: 0;
1076
+ border-left: none; }
1076
1077
  .dnb-avatar__group--elements-left {
1077
1078
  display: -webkit-inline-box;
1078
1079
  display: -ms-inline-flexbox;
@@ -1083,6 +1084,8 @@
1083
1084
  -webkit-box-pack: center;
1084
1085
  -ms-flex-pack: center;
1085
1086
  justify-content: center;
1087
+ -ms-flex-negative: 0;
1088
+ flex-shrink: 0;
1086
1089
  color: #737373;
1087
1090
  color: var(--color-black-55); }
1088
1091
  .dnb-avatar__group--elements-left--size-small {