@dnb/eufemia 10.65.1 → 10.66.1

package/cjs/components/flex/Container.js

@@ -12,7 +12,8 @@ var _Space = _interopRequireDefault(require("../space/Space"));
 var _elements = require("../../elements");
 var _useMedia = _interopRequireDefault(require("../../shared/useMedia"));
 var _utils = require("./utils");
-const _excluded = ["className", "style", "children", "element", "direction", "wrap", "sizeCount", "rowGap", "justify", "align", "alignSelf", "divider", "gap", "spacing", "breakpoints", "queries"];
+const _excluded = ["spacing", "gap", "rowGap"],
+  _excluded2 = ["className", "style", "children", "element", "direction", "wrap", "sizeCount", "rowGap", "justify", "align", "alignSelf", "divider", "gap", "breakpoints", "queries"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,9 +34,21 @@ function pickFlexContainerProps(props) {
     return propNames.includes(key) && !skip.includes(key);
   })));
 }
+function handleDeprecatedProps(_ref2) {
+  let {
+      spacing,
+      gap,
+      rowGap
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  return _objectSpread(_objectSpread({}, rest), {}, {
+    rowGap: rowGap === true ? undefined : rowGap,
+    gap: spacing !== null && spacing !== void 0 ? spacing : gap
+  });
+}
 function FlexContainer(props) {
-  var _ref2;
-  const {
+  const _handleDeprecatedProp = handleDeprecatedProps(props),
+    {
       className,
       style,
       children,
@@ -48,13 +61,15 @@ function FlexContainer(props) {
       align = 'flex-start',
       alignSelf,
       divider = 'space',
-      gap,
-      spacing: spacingProp,
+      gap = 'small',
       breakpoints,
       queries
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const spacing = (_ref2 = spacingProp !== null && spacingProp !== void 0 ? spacingProp : gap) !== null && _ref2 !== void 0 ? _ref2 : 'small';
+    } = _handleDeprecatedProp,
+    rest = _objectWithoutProperties(_handleDeprecatedProp, _excluded2);
+  const spacing = (0, _react.useMemo)(() => {
+    var _ref3;
+    return (_ref3 = direction === 'vertical' ? rowGap : undefined) !== null && _ref3 !== void 0 ? _ref3 : gap;
+  }, [direction, gap, rowGap]);
   const childrenArray = replaceRootFragment(wrapChildren(props, children));
   const hasHeading = childrenArray.some((child, i) => {
     const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
@@ -105,8 +120,8 @@ function FlexContainer(props) {
     if (isFirst && direction !== 'horizontal') {
       startSpacing = 0;
     } else {
-      var _ref3, _getSpaceValue3;
-      startSpacing = (_ref3 = (_getSpaceValue3 = (0, _utils.getSpaceValue)(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : (0, _utils.getSpaceValue)(end, previousChild)) !== null && _ref3 !== void 0 ? _ref3 : spacing;
+      var _ref4, _getSpaceValue3;
+      startSpacing = (_ref4 = (_getSpaceValue3 = (0, _utils.getSpaceValue)(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : (0, _utils.getSpaceValue)(end, previousChild)) !== null && _ref4 !== void 0 ? _ref4 : spacing;
     }
     if (_react.default.isValidElement(previousChild) && (previousChild === null || previousChild === void 0 ? void 0 : (_previousChild$type = previousChild.type) === null || _previousChild$type === void 0 ? void 0 : _previousChild$type['_supportsSpacingProps']) === false) {
       startSpacing = 0;
@@ -124,21 +139,13 @@ function FlexContainer(props) {
     });
   });
   const n = 'dnb-flex-container';
-  const getRowGapClass = (0, _react.useCallback)(() => {
-    if (rowGap === false) {
-      return `${n}--row-gap-off`;
-    }
-    if (rowGap === true || !rowGap && wrap && direction === 'horizontal') {
-      return `${n}--row-gap-small`;
-    }
-    if (hasSizeProp && spacing) {
-      return `${n}--row-gap-${spacing}`;
-    }
-    if (rowGap) {
-      return `${n}--row-gap-${rowGap}`;
+  const rowGapClass = (0, _react.useMemo)(() => {
+    if (rowGap !== false && direction === 'horizontal') {
+      return `${n}--row-gap-${rowGap !== null && rowGap !== void 0 ? rowGap : 'small'}`;
     }
-  }, [direction, hasSizeProp, rowGap, spacing, wrap]);
-  const cn = (0, _classnames.default)('dnb-flex-container', getRowGapClass(), className, direction && `${n}--direction-${direction}`, justify && `${n}--justify-${justify}`, align && `${n}--align-${align}`, alignSelf && `${n}--align-self-${alignSelf}`, spacing && `${n}--spacing-${spacing}`, wrap && `${n}--wrap`, hasSizeProp && `${n}--has-size`, divider && `${n}--divider-${divider}`);
+    return undefined;
+  }, [direction, rowGap]);
+  const cn = (0, _classnames.default)('dnb-flex-container', rowGapClass, className, direction && `${n}--direction-${direction}`, justify && `${n}--justify-${justify}`, align && `${n}--align-${align}`, alignSelf && `${n}--align-self-${alignSelf}`, spacing && `${n}--spacing-${spacing}`, wrap && `${n}--wrap`, hasSizeProp && `${n}--has-size`, divider && `${n}--divider-${divider}`);
   return _react.default.createElement(_Space.default, _extends({
     element: element,
     className: cn,

package/cjs/components/flex/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Space","_elements","_useMedia","_utils","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","propNames","pickFlexContainerProps","props","defaults","skip","fromEntries","entries","_ref","includes","FlexContainer","_ref2","className","style","children","element","direction","wrap","sizeCount","rowGap","justify","align","alignSelf","divider","gap","spacing","spacingProp","breakpoints","queries","rest","childrenArray","replaceRootFragment","wrapChildren","hasHeading","some","child","previousChild","isHeadingElement","hasSizeProp","_child$props","size","mediaKey","useMedia","disabled","content","map","_previousChild$type","isFirst","isLast","isHeading","start","end","endSpacing","startSpacing","_getSpaceValue","_getSpaceValue2","spaceAboveLine","getSpaceValue","createElement","Fragment","Hr","top","space","renderWithSpacing","_ref3","_getSpaceValue3","React","isValidElement","type","n","getRowGapClass","useCallback","cn","classnames","Children","toArray","cloneElement","firstChild","count","_firstChild$props","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/flex/Container.tsx"],"sourcesContent":["import React, { Fragment, useCallback } from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceProps } from '../space/Space'\nimport { Hr } from '../../elements'\nimport useMedia from '../../shared/useMedia'\nimport {\n  getSpaceValue,\n  isHeadingElement,\n  renderWithSpacing,\n} from './utils'\n\nimport type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils'\nimport type { SpaceType } from '../space/types'\nimport type { UseMediaQueries } from '../../shared/useMedia'\nimport type { End, Start } from './types'\n\ntype Gap =\n  | false\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type BasicProps = {\n  direction?: 'horizontal' | 'vertical'\n  wrap?: boolean\n  rowGap?: 'small' | 'medium' | 'large' | boolean\n  sizeCount?: number\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  /** For when used as a flex item in an outer container in addition to being a container: */\n  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'\n  /** When \"line-framed\" is used, a line will be shown between items and above the first and below the last item */\n  divider?: 'space' | 'line' | 'line-framed'\n  /** Spacing between items inside */\n  gap?: Gap\n  /** @deprecated Use `gap` instead */\n  spacing?: Gap\n  breakpoints?: MediaQueryBreakpoints\n  queries?: UseMediaQueries\n}\n\nexport type Props = BasicProps &\n  SpaceProps &\n  Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'ref' | 'wrap' | 'value' | 'label' | 'title' | 'placeholder'\n  >\n\nconst propNames: Array<keyof Props> = [\n  'direction',\n  'wrap',\n  'justify',\n  'align',\n  'divider',\n  'spacing',\n  'gap',\n]\n\nexport function pickFlexContainerProps<T extends Props>(\n  props: T,\n  defaults: Partial<Props> = {},\n  skip: Array<keyof Props> = []\n): Omit<Props, 'children'> {\n  return {\n    ...defaults,\n    ...Object.fromEntries(\n      Object.entries(props ?? {}).filter(\n        ([key]) =>\n          propNames.includes(key as keyof Props) &&\n          !skip.includes(key as keyof Props)\n      )\n    ),\n  }\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    style,\n    children,\n    element = 'div',\n    direction = 'horizontal',\n    wrap = true,\n    sizeCount = 12,\n    rowGap,\n    justify = 'flex-start',\n    align = 'flex-start',\n    alignSelf,\n    divider = 'space',\n    gap,\n    spacing: spacingProp,\n    breakpoints,\n    queries,\n    ...rest\n  } = props\n\n  const spacing = spacingProp ?? gap ?? 'small'\n  const childrenArray = replaceRootFragment(wrapChildren(props, children))\n  const hasHeading = childrenArray.some((child, i) => {\n    const previousChild = childrenArray?.[i - 1]\n    return (\n      isHeadingElement(child) || (i > 0 && isHeadingElement(previousChild))\n    )\n  })\n  const hasSizeProp =\n    !hasHeading &&\n    direction === 'horizontal' &&\n    childrenArray.some((child) => child['props']?.size)\n\n  const { key: mediaKey } = useMedia({\n    disabled: !hasSizeProp,\n    breakpoints,\n    queries,\n  })\n\n  const content = childrenArray.map((child, i) => {\n    // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n    // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n    // and bottom when th\n    const isFirst = i === 0\n    const isLast = i >= childrenArray.length - 1\n    const previousChild = childrenArray?.[i - 1]\n    const isHeading = hasHeading && isHeadingElement(previousChild)\n\n    // Always set spacing between elements in the vertical layout on the top props, and 0 on bottom, to avoid\n    // having to divide spacing between both with smaller values.\n    const start: Start = direction === 'horizontal' ? 'left' : 'top'\n    const end: End = direction === 'horizontal' ? 'right' : 'bottom'\n    // const start: Start | End = direction === 'horizontal' ? 'right' : 'top'\n    // const end: Start | End = direction === 'horizontal' ? 'left' : 'bottom'\n    const endSpacing = 0\n    let startSpacing = null\n\n    if (\n      // No line above heading\n      !isHeading &&\n      ((divider === 'line' && !isFirst) || divider === 'line-framed')\n    ) {\n      const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing\n      startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType\n\n      return (\n        <React.Fragment key={`element-${i}`}>\n          <Hr\n            top={!isFirst ? spaceAboveLine : 0}\n            space={0}\n            className=\"dnb-flex-container__hr\"\n          />\n\n          {renderWithSpacing(child, {\n            space: { [start]: startSpacing, [end]: endSpacing },\n          })}\n\n          {divider === 'line-framed' && isLast && (\n            <Hr\n              top={spaceAboveLine}\n              space={0}\n              className=\"dnb-flex-container__hr\"\n            />\n          )}\n        </React.Fragment>\n      )\n    }\n\n    // No space above first element.\n    if (isFirst && direction !== 'horizontal') {\n      startSpacing = 0\n    } else {\n      // Since top space of current and bottom space of previous component is the same\n      startSpacing =\n        getSpaceValue(start, child) ??\n        getSpaceValue(end, previousChild) ??\n        spacing\n    }\n\n    if (\n      React.isValidElement(previousChild) &&\n      previousChild?.type?.['_supportsSpacingProps'] === false\n    ) {\n      startSpacing = 0\n    }\n\n    const space =\n      direction === 'horizontal'\n        ? { [start]: endSpacing, [end]: startSpacing }\n        : { [start]: startSpacing, [end]: endSpacing }\n\n    return renderWithSpacing(child, {\n      key: child?.['key'] || `element-${i}`,\n      space,\n    })\n  })\n\n  const n = 'dnb-flex-container'\n  const getRowGapClass = useCallback(() => {\n    if (rowGap === false) {\n      return `${n}--row-gap-off`\n    }\n\n    if (\n      rowGap === true ||\n      (!rowGap && wrap && direction === 'horizontal')\n    ) {\n      return `${n}--row-gap-small`\n    }\n\n    if (hasSizeProp && spacing) {\n      return `${n}--row-gap-${spacing}`\n    }\n\n    if (rowGap) {\n      return `${n}--row-gap-${rowGap}`\n    }\n  }, [direction, hasSizeProp, rowGap, spacing, wrap])\n\n  const cn = classnames(\n    'dnb-flex-container',\n    direction && `${n}--direction-${direction}`,\n    justify && `${n}--justify-${justify}`,\n    align && `${n}--align-${align}`,\n    alignSelf && `${n}--align-self-${alignSelf}`,\n    spacing && `${n}--spacing-${spacing}`,\n    wrap && `${n}--wrap`,\n    getRowGapClass(),\n    hasSizeProp && `${n}--has-size`,\n    divider && `${n}--divider-${divider}`,\n    className\n  )\n\n  return (\n    <Space\n      element={element}\n      className={cn}\n      data-media-key={mediaKey}\n      style={\n        hasSizeProp\n          ? ({ '--sizeCount': sizeCount, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n    >\n      {content}\n    </Space>\n  )\n}\n\nfunction wrapChildren(props: Props, children: React.ReactNode) {\n  return React.Children.toArray(children).map((child) => {\n    if (\n      React.isValidElement(child) &&\n      child.type['_supportsSpacingProps'] === 'children'\n    ) {\n      return React.cloneElement(\n        child,\n        child.props,\n        <FlexContainer {...props}>{child.props.children}</FlexContainer>\n      )\n    }\n\n    return child\n  })\n}\n\nfunction replaceRootFragment(children) {\n  const firstChild = children[0]\n  if (\n    React.Children.count(children) === 1 &&\n    firstChild?.type === Fragment\n  ) {\n    return React.Children.toArray(firstChild?.props?.children)\n  }\n  return children\n}\n\nFlexContainer._supportsSpacingProps = true\n\nexport default FlexContainer\n"],"mappings":"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"}
+{"version":3,"file":"Container.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Space","_elements","_useMedia","_utils","_excluded","_excluded2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","propNames","pickFlexContainerProps","props","defaults","skip","fromEntries","entries","_ref","includes","handleDeprecatedProps","_ref2","spacing","gap","rowGap","rest","FlexContainer","_handleDeprecatedProp","className","style","children","element","direction","wrap","sizeCount","justify","align","alignSelf","divider","breakpoints","queries","useMemo","_ref3","childrenArray","replaceRootFragment","wrapChildren","hasHeading","some","child","previousChild","isHeadingElement","hasSizeProp","_child$props","size","mediaKey","useMedia","disabled","content","map","_previousChild$type","isFirst","isLast","isHeading","start","end","endSpacing","startSpacing","_getSpaceValue","_getSpaceValue2","spaceAboveLine","getSpaceValue","createElement","Fragment","Hr","top","space","renderWithSpacing","_ref4","_getSpaceValue3","React","isValidElement","type","n","rowGapClass","cn","classnames","Children","toArray","cloneElement","firstChild","count","_firstChild$props","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/flex/Container.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from 'react'\nimport classnames from 'classnames'\nimport Space, { SpaceProps } from '../space/Space'\nimport { Hr } from '../../elements'\nimport useMedia from '../../shared/useMedia'\nimport {\n  getSpaceValue,\n  isHeadingElement,\n  renderWithSpacing,\n} from './utils'\n\nimport type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils'\nimport type { SpaceType } from '../space/types'\nimport type { UseMediaQueries } from '../../shared/useMedia'\nimport type { End, Start } from './types'\n\ntype Gap =\n  | false\n  | 'xx-small'\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type BasicProps = {\n  direction?: 'horizontal' | 'vertical'\n  wrap?: boolean\n  /** value `true` is deprecated, use `undefined` instead */\n  rowGap?: Gap | true\n  sizeCount?: number\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  /** For when used as a flex item in an outer container in addition to being a container: */\n  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'\n  /** When \"line-framed\" is used, a line will be shown between items and above the first and below the last item */\n  divider?: 'space' | 'line' | 'line-framed'\n  /** Spacing between items inside */\n  gap?: Gap\n  /** @deprecated Use `gap` instead */\n  spacing?: Gap\n  breakpoints?: MediaQueryBreakpoints\n  queries?: UseMediaQueries\n}\n\nexport type Props = BasicProps &\n  SpaceProps &\n  Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'ref' | 'wrap' | 'value' | 'label' | 'title' | 'placeholder'\n  >\n\nconst propNames: Array<keyof Props> = [\n  'direction',\n  'wrap',\n  'justify',\n  'align',\n  'divider',\n  'spacing',\n  'gap',\n]\n\nexport function pickFlexContainerProps<T extends Props>(\n  props: T,\n  defaults: Partial<Props> = {},\n  skip: Array<keyof Props> = []\n): Omit<Props, 'children'> {\n  return {\n    ...defaults,\n    ...Object.fromEntries(\n      Object.entries(props ?? {}).filter(\n        ([key]) =>\n          propNames.includes(key as keyof Props) &&\n          !skip.includes(key as keyof Props)\n      )\n    ),\n  }\n}\nfunction handleDeprecatedProps({\n  spacing,\n  gap,\n  rowGap,\n  ...rest\n}: Props): Omit<Props, 'spacing'> & { rowGap?: Gap } {\n  return {\n    ...rest,\n    rowGap: rowGap === true ? undefined : rowGap,\n    gap: spacing ?? gap,\n  }\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    style,\n    children,\n    element = 'div',\n    direction = 'horizontal',\n    wrap = true,\n    sizeCount = 12,\n    rowGap,\n    justify = 'flex-start',\n    align = 'flex-start',\n    alignSelf,\n    divider = 'space',\n    gap = 'small',\n    breakpoints,\n    queries,\n    ...rest\n  } = handleDeprecatedProps(props)\n\n  const spacing = useMemo(\n    () => (direction === 'vertical' ? rowGap : undefined) ?? gap,\n    [direction, gap, rowGap]\n  )\n  const childrenArray = replaceRootFragment(wrapChildren(props, children))\n  const hasHeading = childrenArray.some((child, i) => {\n    const previousChild = childrenArray?.[i - 1]\n    return (\n      isHeadingElement(child) || (i > 0 && isHeadingElement(previousChild))\n    )\n  })\n  const hasSizeProp =\n    !hasHeading &&\n    direction === 'horizontal' &&\n    childrenArray.some((child) => child['props']?.size)\n\n  const { key: mediaKey } = useMedia({\n    disabled: !hasSizeProp,\n    breakpoints,\n    queries,\n  })\n\n  const content = childrenArray.map((child, i) => {\n    // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n    // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n    // and bottom when th\n    const isFirst = i === 0\n    const isLast = i >= childrenArray.length - 1\n    const previousChild = childrenArray?.[i - 1]\n    const isHeading = hasHeading && isHeadingElement(previousChild)\n\n    // Always set spacing between elements in the vertical layout on the top props, and 0 on bottom, to avoid\n    // having to divide spacing between both with smaller values.\n    const start: Start = direction === 'horizontal' ? 'left' : 'top'\n    const end: End = direction === 'horizontal' ? 'right' : 'bottom'\n    // const start: Start | End = direction === 'horizontal' ? 'right' : 'top'\n    // const end: Start | End = direction === 'horizontal' ? 'left' : 'bottom'\n    const endSpacing = 0\n    let startSpacing = null\n\n    if (\n      // No line above heading\n      !isHeading &&\n      ((divider === 'line' && !isFirst) || divider === 'line-framed')\n    ) {\n      const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing\n      startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType\n\n      return (\n        <React.Fragment key={`element-${i}`}>\n          <Hr\n            top={!isFirst ? spaceAboveLine : 0}\n            space={0}\n            className=\"dnb-flex-container__hr\"\n          />\n\n          {renderWithSpacing(child, {\n            space: { [start]: startSpacing, [end]: endSpacing },\n          })}\n\n          {divider === 'line-framed' && isLast && (\n            <Hr\n              top={spaceAboveLine}\n              space={0}\n              className=\"dnb-flex-container__hr\"\n            />\n          )}\n        </React.Fragment>\n      )\n    }\n\n    // No space above first element.\n    if (isFirst && direction !== 'horizontal') {\n      startSpacing = 0\n    } else {\n      // Since top space of current and bottom space of previous component is the same\n      startSpacing =\n        getSpaceValue(start, child) ??\n        getSpaceValue(end, previousChild) ??\n        spacing\n    }\n\n    if (\n      React.isValidElement(previousChild) &&\n      previousChild?.type?.['_supportsSpacingProps'] === false\n    ) {\n      startSpacing = 0\n    }\n\n    const space =\n      direction === 'horizontal'\n        ? { [start]: endSpacing, [end]: startSpacing }\n        : { [start]: startSpacing, [end]: endSpacing }\n\n    return renderWithSpacing(child, {\n      key: child?.['key'] || `element-${i}`,\n      space,\n    })\n  })\n\n  const n = 'dnb-flex-container'\n  const rowGapClass = useMemo(() => {\n    if (rowGap !== false && direction === 'horizontal') {\n      return `${n}--row-gap-${rowGap ?? 'small'}`\n    }\n    return undefined\n  }, [direction, rowGap])\n\n  const cn = classnames(\n    'dnb-flex-container',\n    direction && `${n}--direction-${direction}`,\n    justify && `${n}--justify-${justify}`,\n    align && `${n}--align-${align}`,\n    alignSelf && `${n}--align-self-${alignSelf}`,\n    spacing && `${n}--spacing-${spacing}`,\n    wrap && `${n}--wrap`,\n    rowGapClass,\n    hasSizeProp && `${n}--has-size`,\n    divider && `${n}--divider-${divider}`,\n    className\n  )\n\n  return (\n    <Space\n      element={element}\n      className={cn}\n      data-media-key={mediaKey}\n      style={\n        hasSizeProp\n          ? ({ '--sizeCount': sizeCount, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n    >\n      {content}\n    </Space>\n  )\n}\n\nfunction wrapChildren(props: Props, children: React.ReactNode) {\n  return React.Children.toArray(children).map((child) => {\n    if (\n      React.isValidElement(child) &&\n      child.type['_supportsSpacingProps'] === 'children'\n    ) {\n      return React.cloneElement(\n        child,\n        child.props,\n        <FlexContainer {...props}>{child.props.children}</FlexContainer>\n      )\n    }\n\n    return child\n  })\n}\n\nfunction replaceRootFragment(children) {\n  const firstChild = children[0]\n  if (\n    React.Children.count(children) === 1 &&\n    firstChild?.type === Fragment\n  ) {\n    return React.Children.toArray(firstChild?.props?.children)\n  }\n  return children\n}\n\nFlexContainer._supportsSpacingProps = true\n\nexport default FlexContainer\n"],"mappings":"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"}

package/cjs/components/flex/ContainerDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const FlexContainerProperties: PropertiesTableProps;

package/cjs/components/flex/ContainerDocs.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexContainerProperties = void 0;
+const FlexContainerProperties = {
+  direction: {
+    doc: 'Direction of sub components. Can be: `horizontal` or `vertical`.',
+    type: [`'horizontal'`, `'vertical'`],
+    defaultValue: `'horizontal'`,
+    status: 'optional'
+  },
+  wrap: {
+    doc: 'Define if we should wrap contents if there is not enough space.',
+    type: 'boolean',
+    defaultValue: 'true',
+    status: 'optional'
+  },
+  justify: {
+    doc: 'How to place sub components if there is space available in the container.',
+    type: [`'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`],
+    defaultValue: `'flex-start'`,
+    status: 'optional'
+  },
+  align: {
+    doc: 'How to align sub components.',
+    type: [`'flex-start'`, `'flex-end'`, `'center'`, `'stretch'`, `'baseline'`],
+    defaultValue: `'flex-start'`,
+    status: 'optional'
+  },
+  divider: {
+    doc: 'How to separate sub components.',
+    type: [`'space'`, `'line'`, `'line-framed'`],
+    defaultValue: `'space'`,
+    status: 'optional'
+  },
+  sizeCount: {
+    doc: 'Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item).',
+    type: 'number',
+    defaultValue: '12',
+    status: 'optional'
+  },
+  gap: {
+    doc: 'How much space between child items. Use `false` for no spacing. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',
+    type: [`'xx-small'`, `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`, 'false'],
+    defaultValue: `'small'`,
+    status: 'optional'
+  },
+  rowGap: {
+    doc: 'How much space between rows. Use `false` for no row gap. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',
+    type: [`'xx-small'`, `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`, 'false'],
+    defaultValue: `'small'`,
+    status: 'optional'
+  },
+  element: {
+    doc: 'Define the type of element.',
+    type: ['string', 'React.Element'],
+    defaultValue: `'div'`,
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'Provide a React.Ref to accessing the inner HTML element.',
+    type: 'React.Ref',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: 'Various',
+    status: 'optional'
+  },
+  spacing: {
+    doc: 'Deprecated, use `gap` instead. ~~How much space between sub components. Can be `false` for no spacing.~~',
+    type: [`'xx-small'`, `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`, 'false'],
+    defaultValue: `'small'`,
+    status: 'deprecated'
+  }
+};
+exports.FlexContainerProperties = FlexContainerProperties;
+//# sourceMappingURL=ContainerDocs.js.map

package/cjs/components/flex/ContainerDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerDocs.js","names":["FlexContainerProperties","direction","doc","type","defaultValue","status","wrap","justify","align","divider","sizeCount","gap","rowGap","element","innerRef","spacing","exports"],"sources":["../../../../src/components/flex/ContainerDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const FlexContainerProperties: PropertiesTableProps = {\n  direction: {\n    doc: 'Direction of sub components. Can be: `horizontal` or `vertical`.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'Define if we should wrap contents if there is not enough space.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  justify: {\n    doc: 'How to place sub components if there is space available in the container.',\n    type: [\n      `'flex-start'`,\n      `'flex-end'`,\n      `'center'`,\n      `'space-between'`,\n      `'space-around'`,\n      `'space-evenly'`,\n    ],\n    defaultValue: `'flex-start'`,\n    status: 'optional',\n  },\n  align: {\n    doc: 'How to align sub components.',\n    type: [\n      `'flex-start'`,\n      `'flex-end'`,\n      `'center'`,\n      `'stretch'`,\n      `'baseline'`,\n    ],\n    defaultValue: `'flex-start'`,\n    status: 'optional',\n  },\n  divider: {\n    doc: 'How to separate sub components.',\n    type: [`'space'`, `'line'`, `'line-framed'`],\n    defaultValue: `'space'`,\n    status: 'optional',\n  },\n  sizeCount: {\n    doc: 'Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item).',\n    type: 'number',\n    defaultValue: '12',\n    status: 'optional',\n  },\n  gap: {\n    doc: 'How much space between child items. Use `false` for no spacing. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'optional',\n  },\n  rowGap: {\n    doc: 'How much space between rows. Use `false` for no row gap. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element.',\n    type: ['string', 'React.Element'],\n    defaultValue: `'div'`,\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Provide a React.Ref to accessing the inner HTML element.',\n    type: 'React.Ref',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: 'Various',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Deprecated, use `gap` instead. ~~How much space between sub components. Can be `false` for no spacing.~~',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'deprecated',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,uBAA6C,GAAG;EAC3DC,SAAS,EAAE;IACTC,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,CAAE,cAAa,EAAG,YAAW,CAAC;IACpCC,YAAY,EAAG,cAAa;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJJ,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,SAAS;IACfC,YAAY,EAAE,MAAM;IACpBC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPL,GAAG,EAAE,2EAA2E;IAChFC,IAAI,EAAE,CACH,cAAa,EACb,YAAW,EACX,UAAS,EACT,iBAAgB,EAChB,gBAAe,EACf,gBAAe,CACjB;IACDC,YAAY,EAAG,cAAa;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLN,GAAG,EAAE,8BAA8B;IACnCC,IAAI,EAAE,CACH,cAAa,EACb,YAAW,EACX,UAAS,EACT,WAAU,EACV,YAAW,CACb;IACDC,YAAY,EAAG,cAAa;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPP,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAE,SAAQ,EAAG,QAAO,EAAG,eAAc,CAAC;IAC5CC,YAAY,EAAG,SAAQ;IACvBC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTR,GAAG,EAAE,oIAAoI;IACzIC,IAAI,EAAE,QAAQ;IACdC,YAAY,EAAE,IAAI;IAClBC,MAAM,EAAE;EACV,CAAC;EACDM,GAAG,EAAE;IACHT,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,CACH,YAAW,EACX,WAAU,EACV,SAAQ,EACR,UAAS,EACT,SAAQ,EACR,WAAU,EACV,YAAW,EACZ,OAAO,CACR;IACDC,YAAY,EAAG,SAAQ;IACvBC,MAAM,EAAE;EACV,CAAC;EACDO,MAAM,EAAE;IACNV,GAAG,EAAE,6IAA6I;IAClJC,IAAI,EAAE,CACH,YAAW,EACX,WAAU,EACV,SAAQ,EACR,UAAS,EACT,SAAQ,EACR,WAAU,EACV,YAAW,EACZ,OAAO,CACR;IACDC,YAAY,EAAG,SAAQ;IACvBC,MAAM,EAAE;EACV,CAAC;EACDQ,OAAO,EAAE;IACPX,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,YAAY,EAAG,OAAM;IACrBC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRZ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,YAAY,EAAE,WAAW;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,SAAS;IACfE,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPb,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CACH,YAAW,EACX,WAAU,EACV,SAAQ,EACR,UAAS,EACT,SAAQ,EACR,WAAU,EACV,YAAW,EACZ,OAAO,CACR;IACDC,YAAY,EAAG,SAAQ;IACvBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAW,OAAA,CAAAhB,uBAAA,GAAAA,uBAAA"}

package/cjs/components/flex/style/dnb-flex.css

@@ -1,10 +1,12 @@
 .dnb-flex-container {
+  --gap: 0;
+  --horizontal-gap: 0;
   display: flex;
-  row-gap: var(--gap, 0);
+  row-gap: var(--gap);
 }
 .dnb-flex-container--direction-horizontal {
   flex-direction: row;
-  margin-right: calc(var(--gap) * -1);
+  margin-right: calc(var(--horizontal-gap) * -1);
 }
 .dnb-flex-container--direction-vertical {
   flex-direction: column;
@@ -60,8 +62,11 @@
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
-.dnb-flex-container--row-gap-off {
-  --gap: 0;
+.dnb-flex-container--row-gap-xx-small {
+  --gap: var(--spacing-xx-small);
+}
+.dnb-flex-container--row-gap-x-small {
+  --gap: var(--spacing-x-small);
 }
 .dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
@@ -72,6 +77,33 @@
 .dnb-flex-container--row-gap-large {
   --gap: var(--spacing-large);
 }
+.dnb-flex-container--row-gap-x-large {
+  --gap: var(--spacing-x-large);
+}
+.dnb-flex-container--row-gap-xx-large {
+  --gap: var(--spacing-xx-large);
+}
+.dnb-flex-container--spacing-xx-small {
+  --horizontal-gap: var(--spacing-xx-small);
+}
+.dnb-flex-container--spacing-x-small {
+  --horizontal-gap: var(--spacing-x-small);
+}
+.dnb-flex-container--spacing-small {
+  --horizontal-gap: var(--spacing-small);
+}
+.dnb-flex-container--spacing-medium {
+  --horizontal-gap: var(--spacing-medium);
+}
+.dnb-flex-container--spacing-large {
+  --horizontal-gap: var(--spacing-large);
+}
+.dnb-flex-container--spacing-x-large {
+  --horizontal-gap: var(--spacing-x-large);
+}
+.dnb-flex-container--spacing-xx-large {
+  --horizontal-gap: var(--spacing-xx-large);
+}
 .dnb-flex-container__hr.dnb-hr {
   width: 100%;
   color: var(--color-black-8);

package/cjs/components/flex/style/dnb-flex.min.css

@@ -1 +1 @@
-.dnb-flex-container{display:flex;row-gap:var(--gap,0)}.dnb-flex-container--direction-horizontal{flex-direction:row;margin-right:calc(var(--gap)*-1)}.dnb-flex-container--direction-vertical{flex-direction:column}.dnb-flex-container--justify-flex-start{justify-content:flex-start}.dnb-flex-container--justify-flex-end{justify-content:flex-end}.dnb-flex-container--justify-center{justify-content:center}.dnb-flex-container--justify-space-between{justify-content:space-between}.dnb-flex-container--justify-space-around{justify-content:space-around}.dnb-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-flex-container--align-flex-start{align-items:flex-start}.dnb-flex-container--align-flex-end{align-items:flex-end}.dnb-flex-container--align-center{align-items:center}.dnb-flex-container--align-stretch{align-items:stretch}.dnb-flex-container--align-baseline{align-items:baseline}.dnb-flex-container--align-self-flex-start{align-self:flex-start}.dnb-flex-container--align-self-flex-end{align-self:flex-end}.dnb-flex-container--align-self-center{align-self:center}.dnb-flex-container--align-self-baseline{align-self:baseline}.dnb-flex-container--align-self-stretch{align-self:stretch}.dnb-flex-container--wrap{flex-wrap:wrap}.dnb-flex-container--row-gap-off{--gap:0}.dnb-flex-container--row-gap-small{--gap:var(--spacing-small)}.dnb-flex-container--row-gap-medium{--gap:var(--spacing-medium)}.dnb-flex-container--row-gap-large{--gap:var(--spacing-large)}.dnb-flex-container__hr.dnb-hr{color:var(--color-black-8);width:100%}.dnb-flex-item--grow{flex-grow:1}.dnb-flex-item--shrink{flex-shrink:1}.dnb-flex-item--align-self-flex-start{align-self:flex-start}.dnb-flex-item--align-self-flex-end{align-self:flex-end}.dnb-flex-item--align-self-center{align-self:center}.dnb-flex-item--align-self-baseline{align-self:baseline}.dnb-flex-item--align-self-stretch{align-self:stretch}.dnb-flex-item--responsive{--sizeCount--default:12;--size--default:var(--small);--flex-basis:calc(100%/var(--sizeCount, var(--sizeCount--default))*var(--size, var(--size--default)));flex-basis:var(--flex-basis);flex-grow:0;max-width:var(--flex-basis)}.dnb-flex-container[data-media-key=small] .dnb-flex-item--responsive{--size:var(--small,var(--medium))}.dnb-flex-container[data-media-key=medium] .dnb-flex-item--responsive{--size:var(--medium,var(--large))}.dnb-flex-container[data-media-key=large] .dnb-flex-item--responsive{--size:var(--large,var(--medium))}.dnb-flex-stack+.dnb-flex-stack{margin-top:var(--spacing-small)}.dnb-flex-stack>.dnb-button{align-self:flex-start}
+.dnb-flex-container{--gap:0;--horizontal-gap:0;display:flex;row-gap:var(--gap)}.dnb-flex-container--direction-horizontal{flex-direction:row;margin-right:calc(var(--horizontal-gap)*-1)}.dnb-flex-container--direction-vertical{flex-direction:column}.dnb-flex-container--justify-flex-start{justify-content:flex-start}.dnb-flex-container--justify-flex-end{justify-content:flex-end}.dnb-flex-container--justify-center{justify-content:center}.dnb-flex-container--justify-space-between{justify-content:space-between}.dnb-flex-container--justify-space-around{justify-content:space-around}.dnb-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-flex-container--align-flex-start{align-items:flex-start}.dnb-flex-container--align-flex-end{align-items:flex-end}.dnb-flex-container--align-center{align-items:center}.dnb-flex-container--align-stretch{align-items:stretch}.dnb-flex-container--align-baseline{align-items:baseline}.dnb-flex-container--align-self-flex-start{align-self:flex-start}.dnb-flex-container--align-self-flex-end{align-self:flex-end}.dnb-flex-container--align-self-center{align-self:center}.dnb-flex-container--align-self-baseline{align-self:baseline}.dnb-flex-container--align-self-stretch{align-self:stretch}.dnb-flex-container--wrap{flex-wrap:wrap}.dnb-flex-container--row-gap-xx-small{--gap:var(--spacing-xx-small)}.dnb-flex-container--row-gap-x-small{--gap:var(--spacing-x-small)}.dnb-flex-container--row-gap-small{--gap:var(--spacing-small)}.dnb-flex-container--row-gap-medium{--gap:var(--spacing-medium)}.dnb-flex-container--row-gap-large{--gap:var(--spacing-large)}.dnb-flex-container--row-gap-x-large{--gap:var(--spacing-x-large)}.dnb-flex-container--row-gap-xx-large{--gap:var(--spacing-xx-large)}.dnb-flex-container--spacing-xx-small{--horizontal-gap:var(--spacing-xx-small)}.dnb-flex-container--spacing-x-small{--horizontal-gap:var(--spacing-x-small)}.dnb-flex-container--spacing-small{--horizontal-gap:var(--spacing-small)}.dnb-flex-container--spacing-medium{--horizontal-gap:var(--spacing-medium)}.dnb-flex-container--spacing-large{--horizontal-gap:var(--spacing-large)}.dnb-flex-container--spacing-x-large{--horizontal-gap:var(--spacing-x-large)}.dnb-flex-container--spacing-xx-large{--horizontal-gap:var(--spacing-xx-large)}.dnb-flex-container__hr.dnb-hr{color:var(--color-black-8);width:100%}.dnb-flex-item--grow{flex-grow:1}.dnb-flex-item--shrink{flex-shrink:1}.dnb-flex-item--align-self-flex-start{align-self:flex-start}.dnb-flex-item--align-self-flex-end{align-self:flex-end}.dnb-flex-item--align-self-center{align-self:center}.dnb-flex-item--align-self-baseline{align-self:baseline}.dnb-flex-item--align-self-stretch{align-self:stretch}.dnb-flex-item--responsive{--sizeCount--default:12;--size--default:var(--small);--flex-basis:calc(100%/var(--sizeCount, var(--sizeCount--default))*var(--size, var(--size--default)));flex-basis:var(--flex-basis);flex-grow:0;max-width:var(--flex-basis)}.dnb-flex-container[data-media-key=small] .dnb-flex-item--responsive{--size:var(--small,var(--medium))}.dnb-flex-container[data-media-key=medium] .dnb-flex-item--responsive{--size:var(--medium,var(--large))}.dnb-flex-container[data-media-key=large] .dnb-flex-item--responsive{--size:var(--large,var(--medium))}.dnb-flex-stack+.dnb-flex-stack{margin-top:var(--spacing-small)}.dnb-flex-stack>.dnb-button{align-self:flex-start}

package/cjs/components/flex/style/flex-container.scss

@@ -1,11 +1,13 @@
 .dnb-flex-container {
+  --gap: 0;
+  --horizontal-gap: 0;
   display: flex;
-  row-gap: var(--gap, 0);
+  row-gap: var(--gap);
 
   &--direction {
     &-horizontal {
       flex-direction: row;
-      margin-right: calc(var(--gap) * -1);
+      margin-right: calc(var(--horizontal-gap) * -1);
     }
 
     &-vertical {
@@ -88,8 +90,11 @@
     flex-wrap: wrap;
   }
 
-  &--row-gap-off {
-    --gap: 0;
+  &--row-gap-xx-small {
+    --gap: var(--spacing-xx-small);
+  }
+  &--row-gap-x-small {
+    --gap: var(--spacing-x-small);
   }
   &--row-gap-small {
     --gap: var(--spacing-small);
@@ -100,6 +105,36 @@
   &--row-gap-large {
     --gap: var(--spacing-large);
   }
+  &--row-gap-x-large {
+    --gap: var(--spacing-x-large);
+  }
+  &--row-gap-xx-large {
+    --gap: var(--spacing-xx-large);
+  }
+
+  &--spacing {
+    &-xx-small {
+      --horizontal-gap: var(--spacing-xx-small);
+    }
+    &-x-small {
+      --horizontal-gap: var(--spacing-x-small);
+    }
+    &-small {
+      --horizontal-gap: var(--spacing-small);
+    }
+    &-medium {
+      --horizontal-gap: var(--spacing-medium);
+    }
+    &-large {
+      --horizontal-gap: var(--spacing-large);
+    }
+    &-x-large {
+      --horizontal-gap: var(--spacing-x-large);
+    }
+    &-xx-large {
+      --horizontal-gap: var(--spacing-xx-large);
+    }
+  }
 
   &__hr.dnb-hr {
     width: 100%;

package/cjs/components/help-button/HelpButtonInline.d.ts

@@ -15,11 +15,16 @@ export type HelpProps = {
 export type HelpButtonInlineProps = HelpButtonProps & {
     contentId?: string;
     help?: HelpProps;
+    /**
+     * If set to `true`, the content will get focus when the help content is opened.
+     */
+    focusWhenOpen?: boolean;
 };
 export type HelpButtonInlineSharedStateDataProps = {
     isOpen: boolean;
     isUserIntent?: boolean;
     buttonRef?: React.RefObject<HTMLButtonElement>;
+    focusWhenOpen?: boolean;
 };
 declare function HelpButtonInline(props: HelpButtonInlineProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HelpButtonInline {
@@ -33,6 +38,8 @@ export type HelpButtonInlineContentProps = SpacingProps & {
     help?: HelpProps;
     breakout?: boolean;
     outset?: boolean;
+    roundedCorner?: boolean;
+    focusWhenOpen?: boolean;
 };
 export declare function HelpButtonInlineContent(props: HelpButtonInlineContentProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace HelpButtonInlineContent {

package/cjs/components/help-button/HelpButtonInline.js

@@ -20,8 +20,8 @@ var _CardContext = _interopRequireDefault(require("../card/CardContext"));
 var _Dialog = _interopRequireDefault(require("../Dialog"));
 var _icons = require("../../icons");
 var _QuestionIcon, _CloseIcon;
-const _excluded = ["contentId", "size", "help", "className", "children"],
-  _excluded2 = ["contentId", "className", "children", "help", "breakout", "outset"];
+const _excluded = ["contentId", "size", "help", "focusWhenOpen", "className", "children"],
+  _excluded2 = ["contentId", "className", "children", "help", "breakout", "outset", "roundedCorner", "focusWhenOpen"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,6 +34,7 @@ function HelpButtonInline(props) {
       contentId,
       size,
       help,
+      focusWhenOpen,
       className,
       children
     } = props,
@@ -51,32 +52,55 @@ function HelpButtonInline(props) {
   } = data || {};
   const wasOpenRef = (0, _react.useRef)(undefined);
   const buttonRef = (0, _react.useRef)(null);
-  const onClickHandler = (0, _react.useCallback)(_ref => {
-    let {
-      event
-    } = _ref;
-    event.preventDefault();
+  const toggleOpen = (0, _react.useCallback)(() => {
     update({
       isOpen: !isOpen,
       isUserIntent: !isOpen,
-      buttonRef
+      buttonRef,
+      focusWhenOpen
     });
     wasOpenRef.current = !isOpen;
-  }, [isOpen, update]);
+  }, [focusWhenOpen, isOpen, update]);
+  const onClickHandler = (0, _react.useCallback)(_ref => {
+    let {
+      event
+    } = _ref;
+    event.preventDefault();
+    toggleOpen();
+  }, [toggleOpen]);
+  const onKeyDownHandler = (0, _react.useCallback)(event => {
+    if (event.currentTarget === event.target) {
+      switch (event.key.trim() || event.code) {
+        case 'Escape':
+          if (isOpen) {
+            event.preventDefault();
+            window.requestAnimationFrame(() => {
+              toggleOpen();
+            });
+          }
+          break;
+      }
+    }
+  }, [isOpen, toggleOpen]);
+  const title = (0, _componentHelper.convertJsxToString)(help === null || help === void 0 ? void 0 : help.title);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_HelpButtonInstance.default, _extends({
     bounding: true,
     size: size !== null && size !== void 0 ? size : 'small',
     icon: HelpButtonIcon,
-    title: !isOpen && !wasOpenRef.current ? (0, _componentHelper.convertJsxToString)(help === null || help === void 0 ? void 0 : help.title) : undefined
+    title: !isOpen && !wasOpenRef.current ? title : undefined
   }, rest, {
     id: controlId,
     className: (0, _classnames.default)('dnb-help-button__inline', className, isOpen && 'dnb-help-button__inline--open', isUserIntent && 'dnb-help-button__inline--user-intent', typeof wasOpenRef.current === 'boolean' && 'dnb-help-button__inline--was-open'),
     "aria-controls": `${controlId}-content`,
+    "aria-expanded": isOpen,
+    "aria-label": title,
     on_click: onClickHandler,
+    onKeyDown: onKeyDownHandler,
     innerRef: buttonRef
   })), !contentId && _react.default.createElement(HelpButtonInlineContent, {
     contentId: controlId,
-    help: help
+    help: help,
+    focusWhenOpen: focusWhenOpen
   }, children));
 }
 function HelpButtonInlineContent(props) {
@@ -87,7 +111,9 @@ function HelpButtonInlineContent(props) {
       children,
       help: helpProp,
       breakout = true,
-      outset = true
+      outset = true,
+      roundedCorner = true,
+      focusWhenOpen: focusWhenOpenProp
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
   const {
@@ -96,6 +122,7 @@ function HelpButtonInlineContent(props) {
   } = (0, _useSharedState.useSharedState)(contentId);
   const {
     isOpen,
+    focusWhenOpen = focusWhenOpenProp,
     isUserIntent,
     buttonRef
   } = data || {};
@@ -112,7 +139,7 @@ function HelpButtonInlineContent(props) {
   const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
   const outsetFromLayout = outset && outsetProp;
   (0, _react.useEffect)(() => {
-    if (isOpen && isUserIntent) {
+    if (isOpen && isUserIntent && focusWhenOpen) {
       window.requestAnimationFrame(() => {
         var _innerRef$current;
         (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus({
@@ -120,7 +147,7 @@ function HelpButtonInlineContent(props) {
         });
       });
     }
-  }, [isOpen, isUserIntent]);
+  }, [focusWhenOpen, isOpen, isUserIntent]);
   const onClose = (0, _react.useCallback)(() => {
     update({
       isOpen: false,
@@ -151,19 +178,25 @@ function HelpButtonInlineContent(props) {
       onClose: onClose
     }, content, children);
   }
+  const focusParams = focusWhenOpen ? {
+    'aria-label': (0, _componentHelper.convertJsxToString)(title),
+    className: 'dnb-no-focus',
+    tabIndex: -1,
+    onKeyDown
+  } : {
+    'aria-live': 'polite',
+    'aria-atomic': 'true'
+  };
   return _react.default.createElement(_HeightAnimation.default, {
     className: (0, _classnames.default)('dnb-help-button__content', className),
     open: (_ref2 = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref2 !== void 0 ? _ref2 : false
   }, _react.default.createElement(_Section.default, _extends({
-    id: `${contentId}-content`,
-    "aria-label": (0, _componentHelper.convertJsxToString)(title),
-    className: "dnb-no-focus",
-    tabIndex: -1,
+    id: `${contentId}-content`
+  }, focusParams, {
     innerRef: innerRef,
-    onKeyDown: onKeyDown,
     outset: outsetFromLayout,
     breakout: breakoutFromLayout,
-    roundedCorner: !breakoutFromLayout,
+    roundedCorner: roundedCorner !== null && roundedCorner !== void 0 ? roundedCorner : !breakoutFromLayout,
     innerSpace: breakoutFromLayout ? {
       top: 'small',
       bottom: 'medium'