@dnb/eufemia 9.32.0 → 9.33.0

package/components/space/SpacingHelper.js

@@ -1,24 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/es.string.split.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.parse-float.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.array.find.js";
-import "core-js/modules/es.object.entries.js";
-import "core-js/modules/es.array.reverse.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.join.js";
 import PropTypes from 'prop-types';
-import { warn } from '../../shared/component-helper';
+import { createSpacingClasses, removeSpaceProps, createStyleObject } from './SpacingUtils';
+export { createSpacingClasses, removeSpaceProps, createStyleObject };
 export var spacingPropTypes = {
   space: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.shape({
     top: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
@@ -30,261 +12,4 @@ export var spacingPropTypes = {
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
-export var spacingDefaultProps = {
-  space: null,
-  top: null,
-  right: null,
-  bottom: null,
-  left: null
-};
-export var spacePatterns = {
-  'xx-small': 0.25,
-  'x-small': 0.5,
-  small: 1,
-  medium: 1.5,
-  large: 2,
-  'x-large': 3,
-  'xx-large': 3.5,
-  'xx-large-x2': 7
-};
-export var translateSpace = function translateSpace(type) {
-  if (/-x2$/.test(type)) {
-    return spacePatterns[type.replace(/-x2$/, '')] * 2;
-  }
-
-  return spacePatterns[type] || 0;
-};
-export var splitTypes = function splitTypes(types) {
-  if (typeof types === 'string') {
-    types = types.split(/ /g);
-  } else if (typeof types === 'boolean') {
-    return ['small'];
-  } else if (typeof types === 'number') {
-    return [types];
-  }
-
-  return types ? types.filter(function (r) {
-    return r && r.length > 0;
-  }) : null;
-};
-export var sumTypes = function sumTypes(types) {
-  return splitTypes(types).map(function (type) {
-    return translateSpace(type);
-  }).reduce(function (acc, cur) {
-    if (cur > 0) {
-      acc += cur;
-    } else if (cur < 0) {
-      acc -= cur;
-    }
-
-    return acc;
-  }, 0);
-};
-export var createTypeModifiers = function createTypeModifiers(types) {
-  if (typeof types === 'number') {
-    types = String(types);
-  }
-
-  return (splitTypes(types) || []).reduce(function (acc, type) {
-    if (type) {
-      var firstLetter = type[0];
-
-      if (parseFloat(firstLetter) > -1) {
-        var num = parseFloat(type);
-
-        if (num >= 8 && /[0-9]px/.test(type)) {
-          num = num / 16;
-        }
-
-        var foundType = findType(num);
-
-        if (foundType) {
-          type = foundType;
-        } else {
-          findNearestTypes(num).forEach(function (type) {
-            if (type) {
-              acc.push(type);
-            }
-          });
-        }
-      }
-
-      if (!(parseFloat(type) > 0)) {
-        acc.push(type);
-      }
-    }
-
-    return acc;
-  }, []);
-};
-export var findType = function findType(num) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$returnObject = _ref.returnObject,
-      returnObject = _ref$returnObject === void 0 ? false : _ref$returnObject;
-
-  var found = Object.entries(spacePatterns).find(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        k = _ref3[0],
-        v = _ref3[1];
-
-    return k && v === num;
-  }) || null;
-
-  if (returnObject) {
-    return found;
-  }
-
-  if (found) {
-    return found[0];
-  }
-
-  return found;
-};
-export var findNearestTypes = function findNearestTypes(num) {
-  var res = [];
-  var near = Object.entries(spacePatterns).reverse().find(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        k = _ref5[0],
-        v = _ref5[1];
-
-    return k && num >= v;
-  });
-  var nearNum = near && near[1] || num;
-  var typeObject = findType(nearNum, {
-    returnObject: true
-  });
-
-  if (typeObject) {
-    var nearType = typeObject[0];
-    res.push(nearType);
-    var leftOver = num - parseFloat(typeObject[1]);
-    var foundMoreTypes = findNearestTypes(leftOver);
-    foundMoreTypes.forEach(function (type) {
-      var index = res.indexOf(type);
-
-      if (index !== -1) {
-        res[index] = "".concat(type, "-x2");
-      }
-    });
-    res = [].concat(_toConsumableArray(res), _toConsumableArray(foundMoreTypes));
-  }
-
-  return res;
-};
-export var isValidSpaceProp = function isValidSpaceProp(prop) {
-  return prop && ['top', 'right', 'bottom', 'left'].includes(prop);
-};
-export var removeSpaceProps = function removeSpaceProps(_ref6) {
-  var props = _extends({}, _ref6);
-
-  for (var i in props) {
-    if (isValidSpaceProp(i)) {
-      delete props[i];
-    }
-  }
-
-  return props;
-};
-export var createSpacingClasses = function createSpacingClasses(props) {
-  var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-  if (typeof props.space !== 'undefined') {
-    if (typeof props.space === 'string' || typeof props.space === 'number' || typeof props.space === 'boolean' && props.space) {
-      props.top = props.right = props.bottom = props.left = props.space;
-    }
-
-    for (var i in props.space) {
-      if (!props[i] && isValidSpaceProp(i)) {
-        props[i] = props.space[i];
-      }
-    }
-
-    delete props.space;
-  }
-
-  return Object.entries(props).reduce(function (acc, _ref7) {
-    var _ref8 = _slicedToArray(_ref7, 2),
-        direction = _ref8[0],
-        cur = _ref8[1];
-
-    if (isValidSpaceProp(direction)) {
-      if (String(cur) === '0' || String(cur) === 'false') {
-        acc.push("dnb-space__".concat(direction, "--zero"));
-      } else if (cur) {
-        var typeModifiers = createTypeModifiers(cur);
-        var sum = sumTypes(typeModifiers);
-
-        if (sum > 10) {
-          warn("Spacing of more than 10rem is not supported! You used ".concat(sum, " / (").concat(typeModifiers.join(','), ")"));
-        } else {
-          var nearestTypes = findNearestTypes(sum);
-          acc = [].concat(_toConsumableArray(acc), _toConsumableArray(nearestTypes.map(function (type) {
-            return "dnb-space__".concat(direction, "--").concat(type);
-          })));
-        }
-      }
-    } else if (direction === 'no_collapse') {
-      acc.push('dnb-space--no-collapse');
-
-      if (Element && isInline(Element)) {
-        acc.push('dnb-space--inline');
-      }
-    }
-
-    return acc;
-  }, []);
-};
-export var createStyleObject = function createStyleObject(props) {
-  if (props.top && !(parseFloat(props.top) > 0)) {
-    props.top = sumTypes(props.top);
-  }
-
-  if (props.bottom && !(parseFloat(props.bottom) > 0)) {
-    props.bottom = sumTypes(props.bottom);
-  }
-
-  if (props.left && !(parseFloat(props.left) > 0)) {
-    props.left = sumTypes(props.left);
-  }
-
-  if (props.right && !(parseFloat(props.right) > 0)) {
-    props.right = sumTypes(props.right);
-  }
-
-  return Object.entries({
-    marginTop: props.top && "".concat(props.top, "rem"),
-    marginBottom: props.bottom && "".concat(props.bottom, "rem"),
-    maxWidth: props.maxWidth && "".concat(props.maxWidth, "rem"),
-    maxHeight: props.maxHeight && "".concat(props.maxHeight, "rem"),
-    width: props.width && "".concat(props.width, "rem"),
-    height: props.height && "".concat(props.height, "rem")
-  }).reduce(function (acc, _ref9) {
-    var _ref10 = _slicedToArray(_ref9, 2),
-        key = _ref10[0],
-        val = _ref10[1];
-
-    if (typeof val !== 'undefined') {
-      acc[key] = val;
-    }
-
-    return acc;
-  }, {});
-};
-export var isInline = function isInline(Element) {
-  var inline = false;
-
-  switch (Element) {
-    case 'h1':
-    case 'h2':
-    case 'h3':
-    case 'h4':
-    case 'h5':
-    case 'h6':
-    case 'p':
-      inline = true;
-      break;
-  }
-
-  return inline;
 };

package/components/space/SpacingUtils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Space helper
+ *
+ */
+export declare const spacingDefaultProps: {
+    space: any;
+    top: any;
+    right: any;
+    bottom: any;
+    left: any;
+};
+export declare const spacePatterns: {
+    'xx-small': number;
+    'x-small': number;
+    small: number;
+    medium: number;
+    large: number;
+    'x-large': number;
+    'xx-large': number;
+    'xx-large-x2': number;
+};
+export declare const translateSpace: (type: any) => any;
+export declare const splitTypes: (types: any) => any;
+export declare const sumTypes: (types: any) => any;
+export declare const createTypeModifiers: (types: any) => any;
+export declare const findType: (num: any, { returnObject }?: {
+    returnObject?: boolean;
+}) => string | [string, number];
+export declare const findNearestTypes: (num: any) => any[];
+export declare const isValidSpaceProp: (prop: any) => boolean;
+export declare const removeSpaceProps: ({ ...props }: {
+    [x: string]: any;
+}) => {
+    [x: string]: any;
+};
+export declare const createSpacingClasses: (props: any, Element?: any) => any[];
+export declare const createStyleObject: (props: any) => {};
+export declare const isInline: (Element: any) => boolean;

package/components/space/SpacingUtils.js

@@ -0,0 +1,277 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.parse-float.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.array.reverse.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.join.js";
+import { warn } from '../../shared/component-helper';
+export var spacingDefaultProps = {
+  space: null,
+  top: null,
+  right: null,
+  bottom: null,
+  left: null
+};
+export var spacePatterns = {
+  'xx-small': 0.25,
+  'x-small': 0.5,
+  small: 1,
+  medium: 1.5,
+  large: 2,
+  'x-large': 3,
+  'xx-large': 3.5,
+  'xx-large-x2': 7
+};
+export var translateSpace = function translateSpace(type) {
+  if (/-x2$/.test(type)) {
+    return spacePatterns[type.replace(/-x2$/, '')] * 2;
+  }
+
+  return spacePatterns[type] || 0;
+};
+export var splitTypes = function splitTypes(types) {
+  if (typeof types === 'string') {
+    types = types.split(/ /g);
+  } else if (typeof types === 'boolean') {
+    return ['small'];
+  } else if (typeof types === 'number') {
+    return [types];
+  }
+
+  return types ? types.filter(function (r) {
+    return r && r.length > 0;
+  }) : null;
+};
+export var sumTypes = function sumTypes(types) {
+  return splitTypes(types).map(function (type) {
+    return translateSpace(type);
+  }).reduce(function (acc, cur) {
+    if (cur > 0) {
+      acc += cur;
+    } else if (cur < 0) {
+      acc -= cur;
+    }
+
+    return acc;
+  }, 0);
+};
+export var createTypeModifiers = function createTypeModifiers(types) {
+  if (typeof types === 'number') {
+    types = String(types);
+  }
+
+  return (splitTypes(types) || []).reduce(function (acc, type) {
+    if (type) {
+      var firstLetter = type[0];
+
+      if (parseFloat(firstLetter) > -1) {
+        var num = parseFloat(type);
+
+        if (num >= 8 && /[0-9]px/.test(type)) {
+          num = num / 16;
+        }
+
+        var foundType = findType(num);
+
+        if (foundType) {
+          type = foundType;
+        } else {
+          findNearestTypes(num).forEach(function (type) {
+            if (type) {
+              acc.push(type);
+            }
+          });
+        }
+      }
+
+      if (!(parseFloat(type) > 0)) {
+        acc.push(type);
+      }
+    }
+
+    return acc;
+  }, []);
+};
+export var findType = function findType(num) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$returnObject = _ref.returnObject,
+      returnObject = _ref$returnObject === void 0 ? false : _ref$returnObject;
+
+  var found = Object.entries(spacePatterns).find(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        k = _ref3[0],
+        v = _ref3[1];
+
+    return k && v === num;
+  }) || null;
+
+  if (returnObject) {
+    return found;
+  }
+
+  if (found) {
+    return found[0];
+  }
+
+  return found;
+};
+export var findNearestTypes = function findNearestTypes(num) {
+  var res = [];
+  var near = Object.entries(spacePatterns).reverse().find(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        k = _ref5[0],
+        v = _ref5[1];
+
+    return k && num >= v;
+  });
+  var nearNum = near && near[1] || num;
+  var typeObject = findType(nearNum, {
+    returnObject: true
+  });
+
+  if (typeObject) {
+    var nearType = typeObject[0];
+    res.push(nearType);
+    var leftOver = num - parseFloat(String(typeObject[1]));
+    var foundMoreTypes = findNearestTypes(leftOver);
+    foundMoreTypes.forEach(function (type) {
+      var index = res.indexOf(type);
+
+      if (index !== -1) {
+        res[index] = "".concat(type, "-x2");
+      }
+    });
+    res = [].concat(_toConsumableArray(res), _toConsumableArray(foundMoreTypes));
+  }
+
+  return res;
+};
+export var isValidSpaceProp = function isValidSpaceProp(prop) {
+  return prop && ['top', 'right', 'bottom', 'left'].includes(prop);
+};
+export var removeSpaceProps = function removeSpaceProps(_ref6) {
+  var props = _extends({}, _ref6);
+
+  for (var i in props) {
+    if (isValidSpaceProp(i)) {
+      delete props[i];
+    }
+  }
+
+  return props;
+};
+export var createSpacingClasses = function createSpacingClasses(props) {
+  var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  if (typeof props.space !== 'undefined') {
+    if (typeof props.space === 'string' || typeof props.space === 'number' || typeof props.space === 'boolean' && props.space) {
+      props.top = props.right = props.bottom = props.left = props.space;
+    }
+
+    for (var i in props.space) {
+      if (!props[i] && isValidSpaceProp(i)) {
+        props[i] = props.space[i];
+      }
+    }
+
+    delete props.space;
+  }
+
+  return Object.entries(props).reduce(function (acc, _ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        direction = _ref8[0],
+        cur = _ref8[1];
+
+    if (isValidSpaceProp(direction)) {
+      if (String(cur) === '0' || String(cur) === 'false') {
+        acc.push("dnb-space__".concat(direction, "--zero"));
+      } else if (cur) {
+        var typeModifiers = createTypeModifiers(cur);
+        var sum = sumTypes(typeModifiers);
+
+        if (sum > 10) {
+          warn("Spacing of more than 10rem is not supported! You used ".concat(sum, " / (").concat(typeModifiers.join(','), ")"));
+        } else {
+          var nearestTypes = findNearestTypes(sum);
+          acc = [].concat(_toConsumableArray(acc), _toConsumableArray(nearestTypes.map(function (type) {
+            return "dnb-space__".concat(direction, "--").concat(type);
+          })));
+        }
+      }
+    } else if (direction === 'no_collapse') {
+      acc.push('dnb-space--no-collapse');
+
+      if (Element && isInline(Element)) {
+        acc.push('dnb-space--inline');
+      }
+    }
+
+    return acc;
+  }, []);
+};
+export var createStyleObject = function createStyleObject(props) {
+  if (props.top && !(parseFloat(props.top) > 0)) {
+    props.top = sumTypes(props.top);
+  }
+
+  if (props.bottom && !(parseFloat(props.bottom) > 0)) {
+    props.bottom = sumTypes(props.bottom);
+  }
+
+  if (props.left && !(parseFloat(props.left) > 0)) {
+    props.left = sumTypes(props.left);
+  }
+
+  if (props.right && !(parseFloat(props.right) > 0)) {
+    props.right = sumTypes(props.right);
+  }
+
+  return Object.entries({
+    marginTop: props.top && "".concat(props.top, "rem"),
+    marginBottom: props.bottom && "".concat(props.bottom, "rem"),
+    maxWidth: props.maxWidth && "".concat(props.maxWidth, "rem"),
+    maxHeight: props.maxHeight && "".concat(props.maxHeight, "rem"),
+    width: props.width && "".concat(props.width, "rem"),
+    height: props.height && "".concat(props.height, "rem")
+  }).reduce(function (acc, _ref9) {
+    var _ref10 = _slicedToArray(_ref9, 2),
+        key = _ref10[0],
+        val = _ref10[1];
+
+    if (typeof val !== 'undefined') {
+      acc[key] = val;
+    }
+
+    return acc;
+  }, {});
+};
+export var isInline = function isInline(Element) {
+  var inline = false;
+
+  switch (Element) {
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+    case 'p':
+      inline = true;
+      break;
+  }
+
+  return inline;
+};

package/components/space/types.d.ts

@@ -0,0 +1,34 @@
+export declare type SpacingElementProps = {
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+     *
+     */
+    top?: SpaceTypes;
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+     *
+     */
+    right?: SpaceTypes;
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+     *
+     */
+    bottom?: SpaceTypes;
+    /**
+     * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+     *
+     */
+    left?: SpaceTypes;
+};
+export declare type SpaceTypes = string | boolean | number;
+export declare type SpacingProps = SpacingElementProps & {
+    space?: SpaceTypes | SpacingElementProps;
+};
+/**
+ * @deprecated Use SpacingElementProps instead
+ */
+export declare type ISpacingElementProps = SpacingElementProps;
+/**
+ * @deprecated Use SpacingProps instead
+ */
+export declare type ISpacingProps = SpacingProps;

package/components/space/types.js

@@ -0,0 +1 @@
+export {};

package/components/step-indicator/StepIndicatorItem.js

@@ -28,7 +28,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { isTrue, makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
-import AnimateHeight from '../../shared/AnimateHeight';
+import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import Button from '../button/Button';
 import Icon from '../icon/Icon';
 import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
@@ -80,7 +80,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       return typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
     });
 
-    _this._heightAnim = new AnimateHeight({
+    _this._heightAnim = new HeightAnimationInstance({
       animate: !isTrue(context.no_animation)
     });
     _this._ref = React.createRef();

package/components/step-indicator/StepIndicatorTriggerButton.js

@@ -30,7 +30,7 @@ import PropTypes from 'prop-types';
 import Button from '../button/Button';
 import chevron_icon from '../../icons/chevron_right_medium';
 import { validateDOMAttributes, combineDescribedBy, isTrue } from '../../shared/component-helper';
-import AnimateHeight from '../../shared/AnimateHeight';
+import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import FormLabel from '../form-label/FormLabel';
 import StepIndicatorContext from './StepIndicatorContext';
@@ -48,7 +48,7 @@ var StepIndicatorTriggerButton = function (_React$PureComponent) {
     _classCallCheck(this, StepIndicatorTriggerButton);
 
     _this = _super.call(this, props);
-    _this._heightAnim = new AnimateHeight({
+    _this._heightAnim = new HeightAnimationInstance({
       animate: !isTrue(context.no_animation)
     });
     _this._buttonRef = props.inner_ref || React.createRef();

package/components/step-indicator/style/_step-indicator.scss

@@ -62,7 +62,7 @@
     border-radius: 0.25rem;
 
     will-change: height;
-    transition: height 400ms #{$defaultEasing};
+    transition: height 400ms var(--easing-default);
 
     html[data-visual-test] & {
       transition-duration: 1ms !important;